/* Minification failed. Returning unminified contents.
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(125,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(191,24): run-time error CSS1039: Token not allowed after unary operator: '-checkbox-checked-backgroundcolour'
(195,28): run-time error CSS1039: Token not allowed after unary operator: '-checkbox-checked-backgroundcolour'
(250,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(284,23): run-time error CSS1030: Expected identifier, found '#selectedTotalsRow'
(284,46): run-time error CSS1031: Expected selector, found ')'
(284,46): run-time error CSS1025: Expected comma or open brace, found ')'
(372,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(379,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(380,22): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(397,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(398,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(408,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(425,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(450,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(454,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(465,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(470,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(499,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(500,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(505,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(506,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(510,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(514,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(534,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(535,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(546,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(547,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(554,22): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(561,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(562,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(563,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(568,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-hover-colour'
(569,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(575,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-30pc-trans'
(576,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(577,24): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-30pc-trans'
(582,22): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color'
(583,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(588,22): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color-lighter'
(593,22): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color-darker'
(597,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(598,17): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color'
(599,28): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color'
(603,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-hover-colour'
(608,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(609,24): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color-lighter'
(610,17): run-time error CSS1039: Token not allowed after unary operator: '-destructive-color-lighter'
(615,28): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(616,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(620,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(621,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(622,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(626,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(631,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter'
(632,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(633,24): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter'
(649,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(663,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(664,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(674,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(678,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(688,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(694,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(705,17): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-font-color'
(721,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(722,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(726,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(727,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(742,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(750,26): run-time error CSS1039: Token not allowed after unary operator: '-combo-dropdown-background'
(765,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(771,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(777,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(782,22): run-time error CSS1039: Token not allowed after unary operator: '-combo-dropdown-background'
(787,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(788,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(792,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(793,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(799,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(805,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(949,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(950,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(957,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(958,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(964,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(965,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(978,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(979,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(1002,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(1003,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1022,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(1026,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(1031,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1036,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1072,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(1088,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(1090,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1095,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(1096,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1103,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(1104,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1148,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(1152,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1153,17): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(1154,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1160,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(1171,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(1176,22): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(1233,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1234,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(1240,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(1246,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(1279,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1286,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1300,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1315,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(1329,22): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(1358,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(1372,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(1374,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1380,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1380,57): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1445,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1689,34): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(1700,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1709,57): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(1769,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1770,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(1841,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(1846,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(1850,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1858,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(1862,47): run-time error CSS1030: Expected identifier, found ','
(1862,63): run-time error CSS1031: Expected selector, found ')'
(1862,63): run-time error CSS1025: Expected comma or open brace, found ')'
(1897,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(1934,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1955,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1990,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(1998,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2032,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(2034,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(2039,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(2046,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(2054,22): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(2055,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2066,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(2067,35): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(2094,14): run-time error CSS1030: Expected identifier, found '.'
(2094,15): run-time error CSS1030: Expected identifier, found 'dayBookEntity'
(2094,38): run-time error CSS1031: Expected selector, found ')'
(2094,38): run-time error CSS1025: Expected comma or open brace, found ')'
(2103,9): run-time error CSS1030: Expected identifier, found '.'
(2103,67): run-time error CSS1031: Expected selector, found ')'
(2103,67): run-time error CSS1025: Expected comma or open brace, found ')'
(2108,9): run-time error CSS1030: Expected identifier, found '.'
(2108,63): run-time error CSS1031: Expected selector, found ')'
(2108,63): run-time error CSS1025: Expected comma or open brace, found ')'
(2113,9): run-time error CSS1030: Expected identifier, found '.'
(2113,71): run-time error CSS1031: Expected selector, found ')'
(2113,71): run-time error CSS1025: Expected comma or open brace, found ')'
(2118,9): run-time error CSS1030: Expected identifier, found '.'
(2118,56): run-time error CSS1031: Expected selector, found ')'
(2118,56): run-time error CSS1025: Expected comma or open brace, found ')'
(2126,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2167,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2199,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2211,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2215,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2219,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2231,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2263,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2267,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2271,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2275,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2279,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(2283,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2287,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2291,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2295,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2311,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2315,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2319,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2323,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2327,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2331,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2343,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2347,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2351,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2355,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2359,17): run-time error CSS1039: Token not allowed after unary operator: '-school-secondary-color'
(2363,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2367,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2371,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2375,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2379,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2383,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2387,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2391,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2395,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2399,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2403,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2407,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2411,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2415,17): run-time error CSS1039: Token not allowed after unary operator: '-school-secondary-color'
(2419,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2423,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2427,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2431,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2435,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2439,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2475,20): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(2487,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2491,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2515,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2535,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2539,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2543,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2547,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2551,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2555,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2559,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2567,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2571,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2575,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2591,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2599,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2603,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2607,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2612,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2616,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2620,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2624,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2628,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2632,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2636,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2640,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2644,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2648,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2656,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2660,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2664,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2668,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2673,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2705,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2709,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2713,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2731,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2734,21): run-time error CSS1030: Expected identifier, found ','
(2734,39): run-time error CSS1031: Expected selector, found ')'
(2734,39): run-time error CSS1025: Expected comma or open brace, found ')'
(2749,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2753,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2757,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2767,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(2774,35): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(2780,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2781,35): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2785,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(2812,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2817,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-30pc-trans'
(2823,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(2913,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(2951,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(2955,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(2956,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(2960,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(2964,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(2975,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-darker'
(2976,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(2989,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(3087,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(3093,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(3107,40): run-time error CSS1046: Expect comma, found '0'
(3107,44): run-time error CSS1046: Expect comma, found '/'
(3118,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(3176,22): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(3178,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(3197,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(3198,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(3203,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(3276,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(3302,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(3321,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(3325,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(3376,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(3385,22): run-time error CSS1039: Token not allowed after unary operator: '-select2-a'
(3536,1): run-time error CSS1019: Unexpected token, found ','
(3552,46): run-time error CSS1030: Expected identifier, found ':'
(3552,47): run-time error CSS1030: Expected identifier, found 'checked'
(3552,54): run-time error CSS1031: Expected selector, found ')'
(3552,54): run-time error CSS1025: Expected comma or open brace, found ')'
(3594,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(3598,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(3610,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(3619,22): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(3642,18): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(3648,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(3670,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(3711,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(3798,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(3948,51): run-time error CSS1030: Expected identifier, found '.'
(3948,57): run-time error CSS1031: Expected selector, found ')'
(3948,57): run-time error CSS1025: Expected comma or open brace, found ')'
(3998,18): run-time error CSS1030: Expected identifier, found '.'
(3998,32): run-time error CSS1031: Expected selector, found ')'
(3998,32): run-time error CSS1025: Expected comma or open brace, found ')'
(4010,10): run-time error CSS1030: Expected identifier, found '.'
(4010,17): run-time error CSS1031: Expected selector, found ')'
(4010,17): run-time error CSS1025: Expected comma or open brace, found ')'
(4021,10): run-time error CSS1030: Expected identifier, found '.'
(4021,17): run-time error CSS1031: Expected selector, found ')'
(4021,17): run-time error CSS1025: Expected comma or open brace, found ')'
(4041,51): run-time error CSS1030: Expected identifier, found '.'
(4041,58): run-time error CSS1031: Expected selector, found ')'
(4041,58): run-time error CSS1025: Expected comma or open brace, found ')'
(4050,51): run-time error CSS1030: Expected identifier, found '.'
(4050,58): run-time error CSS1031: Expected selector, found ')'
(4050,58): run-time error CSS1025: Expected comma or open brace, found ')'
(4054,31): run-time error CSS1030: Expected identifier, found '.'
(4054,38): run-time error CSS1031: Expected selector, found ')'
(4054,38): run-time error CSS1025: Expected comma or open brace, found ')'
(4059,36): run-time error CSS1030: Expected identifier, found '.'
(4059,37): run-time error CSS1030: Expected identifier, found 'agenda'
(4059,43): run-time error CSS1031: Expected selector, found ')'
(4059,43): run-time error CSS1025: Expected comma or open brace, found ')'
(4063,36): run-time error CSS1030: Expected identifier, found '.'
(4063,37): run-time error CSS1030: Expected identifier, found 'agenda'
(4063,43): run-time error CSS1031: Expected selector, found ')'
(4063,43): run-time error CSS1025: Expected comma or open brace, found ')'
(4092,51): run-time error CSS1030: Expected identifier, found '.'
(4092,57): run-time error CSS1031: Expected selector, found ')'
(4092,57): run-time error CSS1025: Expected comma or open brace, found ')'
(4096,51): run-time error CSS1030: Expected identifier, found '.'
(4096,57): run-time error CSS1031: Expected selector, found ')'
(4096,57): run-time error CSS1025: Expected comma or open brace, found ')'
(4100,51): run-time error CSS1030: Expected identifier, found '.'
(4100,57): run-time error CSS1031: Expected selector, found ')'
(4100,57): run-time error CSS1025: Expected comma or open brace, found ')'
(4241,24): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(4264,31): run-time error CSS1030: Expected identifier, found '.'
(4264,38): run-time error CSS1031: Expected selector, found ')'
(4264,38): run-time error CSS1025: Expected comma or open brace, found ')'
(4281,32): run-time error CSS1030: Expected identifier, found '.'
(4281,39): run-time error CSS1031: Expected selector, found ')'
(4281,39): run-time error CSS1025: Expected comma or open brace, found ')'
(4286,32): run-time error CSS1030: Expected identifier, found '.'
(4286,38): run-time error CSS1031: Expected selector, found ')'
(4286,38): run-time error CSS1025: Expected comma or open brace, found ')'
(4290,32): run-time error CSS1030: Expected identifier, found '.'
(4290,39): run-time error CSS1031: Expected selector, found ')'
(4290,39): run-time error CSS1025: Expected comma or open brace, found ')'
(4331,46): run-time error CSS1030: Expected identifier, found ':'
(4331,54): run-time error CSS1031: Expected selector, found ')'
(4331,54): run-time error CSS1025: Expected comma or open brace, found ')'
(4338,46): run-time error CSS1030: Expected identifier, found ':'
(4338,47): run-time error CSS1031: Expected selector, found 'not('
(4338,47): run-time error CSS1025: Expected comma or open brace, found 'not('
(4346,33): run-time error CSS1030: Expected identifier, found '>'
(4346,109): run-time error CSS1031: Expected selector, found ')'
(4346,109): run-time error CSS1025: Expected comma or open brace, found ')'
(4350,33): run-time error CSS1030: Expected identifier, found '>'
(4350,103): run-time error CSS1031: Expected selector, found ')'
(4350,103): run-time error CSS1025: Expected comma or open brace, found ')'
(4366,38): run-time error CSS1030: Expected identifier, found '.'
(4366,71): run-time error CSS1031: Expected selector, found ')'
(4366,71): run-time error CSS1025: Expected comma or open brace, found ')'
(4381,11): run-time error CSS1030: Expected identifier, found '.'
(4381,18): run-time error CSS1031: Expected selector, found ')'
(4381,18): run-time error CSS1025: Expected comma or open brace, found ')'
(4403,22): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(4440,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4467,22): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(4490,22): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(4494,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(4506,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4524,25): run-time error CSS1030: Expected identifier, found '.'
(4524,38): run-time error CSS1031: Expected selector, found ')'
(4524,38): run-time error CSS1025: Expected comma or open brace, found ')'
(4530,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(4531,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4537,22): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(4547,22): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(4556,34): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4557,37): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4565,35): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4566,38): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4583,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4621,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(4663,33): run-time error CSS1030: Expected identifier, found '['
(4663,38): run-time error CSS1031: Expected selector, found '*='
(4663,38): run-time error CSS1025: Expected comma or open brace, found '*='
(4667,33): run-time error CSS1030: Expected identifier, found '['
(4667,38): run-time error CSS1031: Expected selector, found '*='
(4667,38): run-time error CSS1025: Expected comma or open brace, found '*='
(4671,33): run-time error CSS1030: Expected identifier, found '['
(4671,38): run-time error CSS1031: Expected selector, found '*='
(4671,38): run-time error CSS1025: Expected comma or open brace, found '*='
(4681,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(4686,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(4696,33): run-time error CSS1030: Expected identifier, found '['
(4696,38): run-time error CSS1031: Expected selector, found '*='
(4696,38): run-time error CSS1025: Expected comma or open brace, found '*='
(4700,33): run-time error CSS1030: Expected identifier, found '['
(4700,38): run-time error CSS1031: Expected selector, found '*='
(4700,38): run-time error CSS1025: Expected comma or open brace, found '*='
(4704,10): run-time error CSS1030: Expected identifier, found '#session-wrapper'
(4704,35): run-time error CSS1031: Expected selector, found ')'
(4704,35): run-time error CSS1025: Expected comma or open brace, found ')'
(4721,20): run-time error CSS1030: Expected identifier, found '.'
(4721,80): run-time error CSS1031: Expected selector, found ')'
(4721,80): run-time error CSS1025: Expected comma or open brace, found ')'
(4725,10): run-time error CSS1030: Expected identifier, found '.'
(4725,26): run-time error CSS1031: Expected selector, found ')'
(4725,26): run-time error CSS1025: Expected comma or open brace, found ')'
(4742,22): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(4745,15): run-time error CSS1030: Expected identifier, found '.'
(4745,16): run-time error CSS1030: Expected identifier, found 'attendanceTable'
(4745,31): run-time error CSS1031: Expected selector, found ')'
(4745,31): run-time error CSS1025: Expected comma or open brace, found ')'
(4750,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(4751,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(4771,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(4821,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(4822,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(4857,49): run-time error CSS1030: Expected identifier, found ':'
(4857,50): run-time error CSS1030: Expected identifier, found 'checked'
(4857,57): run-time error CSS1031: Expected selector, found ')'
(4857,57): run-time error CSS1025: Expected comma or open brace, found ')'
(4877,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(4933,33): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(4937,33): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(4939,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(4987,32): run-time error CSS1030: Expected identifier, found '.'
(4987,63): run-time error CSS1031: Expected selector, found ')'
(4987,63): run-time error CSS1025: Expected comma or open brace, found ')'
(4992,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(4993,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(5041,31): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(5076,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(5078,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(5370,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5395,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5422,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5480,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5550,24): run-time error CSS1030: Expected identifier, found '.'
(5550,84): run-time error CSS1031: Expected selector, found ')'
(5550,84): run-time error CSS1025: Expected comma or open brace, found ')'
(5685,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5835,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5865,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5928,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(5984,37): run-time error CSS1030: Expected identifier, found '.'
(5984,97): run-time error CSS1031: Expected selector, found ')'
(5984,97): run-time error CSS1025: Expected comma or open brace, found ')'
(5988,36): run-time error CSS1030: Expected identifier, found '.'
(5988,96): run-time error CSS1031: Expected selector, found ')'
(5988,96): run-time error CSS1025: Expected comma or open brace, found ')'
(6025,37): run-time error CSS1030: Expected identifier, found '.'
(6025,97): run-time error CSS1031: Expected selector, found ')'
(6025,97): run-time error CSS1025: Expected comma or open brace, found ')'
(6029,36): run-time error CSS1030: Expected identifier, found '.'
(6029,96): run-time error CSS1031: Expected selector, found ')'
(6029,96): run-time error CSS1025: Expected comma or open brace, found ')'
(6060,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6061,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(6062,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6063,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(6069,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6070,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(6071,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6075,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6081,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6082,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(6083,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6084,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(6137,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6138,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(6139,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6140,23): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(6158,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6159,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(6160,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6250,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6280,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6285,17): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(6295,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6307,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(6315,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6332,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-15pc-trans'
(6337,33): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(6342,34): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(6350,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(6358,24): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(6359,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(6360,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(6368,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6374,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6415,10): run-time error CSS1030: Expected identifier, found '.'
(6415,26): run-time error CSS1031: Expected selector, found ')'
(6415,26): run-time error CSS1025: Expected comma or open brace, found ')'
(6419,10): run-time error CSS1030: Expected identifier, found '.'
(6419,27): run-time error CSS1031: Expected selector, found ')'
(6419,27): run-time error CSS1025: Expected comma or open brace, found ')'
(6464,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6465,24): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6473,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(6477,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6482,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(6508,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6510,24): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6524,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6528,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6534,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-15pc-trans'
(6535,31): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-15pc-trans'
(6539,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(6544,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-15pc-trans'
(6556,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6557,24): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(6569,35): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(6580,35): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(6630,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6637,28): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(6638,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6651,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6657,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(6665,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(6686,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6691,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(6693,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(6697,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6705,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6710,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6714,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6721,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6723,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6737,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6745,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(6751,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6796,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6801,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(6807,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(6821,28): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(6849,22): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(6850,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6855,22): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(6856,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6862,22): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(6863,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6888,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6895,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(6904,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(6946,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(6950,24): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(6951,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6956,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(6957,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(6983,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(6987,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(7046,28): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(7054,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7056,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(7076,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(7130,39): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(7133,21): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7176,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(7178,28): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(7184,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(7190,17): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(7204,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(7212,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7219,17): run-time error CSS1039: Token not allowed after unary operator: '-school-secondary-color'
(7232,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(7256,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7257,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7278,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(7292,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(7293,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7328,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(7363,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(7365,17): run-time error CSS1039: Token not allowed after unary operator: '-button-primary-font-color'
(7369,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7373,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(7414,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(7446,45): run-time error CSS1030: Expected identifier, found '.'
(7446,54): run-time error CSS1031: Expected selector, found ')'
(7446,54): run-time error CSS1025: Expected comma or open brace, found ')'
(7470,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(7474,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7479,28): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(7492,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(7497,32): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(7498,21): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7509,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(7524,18): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(7539,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7540,28): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(7559,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(7566,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(7732,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7733,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7744,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7746,24): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7755,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(7768,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(7772,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(7776,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(7780,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7784,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7788,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7792,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7814,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7819,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(7849,28): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(7853,34): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7857,35): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7861,33): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(7877,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(7894,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(7909,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(7910,34): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(7943,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7975,28): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(7976,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(7983,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(7994,28): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(8028,30): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(8041,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8052,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(8057,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8058,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(8060,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8062,34): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(8084,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(8139,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(8143,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(8148,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8153,28): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(8202,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8214,22): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(8215,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8216,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8221,22): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(8222,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8223,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8228,22): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(8229,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(8230,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(8241,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8242,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(8250,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8251,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(8252,35): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(8263,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8264,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8265,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8266,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8271,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8272,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8277,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8278,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8279,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8280,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8286,17): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(8287,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(8288,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8289,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8306,25): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(8330,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-30pc-trans'
(8342,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(8346,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(8358,22): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8383,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8387,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8391,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-school-color'
(8402,22): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(8403,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8404,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(8409,22): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(8410,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8411,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(8416,22): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(8417,17): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(8418,28): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(8432,28): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(8517,22): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(8569,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8600,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8601,28): run-time error CSS1039: Token not allowed after unary operator: '-navigation-active-background'
(8605,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8606,28): run-time error CSS1039: Token not allowed after unary operator: '-navigation-active-background'
(8633,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8656,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8661,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8683,28): run-time error CSS1039: Token not allowed after unary operator: '-navigation-active-background'
(8688,28): run-time error CSS1039: Token not allowed after unary operator: '-navigation-active-background'
(8693,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8722,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8747,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8760,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(8777,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(8783,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(8875,34): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(8876,22): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(8905,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(8956,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(8999,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(9019,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(9258,17): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(9399,17): run-time error CSS1039: Token not allowed after unary operator: '-school-secondary-color'
(9413,46): run-time error CSS1030: Expected identifier, found '.'
(9413,53): run-time error CSS1031: Expected selector, found ')'
(9413,53): run-time error CSS1025: Expected comma or open brace, found ')'
(9465,13): run-time error CSS1030: Expected identifier, found '.'
(9465,26): run-time error CSS1031: Expected selector, found ')'
(9465,26): run-time error CSS1025: Expected comma or open brace, found ')'
(9478,50): run-time error CSS1030: Expected identifier, found '.'
(9478,57): run-time error CSS1031: Expected selector, found ')'
(9478,57): run-time error CSS1025: Expected comma or open brace, found ')'
(9534,50): run-time error CSS1030: Expected identifier, found '.'
(9534,57): run-time error CSS1031: Expected selector, found ')'
(9534,57): run-time error CSS1025: Expected comma or open brace, found ')'
(9548,50): run-time error CSS1030: Expected identifier, found '.'
(9548,57): run-time error CSS1031: Expected selector, found ')'
(9548,57): run-time error CSS1025: Expected comma or open brace, found ')'
(9613,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(9625,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(9638,37): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(9643,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(9653,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(9658,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(9734,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(9775,25): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(9890,28): run-time error CSS1030: Expected identifier, found '.'
(9890,88): run-time error CSS1031: Expected selector, found ')'
(9890,88): run-time error CSS1025: Expected comma or open brace, found ')'
(9903,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(9958,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(9960,26): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(9961,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(9962,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(10001,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(10003,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10012,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(10013,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10014,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(10018,21): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(10054,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10057,58): run-time error CSS1030: Expected identifier, found '.'
(10057,70): run-time error CSS1031: Expected selector, found ')'
(10057,70): run-time error CSS1025: Expected comma or open brace, found ')'
(10069,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10075,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(10085,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10090,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10098,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10240,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(10260,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10296,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(10302,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(10353,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(10475,32): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(10552,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-smaller'
(10651,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-15pc-trans'
(10655,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(10703,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-smaller'
(11032,32): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(11033,28): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(11036,22): run-time error CSS1030: Expected identifier, found '.'
(11036,23): run-time error CSS1030: Expected identifier, found 'ttCard'
(11036,35): run-time error CSS1031: Expected selector, found ')'
(11036,35): run-time error CSS1025: Expected comma or open brace, found ')'
(11046,26): run-time error CSS1030: Expected identifier, found '.'
(11046,27): run-time error CSS1030: Expected identifier, found 'ttCard'
(11046,39): run-time error CSS1031: Expected selector, found ')'
(11046,39): run-time error CSS1025: Expected comma or open brace, found ')'
(11050,22): run-time error CSS1030: Expected identifier, found '.'
(11050,23): run-time error CSS1030: Expected identifier, found 'ttCard'
(11050,35): run-time error CSS1031: Expected selector, found ')'
(11050,35): run-time error CSS1025: Expected comma or open brace, found ')'
(11054,17): run-time error CSS1030: Expected identifier, found '.'
(11054,31): run-time error CSS1031: Expected selector, found ')'
(11054,31): run-time error CSS1025: Expected comma or open brace, found ')'
(11103,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11153,38): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11154,39): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11164,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11167,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11170,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(11175,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-font-color'
(11176,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11177,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11184,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11187,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(11193,36): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(11202,21): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(11265,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11269,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(11275,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(11276,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11277,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11306,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(11374,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11375,30): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(11376,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11377,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11381,34): run-time error CSS1039: Token not allowed after unary operator: '-secondary-hover-colour'
(11382,40): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11387,36): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(11389,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11399,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(11405,36): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(11497,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11510,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11535,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(11564,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(11571,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(11572,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11592,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(11597,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(11607,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(11630,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11631,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(11651,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(11658,26): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(11659,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11668,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(11676,26): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(11680,30): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(11691,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(11692,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11708,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(11720,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11726,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(11730,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11738,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(11744,25): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(11751,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(11759,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(11763,32): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(11768,26): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(11769,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11779,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11797,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(11819,26): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(11895,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(11898,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(11950,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(11951,25): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12017,26): run-time error CSS1039: Token not allowed after unary operator: '-global-light-grey'
(12031,32): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12032,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12042,30): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12047,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(12057,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(12062,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(12079,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(12090,32): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(12095,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12096,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(12124,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(12129,30): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(12148,36): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(12159,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(12161,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12188,32): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(12200,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12222,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12223,29): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12227,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12228,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12229,29): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12317,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12352,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12362,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12370,21): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(12385,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12387,28): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12404,40): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(12422,30): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12478,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12518,30): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(12525,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(12537,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(12541,30): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(12545,30): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(12549,30): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12658,26): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(12707,26): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12717,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(12774,26): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(12783,26): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(12784,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(12858,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12859,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12871,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12872,21): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(12878,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(12879,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12891,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12892,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(12900,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(12901,32): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(12902,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-smaller'
(12915,38): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12924,38): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(12928,38): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter2'
(12932,38): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(12953,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(12957,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(12961,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(12965,38): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(12969,37): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(12976,32): run-time error CSS1039: Token not allowed after unary operator: '-global-panel-grey'
(12985,22): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(12991,20): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(12996,20): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(13001,32): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(13002,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(13003,32): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(13008,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-smaller'
(13013,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-smaller'
(13019,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(13032,29): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13060,32): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(13061,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(13096,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(13164,32): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(13170,32): run-time error CSS1039: Token not allowed after unary operator: '-checkbox-checked-backgroundcolour'
(13178,32): run-time error CSS1039: Token not allowed after unary operator: '-select2-a'
(13179,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(13189,32): run-time error CSS1039: Token not allowed after unary operator: '-global-border-grey'
(13190,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(13221,26): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(13225,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(13229,32): run-time error CSS1039: Token not allowed after unary operator: '-global-mid-grey'
(13230,28): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(13250,21): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(13254,32): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(13272,32): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(13322,40): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(13349,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13350,36): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(13351,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13358,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13359,36): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(13360,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13367,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13368,36): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(13369,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13374,36): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(13375,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13376,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13380,36): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13384,36): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(13385,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13386,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13390,36): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(13391,36): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13395,40): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(13399,36): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(13400,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13401,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13405,36): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13439,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(13443,27): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(13487,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13491,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13495,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13507,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(13539,22): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13543,22): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13548,22): run-time error CSS1039: Token not allowed after unary operator: '-status-incomplete-background'
(13556,27): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(13562,20): run-time error CSS1039: Token not allowed after unary operator: '-status-value-red'
(13578,20): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13582,20): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(13595,25): run-time error CSS1039: Token not allowed after unary operator: '-global-dark'
(13634,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(13648,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(13656,32): run-time error CSS1039: Token not allowed after unary operator: '-global-greyed-out'
(13689,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(13690,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(13784,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(13873,22): run-time error CSS1030: Expected identifier, found '.'
(13873,34): run-time error CSS1031: Expected selector, found ')'
(13873,34): run-time error CSS1025: Expected comma or open brace, found ')'
(13894,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13895,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13896,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13897,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13898,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13915,23): run-time error CSS1030: Expected identifier, found '.'
(13915,56): run-time error CSS1031: Expected selector, found ')'
(13915,56): run-time error CSS1025: Expected comma or open brace, found ')'
(13920,30): run-time error CSS1039: Token not allowed after unary operator: '-global-secondary-color'
(13984,28): run-time error CSS1030: Expected identifier, found '.'
(13984,88): run-time error CSS1031: Expected selector, found ')'
(13984,88): run-time error CSS1025: Expected comma or open brace, found ')'
(14051,24): run-time error CSS1030: Expected identifier, found '.'
(14051,25): run-time error CSS1030: Expected identifier, found 'itemToggle'
(14051,35): run-time error CSS1031: Expected selector, found ')'
(14051,35): run-time error CSS1025: Expected comma or open brace, found ')'
(14089,25): run-time error CSS1039: Token not allowed after unary operator: '-daybook_field-size'
(14159,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(14160,36): run-time error CSS1039: Token not allowed after unary operator: '-combo-border-color'
(14165,60): run-time error CSS1030: Expected identifier, found '>'
(14165,77): run-time error CSS1031: Expected selector, found ')'
(14165,77): run-time error CSS1025: Expected comma or open brace, found ')'
(14185,25): run-time error CSS1039: Token not allowed after unary operator: '-daybook_field-size'
(14225,29): run-time error CSS1039: Token not allowed after unary operator: '-daybook_field-size'
(14281,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(14296,26): run-time error CSS1030: Expected identifier, found '>'
(14296,42): run-time error CSS1031: Expected selector, found ')'
(14296,42): run-time error CSS1025: Expected comma or open brace, found ')'
(14301,34): run-time error CSS1030: Expected identifier, found '.'
(14301,51): run-time error CSS1031: Expected selector, found ')'
(14301,51): run-time error CSS1025: Expected comma or open brace, found ')'
(14340,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14346,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14351,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14356,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14378,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14390,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14422,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(14470,44): run-time error CSS1030: Expected identifier, found '>'
(14470,65): run-time error CSS1031: Expected selector, found ')'
(14470,65): run-time error CSS1025: Expected comma or open brace, found ')'
(14534,36): run-time error CSS1030: Expected identifier, found '.'
(14534,37): run-time error CSS1030: Expected identifier, found 'notifiedContactContent'
(14534,82): run-time error CSS1031: Expected selector, found ')'
(14534,82): run-time error CSS1025: Expected comma or open brace, found ')'
(14548,76): run-time error CSS1030: Expected identifier, found '.'
(14548,77): run-time error CSS1030: Expected identifier, found 'actionsDropdownWrapper'
(14548,99): run-time error CSS1031: Expected selector, found ')'
(14548,99): run-time error CSS1025: Expected comma or open brace, found ')'
(14552,80): run-time error CSS1030: Expected identifier, found '.'
(14552,81): run-time error CSS1030: Expected identifier, found 'actionsDropdownWrapper'
(14552,103): run-time error CSS1031: Expected selector, found ')'
(14552,103): run-time error CSS1025: Expected comma or open brace, found ')'
(14602,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(14765,40): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(14806,51): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(14809,26): run-time error CSS1030: Expected identifier, found '#ctl00_PageContent_pupilInfo_pupilNavigationChoices_modal'
(14809,83): run-time error CSS1031: Expected selector, found ')'
(14809,83): run-time error CSS1025: Expected comma or open brace, found ')'
(14903,25): run-time error CSS1039: Token not allowed after unary operator: '-global-grey'
(15118,40): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(15152,51): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(15155,26): run-time error CSS1030: Expected identifier, found '#ctl00_PageContent_pupilInfo_pupilNavigationChoices_modal'
(15155,83): run-time error CSS1031: Expected selector, found ')'
(15155,83): run-time error CSS1025: Expected comma or open brace, found ')'
(15314,70): run-time error CSS1030: Expected identifier, found '*'
(15314,72): run-time error CSS1031: Expected selector, found ')'
(15314,72): run-time error CSS1025: Expected comma or open brace, found ')'
(15337,30): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(15380,61): run-time error CSS1030: Expected identifier, found '.'
(15380,73): run-time error CSS1031: Expected selector, found ')'
(15380,73): run-time error CSS1025: Expected comma or open brace, found ')'
(15384,65): run-time error CSS1030: Expected identifier, found '.'
(15384,77): run-time error CSS1031: Expected selector, found ')'
(15384,77): run-time error CSS1025: Expected comma or open brace, found ')'
(15413,61): run-time error CSS1030: Expected identifier, found '.'
(15413,73): run-time error CSS1031: Expected selector, found ')'
(15413,73): run-time error CSS1025: Expected comma or open brace, found ')'
(15417,65): run-time error CSS1030: Expected identifier, found '.'
(15417,77): run-time error CSS1031: Expected selector, found ')'
(15417,77): run-time error CSS1025: Expected comma or open brace, found ')'
(15454,26): run-time error CSS1039: Token not allowed after unary operator: '-button-height-mobile'
(15460,35): run-time error CSS1039: Token not allowed after unary operator: '-button-height-mobile'
(15478,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(15491,30): run-time error CSS1039: Token not allowed after unary operator: '-global-grey-filter'
(15557,31): run-time error CSS1039: Token not allowed after unary operator: '-global-font-family'
(15558,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(15559,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(15747,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(15755,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(15768,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(15779,29): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(15844,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(15860,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(15874,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(15912,46): run-time error CSS1030: Expected identifier, found '.'
(15912,86): run-time error CSS1031: Expected selector, found ')'
(15912,86): run-time error CSS1025: Expected comma or open brace, found ')'
(15920,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(16016,36): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(16041,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter4'
(16060,29): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(16118,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(16119,36): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(16124,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(16126,40): run-time error CSS1039: Token not allowed after unary operator: '-status-value-orange'
(16138,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size'
(16143,34): run-time error CSS1039: Token not allowed after unary operator: '-status-inprogress-background'
(16245,15): run-time error CSS1039: Token not allowed after unary operator: '-webkit-flex'
(16359,26): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(16360,29): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(16368,36): run-time error CSS1039: Token not allowed after unary operator: '-global-background'
(16371,25): run-time error CSS1030: Expected identifier, found ','
(16371,43): run-time error CSS1031: Expected selector, found ')'
(16371,43): run-time error CSS1025: Expected comma or open brace, found ')'
(16458,22): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(16459,17): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(16468,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(16470,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(16496,14): run-time error CSS1030: Expected identifier, found '.'
(16496,31): run-time error CSS1031: Expected selector, found ')'
(16496,31): run-time error CSS1025: Expected comma or open brace, found ')'
(16649,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16657,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16685,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(16748,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(16835,51): run-time error CSS1030: Expected identifier, found '.'
(16835,64): run-time error CSS1031: Expected selector, found ')'
(16835,64): run-time error CSS1025: Expected comma or open brace, found ')'
(16923,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16953,47): run-time error CSS1039: Token not allowed after unary operator: '-filter-width'
(16977,18): run-time error CSS1030: Expected identifier, found '.'
(16977,37): run-time error CSS1031: Expected selector, found ')'
(16977,37): run-time error CSS1025: Expected comma or open brace, found ')'
(17119,27): run-time error CSS1030: Expected identifier, found '.'
(17119,50): run-time error CSS1031: Expected selector, found ')'
(17119,50): run-time error CSS1025: Expected comma or open brace, found ')'
(17259,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger2'
(17267,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(17268,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17277,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17305,60): run-time error CSS1030: Expected identifier, found ','
(17305,84): run-time error CSS1031: Expected selector, found ')'
(17305,84): run-time error CSS1025: Expected comma or open brace, found ')'
(17319,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17341,36): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17342,36): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(17343,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17348,36): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(17349,33): run-time error CSS1039: Token not allowed after unary operator: '-global-border-radius'
(17350,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17369,43): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17370,41): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17370,79): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17370,117): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17370,156): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17384,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17391,21): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(17407,32): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(17422,32): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(17428,25): run-time error CSS1039: Token not allowed after unary operator: '-global-font-colour-grey'
(17443,21): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17459,32): run-time error CSS1039: Token not allowed after unary operator: '-grid-verylightgrey-background'
(17511,36): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(17528,25): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17538,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-larger1'
(17597,32): run-time error CSS1039: Token not allowed after unary operator: '-global-extralight-grey'
(17637,32): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color-lighter3'
(17654,32): run-time error CSS1039: Token not allowed after unary operator: '-status-complete-background'
(17655,21): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17656,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17659,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17667,32): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17670,25): run-time error CSS1039: Token not allowed after unary operator: '-status-value-green'
(17735,17): run-time error CSS1039: Token not allowed after unary operator: '-school-primary-color'
(17740,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(17741,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(17845,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17846,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17847,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17848,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17849,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17850,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17851,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17852,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17853,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17854,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17855,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17856,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17857,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */

/* source-sans-pro-600 - latin */

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-sans-pro-v21-latin-600.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
    url('../fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg');
    /* Legacy iOS */
}

/* source-sans-pro-700 - latin */

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/source-sans-pro-v21-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg');
    /* Legacy iOS */
}

/*#region variables */

:root {
    /* School changeable colors */
    /* these have been moved to SkinCss.cs as they will ultimately be dynamically created based on school's colour preferences
        I'm keeping them here to though as it may not work with the StyleGuide.aspx page if the user hasn't logged in?
    */
    /*
    --school-primary-color-darker: hsla(230, 60%, 30%, 1);
    --school-primary-color-30pc-trans: hsla(230, 60%, 51%, 0.3);
    --school-primary-color-lighter: hsla(230, 60%, 70%, 1);
    --school-primary-color-lighter2: hsla(230, 60%, 90%, 1);

    */
    /* Global variables */
    --global-background: #e6e6e6;
    --global-greyed-out: hsla(230, 1%, 63%, 0.3);
    --global-font-family: 'Source Sans Pro';
    --global-border-radius: 5px;
    --global-secondary-color: white;
    --global-dark: black;
    --global-grey: grey;
    --global-grey-filter: #e8e8e8;
    --global-mid-grey: #e3e3e3;
    --global-light-grey: #E5E7EB;
    --global-extralight-grey: #F6F6F6;
    --global-font-colour-grey: #444444;
    --checkbox-checked-backgroundcolour: #109C39;
    --combo-dropdown-background: white;
    --combo-border-color: rgba(191, 187, 187, 1);
    /* Primary button */
    --button-primary-font-color: white;
    /*--school-secondary-font-color: white;
    --school-tertiary-font-color: white;
       */
    /* Secondary button */
    --secondary-hover-colour: rgba(0, 0, 0, 0.05);
    /* Destructive */
    --destructive-color: hsla(0, 88%, 66%, 1);
    /* based off #F55E5E */
    --destructive-color-darker: hsla(0, 88%, 44%, 1);
    --destructive-color-lighter: hsla(0, 88%, 88%, 1);
    /* select2 control (SecuritySetUp et al) */
    --select2-c: var(--combo-dropdown-background);
    --select2-a: var(--school-primary-color-15pc-trans);
    --select2-b: var(--combo-border-color);
    --primary-font-family: 'Source Sans Pro';
    --navigation-active-background: #f7f5f5;
    --navigation-active-fontColour: #213EC8;
    /*marksheet, Attendance, Report Comments */
    --status-value-green: hsla(119, 94%, 31%, 1);
    --status-value-red: hsla(0, 88%, 66%, 1);
    --status-value-orange: hsla(26, 98%, 56%, 1);
    --status-incomplete-background: #fbd7da;
    --status-complete-background: #DDFFDD;
    --status-inprogress-background: #fae7cd;
    --status-green-filter: invert(35%) sepia(100%) saturate(2984%) hue-rotate(125deg) brightness(97%) contrast(87%);
    --grid-verylightgrey-background: #f7f5f5;
    --global-border-grey: #cccccc;
    --global-panel-grey: #c6c6c6;
    --font-size-smaller: 11px;
    --font-size: 13px;
    --font-size-larger1: 14px;
    --font-size-larger2: 16px;
    --button-height-mobile: 40px;
    --button-height-desktop: 20px;
}

/*#endregion variables*/

#contentHolder {
    margin: 0px 15px 0px 15px;
}

.hand {
    cursor: pointer;
}

.colourGrey {
    color: var(--global-font-colour-grey);
}

p,
a,
td,
div {
    color: var(--global-font-colour-grey);
}

.noMargin {
    margin: 0px !important;
}

.noWidthSet {
    width: unset !important;
    min-width: unset !important;
    max-width: unset !important;
}

.width94pc {
    width: 94%;
}

.width120px {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.width150px {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}

.width60px {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.width55px {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
}

.width360 {
    width: 360px !important;
}

.width300 {
    width: 300px !important;
}

.widthFitContent {
    width: fit-content;
}

.minWidthFitContent {
    min-width: fit-content;
}

td.subItemHolder {
    padding: 0 0px 0 30px !important;
}

.commentSubItemHolder table {
    padding: 0;
}

input[type="checkbox"] {
    accent-color: var(--checkbox-checked-backgroundcolour);
}

input[type="checkbox"]:checked:before {
    background-color: var(--checkbox-checked-backgroundcolour);
}

/*#region DOM Loading Progress */

.progress-container {
    overflow: hidden;
    /* Hide overflow to prevent horizontal scrollbar */
    position: fixed;
    /* Changed from 'relative' to 'fixed' */
    top: 0;
    /* Position at the top of the viewport */
    left: 0;
    /* Align to the left of the viewport */
    width: 100%;
    /* Span the full width of the viewport */
    height: 5px;
    /* Adjust the height of your top border */
    background-color: green;
    z-index: 1000;
    /* Ensure it sits above other content */
}

.progress-container .top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Full width of the container */
    height: 100%;
    /* Same height as the container */
    animation: scroll-horizontal 5s linear infinite;
    /* Infinite horizontal scroll animation */
}

.progress-container .top-border-color {
    background: linear-gradient(to right, green, lightgreen, green);
    width: 20%;
    height: 100%;
    margin: auto;
}

@keyframes scroll-horizontal {
    0% {
        left: -70%;
    }
    100% {
        left: 70%;
    }
}

.stickyBottom {
    position: sticky;
    bottom: 0px;
    background: var(--global-secondary-color);
}

.archiveDateFilter {
    position: sticky !important;
    top: 0px;
    background: white;
}

.archiveHeaderRow {
    position: sticky;
    top: 35px;
    background: white;
}

.myAccountTotalsFooter,
.myAccountSelectedTotalFooter,
.myAccountPayallFooter {
    position: sticky;
    background: white;
}

.myAccountPayallFooter {
    bottom: 0px;
}

.myAccountSelectedTotalFooter {
    bottom: 40px;
}

.myAccountTotalsFooter {
    bottom: 80px;
}

table#myAccount:has(tr#selectedTotalsRow.none) .myAccountTotalsFooter {
    bottom: 0px !important;
}

/*#endregion DOM Loading Progress*/

/*#region Confirmation Alert */

.confirmAlert {
    display: none;
    position: fixed;
    z-index: 4000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmAlert-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    display: inline-block;
    max-width: 80%;
    box-sizing: border-box;
    text-align: center;
}

/*#endregion Confirmation Alert */

/*#region scrollbars */

.infoBar,
.highlightInfoBar {
    font-weight: bold;
    padding: 8px 5px;
    padding-left: 25px;
    background-image: url(/images/StyleGuide/circle-info-regular-red.svg);
    background-repeat: no-repeat;
    background-position: 5px center;
    margin-bottom: 2px;
    background-size: 16px;
    display: block;
    border-width: 0px;
    border-style: none;
}

.none {
    display: none;
}

.backLink.none a {
    display: none;
}

.backLink.none {
    display: none;
}

.noneForce {
    display: none !important;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 10px;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 10px;
    border: 2px solid white;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: var(--school-primary-color);
    border: 4px solid transparent;
}

/*#endregion scrollbar*/

body {
    font-family: var(--global-font-family);
    background: var(--global-background);
}

body,
th,
td,
div,
span,
a,
input,
textarea,
#timetable h3,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
select {
    font-family: var(--global-font-family);
    font-size: var(--font-size);
}

table th,
td {
    vertical-align: middle;
}

table .fa-regular,
table .fa-solid {
    font-size: var(--font-size-larger2);
}

.nowrap {
    white-space: nowrap;
}

.ui-tooltip {
    padding: 5px !important;
    border: none !important;
}

.ui-tooltip-content {
    position: relative;
    padding: 3px 3px;
    text-align: left;
    word-wrap: break-word;
    background: var(--global-secondary-color);
}

.ui-tooltip-content .pupil {
    text-align: center;
    width: 120px;
    margin: auto;
    display: block;
    padding-top: 5px;
    padding-bottom: 1px;
}

.ui-widget-shadow {
    -webkit-box-shadow: 6px 6px 10px #66666657;
    box-shadow: 2px 2px 5px #66666630;
}

/********** Buttons **********/

/*#region buttons */

.buttonBase,
ul.tabButtons li a,
.ui-dialog-buttonset button[type=button],
input[type=file]::file-selector-button {
    align-items: center;
    letter-spacing: 0.4px;
    border-radius: var(--global-border-radius);
    padding: 3px 15px;
    font-style: normal;
    font-weight: 600;
    font-size: var(--font-size-larger2);
    line-height: 20px;
    margin: 5px 5px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background-color .3s;
    -webkit-appearance: none;
}

.ui-button:active {
    color: var(--school-primary-color);
    background: inherit;
}

.ui-button:active {
    color: var(--school-primary-color);
}

.siblingDetails .buttonBase {
    margin-bottom: 10px;
}

.buttonTextUnderIcon {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
}

.buttonContainer .buttonBase:first-child {
    margin-left: 0px;
}

.iconInlineText {
    display: inline-table !important;
}

.iconInlineText span {
    text-decoration: underline;
    padding: 0 10px 0 4px;
    vertical-align: middle;
    font-weight: 900;
}

.buttonPrimary {
    background: var(--school-primary-color);
    color: var(--school-primary-font-color);
    padding: 4px 15px;
}

.rfeUploadButtonContainer .rbDecorated {
    background: var(--school-primary-color) !important;
    color: var(--school-primary-font-color) !important;
    padding: 4px 15px !important;
    align-items: center !important;
    letter-spacing: 0.4px !important;
    border-radius: var(--global-border-radius) !important;
    padding: 3px 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-size-larger2) !important;
    line-height: 20px !important;
    margin: 5px 5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transition: background-color .3s;
    height: auto !important;
}

.RadWindow_Default {
    border: none !important;
    background: none !important;
}

.RadWindow_Default a.rwIcon {
    display: none !important;
}

.rfeUploadButtonContainer .rbDecorated:hover {
    background: var(--school-primary-color-darker) !important;
    color: var(--school-primary-font-color) !important;
    /* used to ensure button color isn't overridden in jquery ui pop-ups */
    border: none !important;
}

.rfeUploadButtonContainer .RadButton_Default.rbSkinnedButton {
    background-image: none !important;
}

.buttonPrimary:hover {
    background: var(--school-primary-color-darker);
    color: var(--school-primary-font-color);
    /* used to ensure button color isn't overridden in jquery ui pop-ups */
    border: none;
}

.buttonPrimary[disabled],
.buttonPrimary[disabled]:hover {
    background: var(--global-greyed-out) !important;
    cursor: not-allowed;
}

.buttonSecondary,
.ui-dialog-buttonset button[type=button],
input[type=file]::file-selector-button {
    background: var(--global-secondary-color);
    color: var(--school-primary-color);
    border: 1px solid var(--school-primary-color);
}

.buttonSecondary:hover,
.ui-dialog-buttonset button[type=button]:hover {
    background: var(--secondary-hover-colour);
    border: 1px solid var(--school-primary-color);
    /* used to ensure button color isn't overridden in jquery ui pop-ups */
}

.buttonSecondary[disabled],
.buttonSecondary[disabled]:hover {
    color: var(--school-primary-color-30pc-trans);
    background: var(--global-secondary-color);
    border-color: var(--school-primary-color-30pc-trans);
    cursor: not-allowed;
}

.buttonPrimaryDestructive {
    background: var(--destructive-color);
    color: var(--school-primary-font-color);
}

.buttonPrimaryDestructive[disabled],
.buttonPrimaryDestructive[disabled]:hover {
    background: var(--destructive-color-lighter);
    cursor: not-allowed;
}

.buttonPrimaryDestructive:hover {
    background: var(--destructive-color-darker);
}

.buttonSecondaryDestructive {
    background: var(--global-secondary-color);
    color: var(--destructive-color);
    border: 1px solid var(--destructive-color);
}

.buttonSecondaryDestructive:hover {
    background: var(--secondary-hover-colour);
}

.buttonSecondaryDestructive[disabled],
.buttonSecondaryDestructive[disabled]:hover {
    background: var(--global-secondary-color);
    border-color: var(--destructive-color-lighter);
    color: var(--destructive-color-lighter);
    cursor: not-allowed;
}

.buttonGrey {
    background-color: var(--global-light-grey);
    color: var(--global-dark);
}

.buttonWhite {
    background: var(--school-primary-color);
    color: var(--school-primary-font-color);
    border: 1px solid var(--school-primary-font-color);
}

.buttonWhite:hover {
    background: var(--school-primary-color-darker);
}

.buttonWhite[disabled],
.buttonWhite[disabled]:hover {
    color: var(--school-primary-color-lighter);
    background: var(--global-secondary-color);
    border-color: var(--school-primary-color-lighter);
    cursor: not-allowed;
    /*        background: var(--global-greyed-out);
        cursor: not-allowed;
*/
}

.buttonSlim {
    line-height: 18px;
    margin: 0px 17px;
}

.buttonGrid {
    line-height: 15px;
    padding: 5px;
    margin: 0px 13px;
    font-size: var(--font-size);
}

.buttonNoLeft {
    margin-left: 0px;
}

.excelButtonOption {
    line-height: 32px;
}

.buttonLink {
    border: none;
    text-decoration: underline;
    font-size: var(--font-size);
    color: var(--school-primary-color);
    cursor: pointer;
    padding: 8px 4px;
    margin: 0px 5px;
    background: transparent;
}

.buttonLink i {
    text-align: left;
    padding-right: 8px;
    color: var(--global-font-colour-grey);
}

.textlinkButton {
    color: var(--global-font-colour-grey);
    text-decoration: underline;
}

.textlinkButton i {
    margin-right: 3px;
}

.textlinkButton:hover {
    cursor: pointer;
    color: var(--global-dark);
}

.numericUpDownButton {
    width: 12px;
    height: 12px;
    color: var(--global-font-colour-grey);
    border: none;
    background-color: transparent;
}

.numericUpDownButton i {
    margin: 0px 0px 0px -6px;
}

.subscribeButton {
    font-size: 20px;
    color: var(--button-primary-font-color);
    cursor: pointer;
}

.subscribeButtonDisabled,
.linkButtonDisabled,
.linkButtonDisabled label {
    opacity: 0.5;
    cursor: not-allowed;
}

/*#endregion buttons*/

/********** ComboBoxes **********/

/*#region ComboBoxes */

.ComboBox {
    background: var(--school-primary-color);
    color: var(--school-primary-font-color);
}

.ComboBox .rcbInput {
    background: var(--school-primary-color);
    color: var(--school-primary-font-color);
}

/* these items apply to all telerick combo boxes regardless of the style used */

.rcbList li {
    width: auto;
}

.RadComboBoxDropDown {
    width: auto !important;
    border: none !important;
}

.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbCheckAllItemsHovered {
    color: var(--school-primary-color);
    text-decoration: underline;
}

.RadComboBoxDropDown .rcbList,
.RadComboBoxDropDown .rcbScroll,
.custom_radCloseContainer {
    background: var(--combo-dropdown-background);
}

.rcbSlide {
    width: auto !important;
    color: #109C39;
}

/* Rad combo filtering style */

div.RadComboBoxDropDown em {
    font-style: normal;
    font-weight: bold;
}

div.RadComboBoxDropDown .rcbItem em {
    background: var(--school-primary-color-lighter3);
}

/* Combobox styling for select html*/

.comboBase {
    align-items: center;
    border-radius: var(--global-border-radius);
    line-height: 26px;
    margin: 2px 10px;
    padding: 5px 8px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--global-grey);
    outline-style: none;
}

.comboBase option {
    background: var(--combo-dropdown-background);
    border: none;
}

.comboPrimary {
    background: var(--school-primary-color);
    color: var(--school-primary-font-color);
}

.comboSecondary {
    background: var(--global-secondary-color);
    color: var(--global-dark);
}

.comboBaseActivities {
    height: 28px !important;
    align-items: center !important;
    border-radius: var(--global-border-radius) !important;
    line-height: 26px !important;
    margin: 2px 4px 2px 0px !important;
    padding: 5px 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid var(--combo-border-color) !important;
    outline-style: none !important;
}

/*#endregion ComboBoxes */

/* #region File Extension types */

.xlsx {
    background-image: url(/images/icons/xlsx.gif);
}

.xls {
    background-image: url(/images/icons/xls.gif);
}

.unknown {
    background-image: url(/images/icons/unknown.gif);
}

.project {
    background-image: url(/images/icons/project.gif);
}

.png {
    background-image: url(/images/icons/png.png);
}

.pdf {
    background-image: url(/images/icons/pdf.gif);
}

.access {
    background-image: url(/images/icons/mdb.gif);
}

.jpg {
    background-image: url(/images/icons/jpg.gif);
}

.gif {
    background-image: url(/images/icons/gif.gif);
}

.docx {
    background-image: url(/images/icons/docx.gif);
}

.doc {
    background-image: url(/images/icons/doc.gif);
}

.ics {
    background-image: url(/images/icons/event.gif);
}

.zip {
    background-image: url(/images/icons/compress.png);
}

.exe {
    background-image: url(/images/icons/exe.png);
}

.tif {
    background-image: url(/images/icons/tiff.png);
}

.flv {
    background-image: url(/images/icons/flv.png);
}

.msg {
    background-image: url(/images/icons/mail.png);
}

.mkv {
    background-image: url(/images/icons/mkv.png);
}

.mp3 {
    background-image: url(/images/icons/mp3.png);
}

.mp4 {
    background-image: url(/images/icons/mp4.png);
}

.ppt {
    background-image: url(/images/icons/ppt.png);
}

.sql {
    background-image: url(/images/icons/sql.png);
}

.txt {
    background-image: url(/images/icons/txt.gif);
}

.rtf {
    background-image: url(/images/icons/rtf.gif);
}

.videoFile {
    background-image: url(/images/icons/videoFile.gif);
}

.odt {
    background-image: url(/images/icons/odt.gif);
}

.ods {
    background-image: url(/images/icons/ods.gif);
}

.odg {
    background-image: url(/images/icons/odg.gif);
}

.odp {
    background-image: url(/images/icons/odp.gif);
}

.odf {
    background-image: url(/images/icons/odf.gif);
}

.ec {
    background-image: url(/images/icons/ec.gif);
}

.odb {
    background-image: url(/images/icons/odb.gif);
}

.qt {
    background-image: url(/images/icons/qt.gif);
}

/* #endregion File Extension Types */

/********** Misc Controls ***********/

/* region Misc Controls */

.activityInput {
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    height: 24px;
    padding-left: 5px;
    /*-webkit-appearance: none;*/
}

.baseTextbox {
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    padding-left: 5px;
    /*-webkit-appearance: none;*/
}

.ruFakeInput.baseTextbox {
    border-radius: var(--global-border-radius) !important;
    border: 1px solid var(--combo-border-color) !important;
    height: 24px !important;
    padding-left: 5px !important;
    margin-top: 5px !important;
}

.dateTextbox,
.timeTextbox {
    width: 80px;
    text-align: center;
}

textarea:not(.body-map-note):not(.select2-search__field) {
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    min-height: 100px;
}

/* #endregion Misc Controls */

/********** Panel Header/Accordion **********/

/*#region accordion */

.collapse-toolbar {
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.toolbar,
.toolbarOn,
.toolbarEmpty {
    margin: 0;
    line-height: 50px;
    /*  width: calc( 100% - 40px);*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--global-secondary-color);
    color: var(--global-dark);
    margin: 20px 0 20px 0;
    /* padding-left: 20px; */
}

.js-scheduleFilter .collapsibleFilterCollapsedContent {
    line-height: normal;
}

.toolbarMin,
.toolbarMinOn {
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

.toolbar:hover {
    background-color: var(--global-greyed-out);
}

.toolbarOn:hover {
    background-color: var(--global-greyed-out);
}

.toolbar a {
    text-decoration: none;
    color: var(--global-dark);
}

.toolbarOn a {
    text-decoration: none;
    color: var(--school-primary-color);
}

.toolbar.collapse-toolbar,
.toolbarMin.collapse-toolbar {
    background-image: url('../images/StyleGuide/chevronDownBlack.svg');
}

.toolbarOn.collapse-toolbar,
.toolbarMinOn.collapse-toolbar {
    background-image: url('../images/StyleGuide/chevronUpBlack.svg');
}

.toolbar .checkbox-group {
    float: right;
    margin-right: 20px;
    margin-left: 8px;
}

.chevronDownBlack {
    background-image: url('../images/StyleGuide/chevronDownBlack.svg');
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.chevronUpBlack {
    background-image: url('../images/StyleGuide/chevronUpBlack.svg');
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.toolbarHeader,
.toolbarHeader a {
    margin-bottom: 0px;
    font-size: var(--font-size-larger2);
}

/*#endregion accordion*/

.componentHeader {
    padding-left: 10px;
    height: 30px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

/*#region balance control */

.rlbGroup {
    font-weight: 400;
    font-size: var(--font-size-larger2);
    padding: 10px 10px;
    border-radius: var(--global-border-radius) !important;
    overflow-y: auto !important;
}

.rlbList li:hover {
    background: var(--school-primary-color-lighter2) !important;
    color: var(--global-dark) !important;
    border: none !important;
    padding: 2px 5px !important;
    cursor: pointer;
}

.balanceControlOuterTable .rlbSelected {
    background: var(--global-secondary-color) !important;
    color: var(--global-dark) !important;
    border: none !important;
    padding: 2px 5px !important;
}

.rlbText {
    cursor: pointer;
}

.rlbCheck {
    cursor: pointer;
}

.balanceControl {
    display: flex;
    display: -webkit-flex;
}

.balanceControl .rlbCheck,
.balanceControl .rlbText {
    pointer-events: none;
    /* this is to prevent a click being called from li and the checkbox */
}

.balanceControl>.RadListBox {
    width: 100%;
}

.balanceControlButtons {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.balanceControlListBox {
    width: 100% !important;
}

.balanceControlOuterTable {
    width: 100%;
}

.balanceControlHeader {
    background-color: var(--global-secondary-color) !important;
}

.balanceControlButtons a {
    background: var(--school-primary-color);
    color: var(--global-secondary-color);
    border-radius: var(--global-border-radius);
    width: 24px;
    height: 24px;
    margin: 10px 10px;
    align-content: center;
    display: inline-block;
    font-size: var(--font-size-larger2);
    font-weight: bold;
    line-height: 24px;
    color: white;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    margin-left: 25px;
}

.balanceControlButtons a:hover {
    background: var(--school-primary-color-darker);
}

.balanceControlButtons a[disabled],
.balanceControlButtons a[disabled]:hover {
    background: var(--global-greyed-out);
    cursor: not-allowed;
}

.balanceControlSelectAll {
    font-weight: 600;
    display: inline-block;
    padding: 0px 0px 0px 5px;
    margin: 2px 5px 5px 5px;
    vertical-align: top;
}

.RadComboBox .rcbEmptyMessage {
    font-style: normal !important;
}

/*#endregion balance control */

/*#region loading spinner*/

#progressBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    z-index: 3100;
    /*1px transparent gif prevents clickthrough in IE*/
    background: white;
    opacity: 0.5;
}

#processMessage {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 200px;
    z-index: 3100;
    text-align: center;
    padding: 30px;
    /* background: var(--school-primary-color-30pc-trans); */
    /* box-shadow: 6px 4px 10px 0px rgb(0 0 0 / 30%); */
    font-size: 34px;
    transform: translate(-50%, -50%);
}

#processMessage #progressText {
    font-size: 20px;
}

/*#endregion*/

/*#region report comment */

.reportCommentToggle {
    position: relative;
    padding: 5px 20px 10px 20px;
    margin: 0px;
    border-radius: var(--global-border-radius);
    background-color: var(--global-panel-grey);
}

.pupilReportSubject {
    padding: 20px;
    margin: 10px 5px 0px 5px;
    background-color: var(--global-secondary-color);
}

.pupilReportSubject h1,
.pupilReportTeacherComment h1 {
    margin: 0;
    font-size: var(--font-size-larger2);
    padding: 5px 0;
    margin-bottom: 2px;
}

.pupilReportSubject h1 {
    margin-right: 5px;
    float: left;
}

.pupilReportGradeColumns {
    padding: 2px 0;
}

.pupilReportCommentColumnsSeparator {
    /*        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: var(--global-border-grey);*/
}

.RadTabStrip_Simple span.rtsTxt {
    vertical-align: middle;
}

.reportHolder {
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
}

/*#endregion report comment */

/**********  Pupil Filter **********/

.resetFilter {
    color: var(--school-primary-color);
    text-decoration: underline;
    margin-right: 20px;
    cursor: pointer;
}

.hyperLink {
    color: var(--school-primary-color);
    text-decoration: underline;
    margin-right: 20px;
    cursor: pointer;
}

.hyperLink i {
    margin-right: 5px;
    margin-left: 5px;
}

/*#region pupil filter */

.userFilterControl {
    color: var(--global-dark) !important;
    font-weight: 600;
    /*    margin: 4px 20px 10px 10px !important;*/
    width: 330px;
    white-space: nowrap;
}

.userFilterControl label,
.userFilterControl .labelSpan {
    /*        margin: 4px 8px 4px 5px !important;
*/
    margin: auto 0px auto 5px !important;
    /* new values to support ellipsis */
    display: inline-block;
    text-align: right;
    color: var(--global-font-colour-grey);
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 5px;
    min-height: 16px;
    float: left;
}

.userFilterControl label:not(.disableFixedWidth),
.userFilterControl .labelSpan {
    width: 110px !important;
}

.filterToolbarCenter.filterToolbarSecondary {
    background: var(--global-light-grey);
}

.filterBarControl input {
    margin-left: 0px !important;
}

.filterBarDivWrapper {
    clear: both;
}

.filterBarDivWrapper .js-btnFilter {
    top: 10px;
}

.filterBarDivWrapper label {
    min-width: 100px;
    display: inline-block;
    margin-bottom: 5px;
    text-align: left;
}

.pupilSearchNameWrapper {
    position: relative;
    left: -14px;
    width: 305px;
}

.toolbarColoring {
    background-color: var(--school-primary-color-lighter3);
}

.userFilterControl div {
    vertical-align: baseline;
}

.userFilterControl .labelSpan {
    padding-top: 4px;
    vertical-align: middle;
    height: 100%;
}

.filterToolbarCenter {
    background-color: var(--school-primary-color-lighter3);
    padding: 10px;
    border-radius: var(--global-border-radius);
    width: auto;
    min-width: 240px;
}

.bottomBorderRadius {
    border-radius: 0 0 var(--global-border-radius) var(--global-border-radius) !important;
}

.pupilsITeach {
    width: 100% !important;
    /* to keep it on its own line - may not be required */
    text-align: left !important;
    padding-top: 0 !important;
    margin-bottom: 8px;
}

.pupilsITeach>label {
    text-align: left !important;
    width: 133px !important;
}

.staffTimeTableFilter .js-btnFilter {
    margin-top: -23px;
    /* used to offset impact of 'show card headings' */
}

.showClassHeadings {
    /*margin-top: 10px;*/
}

.filterToolbarCenter>.topControls {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
}

.filterToolbarCenter>.topControlsFlex {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
}

.userFilterpnlSchoolRow {
    padding-bottom: 12px;
}

/* Removed as interferering with control sizes causing overlap
    .filterToolbarCenter > .topControls div {
        flex: 0 0 200px;
    }
*/

/*#endregion pupil filter */

.toolbarToggle2 {
    height: 76px;
    display: inline;
    float: left;
}

.toolbarToggle {
    line-height: 18px;
}

.toolbarToggle a {
    padding-left: 6px;
    color: var(--school-primary-color);
}

.topControls.paddingTopBottom10,
.controls.paddingTopBottom10,
.activitiesTop.paddingTopBottom10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.topControls div.control,
.controls div.control,
.timeTableToggleControls div.control,
.topControls div.controlDoubleWidth,
.activitiesTop div.controlDoubleWidth,
.activitiesTop div.control {
    padding-top: 10px;
    padding-right: 10px;
    float: none;
    width: 300px;
    text-align: right;
    white-space: nowrap;
    height: 30px;
}

.topControls div.controlNoWidth,
.controls div.controlNoWidth,
.timeTableToggleControls div.controlNoWidth,
.activitiesTop div.controlNoWidth {
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 10px;
    /*    float: left;
*/
    text-align: right;
    white-space: nowrap;
    height: 30px;
}

.controls span.control {
    padding-top: 10px;
}

.controls span.control .controlCheckbox input {
    margin-left: 20px;
    margin-top: 7px;
}

.filterSearchLine {
    margin-top: 17px;
    margin-left: 3px;
}

.filterFlexRowFirstColumn label {
    text-align: left;
}

.marginTop10px {
    margin-top: 10px !important;
}

.marginTop20px {
    margin-top: 20px !important;
}

.marginTop30px {
    margin-top: 30px !important;
}

.marginTop0px {
    margin-top: 0px !important;
}

.marginTop2px {
    margin-top: 2px !important;
}

.marginTop3px {
    margin-top: 3px !important;
}

.marginTop5px {
    margin-top: 5px !important;
}

.marginTop10px {
    margin-top: 10px !important;
}

.marginBottom0px {
    margin-bottom: 0px !important;
}

.marginBottom5px {
    margin-bottom: 5px !important;
}

.marginBottom10px {
    margin-bottom: 10px !important;
}

.marginBottom15px {
    margin-bottom: 15px !important;
}

.marginBottom60px {
    margin-bottom: 60px !important;
}

.marginLeft0px {
    margin-left: 0px !important;
}

.marginLeft5px {
    margin-left: 5px !important;
}

.marginLeft10px {
    margin-left: 10px !important;
}

.marginLeft40px {
    margin-left: 40px !important;
}

.marginLeft45px {
    margin-left: 45px !important;
}

.marginRight1px {
    margin-right: 1px !important;
}

.marginRight3px {
    margin-right: 3px !important;
}

.marginRight5px {
    margin-right: 5px !important;
}

.marginRight10px {
    margin-right: 10px !important;
}

.marginRight20px {
    margin-right: 20px !important;
}

.paddingTop5px {
    padding-top: 5px !important;
}

.paddingTop10px {
    padding-top: 10px !important;
}

.paddingTop20px {
    padding-top: 20px !important;
}

.paddingLeft0px {
    padding-left: 0px !important;
}

.paddingLeft3px {
    padding-left: 3px !important;
}

.paddingLeft20px {
    padding-left: 20px !important;
}

.marginRight20px {
    margin-right: 20px !important;
}

.padding5px,
.padding5Mobile10 {
    padding: 5px !important;
}

.paddingTop10px {
    padding-top: 10px !important;
}

.paddingTop20px {
    padding-top: 20px !important;
}

.paddingLeft0px {
    padding-left: 0px !important;
}

.paddingLeft5px,
.paddingLeft5Mobile10 {
    padding-left: 5px !important;
}

.paddingLeft10px {
    padding-left: 10px !important;
}

.paddingLeft20px {
    padding-left: 20px !important;
}

.paddingBottomOnly45 {
    padding-bottom: 45px !important;
}

.paddingBottomOnly60 {
    padding-bottom: 60px !important;
}

.paddingBottomOnly20 {
    padding-bottom: 20px !important;
}

.paddingBottomOnly10 {
    padding-bottom: 10px !important;
}

.paddingBottomOnly5 {
    padding-bottom: 5px !important;
}

.paddingTopOnly20 {
    padding-top: 20px !important;
}

.paddingRightOnly10 {
    padding-right: 10px !important;
}

.paddingRightOnly20 {
    padding-right: 20px !important;
}

.paddingLeft40px {
    padding-left: 40px !important;
}

.borderRight {
    border-right: 1px solid var(--global-mid-grey) !important;
}

.padding0 {
    padding: 0px;
}

.padding20 {
    padding: 20px;
}

:root {
    --filter-width: 320px;
    --navWidth: 270px;
}

/* #region filter base items */

.filterFlexRow,
.filterRow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--filter-width), 1fr));
    grid-template-rows: repeat(auto-fit, 28px);
    /*    grid-row-gap: 12px;
*/
    max-width: 1450px;
    width: 95% !important;
    height: auto;
    align-items: end;
}

.flexRight {
    padding-right: 0px;
    margin-right: 10px;
}

.toggleBaseBarExpanded {
    float: right;
    right: 7px;
    position: absolute;
    cursor: pointer;
    font-size: 24px;
}

.toggleBaseBarCollapsed {
    float: right;
    padding-right: 7px;
    cursor: pointer;
    font-size: 24px;
}

.marksheetCog {
    width: 18px;
    padding-top: 10px !important;
    float: right !important;
    margin-right: -64px;
}

.searchAndReset {
    margin-top: 36px;
}

.filterBarControlNoResize .js-btnFilter {
    margin-top: 4px !important;
}

.filterLineSpace {
    padding-top: 0px !important;
    height: 12px !important;
    /*        display: none;
*/
}

.flexRight {
    margin-left: auto;
    justify-content: right;
}

.filterTextbox {
    width: 180px !important;
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    height: auto;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position-x: calc(100% - 10px);
}

.filterTextbox.fieldSearchIcon {
    margin-left: 10px;
    background-image: url(/images/StyleGuide/magnifying-glass-light.svg);
}

.filterTextbox.fieldSearchIcon.Icon95pc {
    background-position-x: 95%;
}

.filterTextbox.classSearchIcon {
    width: 170px !important;
    background-image: url(/images/StyleGuide/calendar-days-solid-grey.svg);
    margin-left: 4px;
    position: relative;
    /*top:-10px;*/
}

.filterTextbox.classSearchIcon:hover {
    cursor: pointer;
}

.adjustFieldSearchForUserFilter {
    width: 177px !important;
    margin-left: 4px !important;
    position: relative;
}

.nameSearchContainer label {
    margin-top: 4px !important;
}

/* required for attendance screens */

.adjustfieldSearch {
    width: 177px !important;
    background-position-x: calc(100% - 10px);
}

.adjustfieldSearchDaybook.toolTipSearch {
    width: 157px !important;
    background-position-x: 160px;
    background-position-x: 144px;
}

.userFilterControl .RadInput {
    position: relative;
    /*top: -12px;*/
}

.filterTextBoxClassSelect {
    width: 168px !important;
}

/* for performance tracking to line up name field*/

.fieldSearchOverrideLeftAlginment {
    margin-left: 0;
}

.buttonflexRow {
    margin-top: 20px;
}

.buttonSearch {
    border-radius: var(--global-border-radius);
    margin: 0px;
    height: 28px;
    padding: 2px 16px;
    margin: 0px -14px;
    font-size: var(--font-size-larger1);
}

.searchReset {
    color: var(--school-primary-color);
    vertical-align: middle;
    padding-right: 5px;
    cursor: pointer;
    text-decoration: underline;
}

.searchRefresh:hover {
    color: var(--school-primary-color-darker);
}

.activitiesFilterControl select,
.activitiesFilterControl input:not(.buttonBase,
.filterTextbox),
.activitiesFilterControl .searchGlass {
    border-radius: 2px;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    border: 0;
}

.wrapControl:not(.none) {
    display: inline-block;
}

/* #endregion filter base items */

/*#region Global Grid Button Toolbar*/

.gridToolbarControls {
    display: block;
    margin-top: 10px;
}

.gridToolbarControls input {
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 10px;
}

/*#endregion region Global Grid Button Toolbar */

/*#region marksheet filter*/

.gridToolkit {
    padding-top: 12px;
    white-space: nowrap;
    color: var(--global-dark);
}

.filterToolbarFullHeight {
    min-height: 134px !important;
}

.fa-solid,
.fa-regular,
.fa-duotone,
.fa-light {
    text-decoration: none;
}

.fa-solid.disabled,
.fa-regular.disabled,
.fa-duotone.disabled,
.fa-light.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.filterToolbarCollapsed {
    min-height: 60px;
}

.greenTick {
    width: 14px;
    color: #37A935;
}

.redCross {
    width: 14px;
    color: #FF0000;
}

.marksheetPreferences {
    color: var(--school-primary-color);
    cursor: pointer;
    text-decoration: underline;
    line-height: 20px;
    padding-left: 5px;
}

#columnsGrid {
    margin-top: 10px;
    max-height: 355px;
    overflow-y: auto;
}

.buttonActionItem {
    display: flex;
    display: -webkit-flex;
    text-align: left;
    align-items: flex-start;
    padding: 0px 10px;
    text-decoration: underline;
    min-width: 100px;
    color: var(--school-primary-color);
}

.buttonActionItemIcon {
    vertical-align: top;
    padding-top: 0px;
    margin-top: 4px;
    margin-right: 5px;
    width: 14px;
}

.marksheetActions {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    padding-right: 0px;
    padding-left: 10px;
    margin: 10px 0px 10px 0px;
    width: 100%;
}

.marksheetActions div {
    padding-bottom: 10px;
}

.marksheetActions>* {
    margin: 0 10px;
}

/*.marksheetActions {
    padding-right: 30px;
    padding-left: 30px;
}*/

.marksheetActions a {
    text-decoration: underline;
    color: var(--school-primary-color);
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: fit-content;
}

.marksheetActions i {
    color: var(--global-font-colour-grey);
    padding-right: 4px;
    cursor: pointer;
}

.btnAddPerformanceColumnSelect {
    line-height: 16px;
    margin: 9px -3px;
    padding: 5px 10px;
}

.filterBarControl {
    float: left;
    padding-top: 8px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    white-space: nowrap;
    height: 30px;
}

.filterRoowExtraPadding {
    padding-bottom: 20px;
}

.filterBarControl label {
    padding-left: 5px;
}

.wef {
    width: 100%;
}

.createCalcColDatatable {
    border-radius: var(--global-border-radius);
    width: 100%;
    background: var(--school-primary-color-lighter3);
    padding: 20px;
}

.createCalcColDatatable th {
    background: var(--school-primary-color-lighter3);
    text-align: left;
}

.marksheetPopUpDatatable {
    width: 100%;
    border-collapse: collapse;
    background: var(--school-primary-color-lighter3);
}

.marksheetPopUpDatatable tr {
    height: 26px;
}

.marksheetPopUpDatatable th {
    background: var(--global-mid-grey);
    color: var(--global-font-colour-grey);
    width: 40%;
    border: 1px solid #dfd6d6;
    padding: 20px !important;
    margin: 0px !important;
    vertical-align: middle;
    text-align: left;
}

.marksheetPopUpDatatable td {
    width: 60%;
    background: var(--global-secondary-color);
    border-bottom: 1px solid var(--global-mid-grey);
}

.marksheetPopUpDatatable input[type=text] {
    padding: 5px 8px;
}

.deleteColumnFooter {
    right: 0px;
    bottom: -14px;
    text-align: end;
    clear: both;
    width: auto;
    position: relative;
    display: inline-block;
    float: right;
}

.EntryLocked {
    color: red !important;
}

/*#endregion marksheet filter*/

a.dayBookEntity i {
    padding-right: 5px;
}

li:not(:has(a.dayBookEntity .fa-solid)):has(a.dayBookEntity.current),
li:not(:has(a.dayBookEntity .fa-solid)):has(a.dayBookEntity):hover {
    background: var(--school-primary-color-lighter4);
}

a.dayBookEntity.current {
    background: none;
}

li:has(a.dayBookEntity.current .fa-solid.fa-person-walking-luggage),
li:has(a.dayBookEntity .fa-solid.fa-person-walking-luggage):hover {
    background: #DEFBFF;
}

li:has(a.dayBookEntity.current .fa-solid.fa-house-person-leave),
li:has(a.dayBookEntity .fa-solid.fa-house-person-leave):hover {
    background: #E6E6E6;
}

li:has(a.dayBookEntity.current .fa-solid.fa-person-walking-arrow-right),
li:has(a.dayBookEntity .fa-solid.fa-person-walking-arrow-right):hover {
    background: #E1FFE1;
}

li:has(a.dayBookEntity.current .fa-solid.fa-person-sign),
li:has(a.dayBookEntity .fa-solid.fa-person-sign):hover {
    background: #FFE3F1;
}

/*#region FA COLOURS*/

.fa-solid.fa-shuffle {
    color: var(--school-primary-color);
    font-size: 19px;
}

.fa-solid.fa-person-walking-luggage:not(.ignoreFaStyle) {
    color: #01A5BB;
}

.fa-solid.fa-house-person-leave:not(.ignoreFaStyle) {
    color: #444444;
}

.fa-solid.fa-person-walking-arrow-right:not(.ignoreFaStyle) {
    color: #50B44E;
}

.fa-solid.fa-person-sign:not(.ignoreFaStyle) {
    color: #EC398F;
}

.fa-solid.fa-plus:not(.ignoreFaStyle) {
    color: #00ff00;
}

.fa-solid.fa-minus:not(.ignoreFaStyle) {
    color: #ff0000;
}

.fa-solid.fa-clock:not(.ignoreFaStyle) {
    color: #e85e5e;
}

.fa-solid.fa-camera:not(.ignoreFaStyle) {
    color: #8786C0;
}

.fa-solid.fa-camera-slash:not(.ignoreFaStyle) {
    color: #8786C0;
}

.fa-solid.fa-sliders:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-diamond-exclamation:not(.ignoreFaStyle) {
    color: #F08316;
}

.fa-regular.fa-brake-warning:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-comment-plus:not(.ignoreFaStyle) {
    color: #E6213C;
}

.fa-solid.fa-star:not(.ignoreFaStyle) {
    color: #FAB946;
}

.fa-regular.fa-mars:not(.ignoreFaStyle) {
    color: #6087C5;
}

.fa-regular.fa-venus:not(.ignoreFaStyle) {
    color: #BD78B0;
}

.fa-regular.fa-mars-and-venus:not(.ignoreFaStyle) {
    color: #8D8D8E;
}

.fa-regular.fa-ban:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-circle-info:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-circle-question:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-folder-closed:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-memo-pad:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-table-tree:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-briefcase-medical:not(.ignoreFaStyle) {
    color: #3650CC;
}

.fa-regular.fa-briefcase-medical:not(.ignoreFaStyle) {
    color: #E6213C;
}

.fa-regular.fa-message-sms:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-circle-plus:not(.ignoreFaStyle) {
    color: #732F88;
}

.fa-regular.fa-xmark-large:not(.ignoreFaStyle) {
    color: #FF0000;
}

.fa-regular.fa-xmark:not(.ignoreFaStyle) {
    color: #FF0000;
}

.fa-solid.fa-square-xmark:not(.ignoreFaStyle) {
    color: #FF0000;
}

.fa-regular.fa-check:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-arrow-left-long-to-line:not(.ignoreFaStyle) {
    color: #000000;
}

.fa-regular.fa-cake-candles:not(.ignoreFaStyle) {
    color: #C2579C;
}

.fa-solid.fa-chart-simple:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-table-layout:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-abacus:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-columns-3:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-check {
    color: var(--status-value-green);
}

.fa-solid.fa-line-columns:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-export:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-chart-simple-horizontal:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-building-columns:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-bed:not(.ignoreFaStyle) {
    color: #90C3E8;
}

.fa-solid.fa-hands-holding-circle:not(.ignoreFaStyle) {
    color: #FCC12D;
}

.fa-solid.fa-square-a:not(.ignoreFaStyle) {
    color: #b681f8;
}

.fa-solid.fa-arrow-right-from-bracket:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-square-chevron-left:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-square-chevron-right:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-regular.fa-calendar-days:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-circle-arrow-left:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-circle-arrow-right:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-message-check:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-solid.fa-message:not(.ignoreFaStyle) {
    color: #F08316;
}

.fa-regular.fa-message:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-trash-can:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-circle-calendar:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-pen-to-square:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-circle-xmark:not(.ignoreFaStyle) {
    color: var(--school-secondary-color);
}

.fa-regular.fa-house-chimney:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-user-group:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-calendar-check:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-people:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-circle-user:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-screen-users:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-graduation-cap:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-clipboard-list:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-star:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-lines:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-wallet:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-gear:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-globe:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-square-bolt:not(.ignoreFaStyle) {
    color: var(--school-secondary-color);
}

.fa-solid.fa-circle-plus:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-chevron-down:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-chevron-up:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-clone:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-circle-chevron-left:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-alarm-plus:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-circle-quarters:not(.ignoreFaStyle) {
    color: #0f63b4;
}

.fa-solid.fa-circle-small:not(.ignoreFaStyle) {
    color: #65b8f1;
}

.fa-solid.fa-circle-small:not(.ignoreFaStyle) {
    color: #7dd749;
}

.fa-regular.fa-circle-quarters:not(.ignoreFaStyle) {
    color: #ee3317;
}

.fa-solid.fa-circle-small:not(.ignoreFaStyle) {
    color: #fe6637;
}

.fa-regular.fa-circle-quarters:not(.ignoreFaStyle) {
    color: #f6d95a;
}

.fa-solid.fa-circle-small:not(.ignoreFaStyle) {
    color: #fba91a;
}

.fa-solid.fa-square-small:not(.ignoreFaStyle) {
    color: #00a2e8;
}

.fa-duotone.fa-circle-half:not(.ignoreFaStyle) {
    color: #EE754B & #82c14c;
}

.fa-solid.fa-square-s:not(.ignoreFaStyle) {
    color: #ef94e1;
}

.fa-solid.fa-square-g:not(.ignoreFaStyle) {
    color: #ffdb63;
}

.fa-solid.fa-file-invoice-dollar:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-address-card:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-circle-check:not(.ignoreFaStyle) {
    color: White;
}

.fa-regular.fa-pen-clip:not(.ignoreFaStyle) {
    color: White;
}

.fa-solid.fa-clipboard-medical:not(.ignoreFaStyle) {
    color: White;
}

.fa-solid.fa-circle-check:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-solid.fa-clipboard-check:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-clipboard:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-calendar-clock:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-solid.fa-file-pdf:not(.ignoreFaStyle) {
    color: #da3b01;
}

.fa-solid.fa-file-word:not(.ignoreFaStyle) {
    color: #0078d7;
}

.fa-solid.fa-file-excel:not(.ignoreFaStyle) {
    color: #217346;
}

.fa-solid.fa-file-image:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.file-circle-question:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-csv:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-powerpoint:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-video:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-audio:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-file-lines:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-do-not-enter:not(.ignoreFaStyle) {
    color: #FF0000;
}

.fa-solid.fa-rotate-right:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-hand-holding-box:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-message-pen:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-circle-xmark:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-eye:not(.ignoreFaStyle) {
    color: #172b49;
}

.fa-solid.fa-calculator:not(.ignoreFaStyle) {
    color: #172b49;
}

.fa-solid.fa-square-arrow-up-right:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-newspaper:not(.ignoreFaStyle) {
    color: #FFFFFF;
}

.fa-solid.fa-bars:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-person-circle-check:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-arrows-retweet:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-square-chevron-right:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-square-arrow-right:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-pen-field:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-arrow-left-from-line:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-arrow-right-to-line:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-print:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-laptop-arrow-down:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-earth-europe:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-floppy-disk:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-rotate-left:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-regular.fa-folder-tree:not(.ignoreFaStyle) {
    color: #0752cb;
}

.fa-regular.fa-eye-slash:not(.ignoreFaStyle) {
    color: var(--global-font-colour-grey);
}

.fa-solid.fa-square-down:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-square-up:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-square-plus:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-circle-arrow-down:not(.ignoreFaStyle),
.fa-solid.fa-circle-arrow-up:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-plus-circle:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-solid.fa-minus-circle:not(.ignoreFaStyle) {
    color: #FF0000;
}

.fa-solid.fa-clipboard:not(.ignoreFaStyle) {
    color: #0752cb;
}

.fa-regular.fa-chart-user:not(.ignoreFaStyle) {
    color: #0752cb;
}

.fa-regular.fa-square-poll-horizontal:not(.ignoreFaStyle) {
    color: #0752cb;
}

.fa-regular.fa-money-check-pen:not(.ignoreFaStyle) {
    color: #0752cb;
}

.fa-solid.fa-calendar-arrow-down:not(.ignoreFaStyle) {
    color: #0752cb !important;
}

.fa-solid.fa-paperclip-vertical:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-arrow-right-from-line:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-arrow-left-to-line:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-regular.fa-person-circle-check:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-duotone.fa-person-burst:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-duotone.fa-person-circle-plus:not(.ignoreFaStyle) {
    color: #109C39;
}

.fa-regular.fa-circle-chevron-down,
.fa-regular.fa-circle-chevron-up {
    font-size: 20px;
    color: var(--school-primary-color);
}

a:not(.buttonPrimary,
.buttonSecondary).fa-regular:hover,
a:not(.buttonPrimary,
.buttonSecondar).fa-solid:hover,
a:not(.buttonPrimary,
.buttonSecondary)>i.fa-regular:hover,
a:not(.buttonPrimary,
.buttonSecondary)>.fa-solid:hover,
span:not(.buttonPrimary,
.buttonSecondary)>i.fa-regular.hand:hover,
span:not(.buttonPrimary,
.buttonSecondary)>.fa-solid.hand:hover,
.icontooltip:hover {
    opacity: .5;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.fa-solid.fa-square-question:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-tag:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

.fa-solid.fa-circle-arrow-right:not(.ignoreFaStyle) {
    color: var(--school-primary-color);
}

/*#endregion FA COLOURS*/

/*#region tab control*/

ul.tabButtons li {
    display: flex;
    display: -webkit-flex;
    border-radius: var(--global-border-radius);
}

ul.tabButtons {
    padding: 0px 0px;
    margin: 0px 10px;
    /* width: 100%; */
    border-bottom: 1px solid var(--global-border-grey);
    display: flex;
    display: -webkit-flex;
}

ul.tabButtons li.active a {
    color: var(--school-primary-color);
    border-bottom: 1px solid var(--school-primary-color);
}

ul.tabButtons li a:hover {
    color: var(--school-primary-color-lighter2);
}

/*#endregion*/

div#inputMaskModal .portalModalInner>div>div {
    /* border-bottom: 1px solid black; */
    padding: 5px !important;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

/* document pager control */

.page_enabled,
.page_disabled {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    min-width: 20px;
    padding-left: 3px;
    padding-right: 4px;
    text-align: center;
    text-decoration: none;
}

.page_disabled {
    background-color: var(--school-primary-color);
    color: #fff !important;
}

.page_enabled:hover {
    background-color: var(--school-primary-color-30pc-trans);
}

.stickyColumn2.headerColour,
.stickyColumn.headerColour,
tr:hover .stickyColumn.headerColour {
    background: var(--global-secondary-color) !important;
}

.datatable.stickyColumn2>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn,
.datatable.stickyColumn1>tbody>tr>td:nth-child(1),
.datatable.stickyColumn1>tbody>tr:first-child>th:nth-child(1),
.datatable.stickyColumn1>thead>tr:first-child>th:nth-child(1),
.datatable.stickyColumn1>thead>tr:first-child>td:nth-child(1) {
    position: sticky !important;
    left: -10px;
    background: white;
    min-width: 100px;
    z-index: 99;
}

.datatable.stickyColumn2.noLeft>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2.noLeft>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.noLeft>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.noLeft>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn.noLeft,
.datatable .stickyColumn1.noLeft {
    left: 0px;
}

.datatable.stickyColumn2.left25>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2.left25>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left25>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left25>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn.left25 {
    left: 25px;
}

.datatable.stickyColumn2.left0>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2.left0>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left0>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left0>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn.left0 {
    left: 0px;
}

.datatable.stickyColumn2.left120>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2.left120>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left120>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left120>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn.left120 {
    left: 120px;
}

.datatable.stickyColumn2.left125>tbody>tr>td:nth-child(2),
.datatable.stickyColumn2.left125>tbody>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left125>thead>tr:first-child>th:nth-child(2),
.datatable.stickyColumn2.left125>thead>tr:first-child>td:nth-child(2),
.datatable .stickyColumn.left125 {
    left: 125px;
}

.datatable th.stickyColumn.zIndexHigh {
    z-index: 1001 !important;
}

tr.stickyTopRow th,
.weekattendance tr.stickyTopRow:first-child th {
    position: sticky !important;
    top: 0px !important;
    z-index: 9;
}

tr.stickyTopRow.top40 th,
.weekattendance tr.stickyTopRow:nth-child(2) th {
    top: 40px !important;
}

.attendancenames td:nth-child(2) {
    max-width: 100px;
}

.datatableHover.dailyAttendance.datatable.stickyColumn2>tbody>tr>td:nth-child(2),
.dailyAttendance.datatable.stickyColumn2>tbody>tr:first-child>th:nth-child(2),
.datatableHover.stickyColumn2>thead>tr:first-child>th:nth-child(2) {
    left: 0px;
}

.datatableHover.datatable.stickyColumn2>tbody>tr:hover>td:nth-child(2),
.datatableHover.datatable>tbody>tr:hover .stickyColumn.noLeft,
.datatableHover.datatable>tbody>tr:hover .stickyColumn {
    background: var(--school-primary-color-lighter4);
}

.datatable.onlySecondBoarder tr:not(:nth-child(2)) {
    border: none !important;
}

.overflowX {
    overflow-x: auto !important;
}

.freeze-header_MarksheetData:not(.height35) {
    border-top-width: 0px !important;
}

.width600 {
    width: 600px !important;
}

.pupilUpdateNotifyList span {
    margin-left: 10px;
}

.markerModalContent {
    margin-bottom: 10px;
}

.markerModalContent .paging-nav {
    background-color: transparent;
    padding: 5px;
    text-align: left;
}

.markerModalContent .paging-nav a {
    margin: 1px 1px;
    background-color: #ebebeb;
    color: var(--global-font-colour-grey);
}

.RadWindow .rwWindowContent .rwPopupButton .rwInnerSpan {
    background: var(--school-primary-color) !important;
    color: var(--school-primary-font-color) !important;
    padding: 4px 15px !important;
    align-items: center !important;
    letter-spacing: 0.4px !important;
    border-radius: var(--global-border-radius) !important;
    padding: 3px 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-size-larger2) !important;
    line-height: 20px !important;
    margin: 5px 5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transition: background-color .3s;
    height: auto !important;
}

.RadWindow .rwWindowContent .rwPopupButton .rwInnerSpan:hover {
    background: var(--school-primary-color-darker) !important;
    color: var(--school-primary-font-color) !important;
    /* used to ensure button color isn't overridden in jquery ui pop-ups */
}

.RadWindow_Default .rwPopupButton {
    background-image: none !important;
}

.RadWindow_Default .rwPopupButton span {
    background-image: none !important;
}

.RadWindow_Default .rwCommandButton:hover {
    background-color: var(--global-secondary-color) !important;
    border: none !important;
}

.js-gridMarkers-container {
    transition: max-width 1s, min-width 1s, width 1s, opacity 1s, height 1s, max-height 1s;
    max-width: 200px;
    max-height: 100px;
    min-width: 100px;
    opacity: 1;
    overflow-y: hidden;
}

.js-gridMarkers-container.collapsed-gridMarkers {
    opacity: 0;
    max-height: 0px;
    max-width: 5px;
    min-width: 5px !important;
}

.js-gridMarkers {
    transition: max-width 1s, min-width 1s, width 1s, opacity 1s, height 1s, max-height 1s, left 1s;
    max-height: 100px;
    left: 0px;
}

.js-gridMarkers.collapsed-gridMarkers {
    left: -999px;
}

.js-gridMarkers.collapsed-gridMarkers,
.js-gridMarkers-container.collapsed-gridMarkers .js-gridMarkers {
    max-height: 0px;
    min-width: 5px;
    left: -999px;
}

.js-gridMarkers>form {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.RadFileExplorer .RadToolBar .rtbWrap.icnRefresh {
    display: none;
}

span.icontooltip {
    padding-left: 2px;
}

.marginLeftRightAuto {
    margin-left: auto;
    margin-right: auto;
}

.marginLeftAuto {
    margin-left: auto;
}

.displayTable {
    display: table;
}

.width80 {
    width: 80px !important;
}

.width80 div.RadTimePicker {
    width: 80px !important;
}

.width100pc {
    width: 100%;
}

.width90pc {
    width: 90%;
}

/* #region telerik modal */

.rwCloseButton {
    background-image: none !important;
    background-position: 0 !important;
    position: unset;
    cursor: pointer !important;
    height: 13px !important;
}

.rwTitleWrapper .rwIcon {
    display: none !important;
}

.rwTitleWrapper {
    margin: -1px 0px;
}

.rwTitleBar {
    background: var(--global-secondary-color) !important;
    margin: 0 !important;
    padding-top: 10px !important;
}

.rwTitle {
    color: var(--global-dark) !important;
    font-size: 18px !important;
    padding-left: 5px !important;
}

.rwContent {
    border: none !important;
}

.rwContent .buttonBase {
    float: right;
}

.RadWindow {
    box-shadow: 6px 4px 10px 0px rgb(0 0 0 / 30%) !important;
    padding: 0 !important;
}

.RadWindow .rwCloseButton:before {
    top: 2px;
    left: -5px;
    position: relative;
    font-family: 'Font Awesome 6 Pro' !important;
    font-weight: 400 !important;
    content: "\e59b" !important;
    color: var(--global-font-colour-grey);
}

.RadWindow .rwCommandButton {
    padding: 0 !important;
    font-size: 20px !important;
}

.RadWindow div.activityTooltip {
    display: inline;
}

.activitiesModalPanel {
    min-width: 315px;
}

.activitiesModalPanel td {
    white-space: normal !important;
}

.activitiesModalPanelTd td {
    white-space: normal !important;
    padding-top: 10px;
}

.activitiesModalPanelCopy {
    min-width: 300px;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* #endregion telerik modal */

.siblingContainer {
    display: flex;
    display: -webkit-flex;
    margin: 15px 0 0 0;
}

.siblingPage .siblingContainer {
    padding: 0;
}

.siblingDetails,
.actionMenuContainer,
.pupiDetailHeaderInfo {
    width: 50%;
    max-width: 500px;
}

.actionMenuContainer.pupilDetailsActions>.actionMenu {
    margin-top: 0px;
}

.actionMenu:not(.buttonContainer) {
    background: var(--global-grey-filter);
    padding: 10px;
    border-radius: var(--global-border-radius);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    margin: 10px;
}

.actionMenu .fireFlyIcon {
    width: 19px;
    height: 14px;
}

.actionMenu .actionIcon {
    width: 25px;
    display: inline-block;
}

.actionMenu:not(.buttonContainer) span {
    color: var(--global-dark);
    font-size: var(--font-size-larger2);
}

.actionMenu.buttonContainer {
    background: white;
    border-radius: var(--global-border-radius);
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    padding: 10px;
    transition: max-height 0.8s, padding 1s, margin-top 1s;
    overflow: hidden;
    max-height: 600px;
    margin-top: 10px;
}

.actionMenu.buttonContainer a {
    margin: 0;
    padding: 3px 4px;
}

.actionHeader {
    display: flex;
    display: -webkit-flex;
}

.actionHeader {
    display: flex;
    display: -webkit-flex;
}

.actionHeaderText {
    display: flex;
    display: -webkit-flex;
}

.actionHeaderIcon {
    display: flex;
    display: -webkit-flex;
    align-self: center;
    flex: 1 1 0;
    justify-content: flex-end;
}

.actionMenu.buttonContainer.containerClosed {
    max-height: 0;
    padding: 0px 10px 0px 10px;
    margin-top: 0px;
}

.alignContentCenter {
    align-content: center;
}

#loggedInAs {
    /*    width: 300px;*/
    text-align: right;
    border-right: 0px;
}

#loggedInAs #liCloseRightMenu {
    height: 35px;
}

#loggedInAs span {
    display: inline-flex;
    display: -webkit-inline-flex;
}

#loggedInAs #text {
    display: block;
    max-width: 260px
}

#loggedInAs .profileAvatar {
    text-overflow: ellipsis;
    overflow: hidden;
    background: white;
    color: var(--school-primary-color);
    width: 40px;
    height: 40px;
    border-radius: 90px;
    align-content: center;
    text-align: center;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
}

.userNav.rightMenu {
    left: unset;
    right: 0;
}

.activityDatatable table tr:nth-child(1) {
    border-top: unset !important;
}

div.RadUpload .ruFakeInput {
    width: 280px !important;
}

.introjs-progressbar {
    background-color: var(--school-primary-color) !important;
    height: 5px !important;
}

.introjs-progress {
    height: 5px !important;
}

.ttHomePanel {
    margin: 0 5px;
}

/** {
    -webkit-appearance: none;
}*/

.introjs-tooltip-header,
.introjs-tooltip-title,
.introjs-tooltiptext {
    font-family: var(--global-font-family) !important;
}

.introjs-tooltip-header {
    font-size: var(--font-size) !important;
}

.divOverflow>div {
    overflow-y: auto;
}

.ui-tooltip:not(.pupilImgNonResponsive) {
    max-height: 100%;
}

.ui-tooltip-content:not(.pupilImgNonResponsive) {
    max-height: 100%;
    overflow-x: auto;
}

.jsgrid-grid-header,
.jsgrid-grid-body {
    overflow-y: auto !important
}

.RadListBox .rlbText {
    white-space: unset !important;
}

.daybookSecurityDialogWrapper {
    overflow: unset !important;
}

.dropDownMenuContainer {
    position: relative;
    display: inline-block;
    padding: 0 10px
}

.dropDownMenu {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    z-index: 1;
    right: 0;
    padding: 10px 0;
}

.dropDownMenuContainer .dropDownMenu a {
    text-decoration: none;
    display: flex;
    font-weight: 700;
    font-size: var(--font-size-larger1);
    line-height: 25px;
    text-align: left !important;
    padding: 0 10px;
    align-items: center;
    cursor: pointer;
}

.dropDownMenuContainer .dropDownMenu a:hover {
    background: var(--select2-a);
}

.dropDownMenuContainer .dropDownMenu a .ddMenuItemIcon,
.dropDownMenuContainer .dropDownMenu a .ddMenuItemText {
    display: inline-flex;
    white-space: nowrap;
}

.dropDownMenuContainer .dropDownMenu a .ddMenuItemIcon {
    width: 25px;
}

.modalMove {
    position: absolute;
    right: 35px;
    top: 10px;
    z-index: 3000;
}

.disableMouse {
    pointer-events: none;
}

#conditionList {
    max-width: 1025px;
    padding-bottom: 10px;
    padding-right: 5px;
}

.condition-placeholder {
    height: 100px;
    background-color: aquamarine;
}

#conditionList .fieldCondition .switch {
    width: 38px;
    height: 15px;
}

#conditionList .fieldCondition .switch .switch-handle {
    height: 8px;
    width: 6px;
}

#conditionList .fieldCondition .switch {
    width: 38px;
}

#conditionList .fieldCondition .switch-input:checked~.switch-handle {
    left: 20px;
}

.fieldCondition .condition {
    display: -webkit-flex;
    display: flex;
    vertical-align: bottom;
}

.fieldSwitch {
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.fieldSwitch .enabledSwitch {
    height: 68px;
}

.fieldSwitch .moveIcon {
    display: flex;
    padding-bottom: 10px;
    bottom: 0px;
    flex: auto;
    align-items: self-end;
    flex-direction: column;
    justify-content: flex-end;
}

.moveIcon .fa-solid:first-child {
    padding-bottom: 5px;
}

.moveIcon .fa-solid {
    cursor: pointer;
}

.fieldCondition:not(.conditionTemplate):nth-child(2) .moveIcon .js-moveUp {
    display: none;
}

.fieldCondition:not(.conditionTemplate):last-child .moveIcon .js-moveDown {
    display: none;
}

.js-ConditionAndOr div:nth-child(5) input:not(.js-number):not(.js-numberMin):not(.js-numberMax),
.js-ConditionIf div:nth-child(5) input:not(.js-number):not(.js-numberMin):not(.js-numberMax) {
    width: 190px;
}

.fieldSetup {
    display: -webkit-flex;
    display: flex;
    flex: 1 1 0px;
    flex-direction: column;
    border: 1px solid #CFCECE;
    background: white;
}

.fieldSetup.fieldSetup .js-fieldConditionLine,
.fieldSetup .fieldConditionAction {
    flex: 1 1 0px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.fieldSetup .js-fieldConditionLine:not(:first-child) {
    border-top: 1px dashed #CFCECE;
}

.fieldSetup.fieldSetup .js-fieldConditionLine>div,
.fieldSetup .fieldConditionAction>div {
    padding: 10px;
}

.fieldSetup .fieldConditionAction {
    background: #EBFFF1;
    border-top: 1px solid #CFCECE;
}

.fieldCondition:not(:last-child) {
    margin-bottom: 20px;
}

.fieldCondition.conditionTemplate,
.js-fieldConditionLine.conditionTemplate {
    display: none;
}

.fieldConditionAction .js-ActionFieldDiv .select2-container {
    width: 512px !important;
}

.fieldSetup .js-multiDropdown .select2-selection--multiple .select2-search,
.fieldConditionAction .js-ActionFieldDiv .select2-selection--multiple .select2-search {
    position: fixed;
    top: -9999px;
    left: 0px;
}

,
.fieldSetup .js-multiDropdown .select2-selection--multiple .select2-search__field,
.fieldConditionAction .js-ActionFieldDiv .select2-selection--multiple .select2-search__field {
    color: transparent;
    resize: none;
}

.js-AndOrFieldDiv .select2-container,
.js-ConditionalOperatorsDiv .select2-container {
    min-width: unset;
}

#conditionList .fieldCondition .fieldSetup {
    transition: opacity 0.5s;
}

#conditionList .fieldCondition:not(:has(input:checked)) .fieldSetup {
    opacity: 50%;
}

.flexColumn {
    flex-direction: column;
}

.alignItemsCenter {
    align-items: center;
}

.fieldSetup .js-ConditionIf .js-AndOrFieldDiv {
    display: none;
}

.fieldSetup .js-ConditionAndOr .js-IfFieldDiv {
    display: none;
}

.js-multiDate label {
    width: 38px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 21px;
    vertical-align: middle;
}

.inLineContainer {
    container-type: inline-size;
}

.filterRow {
    grid-gap: 10px;
}

.noHorizonalOverflow {
    overflow-x: hidden !important;
}

conflictMessage {
    color: var(--status-value-red);
}

.warningMessage {
    color: var(--status-value-orange);
}

/* column actions drop down styling*/

.actionsDropdownWrapper {
    position: relative;
    display: inline-block;
}

.actionsDropDownButton {
    white-space: nowrap;
    font-family: var(--global-font-family);
    margin-left: 10px;
}

/* Dropdown Content (Hidden by Default) */

.actionsDropdownContent {
    display: none;
    position: absolute;
    background: var(--global-extralight-grey);
    min-width: 160px;
    z-index: 1000;
}

.actionsDropdownContent.dropDownLink {
    top: 20px;
}

.actionsDropdownContent.rightAlignDropdown {
    right: 0;
    left: unset;
}

.actionsDropdownContent.bottomAlignDropdown {
    left: 0;
    bottom: 35px;
    top: unset;
}

.actionsDropdownContent.whiteMenu {
    background: white;
    padding: 0 20px 20px 20px;
    border: var(--global-background) solid 1px;
    border-radius: 5px;
}

/* Links inside the dropdown */

.actionsDropdownContent a {
    color: var(--school-primary-color);
    padding: 6px 8px;
    text-decoration: underline;
    display: block;
}

/* Show the dropdown menu (use JS to add this class to the .actionsDropdownContent container when the user clicks on the dropdown button) */

.showActionsDropDown {
    display: block;
    left: 5px;
    top: 35px;
}

.showKeyDropDown {
    display: block;
    left: 5px;
    top: 25px;
}

.showKeyDropdownContent {
    width: 280px;
    background-color: #fff;
    border: 1px solid var(--global-border-grey);
}

.showKeyLabel:hover {
    text-decoration: underline;
    cursor: pointer;
}

div .thumbnail {
    position: relative;
    display: inline;
    padding: 3px;
}

div.thumbnail.hiddenThumbnail {
    display: none;
}

div.thumbnail i {
    position: absolute;
    bottom: 10px;
    right: 5px;
    color: white;
    background: black;
    padding: 2px;
}

.dayBookGridHolderCurrent .daybookMedia_Thumbnails img,
.daybookMedia_Thumbnails img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.daybookMedia_Main img,
.dayBookGridHolderCurrent .daybookMedia_Main img {
    max-width: 80%;
    width: unset;
}

.fieldHighlight {
    color: var(--school-primary-color);
    padding: 0px !important;
    text-decoration: underline;
}

.daybookFieldList {
    margin-top: 0px;
}

.inline {
    display: inline;
}

body.navOpen .fixedButtonBar,
body.navOpen .fixedButtonBarWhite {
    left: 321px;
}

body.navMin .fixedButtonBar,
body.navMin .fixedButtonBarWhite {
    left: 65px;
}

body.mobile .fixedButtonBar,
body.mobile .fixedButtonBarWhite {
    left: 15px;
}

/*.meetingIcons {
    font-size: 23px;
    padding: 2px;
    text-align: center;
    width: 33px;
    margin: 2px 10px;
}

.meetingIcons.off {
    background: lightcoral;
    border-radius: 20px;
    color: white;
}*/

/*#mtg-timing {
    flex-wrap: wrap;
    flex-direction: column;
}*/

/*#mtg-timing #localVideo {
    width: 200px;
    max-width: 80%;
}*/

/*#mtg-wrapper #remoteVideos video {
    height: 400px;
    max-height: 50vh;
    flex: 0 0 200px;
}

#mtg-wrapper #remoteVideos {
    display: flex;
    flex-wrap: wrap;
}

#mtg-timing #active-mtg-timer {
    order: 2;
}

#mtg-timing .mtg-header-info {
    order: 3;
}*/

/*#mtg-timing #localVideo {
    order: 4;
}*/

/*#remoteVideos {
    position: relative;
}*/

.readonly .js-mediaUploadShown {
    display: none;
}

.innerFilter,
.groupRow {
    background-color: var(--school-primary-color-lighter4);
}

.noBorderOrBackground {
    background: unset;
    border: unset;
}

.buttonsContainer {
    display: flex;
    display: -webkit-flex;
    flex-direction: row !important;
    justify-content: right;
    text-align: right;
    flex: 1 1 100px;
}

.buttonsContainer div {
    padding: 0px 5px;
}

.innerFilter:not(.collapse-toolbar) {
    padding-bottom: 10px;
}

.filterLine div {
    display: flex;
    align-items: center;
}

.filterLine {
    padding: 5px;
}

.filterLine .js-WhenField .select2-container {
    min-width: unset;
}

.filterLine:not(:nth-child(1)) .js-WhenField .js-Field {
    padding-left: 10px;
}

.filterFlexRow3Col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.noGridRows {
    grid-template-rows: unset !important;
}

.noRowGap {
    grid-row-gap: unset !important;
}

.filterLine .advancedFilterField:first-child label,
.filterLine .advancedFilterField:first-child .filterAndOr select:nth-child(1),
.filterLine .advancedFilterField:first-child .filterAndOr .select2-container {
    width: 80px !important;
    text-align: left !important;
}

.filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
.filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
    width: 300px !important;
}

.filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
.filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
    width: 300px !important;
}

.filterLine .advancedFilterField:nth-child(2) select,
.filterLine .advancedFilterField:nth-child(2) .select2-container {
    width: 395px !important;
}

.filterLine .advancedFilterField:nth-child(3) select,
.filterLine .advancedFilterField:nth-child(3) .select2-container {
    width: 350px !important;
}

.filterLine .advancedFilterField:nth-child(3) .js-textOptions input {
    width: 341px !important;
    min-width: 341px;
}

.filterLine:not(:first-child) .filterWhenLabel,
.filterLine:first-child .filterAndOr {
    display: none;
}

.filterLine:first-child .filterWhenLabel,
.filterLine:not(:first-child) .filterAndOr {
    display: unset;
}

.filterLine.filterLineTemplate {
    display: none;
}

.select2-container .selection .select2-selection--multiple {
    height: unset
}

.select2-container .selection .select2-search--inline {
    display: none;
}

.daybookFieldGridContainer .RadUpload .ruFileLI .ruButton.ruRemove::before {
    display: none;
}

.daybookFieldGridContainer .daybook-edit-mode-row .fa.fa-trash.file-download-trash {
    color: black;
}

.select2-checkbox {
    pointer-events: none;
}

#staffTTContainer .timetable.weeklyTT table td:not(.Daily).timed.hovered,
#staffTTContainer .timetable.weeklyTT table td.Daily.timed:hover .ttContainer .uploaderWithControl {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.uploaderWithControl .RadUpload .ruInputs li {
    margin-bottom: 0px
}

.js-mobileLogoUploader span {
    width: 60px;
}

.nowTimed,
.nowAgenda,
#staffTTContainer table .now {
    border-style: solid solid !important;
}

.agenda {
    background: white;
}

.fixedTableLayout {
    table-layout: fixed !important;
}

#staffTTContainer .timetable.weeklyTT table:has(td.timed) {
    margin-bottom: 5px;
}

#staffTTContainer .timetable.weeklyTT table td.timed,
#staffTTContainer .timetable.weeklyTT table td.agenda {
    transition: width 1s ease-in-out;
}

#staffTTContainer .timetable.weeklyTT table td:not(.Daily).timed.hovered,
#staffTTContainer .timetable.weeklyTT table td.timed:not(.js-noResize):hover {
    width: 300px !important;
}

#staffTTContainer .timetable.weeklyTT table td.timed {
    width: 220px;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttTime {
    width: 40px;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttIcons,
.tempClass .ttIcons {
    height: 20px;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent {
    width: 140px;
}

.ttContainer>div {
    flex: 1 1 200px;
}

.timetable table .subjectGraphic {
    margin-top: -10px;
}

.tempClass .subjectGraphic,
#staffTTContainer .timetable.weeklyTT table td.timed:not(.js-noResize):hover .subjectGraphic {
    display: none !important;
}

.pupilTTContainer table th.break.timed {
    width: 30px !important;
}

.timetable:has(td.overrideWidth) tr:first-child th {
    border-color: transparent;
    color: transparent;
    font-size: 0px;
}

.timed.ttCard .ttExpand {
    transition: width 1s ease;
    width: 0px;
}

/*.agenda.ttCard:not(.Daily) {*/

tr:has(td.agenda) {
    transition: height 1s ease;
    height: 75px;
}

.agenda.ttCard:not(.Daily) .ttContainer {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
}

tr:has(td.agenda):hover {
    height: 150px;
}

.timetable .ttCard,
.timetable .break {
    max-width: 400px;
}

.ttCard.agenda:hover .ttRightBtns,
.ttCard.timed:hover .ttRightBtns,
.ttCard.agenda .ttContainer:hover .ttRightBtns,
.ttCard.timed .ttContainer:hover .ttRightBtns {
    opacity: 1;
    display: flex !important;
    align-items: center;
    align-content: center;
    flex-direction: row;
}

#staffTTContainer .timetable.weeklyTT table:has(td.agenda) .ttRightBtns {
    height: 0px;
    display: -webkit-flex;
    display: flex;
    transition: all 1s ease;
    align-content: flex-start;
    align-items: flex-start;
}

#staffTTContainer .timetable.weeklyTT table:has(td.agenda) td:hover .ttRightBtns {
    height: 100px;
}

#staffTTContainer table:has(th.agenda) {
    table-layout: fixed !important;
    border-collapse: collapse;
}

#staffTTContainer table:not(:has(th.agenda)):hover {
    /*table-layout: unset !important;*/
}

#staffTTContainer table:not(:has(th.agenda)) {
    table-layout: fixed !important;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttTime,
.tempClass .ttTime {
    flex: 0 0 40px;
    width: calc(100% - 20px);
    border-bottom: black 1px solid;
    text-align: center !important;
}

.timetable .agenda .ttClassLink {
    display: grid;
}

.timetable .agenda .ttClassLink span,
.timetable .agenda .ttContent>span .timetable .agenda span.ttLessonText {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

#staffTTContainer .timetable.weeklyTT {
    display: block !important;
}

#staffTTContainer .timetable.weeklyTT table:has(td.timed):not(:has(td.Daily)) {
    table-layout: fixed !important;
}

#staffTTContainer .timetable.weeklyTT table:has(td.timed):not(:has(td.Daily)) th {
    transition: all 1s ease-in-out 0s;
}

#staffTTContainer .timetable.weeklyTT table:has(td.timed):not(:has(td.Daily)):hover {
    /*table-layout: unset !important;*/
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttTime br:first-child,
.tempClass .ttTime br:first-child {
    content: "";
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttTime br:first-child:after,
.tempClass .ttTime br:first-child:after {
    content: " - ";
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttIcons,
.tempClass .ttIcons {
    flex: 0 0 40px;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent,
.tempClass .ttContent {
    flex: 1 0 40px;
    text-align: center;
    width: 100%;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent,
.tempClass .ttContent span {
    text-align: center !important;
}

.timetable table th.break.timed {
    width: 30px !important;
}

#staffTTContainer .timetable.weeklyTT table td.timed {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ttIcon span {
    text-align: left !important;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttTime,
.tempClass .ttTime {
    /*padding-top: 8px;*/
    padding-bottom: 8px;
    padding-left: 0px;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
    order: 1;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttIcons,
.tempClass .ttIcons {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    left: 0px;
    padding-top: 5px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent,
.tempClass .ttContent {
    order: 2;
    overflow: hidden;
}

.tempClass .ttIcons {
    flex-wrap: nowrap !important;
    overflow: hidden;
}

.tempClass .ttIcons .ttRightBtns {
    display: flex;
    display: -webkit-flex;
    overflow: hidden;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent,
.tempClass .ttContent {
    order: 2;
    overflow: hidden;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent span {
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

#staffTTContainer .timetable.weeklyTT table td.timed .ttContent {
    min-height: 80px;
    align-items: center;
    /*   display: flex;
    display: -webkit-flex;*/
}

#staffTTContainer .timetable th,
#staffTTContainer .timetable span {
    background-color: unset;
    align-items: center;
}

#staffTTContainer table td.break.timed,
#staffTTContainer table th.break.timed,
#staffTTContainer table td.break.agenda,
#staffTTContainer table th.break.agenda {
    background: none;
    border: 1px dashed #eae4e4 !important;
}

#staffTTContainer .timetable.weeklyTT table td.timed.manualBooking {
    border-bottom: blue 5px solid !important;
    border-left: blue 5px solid !important;
    border-top: 1px solid #eae4e4 !important;
    border-right: 1px solid #eae4e4 !important;
}

.smallSlider .switch-input:checked~.switch-handle {
    left: 35px;
}

.smallSlider .switch-label {
    width: 50px;
}

.smallSlider .switch {
    width: 55px;
    min-width: 55px;
}

#staffTTContainer th.agenda {
    width: 15%;
    min-width: 200px;
    border-color: var(--global-mid-grey) !important;
}

#staffTTContainer td.agenda .ttTime {
    padding-left: 5px;
    padding-right: 15px;
}

#staffTTContainer td.agenda .ttContent {
    flex: 1 0 50px;
    display: flex;
    align-items: center;
}

#staffTTContainer td.agenda .ttIcons {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-right: 10px;
}

#staffTTContainer table:has(td.agenda) td:not(.agenda) {
    border: none !important;
}

#staffTTContainer td.agenda .ttRightBtns {
    flex-direction: column;
}

#staffTTContainer td.agenda .ttIcons a,
#staffTTContainer td.agenda .ttIcons i {
    padding: 5px 0px;
}

.mobileSearch {
    display: none;
}

#homeScreenTimeTable:has(table .agenda) #btnNextDay,
#homeScreenTimeTable:has(table .agenda) #btnPreviousDay {
    display: none !important;
}

#homeScreenTimeTable:has(table .timed) div#staffTTContent {
    width: calc(100% - 45px);
}

#homeScreenTimeTable:has(table .agenda) div#staffTTContent {
    width: unset !important;
}

#divWeekDisplay {
    display: flex;
    align-items: center;
    padding: 5px !important;
    right: 26px;
    float: right;
    position: relative;
}

.rsAgendaRow * {
    text-align: left !important;
}

.showForMobile {
    display: none !important;
}

.collapsibleFilterLabel {
    /*height: 10px;*/
    width: 50px;
    /* give user slightly bigger click area */
    display: block;
    margin: 5px;
}

/*wd EM-993 EM-999*/

.activityFilter .collapsibleFilterCheckboxContainer {
    position: absolute;
    top: 0px;
    right: 0px;
}

.collapsibleFilterCheckboxContainer {
    padding: 5px;
    padding-right: 10px;
}

.collapsibleFilterCheckboxContainer:has(input:checked) .collapsibleFilterLabel {
    background-image: url(../images/StyleGuide/chevronUpBlack.svg);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
}

.collapsibleFilterCheckboxContainer:has(input:not(:checked)) .collapsibleFilterLabel {
    background-image: url(../images/StyleGuide/chevronDownBlack.svg);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    top: 5px;
}

.collapsibleFilterContainer:has(>.collapsibleFilterCheckboxContainer input.checkboxHideFilter:not(:checked)) .collapsibleFilterExpandedContent {
    display: none;
}

.collapsibleFilterContainer:has(>.collapsibleFilterCheckboxContainer input.checkboxHideFilter:checked) .collapsibleFilterCollapsedContent {
    display: none;
}

.collapsibleFilterCollapsedContent {
    padding: 10px;
}

.checkBoxHideFilter {
    padding: 15px;
}

.collapsibleFilterCheckboxContainer input {
    display: none;
}

.collapsibleFilterContainer:has(input.checkboxHideFilter:not(:checked)) {
    background-color: var(--school-primary-color-lighter3);
    border-radius: var(--global-border-radius);
}

.timetableSelectionGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

div.tempClass {
    transition: width 1s ease-in-out;
    padding-top: 10px;
}

table:has(.agenda) tr:first-child {
    position: sticky !important;
    top: 0px;
    z-index: 999;
    background: white;
}

.roundIcon {
    background: white;
    height: 13px;
    padding: 5px;
    border-radius: 20px;
}

.mobileOptionsContainer .screenCover {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    z-index: 1009;
    display: none;
    background: var(--global-greyed-out);
}

.mobileOptionsContainer.open .screenCover {
    display: unset;
}

.mobileOptionsContainer .mobileOptions {
    position: absolute;
    left: 0px;
    bottom: -50%;
    right: 0px;
    z-index: 1010;
    background: white;
    transition: bottom 1s ease-in-out;
}

.mobileOptionsContainer.open .mobileOptions {
    bottom: 0px;
}

.padding520 {
    padding: 5px 20px;
}

.mobileOptions .select2-container--default .select2-selection--single {
    overflow: hidden;
}

.select2width100pc .select2-container {
    width: 100% !important;
}

.gridButton {
    padding: 5px;
    border-radius: var(--global-border-radius);
    width: 20px;
    display: inline-block;
}

.gridButton,
.gridButton i {
    color: white;
}

.copyButton {
    background: #FF7A00;
}

.copyButton:hover {
    background: #ffa552;
}

.resetButton:hover {
    background: #36c760;
}

.resetButton {
    background: #109C39;
}

.backgroundColour {
    background: var(--global-background);
}

table.dailyAttendance.dataTableSplitRows {
    border-collapse: separate;
    border-spacing: 0px 5px;
}

table.dataTableSplitRows {
    background-color: unset;
}

table.dataTableSplitRows tr {
    background-color: white;
}

table.attendanceTable.weekattendance tr:not(.stickyTopRow) {
    border-top-width: 5px !important;
}

table.dataTableSplitRows tr.stickyTopRow,
table.dataTableSplitRows tr.stickyTopRow td,
table.dataTableSplitRows tr.stickyTopRow th {
    background: var(--global-background);
}

table.dataTableSplitRows tr.marksheetFooter {
    background-color: var(--global-panel-grey) !important;
}

.additionalInfo {
    display: flex;
    flex-direction: column;
}

.pupilGridPhoto {
    width: 40px !important;
    height: 55px !important;
    margin-top: 3px;
    border-radius: var(--global-border-radius);
    display: inline;
}

.attendanceGridPupilContents {
    padding: 5px;
    white-space: normal !important;
}

.photoGridContainer {
    padding: 5px;
}

.attendanceGridContents {
    display: flex;
    display: -webkit-flex;
}

.attendanceTable td:has(.unsavedValue) {
    background: var(--status-inprogress-background);
}

.copyAttendanceModal {
    background: #fff;
    border: 1px solid var(--status-value-orange);
    border-radius: var(--global-border-radius);
    position: fixed;
    z-index: 1001;
}

.copyAttendanceModal .header {
    background: var(--status-value-orange);
    color: white;
    padding: 10px 15px;
}

.copyAttendanceModal .option {
    padding: 10px;
}

.copyAttendanceModal .option:hover {
    background: var(--status-inprogress-background);
}

.jointButtonLeft {
    width: 20px;
    display: inline-block;
    color: white !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: var(--global-border-radius);
    border-bottom-left-radius: var(--global-border-radius);
    text-decoration: none !important;
}

.jointButtonRight {
    width: 5px;
    background-color: white;
    display: inline-block;
    border-top-right-radius: var(--global-border-radius);
    border-bottom-right-radius: var(--global-border-radius);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid gainsboro;
    text-decoration: none !important;
}

.jointButtonRight i {
    color: black;
}

.fixedModal {
    position: fixed;
    display: none;
    z-index: 1001;
    background: white;
    border: 1px solid gainsboro;
    border-radius: var(--global-border-radius);
    padding: 10px;
    max-height: 50vh;
    overflow: auto;
}

.fixedModal.fullScreen {
    top: 0px;
    bottom: 60px;
    left: 0px;
    right: 0px;
    max-height: 100dvh;
    overflow: auto;
}

.fixedModal.fullScreen.completeHeight {
    bottom: 0px;
}

.fixedModal.halfScreen {
    top: 50dvh;
    bottom: 60px;
    left: 0px;
    right: 0px;
    max-height: 100dvh;
    overflow: auto;
}

.fixedModal.dynamicHeight {
    bottom: 60px;
    left: 0px;
    right: 0px;
    max-height: 100dvh;
    overflow: auto;
    background: #f7f4f4;
}

.hoverBackground:hover {
    background-color: var(--school-primary-color-lighter4);
}

.filterSearchReset {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.textLeftAlign {
    text-align: left;
}

.boldText {
    font-weight: bold;
}

.textEllipsisOverflow {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.minMaxWidth100 {
    min-width: 100px !important;
    max-width: 100px !important;
}

.minMaxWidth200 {
    min-width: 200px !important;
    max-width: 200px !important;
}

.maxWidth200 {
    max-width: 200px !important;
}

.font25 {
    font-size: 25px !important;
}

.attendancePanelDiv tr:has(input[name*=hdnIgnorePupilChanges][value=true]) {
    border-left: 5px var(--status-value-red) solid;
}

.attendancePanelDiv tr:has(input[name*=hdnIgnorePupilChanges]:not([value=true])) {
    border-left: 5px white solid;
}

.attendancePanelDiv tr:has(input[name*=hdnIgnorePupilChanges][value=true]) textarea {
    pointer-events: none;
    background: #F6F6F6;
}

.attendancePanelDiv tr textarea {
    margin: 5px 5px 2px 5px;
}

.attendancePanelDiv tr .ignoreButton {
    color: var(--status-value-orange) !important;
    transition: opacity 0.5s ease-in-out;
}

.attendancePanelDiv tr .addButton {
    color: var(--status-value-green) !important;
    transition: opacity 0.5s ease-in-out;
}

.attendancePanelDiv tr .ignoreButton:hover,
.attendancePanelDiv tr .addButton:hover {
    cursor: pointer;
    opacity: 0.5;
}

.attendancePanelDiv tr:has(input[name*=hdnIgnorePupilChanges][value=true]) .ignoreButton {
    display: none;
}

.attendancePanelDiv tr:has(input[name*=hdnIgnorePupilChanges]:not([value=true])) .addButton {
    display: none;
}

body:has(#session-wrapper .student) .hideWhenData,
body:has(.js-filterchanged-message:not([style*="display: none"])) .hideWhenData {
    display: none !important;
}

.batchUpdateContent .attendancePanelDiv table th:nth-child(6) {
    min-width: 120px;
}

.batchUpdateContent .attendancePanelDiv {
    overflow: auto;
}

.attendanceTable.datatable:not(.noTrHeight) tr:not(.rcbReadOnly) {
    height: 55px !important;
}

#contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
    max-height: calc(100vh - 355px) !important;
}

body:has(.attendanceTable) .select2-container--default .select2-results>.select2-results__options {
    max-height: 300px;
}

.attendance-mobile-view .session {
    display: block;
    overflow-y: auto;
}

.attendance-mobile-view:not(.expanded) .session {
    max-height: calc(100vh - 235px);
}

#session-wrapper .session header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--global-background);
}

body:not(:has(.attendanceTable)) .ignoreButton {
    display: none !important;
}

fieldset {
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    margin: 0px;
    transition: padding 2s ease-in-out;
    padding: 0px 10px 5px 10px !important;
}

fieldset input {
    border: 0px !important;
    height: 19px !important;
    width: 100% !important;
}

fieldset select,
fieldset .select2-container--flat .select2-selection--single,
fieldset .select2-container {
    width: 100%;
    border: 0px !important;
}

fieldset legend {
    color: var(--global-font-colour-grey);
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

fieldset legend.legendNoValue {
    padding: 0px;
}

fieldset:not(.fieldsetHasNoValue) legend.legendNoValue {
    display: none;
}

fieldset.fieldsetHasNoValue legend.legendHasValue {
    display: none;
}

fieldset.fieldsetHasNoValue .js-showPassword {
    display: none;
}

fieldset input:focus-visible {
    outline: 0px;
}

fieldset:not(.fieldsetHasNoValue) {
    padding: 0px 10px 5px 10px !important;
}

fieldset.fieldsetHasNoValue {
    padding: 0px 10px 5px 10px !important;
}

.loginImg {
    padding-bottom: 20px !important;
}

.columnWidget .contentContainer,
.columnWidget .notices {
    margin-bottom: 0px !important;
}

.js-login-language>div.RadComboBox {
    height: 39px;
    align-content: center;
}

.js-login-language .RadComboBox_StyleFilter .rcbInput {
    font-family: var(--global-font-family) !important;
    font-size: var(--font-size) !important;
}

.RadScheduler .rsAgendaView .rsDateBox strong {
    margin-left: -39px !important;
}

.sectionLoader {
    position: absolute;
    top: 0px;
    background: lightgrey;
    bottom: 0px;
    float: left;
    height: 100%;
    z-index: 999999;
    left: 0px;
    right: 0pc;
    opacity: 0.3;
    align-content: center;
    min-height: 100px;
    text-align: center;
}

.viewWidthSplit3 {
    width: calc(100vw / 3);
}

.actionMenu.containerClosed .actionHeader .actionHeaderIcon div::before {
    content: "\f078" !important;
}

.actionMenu:not(.containerClosed) .actionHeader .actionHeaderIcon div::before {
    content: "\f077" !important;
}

.dataTableUnselectedSubmitDisable:not(:has(input:checked)) input[type="submit"] {
    background: var(--global-greyed-out) !important;
    cursor: not-allowed;
    pointer-events: none;
}

.maxHeightMinus180 {
    max-height: calc(100vh - 180px);
    overflow: auto;
}

.portalModalMessages:empty {
    display: none;
}

.js-navContent.mainNavigation>li.js-PupilNav ul {
    background: white;
}

.js-navContent.mainNavigation>li.js-PupilNav>a .navItem {
    color: var(--school-primary-color) !important;
}

.js-navContent.mainNavigation>li.js-PupilNav>a .navItem:first-child {
    width: 0px;
}

.js-navContent.mainNavigation li.js-PupilNav {
    display: grid;
}

.js-navContent.mainNavigation>li.js-PupilNav>a .navItem.navItem10Percent.js-PupilNav {
    width: 20%;
}

.js-navContent.mainNavigation .navItem:first-child {
    width: 10px;
}

.js-navContent.mainNavigation li.active {
    background: white;
}

.fs-label-wrap.height36,
.fsHeight36 .fs-label-wrap {
    height: 36px;
    align-content: center;
}

.searchContainer {
    border: none !important;
    padding: 0px !important;
    width: 100% !important;
    top: 0;
    background: white !important;
    z-index: 1;
    position: sticky;
    padding-bottom: 5px !important;
}

.searchContainer input {
    width: 100% !important;
    margin: 0px !important;
    margin-right: 5px !important;
    margin-left: 5px !important;
}

.height28 {
    height: 28px !important;
}

.underlined {
    text-decoration: underline;
}

.underlinedPrimary {
    text-decoration-color: var(--school-primary-color);
}

th.underlinedPrimaryAndColour>div>div {
    text-decoration-color: var(--school-primary-color);
    text-decoration: underline;
    color: var(--school-primary-color) !important;
}

.inheritColour {
    color: inherit;
}

#dayBookNames ul {
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

.daybookTemplates {
    max-height: calc(100dvh - 185px);
    overflow-y: auto;
    overflow-x: hidden;
}

.inlineBlock {
    display: inline-block;
}

.activitySlot.noActivities .time {
    text-decoration: line-through;
}

.activitySlot.noActivities {
    border-left-color: grey;
}

.activitySlot.inBooking.inBooking.disableActivity.noActivities span:not(:first-child) {
    display: none !important;
}

.wordWrap {
    text-wrap: auto;
    word-break: break-word;
}

.daybookEditEntry tr.daybookDateTime>td {
    display: flex;
    display: -webkit-flex;
}

.daybookEditEntry tr.daybookDateTime .RadInput .riTextBox {
    height: 36px !important;
}

tr.daybookAppointmentField:has(.js-cbAppointment input:checked) .js-appointmentBtn {
    display: block !important;
}

.expandedRowDiv {
    border: 2px var(--school-primary-color-lighter2) dashed;
    background: var(--school-primary-color-lighter4);
}

.bolder {
    font-weight: bolder;
}

.myPupilsContents .gridWrapper {
    overflow: auto;
    max-height: calc(100dvh - 75px);
}

.myPupilsContents .gridWrapper table>tbody>tr:first-child {
    position: sticky;
    top: 0px;
    z-index: 999;
}

.myPupilsContents .gridWrapper .gridFooter {
    position: sticky;
    bottom: 0px;
    background: white;
    z-index: 999;
}

.js-columnChoices img {
    display: none;
}

.blur {
    filter: blur(5px);
}

div#homeScreenTimeTable div.timetable {
    max-height: calc(90dvh - 200px);
}

.stepContainer {
    background: white;
    padding: 20px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

.stepSubHeader {
    width: 100%;
    justify-self: center;
    border-bottom: solid var(--global-light-grey) 1px;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.stepHeader img {
    max-height: 80px;
    padding: 0 40px 0 40px;
}

.stepContent {
    overflow: auto;
    max-height: 430px;
    width: 100%;
}

.stepHeader {
    align-self: start;
}

.step {
    display: -webkit-flex;
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.step div:last-child {
    align-self: end;
}

.passwordHint {
    border-top: var(--school-primary-color) solid 1px;
    margin: 10px 0;
    border-bottom: var(--school-primary-color) solid 1px;
    padding: 10px 0;
}

.passwordHint>div {
    font-weight: bolder;
    margin-bottom: 10px;
}

.passwordHint span>div {
    margin-left: 40px;
}

.passwordHint span>div:before {
    content: "• ";
    margin-left: -8px;
}

@container ((min-width: 0px) and (max-width: 985px)) {
    .timetableSelectionGrid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    table#dayBook tr {
        display: table-row;
        background: white;
    }
    table#dayBook>tbody>tr>td {
        display: block;
    }
    table#dayBook tr table tr {
        width: auto;
    }
    table#dayBook tr td.daybookPupilSection {
        width: auto;
    }
    table#dayBook tr .notifiedContactsTable td {
        display: table-cell !important;
    }
    table#dayBook tr td.daybookPupilSection #dayBookNames {
        width: auto !important;
    }
    table#dayBook tr td.daybookPupilSection #dayBookNames ul li {
        width: calc(100% - 25px);
    }
    table#dayBook tr td.daybookPupilSection #dayBookNames ul li span {}
    #dayBookNames ul li input.dayBookEntity,
    #dayBookNames ul li a.dayBookEntity {
        width: calc(100% - 10px) !important
    }
    #dayBookNames>ul {
        max-height: 40vh;
        overflow: auto;
    }
    .dayBookItemActions a {
        padding: 10px;
    }
    .dayBookItemActions {
        display: flex;
        flex-wrap: wrap;
        width: 70px;
    }
    .hideContainer985 {
        display: none;
    }
}

@container ((min-width: 0px) and (max-width: 639px)) {
    .filterRow {
        grid-template-columns: repeat(1, var(--filter-width));
    }
    .filterRow .userFilterControl:nth-child(1n+1) label {
        text-align: left;
    }
    .pupilMainContent .pointsContent {
        display: none;
    }
}

@container ((min-width: 0px) and (max-width: 700px)) {
    .pupilMainContent .pointsContent {
        display: none;
    }
}

@container ((min-width: 640px) and (max-width: 959px)) {
    .filterRow {
        grid-template-columns: repeat(2, var(--filter-width));
    }
    .filterRow .userFilterControl:nth-child(2n+1) label {
        text-align: left;
    }
}

@container ((min-width: 960px) and (max-width: 1279px)) {
    .filterRow {
        grid-template-columns: repeat(3, var(--filter-width));
    }
    .filterRow .userFilterControl:nth-child(3n+1) label {
        text-align: left;
    }
}

select,
input {
    padding: 5px;
    border-radius: 5px;
}

@container (min-width: 1280px) {
    .filterRow {
        grid-template-columns: repeat(4, var(--filter-width));
    }
    .filterRow .userFilterControl:nth-child(4n+1) label {
        text-align: left;
    }
    .minMaxWidth25 {
        min-width: 25px !important;
        max-width: 25px !important;
    }
    .whiteSpaceNormal {
        white-space: normal;
    }
    /*    #mtg-timing {
        flex-wrap: wrap;
        flex-direction: unset;
    }

    #mtg-timing #localVideo {
        order: 1;
    }*/
}

@media only screen and (max-height: 1700px) {
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
        max-height: calc(50dvh);
    }
}

@media only screen and (max-height: 1200px) and (max-height: 1600px) {
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
        max-height: calc(50dvh);
    }
}

@media only screen and (max-height: 1000px) and (max-height: 1200px) {
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
        max-height: calc(50dvh);
    }
}

@media only screen and (max-height: 800px) and (max-height: 1000px) {
    .ui-tooltip-content:not(.pupilImgNonResponsive) {
        max-height: 500px;
        width: 100%;
    }
    .ui-tooltip:not(.pupilImgNonResponsive) {
        max-width: 100% !important;
    }
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
        max-height: calc(50dvh);
    }
}

@media only screen and (max-height: 600px) and (max-height: 800px) {
    .ui-tooltip-content:not(.pupilImgNonResponsive) {
        max-height: 400px;
        width: 100%;
    }
    .ui-tooltip:not(.pupilImgNonResponsive) {
        max-width: 100%;
    }
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
        max-height: calc(50dvh);
    }
}

@media only screen and (max-height: 400px) and (max-height: 600px) {
    .ui-tooltip-content:not(.pupilImgNonResponsive) {
        max-height: 200px;
        width: 100%;
    }
    .ui-tooltip:not(.pupilImgNonResponsive) {
        max-width: 100%;
    }
    .daybookMedia_Main img,
    .dayBookGridHolderCurrent .daybookMedia_Main img {
        max-width: calc(100dvw - 50px);
    }
}

@media only screen and (min-width: 1000px) {
    .inlineBlockScreenOnly {
        display: inline-block;
    }
    th.agenda {
        width: calc((100dvw / 6) - 25px) !important;
    }
}

@media only screen and (max-width: 1000px) {
    .flexMobile {
        display: flex;
        display: -webkit-flex;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1240px) {
    div .RadUpload .ruFakeInput {
        width: 150px !important;
    }
}

@media only screen and (min-width: 900px) and (max-width: 1000px) {
    div.RadUpload .ruFakeInput {
        width: 250px !important;
    }
    th.agenda {
        width: calc((100dvw / 2) - 30px) !important;
    }
}

@media only screen and (min-width: 800px) and (max-width: 900px) {
    div.RadUpload .ruFakeInput {
        width: 150px !important;
    }
    th.agenda {
        width: calc((100dvw / 2) - 30px) !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
    th.agenda {
        width: calc((100dvw / 2) - 30px) !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 800px) {
    div.RadUpload .ruFakeInput {
        width: 100px !important;
    }
    .filterFlexRowMin {
        grid-template-columns: repeat(1, var(--filter-width)) !important;
    }
    div.filterFlexRowMin div:nth-child(2n+2) label,
    div.filterFlexRowMin div:nth-child(2n+2) .labelSpan {
        text-align: left !important;
    }
}

/*#region filter dynamic layout nav bar in */

@media only screen and (max-width: 700px) {
    .actionMenuContainer.pupilDetailsActions {
        width: 100%;
        max-width: unset;
    }
    .flexEndAlignMobile {
        align-items: flex-end !important;
    }
}

@media only screen and (min-width: 1460px) {
    .filterFlexRowMin {
        grid-template-columns: repeat(4, var(--filter-width));
    }
    .filterFlexRowMin div:nth-child(4n+1) label,
    .filterFlexRowMin div:nth-child(4n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMin div:nth-child(4n+2) label .filterFlexRowMin div:nth-child(4n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin div:nth-child(4n+3) label .filterFlexRowMin div:nth-child(4n+3) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin div:nth-child(4n+4) label .filterFlexRowMin div:nth-child(4n+4) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin>.flexRight {
        grid-column: 4;
    }
}

@media only screen and (max-width: 1460px) {
    .filterFlexRowMin {
        grid-template-columns: repeat(3, var(--filter-width));
    }
    .filterFlexRowMin div:nth-child(3n+1) label,
    .filterFlexRowMin div:nth-child(3n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMin div:nth-child(3n+2) label,
    .filterFlexRowMin div:nth-child(3n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin div:nth-child(3n+3) label,
    .filterFlexRowMin div:nth-child(3n+3) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin>.flexRight {
        grid-column: 3;
    }
    .filterLine .advancedFilterField:first-child label,
    .filterLine .advancedFilterField:first-child .filterAndOr select:nth-child(1),
    .filterLine .advancedFilterField:first-child .filterAndOr .select2-container {
        width: 80px !important;
        text-align: left !important;
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
        width: 200px !important;
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
        width: 200px !important;
    }
    .filterLine .advancedFilterField:nth-child(2) select,
    .filterLine .advancedFilterField:nth-child(2) .select2-container {
        width: 285px !important;
    }
    .filterLine .advancedFilterField:nth-child(3) select,
    .filterLine .advancedFilterField:nth-child(3) .select2-container {
        width: 236px !important;
    }
    .filterLine .advancedFilterField:nth-child(3) .js-textOptions input {
        width: 228px !important;
        min-width: 228px;
    }
}

@media only screen and (max-width: 1140px) {
    .filterFlexRowMin {
        grid-template-columns: repeat(2, var(--filter-width));
    }
    .filterFlexRowMin div:nth-child(2n+1) label,
    .filterFlexRowMin div:nth-child(2n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMin div:nth-child(2n+2) label,
    .filterFlexRowMin div:nth-child(2n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMin>.flexRight {
        grid-column: 2;
    }
    /* nav expanded */
    .filterLine .advancedFilterField:first-child label,
    .filterLine .advancedFilterField:first-child .filterAndOr select:nth-child(1),
    .filterLine .advancedFilterField:first-child .filterAndOr .select2-container {
        width: 80px !important;
        text-align: left !important;
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
        width: 160px !important;
    }
    .filterLine:not(:first-child) .advancedFilterField:first-child> :not(.filterAndOr) .select2-container:nth-child(2) {
        width: 122px !important;
    }
    .filterLine:not(:nth-child(1)) .js-WhenField .js-Field {
        padding-left: 0px
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
        width: 300px !important;
    }
    .filterLine .advancedFilterField:nth-child(2) select,
    .filterLine .advancedFilterField:nth-child(2) .select2-container {
        width: 395px !important;
    }
    .filterLine .advancedFilterField .hideOnSmallerScreen {
        display: none
    }
    .filterLine .advancedFilterField:nth-child(3) select,
    .filterLine .advancedFilterField:nth-child(3) .select2-container {
        width: 175px !important;
        min-width: 175px;
    }
    .filterLine .advancedFilterField:nth-child(3) .js-textOptions input {
        width: 168px !important;
        min-width: 168px;
    }
    /* end*/
    .filterLine .select2-container {
        min-width: unset;
    }
    #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 410px) !important;
    }
}

@media only screen and (max-width: 765px) {
    .filterFlexRow3Col {
        grid-template-columns: 1fr !important;
    }
    .filterLine .advancedFilterField:first-child label,
    .filterLine .advancedFilterField:first-child .filterAndOr select:nth-child(1),
    .filterLine .advancedFilterField:first-child .filterAndOr .select2-container {
        width: 100% !important;
        text-align: left !important;
    }
    .filterLine .advancedFilterField .flexColumn label {
        text-align: left !important;
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
        width: 100% !important;
    }
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
    .filterLine .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
        width: 100% !important;
    }
    .filterLine .advancedFilterField:not(:first-child) select,
    .filterLine .advancedFilterField:not(:first-child) .select2-container {
        width: 100% !important;
    }
    .filterLine:not(:nth-child(1)) .js-WhenField .js-Field {
        padding: 0;
    }
    .filterLine div {
        flex-direction: column;
        align-items: baseline;
        width: 100%;
        margin: 1px 0 1px 0;
    }
    .filterLine .buttonsContainer div {
        width: unset;
    }
    .filterLine {
        margin-top: 30px;
        padding-left: 15px;
    }
    .filterLine .buttonsContainer {
        padding-top: 5px;
        justify-content: center;
        align-items: center;
        flex: unset;
    }
    .flipswitch {
        width: 82px;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum) div:nth-child(n+1) label,
    .filterFlexRowMin:not(.filter2ColumnsMinimum) div:nth-child(n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum)>.flexRight {
        grid-column: 1;
    }
    .pupilAttendanceTileHolder {
        flex: 1 1 360px !important;
    }
    .attendanceTileHolder {
        flex: 1 1 360px !important;
    }
    .portalTypeContainer {
        display: none !important;
    }
    .newsIconWrapper {
        display: none;
    }
    .flipswitch {
        display: flex;
        display: -webkit-flex;
        align-self: end;
        padding-bottom: 8px;
        padding-left: 5px;
    }
}

@media only screen and (max-width: 600px) {
    .fixedButtonBarPagePadding.fixedButtonBarPageDoubleMobile {
        margin-bottom: 80px !important;
    }
    .mobileFlexWrap {
        flex-wrap: wrap;
    }
    .noticeItem .icons {
        max-width: 45px;
        flex-wrap: wrap;
    }
    .noticeItem .icons div {
        padding: 2px;
    }
    .contentContainer {
        padding: 10px !important;
    }
    .grid400pxColumns {
        grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)) !important;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum),
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: repeat(1, var(--filter-width));
        grid-row-gap: 30px;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum) div:nth-child(n+1) label,
    .filterFlexRowMax:not(.filter2ColumnsMinimum) div:nth-child(n+1) label,
    .filterFlexRowMin:not(.filter2ColumnsMinimum) div:nth-child(n+1) .RadPicker,
    .filterFlexRowMax:not(.filter2ColumnsMinimum) div:nth-child(n+1) .RadPicker .filterFlexRowMin:not(.filter2ColumnsMinimum) div:nth-child(n+1) .labelSpan,
    .filterFlexRowMax:not(.filter2ColumnsMinimum) div:nth-child(n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum)>.flexRight,
    .filterFlexRowMax:not(.filter2ColumnsMinimum)>.flexRight {
        grid-column: 1;
    }
    .filterFlexRow:not(.filter2ColumnsMinimum)>.userFilterControl {
        display: grid;
        align-content: center;
        /*        padding-bottom: 10px;
*/
    }
    .filterFlexRow:not(.filter2ColumnsMinimum)>.marksheetPreferences {
        position: relative;
        padding-top: 30px;
        top: 20px;
        padding-left: 8px;
    }
    .filterFlexRow:not(.filter2ColumnsMinimum)>.flexRight {
        position: relative;
        top: 0px;
        justify-content: left;
        margin-right: auto;
        left: -59px;
    }
    .userFilterControl:not(.filter2ColumnsMinimum) label {
        margin-left: 0px !important;
    }
    .userFilterControl:not(.filter2ColumnsMinimum) .dateSearch {
        margin-top: 10px !important;
    }
    .userFilterControl:not(.filter2ColumnsMinimum) .labelSpan {
        margin-left: 5px !important;
    }
    .classSearchIcon {
        margin-top: 8px;
    }
    .marksheetCog {
        width: 18px;
        padding-top: 0px !important;
        top: 22px;
        margin-top: -15px;
        left: 192px;
        position: relative;
    }
    .topControls:not(.filter2ColumnsMinimum) div.control {
        padding-top: 0;
    }
    .userFilterpnlSchoolRow {
        padding-bottom: 34px;
    }
    .filterTextbox.fieldSearchIcon {
        margin-left: 5px;
    }
    .filterTextbox {
        position: relative;
        top: 0px;
    }
    .searchAndReset {
        margin-top: 12px;
    }
    .filterLineSpace {
        padding-top: 20px !important;
        height: 12px !important;
        /*        display: none;
*/
    }
    .buttonflexRowClassAttendance .flexRight {
        top: 12px;
    }
    .pupilsITeach input {
        margin-left: 10px;
    }
    .filterDateRangeSwitcher {
        margin-top: 32px;
    }
    .siblingDetails .buttonPrimary {
        text-align: center;
        justify-content: center;
        display: flex;
        display: -webkit-flex;
    }
    .actionMenu:not(.buttonContainer) {
        margin: unset;
    }
    .siblingDetails>div:nth-child(3) {
        margin-bottom: 0px !important;
    }
}

@media only screen and (max-width: 580px) {
    #addDaybookEntry input[type=submit] {
        display: block;
        margin-top: 10px;
        float: right;
    }
    .showClassHeadings {
        /*margin-top: 40px;*/
    }
    .news-ticker-itemwrapper {
        justify-content: center;
        flex-wrap: wrap;
    }
    .newsTickerOpen .news-ticker-contentContainer {
        height: 300px !important;
        padding-left: 10px;
    }
}

/*#endregion filter dynamic layout nav bar in */

/*#region filter dynamic layout nav bar out */

@media only screen and (min-width: 1730px) {
    .filterFlexRowMax {
        grid-template-columns: repeat(4, var(--filter-width));
    }
    .filterFlexRowMax div:nth-child(4n+1) label,
    .filterFlexRowMax div:nth-child(4n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMax div:nth-child(4n+2) label,
    .filterFlexRowMax div:nth-child(4n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax div:nth-child(4n+3) label,
    .filterFlexRowMax div:nth-child(4n+3) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax div:nth-child(4n+4) label,
    .filterFlexRowMax div:nth-child(4n+4) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax>.flexRight {
        grid-column: 4;
    }
}

@media only screen and (max-width: 1730px) {
    .filterFlexRowMax {
        grid-template-columns: repeat(3, var(--filter-width));
    }
    .filterFlexRowMax div:nth-child(3n+1) label,
    .filterFlexRowMax div:nth-child(3n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMax div:nth-child(3n+2) label,
    .filterFlexRowMax div:nth-child(3n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax div:nth-child(3n+3) label,
    .filterFlexRowMax div:nth-child(3n+3) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax>.flexRight {
        grid-column: 3;
    }
    /* nav expanded */
    .filterLine.filterFlexRowMax .advancedFilterField:first-child label,
    .filterLine.filterFlexRowMax .advancedFilterField:first-child .filterAndOr select:nth-child(1),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child .filterAndOr .select2-container {
        width: 80px !important;
        text-align: left !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
        width: 260px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
        width: 300px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(2) select,
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(2) .select2-container {
        width: 395px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) select,
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) .select2-container {
        width: 290px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) .js-textOptions input {
        width: 281px !important;
        min-width: 281px;
    }
    /* end*/
}

@media only screen and (max-width: 1400px) {
    .filterFlexRowMax {
        grid-template-columns: repeat(2, var(--filter-width));
    }
    .filterFlexRowMax div:nth-child(2n+1) label,
    .filterFlexRowMax div:nth-child(2n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMax div:nth-child(2n+2) label,
    .filterFlexRowMax div:nth-child(2n+2) .labelSpan {
        text-align: right !important;
    }
    .filterFlexRowMax>.flexRight {
        grid-column: 2;
    }
    .filterLine.filterFlexRowMax .advancedFilterField .hideOnSmallerScreen {
        display: none;
    }
    /* nav expanded */
    .filterLine.filterFlexRowMax .advancedFilterField:first-child label,
    .filterLine.filterFlexRowMax .advancedFilterField:first-child .filterAndOr select:nth-child(1),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child .filterAndOr .select2-container {
        width: 80px !important;
        text-align: left !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(2),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(2) {
        width: 160px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) select:nth-child(1),
    .filterLine.filterFlexRowMax .advancedFilterField:first-child>*:not(.filterAndOr) .select2-container:nth-child(1) {
        width: 300px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(2) select,
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(2) .select2-container {
        width: 395px !important;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) select,
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) .select2-container {
        width: 175px !important;
        min-width: 175px;
    }
    .filterLine.filterFlexRowMax .advancedFilterField:nth-child(3) .js-textOptions input {
        width: 166px !important;
        min-width: 166px;
    }
    body.navOpen #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 410px) !important;
    }
    body.navMin #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 360px) !important;
    }
    /* end*/
}

@media only screen and (max-width: 1500px) {
    .siblingContainer {
        flex-direction: column;
    }
    .siblingDetails,
    .actionMenuContainer:not(.pupilDetailsActions) {
        width: 100%;
        max-width: unset;
    }
}

@media only screen and (max-width: 1100px) and (min-width: 580px) {
    .filterFlexRowMax:not(.filter2ColumnsMinimum) div:nth-child(n+1) label,
    .filterFlexRowMax:not(.filter2ColumnsMinimum) div:nth-child(n+1) .labelSpan {
        text-align: left !important;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum)>.flexRight {
        grid-column: 1;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum) .buttonflexRow {
        margin-top: 0px !important;
    }
    body.navOpen #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 560px) !important;
    }
    body.navMin #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 410px) !important;
    }
}

/*#endregion filter dynamic layout nav bar out */

/* #region filterbar date picker */

.dateFilterSearch {
    margin-left: 5px;
    text-align: left;
}

.dateFilterSearch span .RadInput,
.dateFilterSearch span .riTextBox,
.dateFilterSearch span .RadInput .riTextBox,
.dateFilterSearch span .riTextBox .riHover,
.dateFilterSearch span .riTextBox .riFocused,
.dateFilterSearch span .riTextBox .riEmpty,
.dateFilterSearch span .riTextBox .riTextBox riEnabled {
    width: 181px !important;
}

.dateFilterSearch .datepickerInputWidth,
.dateFilterSearch .RadInputFocused,
.dateFilterSearch .RadInputFocused .riFocused {
    max-width: 181px !important;
    width: 181px;
    height: 28px !important;
}

.dateFilterSearch .RadInput .riTextBox {
    border-radius: var(--global-border-radius) !important;
    border: 1px solid var(--combo-border-color) !important;
    color: var(--global-dark) !important;
    font-family: var(--global-font-family) !important;
    height: 28px !important;
}

.rcMainTable td.rcSelected,
.RadCalendarMonthView td.rcSelected a {
    background: var(--school-primary-color-lighter3) !important;
    border: 1px solid var(--combo-border-color) !important;
    color: var(--global-dark) !important;
}

.rcMainTable td.rcSelected a {
    color: var(--global-dark) !important;
}

/* #endregion filterbar date picker */

/* #region Numeric Up Down Control */

.numericValueField {
    border-radius: var(--global-border-radius) !important;
    border: 1px solid var(--combo-border-color) !important;
    color: var(--global-dark) !important;
    font-family: var(--global-font-family) !important;
    height: 22px;
}

.nudArrowDown {}

.nubArrowUp {}

/* #endregion Numeric Up Down Control*/

/* #region Date Input Control */

.dateInput {
    margin-left: 5px;
}

.dateInput span .RadInput,
.dateInput span .riTextBox,
.dateInput span .RadInput .riTextBox,
.dateInput span .riTextBox .riHover,
.dateInput span .riTextBox .riFocused,
.dateInput span .riTextBox .riEmpty,
.dateInput span .riTextBox .riTextBox riEnabled,
.dateTextbox,
.timeTextbox {
    width: 80px !important;
    text-align: center;
}

.dateTextbox {
    height: 24px;
}

.htmlDate {
    width: 100px !important;
}

.timeTextbox {
    height: 26px;
    width: 62px !important;
    padding-left: 5px;
}

.dateInput .datepickerInputWidth,
.dateInput .RadInputFocused,
.dateInput .RadInputFocused .riFocused {
    max-width: 80px !important;
    width: 80px;
    height: 28px !important;
}

.dateInput .RadInput .riTextBox,
.RadTimePicker .riTextBox,
.dateTextbox,
.timeTextbox {
    border-radius: var(--global-border-radius) !important;
    border: 1px solid var(--combo-border-color) !important;
    color: var(--global-dark) !important;
    font-family: var(--global-font-family) !important;
}

.RadTimePicker .riTextBox {
    height: 28px !important;
    width: 60px;
    text-align: center;
}

.RadCalendarTimeView a:hover,
.RadCalendarTimeView .rcSelected a {
    background: none !important;
    border: none !important;
}

.RadCalendar .rcHover,
.RadCalendarTimeView .rcHover,
.RadCalendarTimeView .rcSelected {
    background: var(--school-primary-color-lighter3) !important;
    border: 1px solid var(--combo-border-color) !important;
    color: var(--global-dark) !important;
}

.rcHover a {
    background-color: transparent !important;
    border: none !important;
}

/* #endregion Date Input Control */

/* #region The colour picker is display:block and doesnt like being centered much. 
   you can wrap it in a div with 'centerAlignPickerIcon' which will make it centered
 */

.centerAlignPickerIcon {
    margin-left: 50%;
    position: relative;
}

.centerAlignPickerIcon .colourPickerLink,
.centerAlignPickerIcon .inactivePicker,
.positionRelative {
    position: relative;
}

.inactivePicker {
    background-image: url(/images/ui-colorpicker-disabled.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 16px;
    height: 16px;
    display: block;
}

.textTop {
    vertical-align: text-top;
}

.colourPickerLink {
    width: 37px !important;
    height: 21px;
    display: block;
    background-image: url(/images/icons/colourPicker.gif);
    background-position: 0 0;
    text-decoration: none;
}

.colourPickerLink:hover {
    background-position: 0 42px;
}

.colourPickerLink:focus {
    background-position: 0 21px;
}

.colourPickerLink span {
    display: block;
    position: relative;
    width: 12px;
    height: 12px;
    top: 5px;
    left: 5px;
    font-size: 1px;
}

/* #endregion */

/* #region Pupil Exam Results */

.examResultsToolbar {
    margin-top: 10px;
    padding-bottom: 10px;
}

/* #endregion Pupil Exam Results*/

/*#region Attendance*/

.attendanceToolbar {
    float: right;
}

.attendanceToolbar input,
.attendanceToolbar span {
    margin-right: 5px;
}

.datatable.dailyAttendance td.ddlSov,
.attendanceGridContainer td.ddlSov,
.attendanceGridContainer td.highlight {
    text-align: center;
}

.attendanceGridContainer {
    /*min-width: 600px;*/
    overflow-y: auto;
    border-radius: var(--global-border-radius) !important;
    margin-bottom: 60px;
}

table.attendanceColumnHeader {
    border-collapse: collapse;
    width: 100%;
}

table.attendanceColumnHeader tbody tr {
    height: 22px !important;
}

table.attendanceColumnHeader tbody tr:first-child {
    border-top: none;
}

table.attendanceColumnHeader tbody tr:hover {
    background: none;
}

table.attendanceColumnHeader tbody tr:first-child td {
    padding: 5px 0px 5px 0px;
}

table.attendanceColumnHeader tbody tr:nth-child(2) td {
    padding: 5px 0px 10px 0px;
}

table.attendanceColumnHeader tbody tr td a:hover {
    color: var(--global-dark);
}

table.attendanceColumnHeader tbody tr td a[disabled],
table.attendanceColumnHeader tbody tr td a[disabled]:hover {
    color: var(--global-greyed-out);
    cursor: not-allowed;
}

table.attendanceColumnHeader tbody tr:nth-child(3) td,
table.attendanceColumnHeader tbody tr:nth-child(2) td {
    text-align: center;
}

table.attendanceColumnHeader tbody tr:nth-child(3) td a {
    color: var(--global-dark);
}

table.attendanceColumnHeader tbody tr {
    height: 20px;
    padding: 0px;
    border: none;
}

table.attendanceColumnHeader tbody td a {
    text-decoration: underline;
    white-space: nowrap;
    color: var(--global-font-colour-grey);
}

table.attendanceColumnHeader tbody td a i {
    /*margin-right: 5px;*/
}

.attHeaderAlignBottom {
    color: var(--global-dark) !important;
    vertical-align: bottom !important;
}

.weekattendance tr:hover:first-child {
    background-color: inherit;
}

.weekattendance th {
    position: unset !important;
}

.weekattendance th.highlight,
.weekattendance td.highlight,
.gvClassAttendance th.highlight,
.gvClassAttendance td.highlight {
    padding-left: 8px !important;
    background-color: var(--school-primary-color-15pc-trans);
}

.weekattendance td.weekAttendanceBorderLeft:not(:first-child),
.weekattendance th.weekAttendanceBorderLeft:not(:first-child) {
    border-left: 1px solid var(--global-mid-grey) !important;
}

.attendanceTable.weekattendance td.weekAttendanceBorderLeft:not(:first-child),
.attendanceTable.weekattendance th.weekAttendanceBorderLeft:not(:first-child) {
    border-left: 1px dashed var(--global-panel-grey) !important;
}

table.attendanceTable tr.marksheetFooter {
    background: none !important;
}

table.attendanceTable tr.marksheetFooter td {
    background-color: var(--global-panel-grey) !important;
}

.weekAttendanceHeader div.center span {
    margin-right: 10px;
}

.attendenceSovDisabled {
    border-color: var(--global-border-grey) !important;
    background-color: var(--global-greyed-out) !important;
    color: var(--global-font-colour-grey) !important;
}

.attendenceSovDisabled:hover {
    cursor: not-allowed;
}

.weeklygrid {
    border-radius: var(--global-border-radius);
    /*min-width: 1300px;*/
    /*overflow: auto;*/
}

.classAttWrapper {
    border-radius: var(--global-border-radius);
    overflow: auto;
}

.absence-type-icon {
    border-radius: 5px;
    height: 18px;
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

/* #region moved from inline style*/

#attendanceSummaryContainer {
    margin: 0 auto;
    min-height: 200px;
    max-height: 493px;
    width: 100%;
}

#tblAttendanceSummaryWrapper {
    margin: 0 auto;
    min-height: 200px;
    max-height: 400px;
    width: 100%;
}

/* #endregion moved from inline style*/

/* #region Attendance Summary Dialog */

#attendanceSummaryModal {
    max-width: 88%;
    max-height: 100vmax;
}

.attendanceGroupWidget {
    display: block;
}

body:has(.menuSideBar.min) #pupilAttendance #attendanceSummaryModal {
    max-width: calc(100dvw - 140px);
}

body:has(.menuSideBar.open) #pupilAttendance #attendanceSummaryModal {
    max-width: calc(100dvw - 400px);
}

#attendanceSummaryModal.expanded {
    height: calc(100% - 50px);
    width: calc(100vw - 50px);
    z-index: 1002;
}

#attendanceSummaryModal #closeModal {
    display: none;
}

.attendanceSummaryModal .portalModalHeading {
    padding-bottom: 0px !important;
    background-color: transparent;
    border: none;
}

#attendanceSummaryModal .portalModalHeading h3 {
    color: #888;
}

.attendanceSummaryModal .weekStarting {
    display: inline-flex;
    padding: 5px 10px 5px 10px;
}

.attendanceSummaryModal .toggleBar {
    height: auto !important;
}

.attendanceSummaryModal .divWeekstarting {
    margin: 0px auto;
    text-align: center;
}

.attendanceSummaryModal .weekStarting span,
.divWeekSelect .weekStarting span {
    position: relative;
    top: -5px;
}

.attendanceSummaryModal .attendanceSummaryTable {
    background: var(--global-secondary-color);
    border-color: var(--global-secondary-color);
}

.attendanceSummaryModal .attendanceSummaryTable tr {
    height: 28px;
}

.attendanceSummaryModal .attendanceSummaryTable tr th {
    color: var(--global-font-colour-grey);
}

.attendanceSummaryModal .attendanceSummaryTable tr.rowSessionHeadings th {
    color: var(--global-dark);
    font-weight: 900;
}

.attendanceSummaryModal .attendanceSummaryTable tr.rowSessionType th {
    color: var(--school-primary-color);
}

/* #endregion End of Attendance Summary Modal */

/* #region Comment Modal */

.attendanceCommentBox {
    width: 100%;
}

.marksheetCounter {
    pointer-events: none;
}

.commentModalButtons a,
.marksheetCounter {
    float: right;
}

/* #endregion Comment Modal */

/* #region Telerik Grid overrides for Select Class Modal */

.selectclassview {
    border: none !important;
}

.selectclassview table {
    width: 560px !important;
    background: var(--global-secondary-color);
    border-collapse: collapse !important;
    border-color: var(--global-secondary-color);
}

.selectclassview th,
.selectclassview td {
    padding: 4px 8px;
    border: none !important;
}

.selectclassview th {
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    vertical-align: middle;
    background: var(--global-secondary-color);
}

.selectclassview th {
    color: var(--global-dark);
    font-weight: 900;
    text-decoration: none;
}

.selectclassview .rgSelectedRow td {
    background-color: var(--school-primary-color-15pc-trans);
    border-bottom-color: var(--school-primary-color-15pc-trans);
}

.selectclassview tr {
    border-top: 1px solid var(--global-mid-grey);
    height: 34px;
}

.selectclassview tr:hover {
    background-color: var(--school-primary-color-15pc-trans);
    cursor: pointer;
}

/* #endregion End of select class Modal */

/* #region Weekly Session Attendance Key */

.weekAttKeyTable {
    margin-top: 10px;
    padding-bottom: 20px;
}

.weekAttKeyTable tr td {
    background: var(--global-secondary-color);
    border-color: var(--global-secondary-color);
    padding: 5px;
}

.weekAttKeyTable .datatable tr {
    height: 20px;
    padding: 5px;
}

.weekAttKeyTable .datatable tr:first-child {
    height: 44px;
    border-top: none;
    border-bottom: 2px solid var(--global-mid-grey);
}

.weekAttKeyTable .datatable tr {
    height: 20px;
    padding: 5px;
}

.weekAttKeyTable .datatable tr:first-child {
    height: 44px;
    border-top: none;
    border-bottom: 2px solid var(--global-mid-grey);
}

/* #endregion End Weekly Attendance Key*/

.pnlAdditionalInfo {
    margin-top: 0px;
}

.changedLine {
    border-left: solid 4px orange;
}

.errorLine {
    border-left: solid 4px red !important;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    margin: 1px;
}

.portalModalMessages {
    padding-left: 20px;
}

@media screen and (max-width:600px) {
    .pnlAdditionalInfo {
        margin-top: 40px;
    }
    .attendanceToolbar {
        float: left !important;
    }
}

/*#endregion attendance

/* #region Online Parents Evening */

.datatable.staff-bookings tr:first-child {
    border-top: none !important;
}

/* #endregion Online Parent Evening */

/* #region Pupil Teacher and Subjects */

.datatable.pupilTeachersSubjectTable tr:first-child th {
    color: var(--global-dark) !important;
}

/* #endregion Pupil Teacher and Subjects */

/* #region My Calendar */

.heading,
#attendanceToggle {
    background-color: var(--global-light-grey);
    color: var(--global-dark);
    font-weight: normal;
}

.subheading {
    background-color: #fff;
    text-align: left;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#divSelectCalendars .header {
    color: var(--global-dark);
}

/* #endregion My Calendar */

/* #region Contact Parents Evening */

.contactBookingTable td.disabled {
    background-color: var(--global-greyed-out);
}

/* #endregion Contact Parents Evening */

/* #region Manage Parents Evening */

.createParentsEveningContent .gridWrapper .manageParentsEveningTableDiv {
    min-width: inherit;
    overflow-x: auto;
    border: 1px solid var(--global-border-grey);
}

.manageParentsEveningContainer .filterToolbarCenter {
    padding-bottom: 0px !important;
    padding-top: 20px !important;
}

.manageParentsEveningContainer .topControls {
    padding: 0px;
}

.manageParentEveningGrid tr:first-child {
    border-top: none !important;
}

#attendeePickerModal .toolbar,
#attendeePickerModal.toolbarOn,
.primaryColorToolbar.toolbarOn,
.primaryColorToolbar.toolbar {
    margin-bottom: 0px;
    background-color: var(--school-primary-color-lighter3);
}

.drillRow td,
.drillRow td a {
    background-color: var(--global-grey-filter) !important;
    font-weight: bold;
    color: var(--global-font-colour-grey) !important;
}

.detailsContentTable table tbody tr th {
    color: var(--global-dark) !important;
}

#attendeePickerModal .toolbar,
#attendeePickerModal.toolbarOn,
.primaryColorToolbar.toolbarOn,
.primaryColorToolbar.toolbar {
    margin-bottom: 0px;
    background-color: var(--school-primary-color-lighter3);
}

#attendeePickerModal .toolbar a,
#attendeePickerModal .toolbarOn a {
    color: var(--global-dark);
}

.datatable th span:first-child {
    color: var(--global-dark);
}

/* #endregion Manage Parents Evening */

/* #region Staff Weekly Timetable, RoomBooking */

.weeklyTimetableFilter,
.roombookingFilter {
    background-color: var(--school-primary-color-lighter3) !important;
    padding: 1em;
    border-radius: var(--global-border-radius);
    flex-wrap: wrap;
}

#createRoomBookingModal table tr {
    border-top: none !important;
}

#createRoomBookingModal table tr:hover {
    background-color: #fff !important;
}

.weeklyTT th.highlight,
.weeklyTT th.highlight span {
    background-color: var(--school-primary-color-lighter3);
}

/* #endregion Staff Weekly Timetable */

/* #region Parents Evening */

.meetingSummaryBlock {
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--global-border-grey);
    padding-top: 15px;
    padding-bottom: 15px;
    max-width: 360px;
    margin-right: 10px;
    float: left;
    color: var(--global-dark);
}

.contactBookingTable {
    margin-bottom: 10px;
}

.contactBookingTableHeader {
    height: 100px !important;
}

.rotateCellText {
    width: 30px !important;
    max-width: 30px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.contactBookingTable .marksheetCommentBox {
    resize: none;
}

.contactBookingTable .modalContent {
    padding-top: 0px;
}

.contactBookingTable div.addNewEntry a {
    margin-top: -6px;
}

.contactBookingTable tr:first-child,
.contactWithBookingTable tr:first-child,
.bookParentGrid tr:first-child {
    border-top: none !important;
}

.contactBookingTable tr:first-child th,
.contactWithBookingTable tr:first-child th,
.bookParentGrid tr:first-child th {
    color: var(--global-dark);
}

.contactWithBookingTable td,
.bookParentGrid td {
    color: var(--global-font-colour-grey);
}

.contactBookingTable .tableHeaderStyle {
    text-align: center;
    background-color: #eee;
    color: var(--school-primary-color);
    left: 0px !important;
    min-width: 100px !important;
    z-index: 1 !important;
}

.contactBookingTable .tableHeaderStyleNewDate,
.contactBookingTable .tableHeaderStyleNewDate td {
    padding-left: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    border-bottom: 1px solid #eee !important;
    text-align: center;
    left: 0px !important;
    background-color: var(--global-background) !important;
    z-index: 1 !important;
}

.contactBookingTable .tableHeaderStyleNewDate span {
    font-weight: bold;
}

.contactBookingTable .placeHolderRow {}

.contactBookingTable td a.minWidth130 {
    display: inline-block;
    min-width: 130px;
    width: 50%;
}

.contactWithBookingTable td input.bookingBtn {
    /*display: inline-block;*/
    min-width: 200px;
    width: 50%;
}

.contactBookingTable td.parentsEveningBookingBreakStyle {
    background-color: #f9c4c4;
}

.contactBookingTable td.parentsEveningBookingUnavailableStyle {
    padding-left: 15px !important;
    background: var(--status-incomplete-background);
    color: var(--global-dark) !important;
}

.contactBookingTable td.parentsEveningBookingAvailableStyle {
    padding-left: 15px !important;
    background: var(--status-inprogress-background);
    color: var(--global-dark) !important;
}

.contactBookingTable td.parentsEveningBookedStyle {
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: var(--status-complete-background) !important;
    color: var(--global-dark);
    width: auto !important;
    height: 54px !important;
}

.contactBookingTable .marksheetCommentBox {
    margin-top: 20px;
    width: 100%;
    min-height: 100px;
}

.contactBookingTable .modalPopup a {
    top: 0px !important;
    right: 20px !important;
}

/* #endregion Parents Evening */

/* #region DMS Pages */

.dmsGrid tr:first-child,
#fileSearchResults tr:first-child {
    border-top: none !important;
}

.dmsGrid tr:first-child th,
#fileSearchResults tr:first-child th {
    color: var(--global-dark);
}

.dmsSearchToolbar .toolbar,
.dmsAccordionHeader,
.dmsSearchContentContainer .parentSearchContent .collapse-toolbar,
.dmsSearchContentContainer .pupilSearchContent .collapse-toolbar {
    background-color: var(--school-primary-color-lighter3);
    margin-bottom: 0px;
}

.dmsSearchContentContainer .staffSearchContent .js-leftPaddingDiv,
.dmsSearchContentContainer .parentSearchContent .js-leftPaddingDiv,
.dmsAccordionContent .toggleBar {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--global-grey-filter);
    margin-bottom: 10px;
}

.dmsAccordionContent .toggleBar {
    background-color: white;
}

.dmsAccordionHeader,
.dmsSearchContentContainer .staffSearchHeader,
.dmsSearchContentContainer .parentSearchHeader,
.dmsSearchContentContainer .pupilSearchHeader {
    margin-bottom: 0px;
}

.dmsSearchContentContainer .pupilSearchHeader.toolbar {
    margin-bottom: 20px;
}

.dmsSearchContentContainer .pupilSearchHeader.toolbarOn {
    margin-bottom: 0px;
}

.dmsSearchContentContainer .staffSearchContent,
.dmsSearchContentContainer .parentSearchContent,
.dmsSearchContentContainer .pupilSearchContent,
.genericContainer {
    background-color: #fff;
    padding: 10px;
}

.dmsSearchContentContainer .pupilSearchContent {
    margin-bottom: 20px;
}

.dmsSearchContentContainer .parentSearchHeader,
.dmsSearchContentContainer .staffSearchHeader {
    background-color: #fff !important;
}

.dmsSearchContentContainer .parentSearchHeader:hover,
.dmsSearchContentContainer .staffSearchHeader:hover {
    background-color: var(--global-greyed-out) !important;
}

.radDropZone {
    border-color: var(--global-border-grey);
    border-radius: var(--global-border-radius);
}

.RadDropDownTree.RadDropDownTree_Default {
    border: none !important;
    border: 1px solid var(--global-border-grey);
    border-radius: var(--global-border-radius);
    width: 172px;
}

.RadDropDownTree.RadDropDownTree_Default .rddtInner {
    line-height: 23px;
}

.RadDropDownTree.RadDropDownTree_Default .rddtEmptyMessage {
    font-style: normal !important
}

.RadDropDownTree.RadDropDownTree_Default .rddtFakeInput {
    line-height: 23px;
}

.RadDropDownTree.RadDropDownTree_Default .rddtIcon {
    margin-top: 5px;
    margin-right: 5px;
}

.RadDropDownTree.RadDropDownTree_Default .rddtInner {
    background: #fff !important;
}

.RadDropDownTree.RadDropDownTree_Default .rddtInner.rddtFocused span {
    color: var(--global-dark) !important;
}

.rtHover span {
    background: var(--school-primary-color-lighter3) !important;
}

/* Upload Modal */

.ruFileLI {
    display: flex;
    display: -webkit-flex;
}

.ruFileLI span.radIcon {
    margin-top: 4px;
}

.ruFileLI span.ruRemove {
    margin-top: 6px;
}

/* end of upload modal */

/* Move Category */

#pnlDmsMoveDelete {
    margin-top: -9px;
    margin-bottom: -9px;
}

#dmsMoveCategoryModal .rddtFakeInput {
    height: 24px;
}

/* End of Move Category */

@media only screen and (max-width: 800px) {
    #fileSearchResults {
        max-width: 100vw;
        overflow: auto;
    }
}

/* #endregion DMS Pages */

/* #region DMS Importer */

.clientTextBox {
    align-items: center;
    background-color: #fff;
    display: flex;
    display: -webkit-flex;
    height: 45px;
    padding: 3px;
}

.clientTextBox .textArea {
    display: inline-block;
    height: 100%;
    min-height: 15px;
    outline: none;
    overflow: auto;
    padding: 0 1px;
}

.clientTextBox.disabled,
.clientTextBox[disabled] {
    background-color: var(--global-greyed-out);
    caret-color: transparent;
    cursor: default;
}

/* #endregion DMS Importer */

/* #region Performance Tracking */

th.reportCommentHeader {
    color: var(--global-font-colour-grey);
    font-weight: bold;
    font-size: var(--font-size);
    vertical-align: top !important;
    padding-left: 10px;
    padding-right: 10px;
}

th.reportCommentHeader div {
    background-color: transparent !important;
    /*padding-left: 20px;*/
    padding-right: 10px;
    padding-top: 10px;
}

/* #endregion Performance Tracking */

/* #region Lesson Planning */

.handedInTable {
    min-width: 420px;
}

.lessonPlanGrid tr th {
    color: var(--global-dark);
}

/* #endregion Lesson Planning */

/* #region Daybook Templates */

/* #region Daybook Templates - Add Field List */

.daybookFieldGridContainer {
    display: flex;
    flex-direction: row;
    height: auto;
}

.daybookFieldOptionDiv {
    /*    flex: 1;*/
    width: 240px;
    max-width: 240px;
    padding: 10px 0px 10px 0px;
}

.daybookFieldOptionDiv.fieldListClosed {
    width: 45px;
}

.fieldListContainer {
    margin-bottom: 40px;
}

.daybookFieldGridDiv {
    flex: 1;
    padding: 10px 0px 0px 10px;
    margin: 0px 3px 0px 3px;
}

.daybookDragFieldOptionDiv {
    flex: 1;
    min-width: 290px;
    max-width: 290px;
}

.daybookDragFieldGridDiv {
    flex: 1;
}

.daybookFieldList {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    list-style-type: none;
    padding: 0;
}

.daybookFieldList li {
    position: relative;
    align-items: center;
    border-bottom: 1px solid var(--global-mid-grey);
    padding: 10px 25px 10px 25px;
    background-color: #fff;
    color: var(--global-font-colour-grey);
    height: auto;
    min-height: 20px;
    cursor: move;
}

.daybookFieldList li .inline span {
    display: flex;
    display: -webkit-flex;
    word-wrap: break-word;
    max-width: 80%;
    /* Adjust as needed */
}

.daybookFieldList li .right {
    position: absolute;
    top: 10px;
    right: 8px;
    width: 20px;
}

.daybookFieldList li .inline:first-child {
    position: absolute;
    top: 10px;
    left: 8px;
}

.daybookFieldList li i:first-child {
    margin-right: 10px;
}

.daybookFieldList li:active {
    cursor: move;
}

.daybookFieldList li i {
    display: inline-block;
    width: 15px;
    text-align: center;
    margin-right: 10px;
}

.fieldDragHeader {
    color: var(--school-primary-color);
    margin-bottom: 20px;
    background-color: var(--global-extralight-grey);
    padding: 10px 1px 0px 1px;
    height: 28px;
}

.fieldDragHeader span {
    font-size: var(--font-size-larger1);
    padding-left: 10px;
}

.daybookDisabledText div,
.daybookDisabledText td {
    color: var(--global-greyed-out) !important;
}

.daybookFieldDragging {
    list-style-type: none;
    cursor: move;
}

.daybookFieldDragging i {
    margin-right: 10px;
}

.daybook-edit-mode-row,
.js-fieldsTable .sortable-placeholder {
    border: 2px dashed var(--global-border-grey) !important;
}

.daybook-edit-mode-row table td,
.daybook-edit-mode-row span,
.daybook-edit-mode-row label,
.daybook-edit-mode-row .optionLabel,
.daybook-edit-mode-row optionValue {
    color: var(--global-font-colour-grey) !important;
}

th.daybookGridOrderHeader,
td.daybookGridOrderCell {
    min-width: 5px !important;
    background-color: #fff !important;
    color: var(--school-secondary-color);
}

.templateEdit .tableRowImportant th:nth-child(5) {
    text-align: center;
}

.templateEdit {
    margin-bottom: 50px;
}

.templateEdit>tbody>tr>td:not(:first-child) {
    vertical-align: middle !important;
    border-top: 1px solid var(--global-mid-grey) !important;
}

/* #endregion Daybook Templates - Add Field List */

div .editTemplateFilter div.editTemplateSelectorLinkWrapper div.js-mainButtonDiv,
div.editTemplateFilter div.editTemplateSelectorLinkWrapper div.js-createButtonDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.editTemplateFilter {
    width: calc(100% - 10px);
}

.templateEdit tr:first-child {
    border-top: none !important;
}

#newEdit-wrapper .portalModalHeading h2 {
    margin-bottom: 0px;
}

.templateEditFieldsWrapper {
    border-radius: var(--global-border-radius);
    background: var(--global-secondary-color);
    margin: 10px 0px 10px 0px;
    padding: 0px 10px 0px 10px;
    border-width: 10px;
    overflow: hidden;
    width: calc(100% - 10px);
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
}

.daybookSecurityTable tr>th:first-child,
.daybookSecurityTable tr>td:first-child {
    z-index: 1000;
}

.daybookSecurityTable .select2-container {
    min-width: 85px !important;
}

.templateEdit tr:first-child th,
#lookupHolder tr:first-child th,
#addNewLookupHolder tr:first-child th {
    color: var(--global-dark);
}

.centerHAlignVAlignPickerIcon {
    margin-left: 50%;
    position: relative;
}

.centerHAlignVAlignPickerIcon .colourPickerLink,
.centerHAlignVAlignPickerIcon .inactivePicker {
    position: relative;
}

.lookupDetailInput {
    border: 1px solid var(--global-border-grey) !important;
    border-radius: var(--global-border-radius);
}

#newEdit {
    margin: 10px;
    width: 400px;
}

#lookupHolder {
    max-height: 400px;
    overflow: auto;
}

#newEdit .btn {
    display: inline-block;
    margin: 0 5px;
}

.rating-clear {
    margin-left: 20px;
}

/* #endregion Daybook Templates */

/* #region Daybook */

.daybookContainer {
    /*min-width: 840px;*/
    padding-top: 5px;
    overflow: auto;
}

.dayBookGrid {
    padding: 0px 10px 10px 10px;
}

.dayBookGrid h2 {
    font-size: var(--font-size-larger2);
    margin: 5px 0 15px 0;
    border-bottom-width: 0px;
    border-bottom-style: dashed;
    padding: 1px;
    padding-bottom: 1px;
    padding-bottom: 5px;
    cursor: pointer;
}

.dayBookSortByWidthOverride {
    width: 160px !important;
}

#entityName {
    padding-bottom: 10px;
    display: flex;
}

#entityName a {
    margin-left: 0;
}

#entityName h1,
#entityName h1 span {
    padding-top: 0px;
    flex: 1 1 calc(100dvw - 100px);
}

#entityName .gridActions {
    display: flex;
}

#entityName .gridActions a {
    margin: 5px;
    background: var(--school-primary-color);
    width: 25px;
    color: var(--button-primary-font-color);
    height: 25px;
    align-content: center;
    text-align: center;
    border-radius: var(--global-border-radius);
}

#dayBookNames ul li.current {
    background-color: var(--school-primary-color-lighter3);
}

.unsavedValue {
    border-radius: 0px !important;
}

.adjustfieldSearchDaybook {
    width: 177px !important;
    margin-left: 5px !important;
}

.daybookToolbar {
    padding-bottom: 15px;
}

.daybookContainer .dateRangeSwitcher a:first-child {
    margin-left: 5px !important;
}

#dayBookNames .namesHeader {
    padding: 5px 5px 20px 0px;
    font-weight: bold;
    height: 15px;
}

#dayBookNames ul {
    list-style-image: none;
    list-style-type: none;
    margin: 0;
    padding: 0px 0 0 0;
    width: 100%
}

#dayBookNames ul li {
    /*height: 40px;*/
    display: flex;
    display: -webkit-flex;
    padding-bottom: 10px;
    width: 233px;
    align-items: center;
    border: solid 1px var(--combo-border-color);
    padding: 0 10px 0 10px;
    margin-bottom: 10px;
}

#dayBookNames ul li span {
    top: -28px;
}

#dayBookNames ul li input.dayBookEntity,
#dayBookNames ul li a.dayBookEntity {
    text-align: left;
    padding: 10px 0 10px 0;
    margin: 0;
    width: 190px;
    font-weight: bold;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-block;
}

.dayBookGridHolderCurrent {
    vertical-align: top;
}

.dayBookGridHolderCurrent img {
    width: 20px;
}

#dayBookNames ul li input.dayBookEntity:has(.fa-solid),
#dayBookNames ul li a.dayBookEntity:has(.fa-solid),
#dayBookNames ul li a.current:has(.fa-solid) {
    /*background-color: var(--school-primary-color-lighter3);*/
    /*border: solid 1px var(--combo-border-color);*/
    text-indent: -11px;
    padding-left: 19px;
    width: 170px;
}

#dayBookNames ul li span {
    position: unset;
}

#dayBookNames ul li span.current {
    background-color: transparent;
}

.dayBookGridHolderCurrent .faSvgHeight {
    width: 16px !important;
    height: 16px !important;
}

.dayBookGridHolderCurrent .item {
    border: 1px solid var(--global-border-grey);
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--global-border-radius);
    /*min-width: 500px;*/
}

.dayBookGrid div.item.opened {
    background-color: var(--global-light-grey);
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

.daybookTable {
    border-collapse: collapse;
}

.daybookTable tr {
    vertical-align: middle !important;
    border-top: 1px solid var(--global-mid-grey);
    height: 38px;
}

.daybookTable tbody tr th {
    background-color: var(--global-panel-grey);
    color: var(--global-font-colour-grey);
    text-align: left;
}

.daybookTable tbody tr td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.fixedButtonBar {
    background-image: none;
    background-color: var(--global-panel-grey);
    /*height: 40px;*/
    padding-top: 10px;
}

.fixedButtonBarWhite {
    bottom: 0;
    position: absolute;
    background: white;
    padding: 4px 5px;
    border-radius: 5px;
    right: 31px;
    left: 0px;
    z-index: 1000;
    transition: left .5s;
    border: var(--global-background) 2px solid;
}

.fixedButtonBarPagePadding {
    margin-bottom: 60px !important;
}

.daybookWrapper {
    padding: 10px 0px 0px 0px;
    margin-bottom: 0px;
}

.body-map-note,
.body-map-note .unsavedValue {
    border-radius: var(--global-border-radius);
    border: 1px solid var(--combo-border-color);
    resize: vertical !important;
    margin: 0px 10px 10px 10px !important;
    min-height: 50px !important;
    width: 163px;
    overflow-y: auto !important;
    vertical-align: top;
}

.signatureReadonlyView img {
    height: auto;
    width: auto;
}

/* #region Daybook Modals */

.daybookSearchToolbar .toolbar,
.daybookSearchToolbar .toolbarOn,
.dayBookGrid .collapse-toolbar {
    margin-bottom: 0px;
    background-color: var(--school-primary-color-lighter3);
}

.daybookSearchToolbar .daybookControls,
.dayBookGrid .toggleBar {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--global-grey-filter);
}

.dayBookGrid .toggleBar,
.daybookFilter .toggleBar,
.subFilter .toggleBar,
.toggleBarTrans {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.dayBookGrid .toggleBar .control label,
.daybookSearchToolbar .control label,
.daybookFilter .toggleBar .control label,
.subFilter .toggleBar .control label,
.toggleBarTrans .control label {
    float: left;
    flex: 1;
}

.dayBookGrid .toggleBar .control div:first-child,
daybookSearchToolbar .control div:first-child,
.daybookFilter .toggleBar .control div:first-child,
.subFilter .toggleBar .control div:first-child,
.toggleBarTrans .control div:first-child {
    flex: 1;
}

.daybookControls div.control,
.userPickerControls div.control {
    padding-top: 0px;
    padding-right: 10px;
    float: left;
    width: 245px;
    text-align: right;
    white-space: nowrap;
    height: 30px;
    font-weight: bold;
}

.distributionModal {
    display: none;
    position: absolute !important;
    left: 50% !important;
    top: 20% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 360px;
    margin-left: -20px;
    /* does not center on smaller mobiles without this for some reason */
}

@media screen and (min-width: 900px) {
    #selectAdditionalUpdateStaff,
    #selectLinkedPupils,
    #attendeePickerModal {
        width: 800px;
    }
}

/* #endregion Daybook Modals */

/* #region Bodymap */

.body-map-marker-type {
    float: left;
    list-style: none;
    margin-top: 0;
    padding-top: 0;
    margin-right: 20px;
}

.selected-colour {
    display: inline-block;
    background-color: rgb(15, 55, 86);
    height: 20px;
    width: 20px;
    border-radius: 10px;
    margin: 0 10px;
    position: relative;
    top: 5px;
    /*to align with the select text*/
}

.square {
    border-radius: 0px;
}

.circle {
    border-radius: 10px;
}

.triangle {
    border-radius: 0;
    background-color: transparent !important;
    width: 0;
    height: 0;
    border-bottom-color: rgb(15, 55, 86);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom-width: 20px;
    border-bottom-style: solid;
}

.body-map {
    margin-left: 30px;
    padding-top: 1px;
}

.body-map-note {
    resize: none;
    margin: 0 2px;
    height: 16px;
    width: 163px;
    overflow: auto;
    vertical-align: top;
}

.swatch-wrapper {
    float: left;
    padding-top: 0px;
    padding-bottom: 20px;
    margin-top: -10px !important;
}

.swatch {
    /* used in jQuery to find swatches */
    display: inline-block;
    width: 370px;
    cursor: pointer;
    position: relative;
    top: 5px;
    /*to align with the select text*/
}

/* -----------------------------------------
    holders hold the colours and everything
    else for the swatches
   ----------------------------------------- */

.holder {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

/* -----------------------------------------
    everything below styles the individual
    color blocks
   ----------------------------------------- */

.color:first-child {
    border-radius: 7px 0 0 7px;
}

.color:nth-last-child(1) {
    border-radius: 0 7px 7px 0;
}

.color {
    height: 100%;
    display: inline-block;
}

/*#endregion Bodymap */

/* #endregion Daybook  */

.gridWrapper {
    border-radius: var(--global-border-radius);
    background: var(--global-secondary-color);
    margin: 10px 0px 10px 0px;
    padding: 0px 10px 0px 10px;
    border-width: 10px;
    overflow: hidden;
    /*perspective: 10px;*/
    width: auto;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
}

.datatable {
    background: var(--global-secondary-color);
    border-collapse: collapse;
    border-color: var(--global-secondary-color);
}

.datatable.width50pc {
    width: 50% !important
}

.datatable:not(.templateEdit) tr:not(.rcbReadOnly):not(:first-child) {
    vertical-align: middle !important;
    border-top: 1px solid var(--global-mid-grey);
}

.datatable:not(.noTrHeight) tr:not(.rcbReadOnly) {
    height: 44px;
}

.datatable.noTrHeight>tbody>tr>td,
.datatable.noTrHeight th {
    padding: 10px;
}

.datatableHover tr:hover {
    background-color: var(--school-primary-color-lighter4);
}

.jsgrid-table tr:hover {
    background-color: var(--school-primary-color-lighter4);
}

.datatableHoverFirstTH tr:hover:not(:first-child) th {
    background-color: var(--school-primary-color-lighter4);
}

.datatableHoverNotFirst tr:first-child:hover {
    background-color: var(--global-secondary-color) !important;
}

.datatableHoverNotSecond tr:nth-child(2):hover {
    background-color: var(--global-secondary-color) !important;
}

.datatableHoverNotLast tr:last-child:hover {
    background-color: var(--global-secondary-color);
}

.datatableHoverNotSecondLast tr:nth-last-child(2):hover {
    background-color: var(--global-secondary-color);
}

.datatable tr img:not(.ignoreTableStyle) {
    width: 16px;
}

.datatable tr th img {
    padding: 0 5px;
    vertical-align: middle;
}

.datatable th {
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    vertical-align: middle;
    /*position: sticky;*/
    top: 0;
}

.datatable th:not(.UnsetColours) {
    background: var(--global-secondary-color);
    /*not needed - eventually here to override default.css whilst still in use */
}

.datatable th a {
    color: var(--global-dark);
    font-weight: 900;
    text-decoration: none;
}

.datatable th.alignTop {
    vertical-align: top;
}

.datatable th a.normal {
    font-weight: normal;
}

.datatable td:not(.rcbInputCell):not(.rcbArrowCell):not(.js-req-overspend) {
    padding-left: 4px;
    padding-right: 4px;
    /*below not needed - eventually here to override default.css whilst still in use */
    /*    border-top: inherit !important;
    border-bottom: inherit !important;*/
    border: 0;
}

.datatable:not(.templateEdit) td:not(.rcbInputCell):not(.rcbArrowCell):not(.js-req-overspend) {
    /*below not needed - eventually here to override default.css whilst still in use */
    border-top: inherit !important;
    border-bottom: inherit !important;
}

.datatable.colouredHeader th {
    border: unset;
    background-color: var(--school-primary-color-lighter2);
}

.datatable.colouredHeader th:first-child {
    border-top-left-radius: var(--global-border-radius);
}

.datatable.colouredHeader th:last-child {
    border-top-right-radius: var(--global-border-radius);
}

.datatable.thGray>tbody>tr>th.UnsetColours {
    border-left: 5px solid var(--global-panel-grey);
    border-right: 1px solid white;
}

.datatable.thGray>tbody>tr>th {
    border-right: 2px solid white;
}

th,
.infoth,
.thColour,
.info .subItem,
.dayBookGrid table th,
.info th div,
.rotate90 {
    background-color: #eee;
    color: var(--school-primary-color);
}

.jsgrid-header-row>.jsgrid-header-cell {
    background-color: unset;
    color: unset;
}

.jsgrid-header-cell {
    padding: unset !important;
}

.datatable .sorticonup {}

/*#region add new daybook modal*/

#addDaybookEntry,
#excelExportModal {
    background-color: var(--global-secondary-color);
}

/*#endregion add new daybook modal*/

/*#addDaybookHolder {
    margin-left: 20px;
}*/

#addDaybookEntry {
    z-index: 1000;
    position: absolute;
    /*right: -294px; /* positioning is handled in showAddEntry JS function */
    top: 0px;
    padding: 10px 41px 10px 15px;
    font-weight: bold;
    white-space: nowrap;
    border-radius: var(--global-border-radius);
    box-shadow: 0px 1px 8px var(--global-border-grey);
}

.datatable .sorticonup {
    width: 10px !important;
    padding-right: 10px;
    padding-top: 5px;
}

.datatable .sorticondown {
    width: 10px !important;
    padding-right: 10px;
}

.datatable td table tr:first-child {
    border-top: none;
}

.pointsBold {
    font-weight: 900;
}

/*#region udf grid*/

table.info.udf_container {
    width: 50%;
    min-width: 350px;
}

table.info.udf_container th {
    background-color: white;
    width: 180px;
    min-width: 100px;
    max-width: calc((100vw - 80px) / 2);
    color: var(--global-font-colour-grey);
    padding: 10px;
    align-items: center;
    overflow: auto;
    text-overflow: ellipsis;
}

table.udf_container input[type='text'],
table.udf_container select {
    min-width: 150px;
    max-width: calc(((100vw - 80px) / 2) - 20px);
}

table.info.udf_container tr {
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

table.info.udf_container tr td:last-child {
    min-width: 37px;
}

/*#endregion udf grid*/

/*#region table grid*/

table.info.tableStyle,
table.info.tableStyleNoFixedWidth {
    width: 100%;
}

table.info.tableStyle th,
table.info.tableStyleNoFixedWidth th {
    background-color: var(--global-mid-grey);
    color: var(--global-font-colour-grey);
    padding: 10px;
    align-items: center;
}

table.info.tableStyle:not(.noBorder) th,
table.info.tableStyleNoFixedWidth:not(.noBorder) th {
    border: 1px solid var(--global-border-grey);
}

table.info.tableStyle th {
    width: 180px;
    min-width: 180px;
}

table.info.tableStyle tr {
    padding: 10px;
    align-items: center;
    border: 1px solid var(--global-border-grey);
}

table.info.whiteTable.tableStyle th:not(.ignoreStyle),
table.info.whiteTable.tableStyle td:not(.ignoreStyle) {
    background: white;
    border: none;
    padding-left: 5px !important;
}

table.info.tableStyle.whiteTable tr {
    border-bottom: 1px solid #f5f5f5;
    border-top: none;
    border-right: none;
    border-left: none;
}

/* table.info.tableStyle tr Border above breaks radcombobox in cell */

.RadComboBox table tr {
    border: none !important;
}

/* end of radcombocbox fix */

table.info.tableStyle td,
table.info.tableStyleNoFixedWidth td {
    padding: 10px;
}

/*#endregion table grid*/

/*#region marksheet grid*/

.gridNames,
.gridNamesScroll {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: var(--global-mid-grey);
    float: left;
}

.marksheetTopHeader {
    width: 100%;
    display: inline-flex !important;
    justify-content: space-between;
    align-items: flex-start;
}

.marksheet tr.subHeader th:not(.reportCommentHeader) {
    font-weight: normal;
    font-size: var(--font-size);
    vertical-align: top;
    padding-top: 5px;
}

.filterHelp {
    text-align: left;
    font-weight: bold;
}

.filterHelp p {
    color: var(--global-dark);
    text-align: left;
}

.marksheet tr.subHeader th {
    background: var(--global-secondary-color) !important;
    color: var(--global-dark) !important;
    font-weight: normal;
    font-size: var(--font-size);
    vertical-align: middle;
    border-right: 1px solid var(--global-mid-grey);
}

.marksheetBottomColor {
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: block;
    vertical-align: bottom;
}

.subHeader>th>img,
.subHeader>th>div>img {
    vertical-align: top !important;
    float: right;
    position: relative;
    top: 0px !important;
}

.marksheet th {
    color: var(--global-dark);
    white-space: nowrap;
}

.marksheet th div {
    color: inherit;
    font-weight: inherit;
    display: inline;
}

.rotatedMarksheetHeaderCell {
    text-align: center !important;
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
    border-bottom: none;
    /*    border-bottom-width: 5px !important;
    border-bottom-style: solid !important;
*/
}

.rotatedMarksheetHeaderDiv {
    position: absolute;
    max-height: 150px;
    max-width: 150px;
    width: 150px;
    max-width: 150px;
    display: block !important;
    -ms-transform-origin: 0% 0%;
    -webkit-transform: 0% 0%;
    transform-origin: 0% 0%;
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    text-align: left !important;
    padding-top: 5px;
    padding-left: 5px;
    white-space: normal;
}

.js-rotatedMarksheetHeaderDiv i {
    margin: 0 5px 0 0px;
}

.js-rotatedMarksheetHeaderDiv i:hover {
    opacity: .5;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.marksheetFooter {
    font-weight: bold;
    white-space: nowrap;
    background-color: var(--global-panel-grey);
}

.marksheetFooter:hover {
    background-color: var(--global-panel-grey) !important;
}

.pagingControl:hover,
.pagingControl tr:hover {
    background-color: var(--global-secondary-color) !important;
}

.marksheetFooter td.top {
    background-color: var(--global-panel-grey) !important
}

.marksheetFooter span {
    display: block;
    padding: 2px;
}

.marksheetFooterLabels {
    text-align: end;
}

.marksheetHeaderIcon {
    padding: 0px 4px;
}

.pColHeader>span {
    display: inline-block;
}

.pColHeader>div>img {
    vertical-align: top !important;
}

.toggleFilterBarExpanded {
    float: right;
    right: 7px;
    top: 7px;
    position: absolute;
    cursor: pointer;
    font-size: 24px;
}

.toggleFilterBarCollapsed {
    float: right;
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
    font-size: 24px;
}

.gridStatus {
    margin-bottom: 0px;
    margin-top: 10px;
    padding: 10px 20px 10px 20px;
    vertical-align: middle;
    border: none;
    font-weight: bold;
    border-radius: var(--global-border-radius);
}

.gridStatus img {
    vertical-align: middle;
}

.gridStatus i {
    margin-right: 3px;
}

.complete {
    background: var(--status-complete-background);
    color: var(--status-value-green);
    border: 1px solid var(--status-value-green);
    width: fit-content;
}

.incomplete {
    background: var(--status-incomplete-background);
    color: var(--status-value-red);
    border: 1px solid var(--status-value-red);
    width: fit-content;
}

.inprogress {
    background: var(--status-inprogress-background);
    color: var(--status-value-orange);
    border: 1px solid var(--status-value-orange);
    width: fit-content;
}

.complete i,
.inprogress i,
.incomplete i {
    border: none !important;
}

.names th {
    background: var(--global-secondary-color) !important;
    color: var(--global-dark) !important;
}

.names tr th {
    height: 58px;
    min-height: 58px;
    padding-left: 4px;
    padding-right: 4px;
    background: var(--global-secondary-color) !important;
    color: var(--global-dark) !important;
    border-bottom: 1px solid var(--global-mid-grey);
    z-index: 2701;
    /* this is to go over the top of marksheet icons when fixed header scrolling is used */
}

.comment .value,
.editcommentinput.value {
    color: unset;
}

.value {
    color: var(--status-value-green);
    border: solid 1px var(--status-value-green);
    border-radius: var(--global-border-radius);
    background-color: var(--global-secondary-color);
    height: 28px;
}

.dropdown {
    border-radius: var(--global-border-radius);
    background-color: var(--global-secondary-color);
    height: 28px;
}

.noValue {
    color: var(--status-value-red);
    border: solid 1px var(--status-value-red);
    border-radius: var(--global-border-radius);
    background-color: var(--global-secondary-color);
    height: 28px;
}

input.value,
input.noValue {
    color: var(--global-grey);
    border: solid 1px var(--global-grey);
    border-radius: var(--global-border-radius);
    background-color: var(--global-secondary-color);
    box-shadow: inset -2px 4px 10px -10px #000000;
    padding: 0px 5px 0px 5px;
    text-align: right;
}

.inputLeft input.value,
.inputLeft input.noValue,
.disabled input.value,
.disabled input.noValue {
    text-align: left;
}

.unsavedValue {
    background: none !important;
    background-color: #f8d9bf !important;
    color: #333 !important;
    border-radius: var(--global-border-radius);
}

.unsavedValueDiv .riTextBox {
    background-color: #f8d9bf !important;
}

.RadTabStripTop_Simple .rtsSelected {
    border-bottom-color: inherit !important;
}

.RadTabStrip .rtsLI {
    width: unset !important;
}

.RadTabStrip .rtsLevel .rtsLink {
    background-image: none !important;
}

.RadTabStrip .rtsLevel .rtsOut {
    background-image: none !important;
}

.RadTabStrip .rtsLevel .rtsSelected {
    background: var(--school-primary-color-30pc-trans);
}

.gridComment {
    width: 26px !important;
}

.performanceFilterBar {
    padding-bottom: 10px;
}

.performanceColumnsFilterBar {
    background: var(--school-primary-color-lighter3);
}

.cloneColumnsFilterBar {
    background: var(--school-primary-color-lighter3);
}

#gridContent {
    padding: 0px;
    overflow: auto;
    position: relative;
    /*min-width: 600px;*/
    /* z-index:2100; */
}

.marksheetGridWrapper {
    background: var(--global-secondary-color);
    border: none;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
    /*min-width: 400px !important;*/
}

.marksheetGridWrapper .gridNames,
.marksheetGridWrapper .gridWrapper {
    box-shadow: none;
}

.marksheetGridDataWrapper {
    /*min-width: 400px !important;*/
    display: inline-block !important;
    margin: 0;
    perspective: none !important;
}

.marksheetTeacherName {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.assementTeacherLink {
    color: var(--school-primary-color);
}

.primaryTextColour {
    color: var(--school-primary-color);
}

.marksheetTeacherName #divTeacherCaption {
    color: var(--primary-school-color);
}

#gridHolder {
    /*    min-width: 1200px;
*/
}

/*#endregion marksheet grid*/

/* #region label alert levels */

.success {
    background: var(--status-complete-background);
    color: var(--status-value-green) !important;
    border: 1px solid var(--status-value-green);
    width: fit-content;
}

.danger {
    background: var(--status-incomplete-background);
    color: var(--status-value-red) !important;
    border: 1px solid var(--status-value-red);
    width: fit-content;
}

.warning {
    background: var(--status-inprogress-background);
    color: var(--status-value-orange) !important;
    border: 1px solid var(--status-value-orange);
    width: fit-content;
}

.success i,
.danger i,
.warning i {
    border: none !important;
}

/* #endregion end of labels */

/*#region page level */

html,
body {
    background-color: var(--global-background);
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

.fullHeight {
    height: 100%;
}

.pageContentHeader {
    padding-left: 10px;
}

.pageContainer {
    height: calc(100% - 62px);
}

.menuSideBar {
    width: 357px;
    min-width: 306px;
    max-width: 306px;
    background-color: #FFFFFF;
    overflow-y: hidden;
    overflow-x: hidden;
    transition: width .5s, min-width .5s;
    margin-bottom: 65px;
    z-index: 999;
}

.menuSideBar .mainNavigation {
    width: 307px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.menuSideBar .mainNavigation .menuHolder {
    width: 306px;
    overflow: hidden;
}

.menuSideBar.min .mainNavigation {
    width: 70px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.menuSideBar.min .navItem70Percent,
.menuSideBar.min .navItem10Percent {
    /*width: 0px;*/
    opacity: 0%;
    height: 20px;
}

.menuSideBar.min .navItem20Percent {
    min-width: 50px;
    width: 50px;
}

.menuSideBar.min .navItemContainer {
    justify-content: unset;
    padding: 10px 0 10px 0;
}

.menuSideBar.min {
    width: 50px;
    min-width: 50px;
}

.menuSideBar.min ul ul {
    display: none !important;
}

.menuSideBar.min .mainNavigation .fa,
.menuSideBar.min .mainNavigation .fa-solid,
.menuSideBar.min .mainNavigation .fa-regular {
    padding-right: 0px;
}

.mainContent {
    width: 100%;
    overflow: auto;
    background: var(--global-background);
    height: calc(100% - 65px);
}

.pageHeader {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
}

.mainContent {
    /*padding-top: 70px;*/
}

.menuSideBar {
    /*top: 65px;*/
}

.pageSection {
    display: flex;
    display: -webkit-flex;
    height: 100%;
}

.pageHeader {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    align-items: center;
    /*overflow: hidden;*/
}

/*#endregion page level*/

/*#region Main navigation */

.portalnav {
    background-color: inherit;
    border-width: 0px 0 1px 0;
    border-color: #fff;
    border-style: solid;
}

.navItem {
    display: flex;
    display: -webkit-flex;
    position: relative;
    align-items: center;
    transition: opacity 2s;
    opacity: 100%;
}

.navItem.active {
    color: var(--school-primary-color)
}

.navItem20Percent {
    width: 20%;
    justify-content: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

.navItem10Percent {
    width: 10%;
}

.navItem70Percent {
    width: 70%;
    line-height: 16px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.navItemContainer {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    padding: 10px 0 10px 1em;
}

.navItemContainer:hover {
    color: var(--school-primary-color) !important;
    background-color: var(--navigation-active-background);
}

.navItemContainer:hover .navItem {
    color: var(--school-primary-color) !important;
    background-color: var(--navigation-active-background);
}

.mainNavigation {
    width: 100%;
    z-index: 2000;
}

.mainNavigation>div>ul {
    padding-top: 0px;
    padding-bottom: 0px;
}

.mainNavigation ul {
    margin: 0;
    list-style: none;
    position: relative;
    padding: 5px 0px 5px 0px;
}

.mainNavigation ul li {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: inherit;
    color: #fff;
    font-size: var(--font-size);
    font-weight: normal;
    text-align: left;
    line-height: 4ex;
    cursor: pointer;
    position: relative;
    float: left;
    width: 100%;
}

.mainNavigation ul ul ul li .navItemContainer {
    padding: 0px 0px 0px 21%;
}

.mainNavigation ul ul li .navItemContainer {
    padding: 0px 0px 0px 22px;
}

.mainNavigation ul ul ul li .navItemContainer .navItem {
    text-decoration: underline;
}

.menuSideBar.min li.active .navItem20Percent {
    color: var(--school-primary-color);
}

.mainNavigation a {
    display: block;
    font-size: var(--font-size);
    line-height: 4ex;
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.mainNavigation .fa,
.mainNavigation .fa-solid,
.mainNavigation .fa-regular {
    font-size: 23px;
    padding-right: 20px;
}

.mainNavigation .fa.dropDownUp {
    font-size: 13px;
    right: 0;
    position: absolute;
}

.mainNavigation li.active {
    background-color: var(--navigation-active-background);
    margin: 0px 0 0px 0;
}

.mainNavigation li.opened {
    background-color: var(--navigation-active-background);
    padding-bottom: 10px;
}

.mainNavigation li.opened .navItem10Percent {
    color: var(--school-primary-color);
}

.mainNavigation ul ul {
    display: none;
}

.mainNavigation .active {
    display: inherit;
}

.mainNavigation ul ul ul {
    padding: 1px 0px 0px 0px;
    display: none;
}

.mainNavigation ul ul li {
    padding-top: 1px;
    padding-bottom: 1px;
}

.mainNavigation ul ul ul li .navItem20Percent {
    border-left: 3px solid #444444;
    padding-left: 0;
    width: 10px;
    margin: -1px 0 -1px 0;
}

.js-NavItemOpen i {
    color: var(--school-primary-color);
}

.nav {
    width: 100%;
    z-index: 2000;
}

.nav ul {
    margin: 0;
    list-style: none;
    position: relative;
    float: left;
    padding: 5px;
}

.nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: inherit;
    color: #fff;
    font-size: var(--font-size);
    font-weight: normal;
    text-align: left;
    line-height: 4ex;
    cursor: pointer;
    position: relative;
    float: left;
    width: 245px;
    padding: 5px;
}

.nav a {
    display: block;
    font-size: var(--font-size);
    line-height: 4ex;
    text-decoration: none;
}

.nav .fa {
    font-size: 25px;
    padding-right: 20px;
}

#loggedInAs {
    float: none;
    /*OT12302*/
    height: 4ex;
}

#loggedInAs span {
    font-size: var(--font-size-larger1);
    font-weight: 400;
}

#loggedInAs .fa,
#loggedInAs .fa-solid {
    font-size: var(--font-size-larger2);
    padding: 5px;
}

.handlemaxsize {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rightMenu {
    left: auto;
    right: 0;
}

/* Hide Dropdowns by Default */

.nav ul ul {
    display: none;
    position: fixed;
    left: 0;
}

/* Display Dropdowns on Hover */

.nav ul li:hover>ul {
    display: inherit;
}

/* First Tier Dropdown */

.nav ul ul li {
    width: 200px;
    float: none;
    display: list-item;
}

.nav ul ul.specialmenu li {
    position: relative;
}

.nav ul ul ul {
    top: 0;
    left: 100%;
}

/* Second, Third and more Tiers	*/

.nav ul ul ul li {
    top: -25px;
    font-size: 18px;
}

.nav ul ul.specialmenu ul li {
    position: relative;
}

.nav ul li ul {
    top: 4ex;
    z-index: 2200;
}

.nav ul li ul.userNav {
    top: 4ex;
    float: right;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .nav ul li ul.userNav {
        margin-top: 16px;
        /* Increase gap to 16px on mobile */
    }
}

.nav ul li ul.userNav li {
    z-index: 2500;
}

.nav>ul>li>ul>li>ul>li {
    z-index: 2200;
}

.site-navigation ul li ul li,
.site-navigation>ul>li {
    color: #000000;
    background-color: #FFFFFF;
}

.site-navigation a {
    color: #000000;
}

.site-navigation li:hover,
.site-navigation .active {
    border-right: 5px solid var(--school-primary-color);
    background: var(--school-primary-color-lighter4);
}

.site-navigation ul,
.site-navigation ul li {
    margin-left: 0px;
    padding-left: 0px;
}

/*#endregion Main navigation */

/*#region Page Header */

.portalHeaderInfo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.portalTypeContainer {
    display: -webkit-flex;
    display: flex;
    min-width: 200px;
    padding-left: 30px;
}

.portalType {
    color: var(--school-primary-font-color);
    font-size: 20px;
    font-weight: 400;
}

.schoolLogo {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 10px;
    min-width: 236px;
    max-width: 236px;
    justify-content: flex-start;
    background: white;
    height: 67px;
    width: 344px;
    transition: width .5s, opacity .5s, min-width .5s, padding .5s;
    opacity: 100%;
}

.schoolLogo.min {
    width: 0px;
    min-width: 0px;
    padding: 0px;
    opacity: 100%;
}

.schoolLogo a {
    text-decoration: none;
}

.schoolLogo img {
    vertical-align: middle;
    max-width: 130px;
    width: 130px;
    height: auto;
    transition: width 1.2s, opacity .5s;
    opacity: 100%;
    max-height: 50px;
    object-fit: contain;
}

.schoolLogo.min img {
    opacity: 0%;
    width: 0px;
}

.schoolLogoHomePage {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    background-color: var(--global-secondary-color);
}

.schoolLogoHomePage img {
    padding: 20px 0;
    max-height: 68px;
    padding: 24px 25px;
}

.portalInfoContainer {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}

.logInInfo {
    float: right;
    position: relative;
    text-align: right;
    white-space: nowrap;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.logInInfo p {
    text-align: right;
    margin-top: 0;
}

.newsIconWrapper {
    position: relative;
    float: right;
    margin-left: 10px;
    margin-right: 10px;
}

.newsIconWrapper a,
#loggedInAs,
#loggedInAs #text,
#loggedInAs>span>div>.fa {
    color: var(--school-primary-font-color) !important;
    background-color: inherit !important;
}

.portalHeaderSearch {
    display: -webkit-flex;
    display: flex;
    padding-right: 10px;
    display: none;
}

.portalNavigationToggleContainer {
    background-color: white;
    height: 67px;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.portalNavigationToggle {
    color: var(--school-primary-color);
    min-width: 50px;
    max-width: 50px;
    font-size: 25px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.portalNavigationToggle .fa-solid {
    padding: 0px;
    cursor: pointer;
}

.portalNavigationToggle .js-desktopButton {
    display: unset;
}

.portalNavigationToggle .js-phoneButton {
    display: none;
}

.flipswitch {
    display: -webkit-flex;
    display: flex;
}

/*#endregion Page Header*/

/* #region Context Menu */

.contextMenu {
    background-color: #eee;
    border: solid #222 2px;
    box-shadow: 3px 3px rgba(85, 85, 85, 0.5);
    display: none;
    list-style: none;
    max-width: 200px;
    z-index: 100;
}

.contextMenu>li {
    height: 1em;
    overflow: hidden;
    padding: 5px;
    text-overflow: ellipsis;
    transition: 0.3s;
    user-select: none;
    /* Standard */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    -webkit-user-select: none;
    /* Safari */
    vertical-align: middle;
    white-space: nowrap;
}

.contextMenu>li:not(.contextMenuHeader) {
    border: 0 solid transparent;
    border-top-color: rgba(22, 22, 22, 0.2);
    border-top-style: solid;
    border-top-width: 1px;
    color: #676767;
    padding-left: 10px;
}

li.contextMenuHeader {
    background-color: transparent;
    color: #111;
    font-weight: bold;
    min-height: 1em;
    text-align: center;
    text-decoration: none !important;
}

.contextMenu>li:hover:not(.contextMenuHeader) {
    background-color: transparent !important;
    color: #676767 !important;
    cursor: pointer;
    height: auto;
    min-height: 2.5em;
    text-decoration: underline;
    white-space: normal;
}

/*#endregion Context Menu*/

/*#region Modal */

/*#region PWA Install Banner */

#pwaInstallBanner {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(0deg, #FAF9F6, #333);
    text-align: center;
    z-index: 9999;
}

#pwaInstallBanner div {
    color: #fff;
}

#pwaInstallBanner label {
    color: #333 !important;
}

#pwaInstallBanner>div {
    margin-bottom: 10px;
}

#pwaInstallBanner.top {
    top: 60px;
}

#pwaInstallBanner.bottom {
    bottom: 0;
}

.iosInstallWizard {
    width: 320px;
}

.iosInstallWizard.introjs-tooltip {
    background: linear-gradient(0deg, #FAF9F6, #333);
}

.iosInstallWizard .introjs-tooltiptext .intro-text,
.iosInstallWizard .introjs-skipbutton,
.iosInstallWizard .introjs-tooltip-title {
    color: #fff;
}

.iosInstallWizard .buttonBase {
    height: 25px !important;
    width: 105px !important;
    padding-top: 10px;
    text-align: center !important;
}

.iosInstallWizard .introjs-disabled {
    display: none;
}

@media (max-width: 768px) {
    #pwaInstallBanner {
        flex-direction: column;
    }
    #pwaInstallBanner .buttonBase {
        width: 90%;
        height: 40px !important;
        margin-bottom: 5px;
    }
    #pwaDoNotShowAgain,
    .marginLeft5 {
        align-self: center;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    .iosInstallWizard img {
        display: none;
    }
    .iosInstallWizard .js-qrCode {
        height: 120px !important;
        display: flex;
        justify-content: center;
        /* Center horizontally */
        align-items: center;
        /* Center vertically */
    }
    .iosInstallWizard .js-qrCode img {
        width: 120px !important;
        height: 120px !important;
    }
    #pwaInstallBanner img {
        width: 100px;
    }
    #pwaInstallBanner .buttonBase {
        width: 50%;
        height: 40px !important;
        margin-bottom: 5px;
    }
}

/*#endregion PWA Install Banner */

.scroll,
.scnotifiedContactContentroll {
    max-height: 300px;
    overflow: auto;
}

.timeout,
.updateError,
.modalContent,
.attendanceModalContent,
.batchUpdateContent,
.useCommentBankContent,
.batchPanel,
#batchNamesScroll,
.addCommentBankContent,
.addCommentContent,
.openNoticeContent,
.notifiedContactContent,
.quickPointsContent,
.colourPickerContent,
.setOfValuesModalContent,
.tandCContent,
.addCommentContentSmartTags {
    background-color: #fff;
    border-color: #fff;
    box-shadow: 6px 4px 20px 0px;
    max-height: 100%;
}

.colourPickerContent {
    left: -45%;
    width: 285px;
}

.RadColorPicker.RadColorPicker_Default {
    width: 285px !important;
}

.RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper {
    width: 54px !important;
}

.useCommentBankContent h2 {
    color: var(--global-dark);
}

.batchUpdateButtonDiv {
    float: right;
}

#batchNamesScroll,
.batchPanel {
    box-shadow: none;
}

#batchNamesScroll {
    max-height: 36vh;
}

.pnlCommentOptions {
    padding-top: 14px;
}

.batchContentUpdate {
    box-shadow: none;
}

.modalContent,
.batchUpdateContent,
.addCommentBankContent,
.addCommentContent,
.useCommentBankContent,
.openNoticeContent,
.notifiedContactContent,
.colourPickerContent,
.setOfValuesModalContent {
    border-style: solid;
    border-width: 6px;
    position: relative;
    /*left: -162px;*/
    z-index: 2600;
    padding: 20px;
}

.addCommentContentSmartTags {
    position: fixed;
    left: 50%;
    top: 5%;
    z-index: 2500;
    padding: 20px;
    min-width: 300px;
    max-width: 900px;
}

.quickPointsContent {
    border-style: solid;
    border-width: 6px;
    position: fixed;
    left: 0px;
    z-index: 2600;
    padding: 20px;
    min-width: 300px;
    max-width: 600px;
}

.createClassAssessmentColumnContent {
    background-color: #fff;
    border-color: #fff;
    box-shadow: 6px 4px 20px 0px;
    max-height: 100%;
    border-style: solid;
    border-width: 6px;
    position: relative;
    /*    left: -162px;
*/
    z-index: 2600;
    padding: 20px;
}

.commentModalButtons {
    height: auto;
    width: 360px;
    padding: 5px 0px 5px 0px;
    text-align: right;
    right: -9px;
    display: inline-block;
    position: relative;
    float: right;
}

.commentModal textarea {
    height: 200px;
    max-width: 400px;
}

.modalCommentWrapper {
    position: absolute;
}

.marksheetCommentBox {
    height: 200px;
    width: 100%;
}

.modalCommentWrapper .modalClose {
    right: 168px;
}

.loginFormControl {
    padding: 0 60px 20px 60px;
}

#createModal .RadTimePicker :disabled {
    display: none;
}

.commentModal {
    left: -50%;
    max-width: 350px;
}

.commentViewModal {
    max-width: 350px;
}

.commentViewModal .modalPopup {
    max-width: 350px;
}

.displayUnset {
    display: unset;
}

.tableRowImportant {
    display: table-row !important;
    border-top: none !important;
}

.noLeftPadding {
    padding-left: 0px;
}

.headerLabel {
    color: var(--school-secondary-color);
}

@media only screen and (max-width: 450px) {
    .modalCommentWrapper {
        width: 400px !important;
    }
    .commentModalButtons {
        width: auto;
    }
}

@media only screen and (max-width: 415px) {
    #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: fixed !important;
    }
    /*    div#homeScreenTimeTable #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: unset !important;
    }*/
    th.agenda {
        width: calc(100vw - 25px) !important;
    }
    .noLabelOnMobile {
        width: 140px !important;
    }
    .noLabelOnMobile label {
        display: none;
    }
    div#homeScreenTimeTable .js-btnFilter {
        display: none;
    }
    .noLabelOnMobile .RadComboBox_StyleFilter {
        width: 140px !important;
    }
    div#homeScreenTimeTable .filterBarControl {
        padding-left: 0px;
    }
    div#homeScreenTimeTable #divDate {
        width: unset !important;
    }
    div#homeScreenTimeTable #divDate input {
        height: 29px !important;
    }
    div#homeScreenTimeTable div.timetable {
        height: 60vh;
    }
    .mobileSearch {
        display: unset;
    }
    .notices input#cbBatchDelete {
        margin-right: unset !important;
    }
    li:has(a.rsHeaderWeek),
    li:has(a.rsHeaderMonth) {
        display: none;
    }
}

@media only screen and (min-width: 415px) and (max-width: 600px) {
    th.agenda {
        width: calc((100dvw / 2) - 15px) !important;
    }
}

@media only screen and (min-width: 415px) and (max-width: 780px) {
    #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: fixed !important;
    }
    /*    div#homeScreenTimeTable #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: unset !important;
    }*/
    div#homeScreenTimeTable #divDate {
        width: unset !important;
        padding-left: 5px;
    }
    div#homeScreenTimeTable #divDate input {
        height: 29px !important;
    }
    .noLabelOnMobile {
        width: unset !important;
    }
    .noLabelOnMobile label {
        display: none;
    }
    div#homeScreenTimeTable .js-btnFilter {
        display: none;
    }
    .mobileSearch {
        display: unset;
    }
    div#homeScreenTimeTable div.timetable {
        height: 60vh;
    }
    .notices input#cbBatchDelete {
        margin-right: unset !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
    #notice-toolbar {
        padding: 10px !important;
        width: calc(100dvw - 40px) !important;
    }
    #notice-toolbar-buttons {
        width: 100%;
        padding-bottom: 10px !important;
    }
}

@media only screen and (min-width: 780px) and (max-width: 1200px) {
    #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: fixed !important;
    }
    /*   div#homeScreenTimeTable #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: unset !important;
    }*/
    th.agenda {
        width: calc((100vw - 88px) / 3) !important;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1500px) {
    #staffTTContainer .timetable table:has(td.agenda) {
        table-layout: fixed !important;
    }
    th.agenda {
        width: calc((100vw - 143px) / 4) !important;
    }
}

@media only screen and (max-width: 400px) {
    .modalCommentWrapper {
        width: calc(100% - 20px) !important;
    }
    .modalCommentWrapper .attendanceCommentBox {
        width: 280px !important;
    }
    .modalCommentWrapper .commentModal textarea {
        max-width: auto;
    }
    .commentViewModal {
        left: -50%;
    }
}

@media only screen and (max-height: 400px) {
    .modalCommentWrapper .commentModal textarea {
        height: calc(100vh - 210px);
    }
    .modalCommentWrapper .attendanceCommentBox {
        height: calc(100vh - 195px);
    }
}

.batchUpdateContent {
    max-height: calc(100vh - 100px);
    max-width: 75%;
    overflow: auto;
    left: 5%;
    position: fixed;
    width: 87%;
}

.modelFixedPosition .batchUpdateContent {
    left: 20px;
    position: fixed;
    width: calc(100vw - 94px);
    max-width: 100%;
}

.commentBankCounterDiv {
    margin-top: 2px;
    margin-bottom: 10px;
    padding: 5px 0;
}

.commentBankCounter {
    border: 0px;
}

#commentBankSelect {
    display: inline-block;
    background: var(--global-secondary-color);
    width: 60%;
    left: 0px;
    padding-left: 0px;
    overflow: auto;
}

.commentBankInnerWrapper {
    width: 750px;
}

.commentBankSmartTags {
    background: var(--global-secondary-color);
    float: right;
}

.commentBankSmartTags table {
    border-collapse: collapse;
}

.commentBankSmartTags td {
    padding: 5px 9px 5px 10px;
}

.commentBankSmartTags tr {
    border-bottom: 1px var(--global-border-grey) solid;
}

.expandedCommentRow,
.expandedCommentRow td {
    background: var(--global-secondary-color);
    padding: 0;
}

.expandedCommentRow img {
    width: 20px;
}

.commentUseAll {
    font-size: 20px !important;
    color: var(--school-primary-color);
}

.commentUseSingle {
    font-size: 20px !important;
    color: var(--school-primary-color);
}

.commentBanksValues {
    float: right;
    display: inline-block;
    overflow: auto;
}

#excelExportModal {
    min-height: 50px !important;
    z-index: 5000;
    border-style: none;
    margin-top: 10px;
    padding: 10px 15px;
    font-weight: bold;
    white-space: nowrap;
}

.export-to-excel-wrapper {
    padding-top: 2px;
    /* aw 01-06-22 removed some of these for now as link is now same as the others in the marksheet
    display: inline-block;
    margin-left: 10px;
    padding-left: 15px;
*/
}

/*#endregion modal */

/*#region Modal */

.portalModal {
    position: absolute;
    padding: 25px;
    min-width: 30%;
    max-width: 80%;
    /*min-height: 548px;*/
    max-height: 600px;
    background: #fff;
    z-index: 2910;
    display: none;
    box-shadow: 6px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.modalClose
/* expects the close button to be 16px x 16px */

    {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 3000;
}

.portalModalDaybook {
    position: absolute;
    padding: 25px;
    min-width: 30%;
    max-width: 65%;
    border: 5px solid #094287;
    border-radius: 5px;
    background: #fff;
    z-index: 2910;
    display: none;
}

.portalModalActivities {
    width: 920px;
    max-height: 90%;
}

.modalNoMinHeight {
    min-height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.deleteColumnPopUp th,
#batchNamesScroll th {
    color: var(--global-dark);
}

.deleteColumnPopUp tr:first-child,
#batchNamesScroll tr:first-child {
    border-top: none;
}

.excelExportModal {
    min-width: 10%;
    float: right;
}

.autoHeight {
    height: auto !important;
}

.minHeight0 {
    min-height: 0px;
}

.minHeight100 {
    min-height: 100px;
}

.minHeight200 {
    min-height: 200px;
}

.height600 {
    min-height: 600px;
    max-height: 600px;
}

.portalModalHeading {
    padding-bottom: 20px
}

.portalModalHeading h2,
h2.portalModalHeading {
    color: var(--global-dark);
}

.portalModalInner {
    position: relative;
    width: 100%;
    /*margin-bottom: 60px;*/
    overflow: auto;
}

.portalModalFooter {
    position: absolute;
    left: 0px;
    bottom: 10px;
    text-align: end;
    clear: both;
    width: 100%;
    padding: 10px 0 10px 0;
    background: white
}

.modalFooterPadding {
    width: calc(100% - 35px);
    padding-left: 20px;
}

#mask,
#innerMask,
#portal-modal-mask,
#panelMask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: Gray;
    opacity: 0.7;
    z-index: 2900;
    display: none;
}

.portalModalHeading #pupilName {
    background-color: transparent;
}

.width80Pc {
    width: 80% !important;
}

.timeoutContainer,
.modalPopup,
.batchUpdateContainer,
.addCommentBankContainer,
.addCommentContainer,
.useCommentBankContainer,
.openNoticeContainer,
.notifiedContactContainer,
.createClassAssessmentContainer,
.quickPointsContainer,
.setOfValuesModalContainer {
    position: absolute;
    width: 400px;
    left: 50%;
    top: 5%;
    z-index: 2500;
}

.useCommentBankContent {
    top: 40px;
    left: 29px;
    width: 80vw;
    max-width: 760px;
    overflow: auto;
    height: 80vh;
    max-height: 680px;
}

useCommentBankContent .closeModal {
    right: -140px;
}

.useCommentBankContainer {}

@media only screen and (max-width: 1000px) {
    .js-gridMarkers.collapsed-gridMarkers .js-markerForm {
        display: none;
    }
    .mobileTopPaddiing {
        padding-top: 10px;
    }
    .mobileFlexColumn>* {
        margin-left: 5px;
        margin-right: 5px;
    }
    #createModal .noticeUploader td {
        width: unset;
    }
    /*  .js-gridMarkers {
        display: none;
    }*/
    .useCommentBankContainer {
        left: 415px;
    }
    .mobileFlexRowReverse {
        flex-direction: row-reverse;
    }
    #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .attendanceGridContainer {
        max-height: calc(100vh - 410px) !important;
    }
}

.RadTabStrip_Default .rtsLevel .rtsOut {
    background: unset !important;
    color: black !important;
    width: 100% !important;
}

.RadTabStrip_Default .rtsLevel .rtsLink {
    background: #e4e4e4 !important;
    border-radius: var(--global-border-radius) !important;
    border: 1px solid black !important;
}

.RadTabStrip_Default .rtsLevel .rtsLink.rtsSelected {
    background: white !important;
}

.RadTabStrip .rtsLevel1 {
    padding-bottom: 10px;
}

.timetablePupilHolder {
    padding: 5px;
    height: 75px;
    margin: 5px;
    float: left;
    border-width: 1px;
    border-style: solid;
}

.grid400pxColumns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.optionLabel {
    width: 105px;
    font-weight: bold;
    padding: 6px;
}

@media only screen and (max-width: 600px) {
    .mobileFlexRowReverse {
        flex-direction: row-reverse;
    }
}

.batchNamesScroll table {}

.batchContentUpdte {
    box-shadow: none;
}

/* #region Noice Alert */

.modalNotice {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 25px;
    padding: 10px 10px 10px 10px;
    vertical-align: middle;
    border: none;
    font-weight: bold;
    border-radius: var(--global-border-radius);
    z-index: 2500;
    background: var(--status-complete-background);
    color: var(--status-value-green);
    border: 1px solid var(--status-value-green);
    width: fit-content;
}

.modalNoticeContent i {
    border: none;
    margin-right: 10px;
    padding-top: 3px;
}

.modalNoticeContent div {
    border: none;
    margin-right: 5px;
}

/* #endregion Noice Alert */

/*#endregion modal */

/*#region jquery modals */

.ui-dialog {
    box-shadow: 6px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.ui-dialog .ui-button-icon-only {
    border: 0 !important;
    background: transparent !important;
}

.ui-dialog-titlebar-close {
    border: 0;
    right: 20px;
    background-color: transparent;
}

.ui-dialog-titlebar {
    background-color: transparent;
    border: 0px;
}

.ui-dialog-title {
    font-size: var(--font-size-larger2);
    font-weight: bold;
    color: var(--school-primary-color);
}

.ui-dialog .ui-widget-content:not(.ui-dialog-buttonpane) {
    /*height: auto !important;*/
    padding: 20px;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: var(--school-primary-color-lighter2);
    border: 1px solid var(--school-primary-color);
    color: var(--global-dark);
}

.ui-datepicker-calendar tr th {
    color: var(--global-font-colour-grey);
}

/*#endregion jquery modal */

/*#region legacy Skin CSS code */

/*.gradient {
    background: var(--school-primary-color);
    background: -moz-linear-gradient(left center,var(--primary-color) 53%,#355AAA 100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(53%,var(--primary-color) ),color-stop(100%,#355AAA));
    background: -webkit-linear-gradient(left,var(--primary-color) 53%,#355AAA 100%);
    background: -o-linear-gradient(left,var(--primary-color) 53%,#355AAA 100%);
    background: -ms-linear-gradient(left,var(--primary-color) 53%,#355AAA 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--primary-color) ',endColorstr='#355AAA',GradientType=1 );
    background: linear-gradient(left,var(--primary-color) 53%,var(--primary-color) 100%);
    color: #FFFFFF;
}*/

/*
.toolbar, .toolbarOn {
    background-color: var(--school-primary-color) ;
    color: #FFFFFF;
}

    .toolbar .control, .toolbarEmpty, .toolbar a, .toolbarOn a {
        color: #FFFFFF;
    }
    */

.timetable.weeklyTT table {
    width: 100%;
    margin-top: 17px;
}

.primaryTextColour+.timetable.weeklyTT table {
    margin-top: 0px;
}

.timetable table th {
    border: 1px solid var(--school-primary-color);
}

#homeScreenTimeTable .timetable.weeklyTT table:has(td.timed.Daily) tr:not(:last-child),
.fixTTHeight .timetableFixedHeight tr:has(td.timed):not(:last-child) {
    height: 145px !important;
    min-height: 145px !important;
    max-height: 145px !important;
}

#homeScreenTimeTable .filterBarControl label {
    min-width: unset;
}

#page-header {
    background-color: var(--school-primary-color) !important;
    height: 65px;
}

#page-header p,
#page-header h1 {
    color: var(--school-primary-font-color);
}

.quickLinkHolder,
#loginWrapper #heading,
.createAccount .header,
#header,
#header h1,
#header p,
.GIRFECcircle {
    background-color: var(--school-primary-color) !important;
    color: #FFFFFF !important;
}

#primaryColourSwatch {
    background-color: var(--school-primary-color);
}

#primaryFontColourSwatch {
    background-color: #FFFFFF;
}

#secondaryColourSwatch {
    background-color: var(--school-primary-color);
}

#secondaryFontColourSwatch {
    background-color: #FFFFFF;
}

#tertiaryColourSwatch {
    background-color: #355AAA;
}

.primaryColour {
    color: #666666;
    background-color: #FFFFFF;
}

.secondaryColour {
    color: #666666;
    background-color: #FFFFFF;
}

.tertiaryColour {
    color: #666666;
    background-color: #FFFFFF;
}

.news-icon-wrapper a,
#loggedInAs {
    background-color: inherit !important;
}

/*#endregion legacy Skin CSS code */

.faMarkers {
    font-size: 18px;
    padding: 1px;
}

.natFlagContainer {
    /*  height: 200px;
  */
    /*overflow-y: auto;*/
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.natFlagItem {
    width: 18%;
    display: -webkit-flex;
    display: flex;
    padding: 2px;
}

.natFlagItem img {
    height: 35px;
    padding: 3px;
    cursor: pointer;
}

.FlexMiddleVAlign {
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.flexEndAlign {
    align-items: flex-end;
}

.FlexBaseVAlign {
    display: -webkit-flex;
    display: flex;
    align-items: baseline;
}

.flexToEnd {
    justify-content: flex-end;
}

.flexEvenSpace {
    justify-content: space-between;
}

.flexGrow200px {
    flex: 1 1 200px;
}

.flexGrow300px {
    flex: 1 1 300px;
}

.flexMiddleAlign {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexAlignToEnd {
    flex: 1 1 0px;
    display: flex;
    justify-content: flex-end;
}

.tableSmallImages img {
    height: 25px;
}

.flexGrow {
    flex: 1;
}

.flexGrow0px {
    flex: 1 1 0px;
}

.flexGrow200px {
    flex: 1 1 200px;
}

.icontooltip img {
    width: 16px
}

.contentHeaderContainer {
    background-color: white;
    margin: 20px 0px 0px 0px;
    display: grid;
}

.contentContainer {
    background-color: white;
    padding: 30px;
    margin: 0 0px 20px 0px;
    display: grid;
}

.contentContainerFilters {
    padding: 5px;
}

.contentContainerRadius {
    border-radius: var(--global-border-radius);
}

.contentContainerNoGrid {
    background-color: white;
    padding: 30px;
    margin: 0 0px 20px 0px;
}

.backLink {
    margin: 20px 0 5px 0px;
    display: -webkit-flex;
    display: flex;
}

.backLink .fa-regular {
    padding-right: 10px;
}

.backLink a {
    color: var(--school-primary-color);
    display: -webkit-flex;
    display: flex;
    text-decoration: none;
    align-items: center;
}

.flexBox {
    display: -webkit-flex;
    display: flex;
}

.inlineFlex {
    display: inline-flex;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexAutoBasis {
    flex-basis: auto;
}

h1 {
    margin: 15px 0px 15px 0px;
    font-size: 1.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h1,
h2,
h3 {
    padding: 0;
    color: var(--school-primary-color);
}

h2,
h3 {
    margin-top: 20px;
    font-size: var(--font-size-larger2);
}

.transparent {
    color: transparent;
}

/*#region flex tables */

.flexTable {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.flexTable .column,
.flexTable .columnWidget {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex: 1 1 400px;
    margin-left: 5px;
    margin-right: 5px;
    /*max-width: 50%;*/
}

.flexTable .columnWidget {
    /*max-width: 50%;*/
}

.flexRow {
    flex-direction: row !important;
}

.flexTable .fullScreenColumn {
    max-width: 100% !important;
}

.flexTable .column .field {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e5e5e5
    /*border: 1px solid #cccccc;*/
}

.flexTable .column .field .item.label {
    /*display: -webkit-flex;*/
    /*display: flex;*/
    /*background-color: var(--global-mid-grey);*/
    width: 180px;
    min-width: 180px;
    color: var(--global-font-colour-grey);
    text-align: left;
    font-weight: bold;
}

.flexTable .column .field .item.content {
    flex: 1 1 0px;
}

.field .item .dateInput {
    margin-left: 0px;
}

.flexTable .column.width400Plus {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    max-width: 100%;
    min-width: 400px;
}

.flexTable .fullScreenColumn {
    max-width: 100% !important;
}

.flexTable .column .field .item {
    /*display: flex;*/
    /*display: -webkit-flex;*/
    padding: 5px 10px;
    align-items: center;
}

.flexTable .column:nth-child(odd),
.flexTable .columnWidget:nth-child(odd) {
    /*margin-right: 15px;*/
}

.flexTable .column:nth-child(even),
.flexTable .columnWidget:nth-child(even) {
    /*margin-left: 15px;*/
}

/*#endregion flex tables */

.toolbar-radio-list {
    display: inline;
    display: inline list-item;
}

.widget-content {
    /*overflow: hidden;*/
    background-color: white;
    padding: 10px 10px 10px 10px
}

.siblingPage .widget-content {
    padding: 0;
}

.news-ticker-content {
    justify-items: center;
}

.news-ticker-itemwrapper {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    /*align-items: center;*/
    flex: 1 1 100px;
    justify-content: left;
}

.news-ticker-list li {
    align-content: center;
    align-items: center;
}

.news-ticker-list h3 {
    margin: 0px;
}

.news-ticker-content {
    overflow: hidden;
    padding: 0px 20px;
    background-color: white;
    width: calc(100% - 20px);
    max-height: 156px;
}

.news-ticker-itemContent {
    overflow: hidden;
    padding: 0px 20px;
    background-color: white;
    width: 100%;
    max-height: 100px;
    overflow-y: auto;
    margin-right: 5px;
}

.newsTickerOpen .news-ticker-contentContainer {
    height: 160px;
}

.news-ticker-contentContainer {
    /*display: none;*/
    height: 0px;
    background-color: white;
    transition: height .5s
}

#news-ticker-wrapper {
    overflow: hidden;
}

.xOverflowScroll {
    overflow-x: auto;
}

/*#region Notices*/

#notice-toolbar {
    display: table;
    width: 100%;
    background-color: var(--global-light-grey);
    padding: 5px;
    margin-bottom: 0;
    height: 20px;
}

#notice-toolbar ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 30px;
    align-items: center;
    align-content: center;
}

#notice-toolbar ul li {
    display: inline-block;
    height: 20px;
    margin-right: 5px;
}

#notice-toolbar ul li a {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 20px;
}

#notice-toolbar ul li a span {
    display: none;
}

.optionValue {
    width: 125px;
}

#notice-wrapper {
    width: 450px;
    padding-right: 30px;
    min-height: 500px;
    max-height: 700px;
}

#notice-toolbar {
    display: table;
    width: 100%;
    background-color: #ebebeb;
    padding: 5px;
    margin-bottom: 10px;
    height: 20px;
    margin-top: 20px;
}

#notice-container {
    width: 100%;
    padding: 5px;
    border: 1px solid transparent;
}

#notice-header {
    margin-bottom: 5px;
}

#notice-header h2 {
    margin: 0;
    clear: both;
}

#notice-header-image {
    float: right;
    height: 70px;
    overflow: hidden;
}

#notice-details,
#notice-details dd div {
    font-size: var(--font-size-smaller);
}

#notice-details {
    float: left;
    width: 320px;
}

#notice-details dt {
    display: inline-block;
    width: 15%;
}

#notice-details dd {
    display: inline-block;
    margin: 0;
    width: 84%;
}

#notice-sent-to {
    overflow: hidden;
}

#notice-content {
    height: 400px;
    overflow: auto;
    padding: 5px 5px 5px 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    position: relative;
    clear: both;
}

#notice-stationary-header {
    border: 1px dashed lightgray;
    margin: 5px 0 15px 0;
}

#notice-stationary-footer {
    border: 1px dashed lightgray;
    margin: 20px 0 5px 0;
}

.news-ticker-list {
    list-style: none;
    padding: 20px 0 0 0;
    margin: 0;
}

.news-ticker-list li {
    margin-bottom: 20px;
    display: none;
}

.mailboxToggle {
    position: relative;
    padding: 15px 5px 5px 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mailboxToggle span.selectAll {
    position: relative;
    top: 3px;
}

.mailboxToggle a.new {
    display: -webkit-flex;
    display: flex;
    padding: 2px 5px 2px 23px;
    margin-right: 10px;
    text-decoration: none;
}

.mailboxToggle .refresh {
    float: left;
    padding-top: 2px;
    padding-left: 10px;
}

#noticesRepeaterContainer {
    overflow-y: scroll;
}

.noticeItem {
    min-height: 18px;
    margin-bottom: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e3e3;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.noticeItem:hover {
    background-color: var(--school-primary-color-15pc-trans);
}

.notices .icons .fa-solid {
    font-size: var(--font-size-larger2);
    padding-left: 3px;
}

.unread {
    background-image: none;
}

.noticeItem .icons {
    padding-left: 2px;
    float: left;
    width: 45px;
    order: 0;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

.notices input#cbBatchDelete {
    margin-right: 13px;
}

.noticeItem .icons img {
    padding: 2px 2px;
}

.noticeItem .summary {
    overflow: hidden;
    /*min-width: 150px;*/
    order: 1;
}

.noticeItem .summary a {
    text-decoration: none;
    display: block;
    font-weight: bold;
    padding-bottom: 2px;
}

.noticeItem img.event {
    margin-top: 2px;
    margin-left: 5px;
    order: 0;
    padding: 0 10px 0 10px;
}

.noticeItem .sender,
.noticeItem .date span {
    font-size: var(--font-size-smaller);
}

.noticeItem .date span {
    order: 1;
}

.noticeItem .date {
    padding: 2px 3px 0 6px;
    order: 1;
    min-width: 110px;
    justify-content: flex-end;
    display: -webkit-flex;
    display: flex;
}

.noticeItem .delete {
    padding: 2px 5px 0 3px;
    align-self: center;
    order: 2;
    justify-content: flex-end;
    display: -webkit-flex;
    display: flex;
    align-self: center;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
}

.noticeItem .noticeRightItems {
    order: 5;
    flex: 1 1 0px;
    justify-content: flex-end;
    display: -webkit-flex;
    display: flex;
    align-self: center;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
}

#noticeDelete {
    float: right;
    padding-right: 9px;
}

.noNotices {
    display: block;
    padding: 5px;
    font-style: italic;
    text-align: center;
}

.mailboxToggle.buttonContainer .mailBoxTypes {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

#openNotice {
    position: static;
}

#openNotice #toolbar,
#notifiedContacts {
    padding: 5px 5px;
    margin-bottom: 10px;
    border-width: 1px;
    border-style: solid;
}

#openNotice #toolbar img,
#openNotice #toolbar input {
    padding: 0 5px;
}

#openNotice h2 {
    margin-bottom: 15px;
}

#openNotice .body {
    margin: 25px 0 20px 0;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

.noticeAttachmentList {
    border-width: 1px;
    border-style: solid;
    list-style-image: none;
    list-style-type: none;
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
}

.noticeAttachmentList li {
    padding: 2px 0;
}

.exportToExcelHolder {
    padding: 10px;
}

.unread {
    /*background-color: var(--school-primary-color-15pc-trans);*/
}

.unread .summary a,
.unread .sender,
.unread .date {
    color: #000;
}

#openNotice #toolbar {
    border-color: #094287;
    background-color: #ccc;
}

.noticeRightIcons {
    padding-top: 15px;
}

/*#endregion Notices*/

/*#region Timetable*/

.timetable {
    padding: 0 5px 0 0;
    overflow: auto;
}

.timetable table th {
    padding: 2px;
    overflow: hidden;
}

.ttClassLink {
    text-decoration: none;
    color: inherit !important;
}

.ttClassLink :hover {
    text-decoration: underline;
}

.js-timetableWidget .alignMiddle {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-wrap: wrap;
}

.js-timetableWidget .alignMiddle .filterBarControlNoResize {
    padding: 0px !important;
}

.ttIconsDiv {
    padding-top: 7px !important;
    padding-left: 10px !important;
    padding-bottom: 0px !important;
    background-image: none !important;
    position: absolute;
    bottom: 0px;
    width: 25px;
}

.timetable td {
    white-space: nowrap;
    text-align: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-width: 5px;
    border-style: none none none solid;
    border-color: white;
}

.js-responsive-timetable #staffPdfLinkCopy {
    display: none;
}

/*.timetable table td.empty {
    width: 300px;
}*/

td.period,
div.period,
td.locked {
    white-space: nowrap;
}

td.period div.relative,
td.period div.relative div.height130 {
    padding: 0 !important;
}

.ttCellPadding {
    padding: 5px 5px 10px 5px;
    white-space: nowrap;
}

.lock {
    background-image: url(/images/icons/lock.gif);
    background-position: 5px 5px;
    background-repeat: no-repeat;
    padding: 5px 5px 5px 20px;
}

td.break,
th.break {
    border: 0;
    padding: 5px;
    margin: 5px;
    white-space: normal;
}

td.now,
div.now {
    border-width: 3px;
    border-style: solid;
}

.conflict span,
.conflict div,
.conflictMessage {
    color: Red !important;
}

.conflictAlternateColor span,
.conflictAlternateColor div {
    color: Red !important;
}

div.conflict a {
    text-decoration: none;
}

div.conflictAlternateColor a {
    text-decoration: none;
}

.cover {
    border-width: 5px !important;
    border-style: dashed !important;
}

.covered {
    border-width: 5px !important;
    border-style: double !important;
    border-color: black !important;
}

.requiredcover {
    border-width: 5px !important;
    border-style: solid !important;
    border-color: black !important;
}

.manualBooking {
    border-width: 4px !important;
    border-color: #000df7 !important;
    border-style: solid;
}

.period .lessonTime {
    background-image: none;
    padding: 2px 10px 2px 10px;
    margin-bottom: 5px;
}

.lessonTime {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    white-space: nowrap;
    overflow: hidden;
}

.timetableToggle {
    margin: 0 0 10px 0;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    border-width: 1px;
    border-style: solid;
}

.silverFilter {
    margin: 0 0 10px 0;
    font-weight: bold;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

.timetablePupilHolder {
    border-color: #ccc;
}

.fa14Size {
    font-size: 14px !important;
    padding: 0 3px;
}

.fa16Size {
    font-size: 16px !important;
    padding: 0 3px;
}

td.locked {
    background-color: #999;
}

td.locked div {
    color: #000;
}

.now {
    border-color: #ff6666 !important;
}

.timetable table td.cover {
    border-color: #000;
}

.timetable table td.break,
.timetable table th.break {
    background-color: #E2E1E1;
}

.timetableToggle,
.toggleBar,
.silverFilter {
    background-color: var(--global-light-grey);
    border-color: var(--global-light-grey);
}

table:not(:has(td.ttCard.timed)):not(:has(td.ttCard.agenda)) .ttRightBtns {
    display: none;
    transition: opacity 0s ease 0s, all 0s ease 0s, all 0s linear 0s;
    position: absolute;
    top: 5px;
    right: 0px;
    max-width: 26px;
    width: 26px;
}

table:not(:has(td.ttCard.timed)):not(:has(td.ttCard.agenda)) .ttRightBtns a {
    margin-top: 10px;
}

table:not(:has(td.ttCard.timed)):not(:has(td.ttCard.agenda)) td:hover .ttRightBtns {
    display: block;
}

table:has(td.ttCard.agenda) .ttRightBtns,
table:has(td.ttCard.timed) .ttRightBtns {
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: all 1s ease;
    /* position: absolute;
    top: 0;
    right: 0px;*/
    /*   max-width: 26px;
    width: 26px;*/
    overflow: hidden;
}

.ttRightBtns a {
    float: right;
    color: black;
    cursor: pointer;
    margin-bottom: 1px;
    text-decoration: none;
    font-size: 18px;
    padding-right: 5px;
}

.ttRightBtns a img {
    width: 24px;
    height: 24px;
}

/*#endregion Timetable*/

.rotate90 {
    width: 15px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.rotate90.width5 {
    width: 5px !important;
}

.marksheetNames th div.rotate90 {
    margin-top: 5px;
}

.ttWidgetArrow {
    font-size: 20px;
    align-self: center;
    line-height: 140px;
    color: var(--school-primary-color);
}

.ttWidgetArrow.fa-solid {
    display: flex;
    display: -webkit-flex;
    align-self: center;
    align-items: center;
    height: 180px;
}

.rsAptContent {
    margin-top: 0px !important;
}

.rsApt {
    border-top: none !important;
}

.rsAptOut {
    border-left: none !important;
    border-right: none !important;
}

.fa12Size {
    font-size: 12px !important;
}

.fa16Size {
    font-size: 16px !important;
    padding: 0 3px;
}

.fa18Size {
    font-size: 18px !important;
}

.fa20Size {
    font-size: 20px !important;
    padding: 0 3px;
}

.fa30Size {
    font-size: 30px !important;
    padding: 0 3px;
}

.RadScheduler_Metro .rsHeader {
    background-color: transparent !important;
    background-color: transparent !important;
    border-top-left-radius: var(--global-border-radius);
    border-top-right-radius: var(--global-border-radius);
    border-color: transparent !important;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    height: unset !important;
    z-index: 100 !important;
}

.RadScheduler_Metro .rsHeader ul .rsSelected em {
    border: 1px solid var(--school-primary-color) !important;
    align-items: center !important;
    letter-spacing: 0.4px !important;
    border-radius: var(--global-border-radius) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-size) !important;
    line-height: 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    color: var(--school-primary-font-color) !important;
    background-color: var(--school-primary-color) !important;
    border: 1px solid var(--school-primary-color) !important;
    text-transform: capitalize !important;
}

.RadScheduler_Metro .rsHeader ul a {
    align-items: center !important;
    letter-spacing: 0.4px !important;
    border-radius: var(--global-border-radius) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-size) !important;
    line-height: 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    color: black !important;
    background-color: var(--global-light-grey) !important;
    text-transform: capitalize !important;
}

.RadScheduler_Metro .rsHeader span {
    color: unset !important;
}

.RadScheduler .rsHeader h2 {
    color: VAR(--global-font-colour-grey);
}

.RadScheduler .rsHeader a {
    color: black !important;
}

.RadScheduler_Metro .rsHeader .rsPrevDay,
.RadScheduler_Metro .rsHeader .rsNextDay {
    background-image: url(/images/radScheduleSprits.png) !important;
}

.RadScheduler_Metro .rsHeader .rsDatePickerActivator {
    background-image: url(/images/radScheduleSprits.png) !important;
}

.RadScheduler_Metro .rsHeader h2 {
    text-transform: capitalize !important;
}

.RadScheduler .rsHeader ul {
    order: 99;
    padding-right: 10px;
    justify-content: end;
    flex: 1 1 225px;
    display: flex;
    display: -webkit-flex;
}

.RadScheduler .rsMonthView .rsShowMore {
    margin-top: 10px;
}

.RadScheduler .rsMonthView .rsWrap:not(.rsDateWarp) {
    margin-top: 10px;
}

label:not(.fieldLabel) {
    padding: 5px;
}

/*#region override telerick*/

.riSingle .riTextBox {
    height: 24px !important;
}

.RadTimePicker .riTextBox {
    height: 24px !important;
}

#createModal div.RadPicker span.RadInput {
    width: unset !important;
}

.RadUpload_Vista .ruFakeInput:not(.baseTextbox) {
    border-color: black !important;
    color: black !important;
}

.RadUpload .ruBrowse {
    align-items: center !important;
    letter-spacing: 0.4px !important;
    border-radius: var(--global-border-radius) !important;
    padding: 5px 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-size-larger2) !important;
    line-height: 20px !important;
    margin: 2px 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    background: var(--global-secondary-color) !important;
    color: var(--school-primary-color) !important;
    border: 1px solid var(--school-primary-color) !important;
    width: unset !important;
    height: unset !important;
}

.RadUpload .ruFileWrap {
    height: unset !important;
    display: flex !important;
    align-items: center;
}

.trUploadChange th {
    display: none !important;
}

.trUploadChange input[type=text] {
    display: none !important;
}

.trUploadChange .noticeUploader table {
    width: unset !important;
}

.trUploadChange .noticeUploader {
    width: unset !important;
}

.trUploadChange .noticeUploader table .fa-regular,
table .fa-solid {
    font-size: var(--font-size-larger2);
}

.trUploadChange .noticeUploader .iconTooltipContainer {
    display: flex;
    display: -webkit-flex;
}

/*#endregion override telerick*/

.printTimetableLink {
    display: inline-block;
    cursor: pointer;
    background: url(/images/StyleGuide/file-pdf-red.svg) no-repeat left center;
    padding-left: 20px !important;
    height: 18px;
    border: 0;
    text-decoration: underline;
    background-size: 14px;
}

.svgIconImageSize {
    height: 18px;
}

.svgIconImageSize15 {
    height: 15px;
}

/*hide chevrons for screen /CommentBanks.aspx as doesn't work - original was missing these as well*/

.commentBanksScroll table img {
    display: none;
}

.requisitionRowRadComboBox tr {
    height: 20px;
}

textarea:read-only {
    color: #666666;
    background: rgba(239, 239, 239, 0.3);
}

@media only screen and (max-width: 830px) {
    .flexTable .column,
    .flexTable .columnWidget {
        max-width: 100%;
    }
    .flexTable .column .field {
        /*flex-direction: column;*/
    }
    .flexTable .column:nth-child(odd),
    .flexTable .columnWidget,
    .ttHomePanel {
        margin-right: unset !important;
        margin-left: unset !important;
    }
    .trUploadChange .noticeUploader .iconTooltipContainer {
        display: flex;
        display: -webkit-flex;
    }
    /* #region ColourPicker */
    .hasColourPicker .RadColorPicker_Default .rcpApplyButton {
        border-radius: var(--global-border-radius) !important;
        background: var(--global-secondary-color) !important;
        color: var(--school-primary-color) !important;
        border: 1px solid var(--school-primary-color) !important;
    }
    .hasColourPicker .RadColorPicker_Default .rcpApplyButton:hover {
        background: var(--secondary-hover-colour) !important;
        border: 1px solid var(--school-primary-color) !important;
        cursor: pointer;
    }
    .hasColourPicker .RadColorPicker_Default .rcpIcon a {
        border: 1px solid var(--global-border-grey) !important;
        background-color: transparent !important;
        border-radius: var(--global-border-radius) !important;
        background-image: none !important;
    }
    .hasColourPicker .RadColorPicker_Default .rcpIcon a:focus {
        box-shadow: none !important;
    }
    .hasColourPicker .RadColorPicker_Default .rcpHeader {
        padding: 5px 5px 3px 5px !important;
        background-color: var(--school-primary-color-lighter3) !important;
        background-image: none !important;
    }
    .hasColourPicker .RadColorPicker_Default .rcpViews,
    .RadColorPicker_Default .rcpPalette {
        background-color: var(--grid-verylightgrey-background) !important;
        background-image: none !important;
    }
    /* #endregion ColourPicker */
    /*#endregion override telerick*/
    .printTimetableLink {
        display: inline-block;
        cursor: pointer;
        background: url(/images/StyleGuide/file-pdf-red.svg) no-repeat left center;
        padding-left: 20px;
        height: 18px;
        border: 0;
        text-decoration: underline;
        background-size: 14px;
    }
    .flexTable .column:nth-child(even),
    .flexTable .columnWidget:nth-child(even) {
        margin-right: unset !important;
    }
    .iconButtonText {
        display: none;
    }
    .iconInlineText span {
        display: none;
    }
    .mailboxToggle {
        flex-flow: wrap;
    }
    .mailboxToggle.buttonContainer {
        flex-wrap: wrap-reverse;
    }
    .mailboxToggle.buttonContainer .buttonBase {
        margin: 10px 0 0 0;
    }
    .mailboxToggle.buttonContainer .viewAll {
        order: 4 !important;
    }
    .mailboxToggle.buttonContainer .viewAll a {
        position: unset !important;
    }
    .mailboxToggle.buttonContainer .mailBoxTypes {
        flex: 1 1 100%;
        justify-content: space-around;
    }
    .noticeRightIcons {
        padding-top: unset;
    }
    .flex100Pc_Phone {
        width: 100%;
        flex-direction: column;
    }
    .flex100Pc_Phone>* {
        margin: 5px;
    }
    .divWeekstarting {
        display: inline-flex;
        align-items: center;
    }
}

/*#region attendance analysis*/

.attendanceSummaryTile {
    clear: both;
    position: relative;
    margin: 5px 0px 10px 0px;
    padding: 5px;
    border-width: 1px;
    border-style: solid;
    height: 60px;
    cursor: pointer;
    background: white;
}

.attendanceSummaryTile .cookieTrail {
    position: absolute;
    top: 7px;
    left: 10px;
    color: var(--school-primary-color);
}

.cookieTrail {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: bold;
}

.cookieTrail a {
    margin-left: 2px;
    margin-right: 2px;
    text-decoration: none;
    color: var(--school-primary-color);
}

.cookieTrail a.currentStage {
    font-style: italic;
    /*cursor: pointer;*/
}

.cookieTrail a.currentStage:hover {
    text-decoration: none;
}

.cookieTrail a:hover {
    text-decoration: underline;
}

.attendanceSummaryTile div h2 {
    text-align: center;
    top: -5px;
}

.attendanceTileHolder,
.attendanceSummaryTile,
.pupilAttendanceTileHolder,
.timetablePupilHolder {
    border-color: var(--global-secondary-color);
}

.pupilAttendanceTileHolder,
.timetablePupilHolder,
.attendanceTileHolder {
    height: 90px;
    position: relative;
    float: left;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
    background: white;
    padding: 10px;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
}

.attendanceTile {
    padding: 5px;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.normalPointer {
    cursor: auto;
}

.attendanceTile h2 {
    font-size: var(--font-size-larger1);
    margin: 0 0 5px 0;
    padding: 0;
    text-indent: 5px;
}

.attendanceTilePupilName {
    font-size: var(--font-size-larger1);
    color: var(--school-primary-color);
    font-weight: 800;
}

.attendanceTile .count,
.attendanceSummaryTile .count {
    font-weight: bold;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.pupilAttendanceTileHolder .attendanceTile .count {
    position: static;
    font-weight: bold;
    clear: left;
}

.attendanceTile .count .numerator,
.attendanceSummaryTile .count .numerator {
    font-size: var(--font-size-larger2);
}

.attendanceTile .count .demoninator,
.attendanceSummaryTile .count .demoninator {
    font-size: var(--font-size);
}

.attendanceTile .percentage,
.attendanceSummaryTile .percentage {
    font-weight: bold;
    position: absolute;
    right: 20px;
    bottom: 10px;
    text-align: right;
    font-size: var(--font-size-larger2);
}

.numericUpDownStyling {
    white-space: nowrap;
}

/* #endregion attendance*/

.mobileFlexColumn {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    flex-direction: unset;
    align-items: baseline;
}

.mobileFlexColumn>* {
    margin-left: 8px;
}

/* #region activities */

/* this is only used by activities filter bar as far as I can tell AW 29-06-22 */

.filterToolbarAutoHeight {
    border-radius: var(--global-border-radius);
    background: var(--school-primary-color-lighter3);
    padding-bottom: 1em;
    margin-bottom: 5px;
    position: relative;
    min-width: 600px;
}

.activitiesFilterControl .filterTextbox {
    width: 166px !important;
}

.js-calendarSelect[disabled]:hover {
    cursor: not-allowed !important;
}

.activitySchedule,
.activitySlot {
    border: none;
    padding: 20px;
    margin: 5px 0;
    background: var(--global-secondary-color);
    background-repeat: repeat-x;
    background-position: left top;
    position: relative;
}

.activityScheduleReviewInfo {
    background: var(--global-light-grey);
    border-radius: var(--global-border-radius);
    margin: 10px 5px 20px 5px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1);
}

.activityScheduleReviewInfo .activityScheduleInfoDateRange,
.activityScheduleReviewInfo .activityScheduleInfoBookingDates,
.activityScheduleReviewInfo .activityScheduleInfoBookingDates .activityDate {
    font-weight: normal !important;
    color: var(--global-font-colour-grey) !important;
}

#pupilActivityReviewContent {
    padding-bottom: 20px;
}

.activitySlot {
    background: var(--global-extralight-grey);
}

.activitySlot .activitySlot {
    background: var(--global-light-grey);
}

.activitySchedule>img {
    position: absolute;
    right: 10px;
    top: 10px;
}

.activitySchedule a,
.activitySchedule span.title {
    font-size: var(--font-size-larger1);
    color: var(--school-primary-color);
    font-weight: bold;
    padding: 0 0 10px 0;
    display: inline-block;
}

.activityScheduleFilterContainer,
.activityBookingFilterContainer {
    display: flex;
}

.js-scheduleFilter {
    position: relative;
}

.activitySchedule span {
    font-size: var(--font-size-larger1);
    font-weight: bold;
    /*position: absolute;
        left: 43%;*/
}

.activitySchedule .hiddenContent {
    display: none;
}

.activitySchedule h4 {
    margin-bottom: 5px;
    color: var(--school-primary-color);
}

.activityScheduleInfoDateRange span {
    font-weight: normal;
    font-size: 1em;
    color: var(--global-dark);
}

.activityScheduleInfoDateRange {
    color: var(--school-primary-color);
    font-weight: bold;
}

.activityScheduleInfoBookingDates,
.activityScheduleInfoBookingDates .activityDate {
    font-weight: bold;
    font-size: 1em;
    color: var(--global-dark);
}

.activityScheduleInfoBookingDates span {
    font-weight: normal;
    font-size: 1em;
    color: var(--global-dark) !important;
}

.activityScheduleInfoPreviewDate,
.activityScheduleInfoHelp {
    font-weight: normal !important;
    font-size: 1em;
    color: var(--global-dark);
}

.activityScheduleBookingOpen {
    color: #008000;
}

.activitySchedules-pupilName {
    color: var(--school-primary-color);
}

div.templateFilter {
    background-color: var(--global-grey-filter);
}

.isReadOnly {
    border-left: 8px solid rgba(0, 0, 0, 0.15);
    background: var(--global-extralight-grey);
    border-radius: var(--global-border-radius);
}

i.js-expandImg {
    font-size: 26px;
}

.inBooking {
    border-left: 8px solid #008000;
    background: #EAFFEA;
    border-radius: var(--global-border-radius);
}

.inBooking i.js-expandImg {
    color: #008000;
}

/*.activitySchedule:not(.inBooking) {
    border-left: 8px solid var(--global-secondary-color);
    border-radius: var(--global-border-radius);
}*/

.inBooking>span {
    color: black;
}

.inPreview {
    border-left: 8px solid #ffa500;
    border-radius: var(--global-border-radius);
    background: #FFEAC6;
}

.inPreview>span {
    color: orange;
}

.js-SortHandle {
    cursor: move;
}

.pupilChoiceToggle {
    cursor: pointer;
}

.activityTimer {
    display: none;
    font-weight: bold;
    padding: 10px 0;
    font-size: 18px;
    margin-top: 10px;
    background: var(--global-extralight-grey);
}

.activityTimer span {
    font-size: 18px;
}

#activityChoicesContainer {
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
    /*    position:relative;
*/
}

.activitiesDraggable:before {
    /*    background-image: url('../images/RightArrow2.gif');
*/
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    content: "\e4b2";
    font-family: FontAwesome;
    font-size: 24px;
}

#activityOptions {
    width: 85%;
    margin: 0 auto;
}

#activityChoices,
#activityChoicesUnavailable {
    width: 85%;
    margin: 0 auto;
    border: none;
}

#activityOptions td,
#activityChoices td {
    height: 32px;
}

#activityOptions td.empty,
#activityOptions div.error,
#activityChoices div.error {
    text-align: left;
    color: #f8443b;
    vertical-align: middle;
}

#activityChoices div.error {
    /*z-index: 4500;  - removed due to 10081. No idea if it's actually needed for something so if it breaks elsewhere make sure 10081 is ok when fixing it'*/
    position: relative;
}

#activityOptions td>div {
    background-color: #6CA1D5;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-position: right;
    background-repeat: no-repeat;
}

#activityOptions td>div.active {
    cursor: move;
}

#activityOptions td>div.preSign,
#activityChoices td>div.preSign {
    cursor: not-allowed;
}

#activityOptions td>div {
    background-color: var(--school-primary-color-lighter3);
    padding: 10px;
    font-weight: bold;
    color: var(--global-dark);
    text-align: left;
    background-position: right;
    background-repeat: no-repeat;
}

#activityOptions td>div.active {
    cursor: move;
}

#activityOptions,
#activityOptions td {
    border: none;
}

#activityOptions td>div.preSign div.iconHolder {
    right: 10px;
}

#activityOptions td>div.preSign {
    position: relative;
}

#activityOptions td>div.activity {
    position: relative;
}

/*#activityOptions td > div.preSign {
        cursor: not-allowed;
        background-image: url('../images/icons/lock.gif');
        background-position: right 7px center;
        padding-right: 25px !important;
    }*/

#activityChoices div.error {
    padding-right: 30px !important;
    /*so icons don't overlap it*/
}

#activityChoices div.error:before {
    font-family: FontAwesome;
    font-size: 20px;
    content: "\e405";
    padding-right: 5px !important;
    /*so icons don't overlap it*/
}

#activityChoices th,
#activityChoices td {
    vertical-align: middle;
}

#activityChoices td>div {
    background-color: var(--school-primary-color-lighter3);
    color: var(--global-dark);
    cursor: auto;
    padding: 10px 30px 10px 10px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    position: relative;
    font-weight: bold;
    font-style: normal;
    text-align: left;
}

#activityChoices div.waiting {
    background-image: url(/images/loading_trans.gif);
}

#activityChoices div.saved:after {
    font-family: FontAwesome;
    content: "\f058";
    position: relative;
    float: right;
    right: -20px;
    font-size: 20px;
    color: #109C39;
}

#activityChoices div.allocated,
#activityChoices div.enrolled {
    background-color: #99cc99;
    color: #676767;
}

.iconHolder .del,
.iconHolder .info {
    cursor: pointer;
}

.iconHolder .cost,
.iconHolder .time {
    cursor: help;
}

#activityChoices td div.iconHolder,
#activityOptions td div.iconHolder {
    float: right;
    position: absolute;
    right: 10px;
    top: 12px;
}

#activityChoices td div.iconHolder img,
#activityOptions td div.iconHolder img {
    margin: 0 3px;
}

div.saved .iconHolder,
div.waiting .iconHolder {
    right: 34px !important;
}

.activitySlot img.js-SlotCompleteImg {
    vertical-align: middle;
    height: 34px !important;
}

#activityChoices tr th,
#activityChoices tr td {
    background: var(--global-light-grey);
    border: none;
}

.activityDragDrop {
    font-size: 20px !important;
    padding: 0px 10px;
}

span.activityStatus {
    font-weight: normal;
}

.activityAvailableSlot {
    background-color: var(--global-secondary-color);
    color: var(--global-dark);
    text-align: center;
}

.activitySlotHolder {
    margin-top: 10px;
    margin-bottom: 40px;
}

.activitySlotHolder div>div.inBooking {
    background: var(--global-secondary-color);
}

.activitySlotHolder a {
    display: block;
    color: var(--global-font-colour-grey);
    padding: 5px 15px;
    text-decoration: none;
}

.activitySlotHolder a span.dow {
    font-size: 20px;
}

.activitySlotHolder a span.time {
    font-size: var(--font-size-larger2);
    color: green
}

#activitySlotHeaderInfo span {
    font-size: var(--font-size-larger1);
}

.activityConfirmationCostsLabelPart {
    color: #f8443b !important;
    display: inline !important;
}

#activitySlotHeaderInfo>span {
    width: 24%;
    /*display: inline-block;*/
    text-align: center;
    font-weight: bold;
    color: #094298;
}

.activitySlotHeaderInfo {
    font-size: var(--font-size-larger1);
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #094298;
}

.activityBookingDates {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--grid-verylightgrey-background);
    margin-top: 10px;
}

.activityBookingContent {
    background: var(--global-secondary-color);
    border-radius: var(--global-border-radius);
}

#choiceFeedback ul {
    list-style: none;
}

#js-activityDetailContent {
    /*    padding: 10px 0 0 0;*/
    /*    height: calc(100vh - 60px) !important;*/
}

#js-activityDetailContent div.center {
    margin: 0 auto;
}

#js-activityDetailContent div img {
    max-width: 450px;
    max-height: 250px;
}

#js-activityDetailContent h2 {
    margin: 15px 0;
    margin-left: 20px;
}

#js-activityDetailContent span {
    margin-right: 5px;
    color: var(--global-font-colour-grey);
}

#js-activityDetailContent .title {
    font-weight: bold;
    background: var(--grid-verylightgrey-background);
}

#js-activityDetailContent table table td {
    /*        background-color: #eee;
*/
}

#js-activityDetailContent>table {
    text-align: left;
    /*            margin: 10px 10px 10px 50px;*/
    background-color: #fff;
}

#js-activityDetailContent>table.th {
    width: 30%;
}

#js-activityDetailContent table th {
    background-color: var(--grid-verylightgrey-background);
    text-align: left;
    color: #094298;
}

.activityReviewGridWrapper {
    margin: 20px;
    padding-bottom: 20px;
}

.activityFieldTitle span {
    font-size: var(--font-size);
    font-weight: bold;
    color: var(--school-primary-color) !important;
    margin-bottom: 10px;
}

.activityFieldContent {
    margin-top: 5px;
}

.activityDetailField {
    margin-bottom: 10px;
}

.activityDetailField .sub-info .sub-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    /* Adjust spacing between rows as needed */
}

.activityDetailField .sub-info .bold,
.activityDetailField .sub-info .cell {
    flex: 1 1 43%;
    /* Adjust the basis percentage to control the width */
    margin-right: 2px;
    /* Reduce spacing between elements */
    padding: 0 2px;
    /* Adjust padding as needed */
    box-sizing: border-box;
    align-items: center;
    /* Align items vertically */
}

.activityDetailSubTable {
    border: 1px solid var(--grid-verylightgrey-background);
}

.activityDetailSubTable tr {
    border-top: 1px solid red;
}

.js-accordion-header a {
    color: #fff;
}

.activity-link {
    color: var(--school-primary-color);
}

.activitiesFilterControl select {
    width: 180px !important;
}

.activitiesFilterControl label {
    display: block;
    width: auto;
    text-align: left;
}

.tabHeader {
    padding: 5px 20px;
}

.tabHeader a {
    text-decoration: none;
}

.tabHeader:hover {
    color: var(--school-primary-color) !important;
    border-bottom: var(--school-primary-color) 3px solid !important
}

.tabHeader.active {
    color: var(--school-primary-color) !important;
    background: var(--school-primary-color-lighter3) !important;
    border-bottom: var(--school-primary-color) 3px solid !important
}

.tabControl h3 {
    margin: 0px;
}

.myAccountGridHolder {
    max-height: calc(100dvh - 200px);
}

.myAccountHeader {
    position: sticky;
    top: -5px;
}

.pillBase {
    padding: 2px 10px;
    border-radius: 13px;
    text-decoration: none;
    border: 2px solid;
    white-space: nowrap;
}

/*    tr.overDueRow {
            border-left:5px solid red;
        }*/

/*tr.outstandingRow {
        border-left: 5px solid orange;
    }*/

.myAccountStatus {
    padding: 0px !important;
    min-width: 5px;
    max-width: 5px;
    background-color: white;
}

.myAccountStatus div {
    background-color: white;
    width: 5px;
    height: 100%;
}

tr.outstandingRow td:first-child div {
    background-color: orange;
}

tr.overDueRow td:first-child div {
    background-color: red;
}

tr.paidRow td:first-child div {
    background-color: green;
}

.pillBase.paymentRecievedPill {
    color: white;
    background: #02C780;
    border-left-width: 2px;
}

.pillBase.discountPill {
    background: #FFE86E;
    border-color: #FFE86E;
    border-left-width: 2px;
}

@media only screen and (min-width: 1432px) {
    .activitiesFilterControl label {
        display: inline-block;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 40%;
        text-align: right;
        padding-right: 1em;
        font-weight: bolder;
    }
}

.activitiesEditTable {
    margin-bottom: 10px;
}

.activityEditPanel {
    background: var(--global-secondary-color);
    padding-bottom: 10px;
}

.activityIcon {
    width: 20px;
}

.activityTooltip {
    white-space: nowrap;
    margin: 4px;
}

.columnSortUp {
    width: 10px;
    margin-left: 4px;
    margin-top: 4px;
}

.columnSortDown {
    width: 10px;
    margin-left: 4px;
    padding-bottom: 10px;
}

.activityEditIcon {
    margin: 2px;
}

.filterToolBarControlButton {
    position: relative;
    padding-top: 22px;
    left: 1em;
    bottom: 6px;
    z-index: 10;
    color: var(--school-primary-color);
    cursor: pointer;
    text-decoration: underline;
}

.lnkPupilInsert {
    height: 34px;
}

.upnNoticeContent {
    background: var(--global-secondary-color);
}

.photoIcon {
    width: auto !important;
}

.activityAllocated span {
    color: var(--global-grey);
}

.activityAllocated {
    padding-top: 10px !important;
    vertical-align: top !important;
}

.activityInnerTable {}

.activityDatatable {}

.activityDatatable {
    background: var(--global-secondary-color) !important;
    border-collapse: collapse !important;
    border-color: var(--global-secondary-color) !important;
}

.activityDatatable td.pagingControl table tr {
    border-top-width: 0px !important;
}

.activityDatatable table td:hover {
    background: transparent;
}

.activityDatatable table tr:hover {
    background-color: transparent !important;
}

.activityDatatable tr:not(.rcbReadOnly) {
    vertical-align: middle !important;
    border-top: 1px solid var(--global-mid-grey) !important;
    height: 44px !important;
}

.activityDatatable tr img {
    width: 16px !important;
}

.activityDatatable tr th img {
    padding: 0 5px !important;
    vertical-align: middle !important;
}

.activityDatatable th {
    text-align: left;
    padding-left: 4px !important;
    padding-right: 4px !important;
    vertical-align: middle !important;
    background: var(--global-secondary-color) !important;
    /*not needed - eventually here to override default.css whilst still in use */
    position: sticky !important;
    top: 0 !important;
}

.activityDatatable td:not(.rcbInputCell):not(.rcbArrowCell) {
    padding-left: 4px !important;
    padding-right: 4px !important;
    border: inherit !important;
    /*not needed - eventually here to override default.css whilst still in use */
}

.center,
.center th,
.center a {
    text-align: center !important;
}

.disableActivity a {
    cursor: default;
}

/* #region activities choices modal and panels */

.activity-choice-modal {
    display: none;
    background: #fff;
    opacity: 0;
    justify-content: center;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
}

.activity-choice-modal .fixedButtonBarWhite {
    position: absolute !important;
}

.activity-booking-mobile-feedback {
    width: auto !important;
}

.activity-booking-mobile-feedback ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.activity-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: var(--school-primary-color-lighter3);
    min-height: 30px;
}

.activity-header {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 100;
    padding: 10px 10px 0px 10px;
}

.activity-choice-container {
    position: relative;
    width: 100%;
    margin-top: 110px;
    overflow-y: auto;
}

.activity-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: 38px;
    gap: 10px;
}

.activity-card {
    position: relative;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    background-color: #EAFFEA;
}

.activity-card.disableActivity {
    background: var(--global-extralight-grey);
}

.activity-selection-badge {
    position: absolute;
    top: -12px;
    right: -5px;
    background-color: var(--status-value-red);
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    font-weight: bold;
    width: auto;
    height: 24px;
    border-radius: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--global-border-radius);
}

.activity-selection-badge.enrolled {
    background: var(--status-value-green);
}

.activity-selection-badge.allocated {
    background: var(--status-value-orange);
}

.activity-selection-badge.fullCapacity {
    background: var(--global-dark);
}

.activity-top {
    display: flex;
    align-items: center;
    padding: 10px 10px 0px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.activity-name {
    margin-left: 10px;
    font-weight: bold;
    flex-grow: 1;
}

.activity-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.activity-detail {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.activity-detail left {
    font-weight: bold;
}

.activity-cost {
    font-size: 14px;
    font-weight: bold;
    padding-left: 35px;
}

.activity-cost span.free,
.activity-cost span.paid {
    color: green;
}

.activity-cost span.topay {
    color: red;
}

.activity-icons {
    display: flex;
    gap: 10px;
    font-size: 24px;
}

.activity-icons i {
    cursor: pointer;
}

.activity-card.enrolled {
    /*    background-color: #e0f7e0;*/
}

.activity-card input[type="checkbox"] {
    margin-right: 10px;
}

.activity-card:hover {
    /*    background-color: #f4f4f4;*/
}

.js-activityChoiceModal {
    overflow-y: hidden;
}

.js-choiceContainer {
    overflow-y: auto;
    padding: 0 9px;
}

.activity-close-modal-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ddd;
    color: #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
}

.activity-close-modal-btn:hover {
    filter: brightness(90%);
}

.replace-choice-popover {
    position: fixed;
    background: var(--global-extralight-grey);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.replace-choice-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

.replace-choice-item span {
    margin-right: 10px;
}

.replace-choice-item i {
    cursor: pointer;
    color: #007bff;
    transition: color 0.3s;
}

.replace-choice-item i:hover {
    color: #0056b3;
}

.replace-choice-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}

/* #endregion activities choices modal and panels*/

.activity-sortable-placeholder {
    border: 2px dotted #666;
    height: 40px;
    margin: 5px 0;
    background-color: #f9f9f9;
    visibility: visible !important;
}

/* #endregion activities */

.onlineProviderSetup {
    background: var(--global-secondary-color);
    width: 100%;
}

.paymentProviderCheckBox {
    text-align: center !important;
}

/* #region finance */

.buttonFinance {
    font-size: var(--font-size-larger1);
}

.financeFilterButtons {
    margin-right: -3px;
}

.tablesorter-headerRow {
    border-top: none !important;
}

.tablesorter>th {
    text-decoration: none;
}

.tablesorter-headerRow th.tablesorter-headerAsc div.tablesorter-header-inner::after {
    font-family: FontAwesome;
    position: relative;
    top: 4px;
    content: "\00a0\f0de";
    text-decoration: none;
    float: right;
}

#supplierDialogDiv {
    min-width: 320px;
}

/* #endregion finance */

/* #region breadcrumbs for activities and finance */

.progressLabel {
    border-top-color: #f9d356;
    border-bottom-color: #f9d356;
    color: #809ab5;
    background-color: #f2f1a1;
}

.tablesorter-headerRow th.tablesorter-headerDesc div.tablesorter-header-inner::after {
    font-family: FontAwesome;
    position: relative;
    top: -2px;
    content: "\00a0\f0dd";
    text-decoration: none;
    float: right;
}

.financeGrid {
    padding-bottom: 10px !important;
}

.financeGridWrapperFirstRowBorderNone table tbody tr:first-child,
.financeGridWrapperFirstRowBorderNone table thead tr:first-child {
    border-top: none;
}

.requisitionSummary {
    background: var(--global-background);
    overflow-x: auto;
}

.financeFilterSelect {
    width: 180px !important;
}

.requisitionGridWrapper {
    background: var(--global-background);
    border-radius: var(--global-border-radius);
}

.finalizeOrdersMinWidth {
    min-width: 800px;
}

.finalizeOrdersRequisitionsMinWidth {
    min-width: 1300px;
}

.financeCurrencyColumn {
    text-align: right !important;
    padding-right: 20px !important;
}

.financeInnerTable {
    background: #f3f3f3;
}

.financeInnerTable tbody tr th {
    background: #f3f3f3 !important;
}

td.js-req-overspend {
    border-top: 1px solid red !important;
    border-bottom: 1px solid red !important;
    border-right: 1px solid red !important;
    border-left: 8px solid red !important;
}

/* finance (requisitions) */

.attachFilesInlineWrapper {
    width: 100%;
    margin: 0 0 5px 0;
}

#supplierDialogDiv>div.RadComboBox {
    width: 275px !important;
    /*telerik defaults this to 120px */
}

#supplierDialogDiv {
    min-width: 320px;
}

/* #endregion  breadcrumbs for activities and finance */

/* #region Proofreading */

/* #region Marking Statistics */

.marksheetImageButton {
    cursor: pointer;
}

.marksheetImageButton.removeHandPointer {
    cursor: none !important;
}

.marksheetImageButton:hover {
    opacity: .5;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.progressLabel {
    border-top-color: #f9d356;
    border-bottom-color: #f9d356;
    color: #809ab5;
    background-color: #f2f1a1;
}

.progressLabelNotActive {
    background: var(--school-primary-color-lighter3);
    color: var(--global-dark);
    padding: 8px 25px;
}

.progressLabelActive {
    border-top-color: #fe8d00;
    border-bottom-color: #fe8d00;
    color: #094289;
    background-color: #f9d356;
}

.progressLabelActive1 {
    background: var(--school-primary-color);
    color: var(--global-secondary-color);
    padding: 8px 25px;
    text-decoration: underline;
}

.progressLabelActive2 {
    background: var(--school-primary-color-lighter2);
    color: var(--global-dark);
    padding: 8px 25px;
    text-decoration: underline;
    min-height: 17px;
}

.progressLabelWrapper {
    margin-top: 8px;
    margin-right: 10px;
}

.progressLabelActive3 {
    background: var(--school-primary-color-lighter3);
    color: var(--global-dark);
    padding: 8px 25px;
}

.filterByInfoBar {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: var(--global-border-radius);
    background-color: var(--global-extralight-grey);
    font-size: var(--font-size-smaller);
    padding: 3px 10px 3px 3px;
}

#progressHolder {
    display: flex;
    flex-wrap: wrap;
}

.triangleRightBase {
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-left: 22px solid var(--school-primary-color-lighter3);
    border-bottom: 15.5px solid transparent;
    overflow-x: visible;
    font-size: 0px;
    position: relative;
    top: -4px;
}

.triangleRight1 {
    border-left: 22px solid var(--school-primary-color);
}

.triangleRight2 {
    border-left: 22px solid var(--school-primary-color-lighter2);
}

.triangleRight3 {
    border-left: 22px solid var(--school-primary-color-lighter3);
}

.messageSubject {
    min-width: unset !important;
    width: 99%;
}

.message450 {
    min-width: unset !important;
    width: 99%;
    height: 200px;
}

.statusNotStarted,
.statusStarted,
.statusComplete {
    cursor: inherit;
}

.statusNotStarted {
    color: var(--status-value-red);
}

.statusStarted {
    color: var(--status-value-orange);
}

.statusComplete {
    color: var(--status-value-green);
}

.pupilLevelRightBorder {
    border-right: 1px solid var(--global-border-grey);
}

.pupilLevelLeftBorder {
    border-left: 1px solid var(--global-border-grey);
}

.markingStatSubFilterContainer {
    position: relative;
    margin: 0px;
    padding: 5px 0px 10px 5px;
    background-color: var(--global-panel-grey);
}

.statisticsTopBar .circle-progress {
    cursor: default;
}

.statisticsTopBar .circle-progress-value {
    stroke-width: 12px;
    stroke: var(--status-value-green);
}

.statisticsTopBar .circle-progress-circle {
    stroke: white;
    stroke-width: 22px;
    fill: var(--status-complete-background);
}

.statisticsTopBar .circle-progress-text {
    font-size: 20px;
    fill: var(--global-font-colour-grey);
}

.filterByInfoBar {
    float: right;
    border: 1px solid var(--global-border-grey);
    border-radius: var(--global-border-radius);
    background-color: var(--global-extralight-grey);
    padding: 5px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: var(--font-size-smaller);
}

.filterByInfoBar .js-filteredBy a,
.filterByInfoBar .js-filteredBy i {
    font-size: var(--font-size-smaller);
}

.proofreadingStatus {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--global-border-radius);
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.proofreadingStatus .proofreadingMessage {
    flex: 1;
    padding-left: 20px;
}

.proofreadingStatus .proofreadingMessage .proofreadingLabel {
    color: var(--status-value-orange);
    margin-bottom: 10px;
}

.proofreadingStatus .proofreadingFilterOptions {
    flex: 1;
    float: right;
    margin-right: 20px;
    padding-right: 0px;
}

/* #endregion Marking Statistics */

/* #endregion Proofreading */

/* #region Multiselect Filter */

.fs-wrap {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    width: 200px;
    text-align: left;
}

.fs-label-wrap {
    position: relative;
    background-color: #fff;
    cursor: default;
    border: 1px solid var(--combo-border-color) !important;
    border-radius: var(--global-border-radius) !important;
}

.fs-label-wrap,
.fs-dropdown {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fs-label {
    text-align: left;
    width: 168px;
    margin-top: 1px;
}

.fs-label-wrap .fs-label {
    padding: 6px 22px 6px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fs-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    color: var(--global-dark);
}

.fs-dropdown {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    width: auto;
    margin-top: 5px;
    z-index: 1000;
}

.fs-dropdown .fs-options {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media only screen and (max-width: 500px) {
    .fs-dropdown {
        width: 200px;
    }
    .fs-options {
        overflow: auto !important;
    }
}

.fs-option {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    cursor: default;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.fs-option:last-child {
    border-bottom: none;
}

.fs-option {
    cursor: pointer;
}

.fs-wrap.multiple .fs-option {
    position: relative;
    padding-left: 30px;
}

.fs-wrap.multiple .fs-checkbox {
    position: absolute;
    display: block;
    width: 30px;
    top: 0;
    left: 0;
    bottom: 0;
}

.fs-wrap.multiple .fs-option .fs-checkbox i {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--combo-border-color);
    border-radius: 2px;
    background-color: #fff;
}

.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
    background-color: var(--checkbox-checked-backgroundcolour);
    border-color: transparent;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center;
}

.fs-wrap .fs-option:hover {
    background-color: var(--select2-a) !important;
    color: var(--global-dark) !important;
}

/* #region Range Slider */

.ui-slider {
    float: right;
    width: 200px;
}

.slider-container {
    border: 1px solid var(--global-border-grey);
    border-radius: var(--global-border-radius);
    height: 40px;
    background-color: #fff;
    padding: 0px 12px 5px 10px;
}

.slider-label {
    float: left;
    margin-left: -5px;
}

.slider-value {
    float: right;
    border: 0;
    font-weight: bold;
    background-color: transparent;
    width: 72px;
    margin-top: 4px;
    text-align: right;
}

/*.ui-slider-handle {
    background: #0e6;
    border-radius: 6px;
}

    .ui-slider-handle.ui-state-active {
        border: #093;
    }*/

.ui-slider-range {
    background: var(--global-mid-grey);
}

.ui-slider-handle.ui-corner-all.ui-state-default {
    background-color: var(--global-mid-grey);
}

.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover {
    background-color: var(--global-mid-grey) !important;
    border-color: var(--global-grey) !important;
}

.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover.ui-state-focus,
.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-hover.ui-state-focus.ui-state-active {
    background-color: inherit !important;
    border: none !important
}

@media only screen and (max-width: 700px) {
    .slider-container {
        margin-top: 5px;
    }
}

/* #endregion Range Slider*/

/* #endregion Multiselect Filter */

/* #endregion Marking Statistics */

/* #region Misc */

.pupilReportSubject h1 {
    color: var(--global-dark);
}

.disabledClassMarksheetRow {
    background-color: var(--grid-verylightgrey-background);
}

.scrollTeacherCommentsBtn {
    text-decoration: underline;
}

.scrollTeacherCommentsBtn:hover {
    cursor: pointer;
}

/* #endregion Misc */

/* #region Simple Tab Strip Style - Report Comments */

.pupilReportTeacherCommentContainer,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer {
    padding: 20px;
    margin-top: 5px;
    margin-bottom: 15px;
    background-color: var(--global-secondary-color);
}

.RadTabStrip_Simple.RadTabStripTop_Simple {
    position: relative;
    top: 1px;
    overflow: unset !important;
    z-index: 98;
}

.RadTabStrip_Simple .commentPaneContainer {
    position: relative;
}

.RadTabStrip_Simple .rtsLevel.rtsLevel1 {
    padding-bottom: 0px;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .assessmentStatus {
    width: 99%;
    overflow: hidden;
    margin-top: 0px;
    padding: 5px;
    border-top-left-radius: 0 !important;
}

.pupilReportTeacherReportComment .rtsUL {
    margin-bottom: -2px !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .comment {
    overflow: hidden;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .comment textarea {
    width: 100% !important;
    border-radius: 0px;
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    min-height: 110px;
    margin: 0px;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .comment textarea:disabled {
    background-color: var(--global-secondary-color);
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .rtsLink {
    border-bottom: none;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .rtsImg {
    float: right;
    margin-top: 5px;
    width: 18px;
    height: 15px;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .rtsLink {
    height: 27px;
    margin-top: 4px;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .rtsSelected {
    height: 28px;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabInprogress.commentsTabHover,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabInprogress.rtsClicked,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabInprogress.rtsBefore {
    border-color: var(--status-value-orange);
    background-color: var(--status-inprogress-background) !important;
    color: var(--status-value-orange) !important;
    text-decoration: underline !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabComplete.commentsTabHover,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabComplete.rtsClicked,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabComplete.rtsBefore {
    border-color: var(--status-value-green);
    background-color: var(--status-complete-background) !important;
    color: var(--status-value-green) !important;
    text-decoration: underline !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabIncomplete.commentsTabHover,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabIncomplete.rtsClicked,
.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabIncomplete.rtsBefore {
    border-color: var(--status-value-red);
    background-color: var(--status-incomplete-background) !important;
    color: var(--status-value-red) !important;
    text-decoration: underline !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabInprogress {
    background-color: var(--status-inprogress-background);
    border-color: var(--status-value-orange);
    color: var(--status-value-orange);
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentInprogress .assessmentStatus {
    border: 1px solid var(--status-value-orange) !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabComplete {
    background-color: var(--status-complete-background);
    border-color: var(--status-value-green);
    color: var(--status-value-green);
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentcomplete .assessmentStatus {
    background-color: var(--status-complete-background);
    border: 1px solid var(--status-value-green) !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentcomplete .assessmentStatus textarea {
    background-color: var(--status-complete-background);
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentTabIncomplete {
    background-color: var(--status-incomplete-background);
    border-color: var(--status-value-red);
    color: var(--status-value-red);
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentIncomplete .assessmentStatus {
    border: 1px solid var(--status-value-red) !important;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .reportCommentInprogress.rtsSelected {
    border-bottom: none;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .assessmentStatus textarea {
    overflow-y: auto;
    scrollbar-width: thin;
}

.pupilReportTeacherReportComment .pupilReportTeacherReportCommentContainer .assessmentStatus textarea.unsavedValue {
    background: none !important;
    color: inherit !important;
}

.disabled-checkboxlabel {
    opacity: 0.5;
    cursor: not-allowed;
}

/* #endregion Simple Tab Strip Style - Report Comments */

/* #region Status Banner */

.assessmentStatusOptions label:hover {
    cursor: pointer;
    text-decoration: underline;
}

.assessmentStatus {
    width: 100%;
    margin: 10px 0px 5px 0px;
    padding: 7px 0px 5px 0px;
    border-radius: var(--global-border-radius);
}

.circle-progress-text {
    font-family: var(--global-font-family);
    font-weight: bold;
    font-size: 22px;
}

.assessmentStatus .assessmentProofContainer {
    padding: 0px 10px 5px 10px;
    color: inherit;
    display: flex;
}

.assessmentStatus .assessmentProofContainer .assessmentContainerRow {
    color: inherit;
    display: inline-flex;
    width: 100%;
}

.assessmentStatus .assessmentProofContainer .assessmentStatusMsg {
    color: inherit;
    flex: 1;
    min-width: 50%;
    padding-top: 3px;
}

.assessmentStatus .assessmentProofContainer .assessmentStatusOptions {
    flex: 1;
    min-width: 50%;
    text-align: right;
}

.assessmentInfoIcon {
    margin-Bottom: -2px;
}

.marksheetStatusMsg {
    float: left;
    margin-left: 10px;
}

.pupilReportSubject .marksheetStatusMsg {
    margin-left: 0px;
}

.inprogress .marksheetStatusMsg span {
    color: var(--status-value-orange);
}

.incomplete .marksheetStatusMsg span {
    color: var(--status-value-red);
}

.complete .marksheetStatusMsg span {
    color: var(--status-value-green);
}

/* #endregion Status Banner */

/* #region Grades */

.gradeReportComments {
    float: left;
    margin-right: 10px;
    height: 38px;
}

.assessmentGradeValue {
    font-size: var(--font-size-larger2);
    margin-top: -2px;
}

.grade-iconEdit {
    /*    margin-top: 5px;
    margin-right: 3px;*/
}

/* #endregion End Grades*/

/* #region Marking Progress Graphic */

.marksheetProgressChart {
    margin-top: -5px;
    margin-bottom: -10px;
    margin-right: 5px;
}

.circle-progress {
    width: 45px;
    height: auto;
    cursor: pointer;
}

.statisticsTopBar .circle-progress {
    width: 55px;
}

.circle-progress-value {
    stroke-width: 10px;
}

.circle-inprogress .circle-progress-value {
    stroke: var(--status-value-orange);
}

.circle-complete .circle-progress-value {
    stroke: var(--status-value-green);
}

.circle-progress-circle {
    stroke-width: 10px;
    stroke: var(--status-incomplete-background);
}

.circle-incomplete .circle-progress-circle {
    filter: brightness(97%);
}

.circle-progress-text {
    font-family: var(--global-font-family);
    font-weight: bold;
    font-size: 26px;
}

.circle-incomplete .circle-progress-text {
    fill: var(--status-value-red);
}

.circle-can-click .circle-progress-text tspan {
    text-decoration: underline;
}

.marksheetProgressChart.circle-can-click:hover {
    opacity: .5;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.circle-inprogress .circle-progress-text {
    fill: var(--status-value-orange);
}

.circle-complete .circle-progress-text {
    fill: var(--status-value-green);
}

/* #endregion Marking Progress Graphic */

/* #region Marking Outstanding Tooltip */

table.tableTooltipMarkingOutstanding {
    max-width: 320px;
    border-collapse: collapse;
}

table.tableTooltipMarkingOutstanding th {
    padding: 5px;
    background-color: transparent;
    color: var(--global-dark);
}

table.tableTooltipMarkingOutstanding td {
    padding: 5px;
}

/* #endregion Marking Outstanding Tooltip */

/* #endregion Proofreading */

/* #region Expanded Modals */

.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1001;
    background-color: white;
}

.expandedShowTitle {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100dvh;
    max-height: Calc(100dvh - 67px);
    background-color: white;
}

/* #endregion Expanded Modals */

/* #region Attendance Mobile View */

.beta-box {
    vertical-align: super;
    font-size: 0.6em;
    color: var(--status-value-orange);
    background-color: transparent;
    padding: 0;
}

.attendance-desktop-view {
    display: block;
}

.attendance-mobile-view {
    display: none;
}

.attendance-message-send {
    color: var(--school-primary-color);
}

.attendance-message-resend {
    color: #109C39;
}

.attendance-textarea:disabled {
    background-color: var(--global-greyed-out);
}

/* #region Loading indicator */

.interface-data-refresh {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 10px 20px 20px;
    background: white;
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
    z-index: 5100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #333;
}

/* Dots container */

.interface-data-refresh .dots {
    display: inline-block;
    width: 24px;
    /* Enough width for the dots */
    text-align: left;
    /* Align dots properly */
    overflow: hidden;
    vertical-align: middle;
}

/* Keyframes for dot animation */

@keyframes dots {
    0% {
        content: "";
    }
    33% {
        content: ".";
    }
    66% {
        content: "..";
    }
    100% {
        content: "...";
    }
}

/* Applying the dots animation */

.interface-data-refresh .dots::after {
    content: "";
    display: inline-block;
    animation: dots 1.5s steps(3, end) infinite;
}

/* #endregion Loading indicator */

/* #region Activity Schedules/Booking */

.activityFilter,
.activityFilter .collapsibleFilterExpandedContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px 0 10px;
}

.activityFilter label,
.activityFilter .collapsibleFilterExpandedContent label {
    margin-left: 0px;
}

.activityFilter label,
.activityFilter .collapsibleFilterExpandedContent label,
.activityFilter select,
.activityFilter .collapsibleFilterExpandedContent select,
.activityFilter .select2-container,
.activityFilter .collapsibleFilterExpandedContent .select2-container {
    flex: 1 1 100%;
    box-sizing: border-box;
}

.activityFilter .checkbox-group,
.activityFilter .collapsibleFilterExpandedContent .checkbox-group {
    display: flex;
    align-items: center;
    padding: 5px 0 5px 8px;
    margin-top: 5px;
}

.activityFilter .checkbox-group label,
.activityFilter .collapsibleFilterExpandedContent .checkbox-group label {
    margin-left: 5px;
    margin-right: 10px;
}

.activityFilter .select2-container,
.activityFilter .collapsibleFilterExpandedContent .select2-container {
    margin-left: 5px;
    padding-right: 5px;
}

.activityFilter .select2-container .select2-selection--single,
.activityFilter .collapsibleFilterExpandedContent .select2-container .select2-selection--single {
    height: auto;
    width: 100%;
    box-sizing: border-box;
}

.activityFilter .select2-container .select2-selection__arrow,
.activityFilter .collapsibleFilterExpandedContent .select2-container .select2-selection__arrow {
    padding-top: 3px;
    padding-left: 20px;
}

.header.activity-booking-header {
    padding-left: 10px;
    padding-right: 10px;
}

.mobileTitleHeader {
    font-size: 18px;
    padding-left: 15px;
    margin-bottom: 20px;
    color: var(--school-primary-color);
    font-weight: bold;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.mobileTitleHeader a {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-decoration: underline;
    display: inline;
}

.activity-booking-header .mobileTitleHeader {
    padding-left: 8px;
}

.activity-status-message span {
    display: inline-block;
    width: 100%;
}

.activity-status-message span span {
    display: inline;
}

/* #endregion Activity Schedules/Booking */

/* #region Activity Booking */

.activity-action-buttons {
    padding: 10px;
}

.activity-action-buttons div.js-unpaid-text {
    width: auto;
    /* Adjust width to fit content */
    text-align: left;
    /* Align text to the left */
    flex: 1;
    /* Flex to start */
}

.activity-action-buttons .link-container {
    justify-content: flex-end;
    /* Align links to the right */
    text-align: right;
    width: auto;
    /* Adjust width to fit content */
    flex: 1;
    /* Flex to end */
}

.mobile-activity-info-collapse {
    display: none !important;
}

.activityBookingContent #toggleDiv {
    display: block;
}

.activity-status-message {
    margin: -10px 10px 5px 10px;
}

a.entityLink {
    display: inline;
    text-decoration: underline !important;
}

.dayBookItemActions div.fa-solid.fa-coins {
    align-content: center;
}

.attendanceDateContainer {
    position: relative;
}

.attendanceDateRange {
    position: absolute;
    left: 0px;
}

.unsetWidth {
    width: unset !important;
}

.mainContent:has(.dayBookGrid) .mobileBottomScreen.mobileButtonsEvenly.js-moreInformationPanel {
    display: none;
}

@media only screen and (min-device-width: 601px) and (min-device-height: 601px) {
    .hideForNonMobile {
        display: none !important;
    }
    .daybookPupilSection.js-daybookPupilSectionExpanded {
        display: table-cell !important;
    }
    .item .daybookIconHolder .dayBookItemActions {
        clear: both;
    }
}

/* #endregion Activity Booking */

@media only screen and (max-device-width: 600px) and (orientation: portrait),
only screen and (max-device-height: 600px) and (orientation: landscape) {
    :root {
        --font-size-smaller: 12px;
        --font-size: 15px;
        --font-size-larger1: 15px;
        --font-size-larger2: 17px;
        --daybook_field-size: calc(100dvw - 35px);
    }
    ::-webkit-scrollbar {
        display: none;
    }
    * {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }
    .jsgrid-table tr:hover {
        background: white;
    }
    table th:has(i.fa-solid.fa-shuffle.fa-rotate-90) {
        padding-right: 10px;
    }
    .datatableHover tr:hover,
    .datatableHover tr:hover td {
        background: var(--global-secondary-color) !important;
    }
    .noPointerEventsForMobile {
        pointer-events: none;
    }
    .myPupilsContents .gridWrapper {
        padding: 0px;
    }
    .myPupilsContents .gridWrapper .datatable {
        border-width: 0px !important;
    }
    /* Daybook for mobile */
    .filterTextbox.fieldSearchIcon {
        padding-top: 5px;
        padding-bottom: 5px;
        height: 26px;
    }
    .dateFilterSearch .datepickerInputWidth,
    .dateFilterSearch .RadInputFocused,
    .dateFilterSearch .RadInputFocused .riFocused {
        height: unset !important;
        outline: none;
    }
    /* Daybook for mobile */
    .filterTextbox.fieldSearchIcon {
        padding-top: 5px;
        padding-bottom: 5px;
        height: 26px;
    }
    #myAccount th {
        word-break: auto-phrase;
    }
    .pupilImgNonResponsive {
        display: none;
    }
    .userFilterControl .dateRangeContainer .filterDateRange,
    .mobileDatePickerFullWidth .dateRangeContainer .filterDateRange {
        width: 96% !important;
    }
    .myAccountGridHolder.archiveTransactions {
        max-height: calc(100dvh - 295px)
    }
    .myAccountGridHolder.outstandingTransactions {
        max-height: calc(100dvh - 283px);
    }
    .searchContainer input {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .RadComboBox.RadComboBox_StyleFilter.height28 {
        height: 38px !important;
        align-content: center;
    }
    #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) #dayBookNames ul,
    #contentHolder:has(.collapsibleFilterContainer input.checkboxHideFilter:checked) .daybookTemplates {
        max-height: calc(100vh - 280px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .mobileAddDaybookLabel {
        display: inline-block;
        width: 20dvw;
    }
    #addDaybookHolder .rcbInputCell input {
        display: flex;
        width: calc(70dvw - 30px) !important;
    }
    #addDaybookHolder .RadComboBox.RadComboBox_StyleFilter {
        width: 70dvw !important;
    }
    table.daybookTable tr td table,
    table.daybookTable tr td table tr,
    table.daybookTable tr td table tr td,
    table.daybookTable tr td table th {
        background: none !important;
    }
    #entityName {
        align-items: center;
        padding-top: 10px;
    }
    #dayBookNames .namesHeader {
        height: unset;
    }
    .emptyGridContainer {
        position: relative;
        top: unset !important;
        left: unset !important;
        text-wrap: auto !important;
    }
    #entityName h1 {
        margin-bottom: 0px !important;
    }
    .dayBookGrid h1,
    .dayBookEntityLink {
        text-align: left;
        margin-left: 10px;
        padding-top: 0px;
    }
    table#daybook {
        table-layout: fixed;
        width: calc(100dvw - 25px) !important;
    }
    .dayBookGridHolderCurrent .item {
        width: calc(100dvw - 3px);
        padding: 0px;
    }
    .item .daybookIconHolder .dayBookItemActions {
        width: calc(100% - 50px);
        justify-content: flex-end;
        padding-top: 5px;
    }
    .item:not(:has(.itemToggle)) .daybookIconHolder .dayBookItemActions {
        width: calc(100% - 5px);
    }
    .item .daybookIconHolder {
        float: none !important;
    }
    .daybookTable {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100dvw !important;
    }
    table#dayBook .item .fa-regular.fa-circle-chevron-down,
    table#dayBook .item .fa-regular.fa-circle-chevron-up {
        padding: 13px 15px 0 0;
        font-size: 22px;
    }
    table#dayBook tr table tr th {
        width: 30%;
    }
    .daybookTable>tbody>tr>td {
        width: 70%;
        border-bottom: white 2px solid;
    }
    .daybookTable>tbody>tr>th {
        border-top: white 2px solid;
    }
    .daybookTable>tbody>tr>td,
    .daybookTable>tbody>tr>th {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        width: var(--daybook_field-size) !important;
        padding: 5px 10px 5px 25px !important;
    }
    .mobileFilters.controls .control,
    .mobileFilters.filterToolbar .filterBarControl {
        display: flex;
        flex-direction: column;
        height: unset;
        align-items: flex-start;
        text-align: left;
    }
    .rlbGroupNoMargin .rlbGroupRight {
        margin-right: 0px !important;
    }
    .mobileFilters.controls .control .RadComboBox {
        width: calc(100dvw - 70px) !important;
        padding: 5px 0;
    }
    .mobileFilters.controls .control .filterTextbox {
        width: calc(100dvw - 80px) !important;
    }
    .js-appointmentModal table.js-calendarFields>tbody>tr>td {
        display: inline-block;
        width: calc(100dvw - 40px) !important;
        padding: 5px;
    }
    .js-appointmentModal table.js-calendarFields>tbody>tr>td>span input {
        float: none !important;
    }
    .js-appointmentModal table.js-calendarFields>tbody>tr>td>input {
        width: calc(100dvw - 50px) !important;
    }
    .filterBarDivWrapper.mobileFilters .filterBarControl {
        display: flex;
        flex-direction: column;
        height: unset;
        width: 100dvw;
    }
    .filterBarDivWrapper.mobileFilters .filterBarControl .filterTextbox {
        width: calc(100dvw - 60px) !important;
    }
    .dayBookGrid .gridWrapper {
        padding-left: 0px;
        padding-right: 0px;
    }
    .dayBookGrid>.gridWrapper {
        margin-top: 0px;
    }
    .daybookWrapper {
        padding: 0px 0px 0px 0px;
    }
    div.rcbSlide {
        border: #afa2a2 1px solid;
    }
    .baseTextbox {
        border-radius: var(--global-border-radius);
        border: 1px solid var(--combo-border-color);
        height: 24px;
        padding-left: 5px;
    }
    .unsavedValue:not(textarea):not(table.daybookTable>tbody>tr>td) {
        height: 28px;
    }
    /* Daybook Fields*/
    .flcEntitySelection>div {
        min-width: calc(100dvw - 20px);
    }
    .flcEntitySelection>div:not(:first-child) .rlbGroupRight {
        width: calc(100% - 20px);
    }
    table .tblDaybookTempMarker th,
    table.tblDaybookTempMarker td {
        display: inline-block;
        width: 50dvw;
        background: white !important;
    }
    table.daybookTable tr.costItemField>td>span {
        width: var(--daybook_field-size) !important;
        padding: 5px 0;
    }
    table.daybookTable tr.costItemField>td,
    table.daybookTable table[id*="_tblAttachments"] th,
    table.daybookTable table[id*="_tblAttachments"] td {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    table.daybookTable tr.costItemField>td input.costItemDescription {
        width: unset !important;
    }
    table.daybookTable .js-attachment-container {
        flex-direction: column;
    }
    table.daybookTable .js-attachment-container .fileSummary {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    table.daybookTable .js-attachment-container .baseTextbox {
        width: calc(100dvw - 72px);
        align-self: flex-start;
    }
    table.daybookTable .js-attachment-container .buttonBase {
        margin-top: 20px;
        width: calc(100dvw - 59px);
    }
    table.daybookTable tr.mediaField div.daybookMedia_Thumbnails {
        display: flex;
        display: -webkit-flex;
        overflow-x: auto;
        max-width: var(--daybook_field-size) !important;
    }
    table.daybookTable tr.bodyMapField td {
        overflow-x: none;
        display: block;
    }
    table.daybookTable tr.bodyMapField .bodyMapWrapper {
        overflow-x: auto;
    }
    table.daybookTable tr.bodyMapField td .body-map {
        margin: 0;
    }
    .appointmentReadField table,
    .appointmentReadField table>tbody>tr {
        background: white !important;
    }
    .appointmentReadField table>tbody>tr>th,
    .appointmentReadField table>tbody>tr>td {
        display: inline-block;
        background: transparent !important;
    }
    .updateHistoryField table>tbody>tr,
    .updateHistoryField table>tbody>tr>th,
    .updateHistoryField table>tbody>tr>td,
    .updateHistoryField table {
        background: white;
    }
    .star-label {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
    }
    table.noticeField {
        background: white !important;
    }
    table.noticeField span {
        padding: 0px;
        border: none !important;
        width: 105px !important;
    }
    tr.equipmentRegisterField td table tr,
    tr.classField td table tr,
    tr.locationField td table tr {
        border: none;
    }
    .daybookTable tr.classField table tr td:first-child,
    .daybookTable tr.locationField table tr td:first-child,
    .daybookTable equipmentRegisterField table tr td:first-child {
        font-weight: bold;
        color: var(--global-font-colour-grey);
    }
    div#pupilAttendance {
        max-width: 100dvw;
        overflow-x: auto;
    }
    div#chart div {
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .star-label:has(> :nth-child(10)) i,
    .rating-input:has(> :nth-child(10)) i {
        font-size: 28px;
    }
    .daybookTable tr:has(span.js-followUpLabel) td {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    /* Edit Daybook Field */
    .daybookEditEntry .contactNotified .control {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        height: unset !important;
    }
    .daybookEditEntry .contactNotified .control .dateInput {
        width: calc(100dvw - 165px) !important;
        max-width: 190px !important;
    }
    .daybookEditEntry .contactNotified .control .dateInput .riTextBox {
        width: inherit !important;
        max-width: 190px !important;
        height: 36px !important;
    }
    .daybookEditEntry .contactNotified .control .RadTimePicker {
        width: unset !important;
    }
    .daybookEditEntry .contactNotified .control .RadTimePicker .riTextBox {
        height: 36px !important;
        width: calc(100dvw - 250px);
        max-width: 100px !important;
    }
    .daybookEditEntry tr.daybookDateTime .RadInput .riTextBox {
        height: 36px !important;
        width: 33dvw !important;
        font-size: var(--font-size-larger1);
    }
    .daybookEditEntry tr.daybookTime .RadInput .riTextBox {
        height: 36px !important;
        width: calc(100dvw - 55px) !important;
        font-size: var(--font-size-larger1);
    }
    .daybookEditEntry tr.daybookDateTime .dateTextbox {
        width: 50dvw !important;
        font-size: var(--font-size-larger1);
    }
    .daybookEditEntry tr.daybookDate .dateTextbox {
        width: calc(100dvw - 55px) !important;
        font-size: var(--font-size-larger1);
    }
    .daybookEditEntry tr.daybookTextField>td,
    .daybookEditEntry tr.daybookAppointmentField>td {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    .daybookEditEntry tr.daybookAppointmentField>td,
    .daybookEditEntry tr.daybookLinkItem>td,
    .daybookEditEntry tr.daybookAdditionalUpdateField>td {
        padding-bottom: 15px !important;
    }
    .daybookEditEntry tr.daybookAppointmentField>td .buttonBase.buttonSecondary,
    .daybookEditEntry tr.daybookAdditionalUpdateField>td .buttonBase.buttonSecondary {
        margin-left: 0px;
    }
    .daybookEditEntry tr.daybookTextField>td textarea {
        font-size: var(--font-size-larger1);
    }
    .daybookEditEntry tr.daybookComboField>td>.RadComboBox,
    .daybookEditEntry table.noticeField>tbody>tr>td .RadComboBox {
        width: calc(100dvw - 45px) !important;
        padding: 5px 0;
    }
    .daybookEditEntry tr.daybookComboField>td>.RadComboBox .rcbInput,
    .daybookEditEntry table.noticeField>tbody>tr>td .RadComboBox,
    .portalModal.fullMobileModal.js-appointmentModal .RadComboBox .rcbInput {
        font-size: var(--font-size-larger1) !important;
    }
    .daybookEditEntry table.noticeField>tbody>tr>td {
        display: inline-block;
    }
    .daybookEditEntry table.noticeField>tbody>tr>td:first-child {
        width: 120px;
    }
    .daybookEditEntry table.noticeField>tbody>tr>td:nth-child(2) {
        width: calc(100dvw - 200px);
    }
    .daybookEditEntry table.noticeField>tbody>tr>td:nth-child(3) span {
        width: 80dvw !important;
    }
    .daybookEditEntry table.noticeField>tbody>tr>td .RadComboBox {
        width: calc(100dvw - 55px) !important;
    }
    .daybookEditEntry tr.daybookAdditionalUpdateField td {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
    }
    .portalModal.fullMobileModal.js-appointmentModal .dtpWrapper .riTextBox {
        height: 36px !important;
        min-width: calc(50dvw - 25px) !important;
        font-size: var(--font-size-larger1);
    }
    .portalModal.fullMobileModal.js-appointmentModal .RadComboBox {
        width: calc(100dvw - 45px) !important;
        padding: 5px 0;
    }
    .daybookEditEntry tr.bodyMapField .swatch-wrapper .holder .color {
        width: calc(20dvw -108px) !important;
    }
    .daybookEditEntry tr.bodyMapField {
        overflow: hidden;
    }
    div.m-signature-pad canvas {
        width: calc(100dvw - 45px) !important;
    }
    .daybookSignatureField img {
        max-width: calc(100dvw - 40px);
    }
    /* End Edit Daybook Field */
    .notifiedContactContainer {
        left: 0;
        right: 0;
        top: 0px;
        bottom: 0;
    }
    .notifiedContactContent {
        max-height: unset;
        height: 100%;
        left: 0;
        width: calc(100dvw - 50px);
    }
    .notifiedContactContent .parentDetailsPanel {
        width: calc(100dvw - 40px);
    }
    .notifiedContactContent #pupilParentDetails>.contactInfoPanel {
        max-height: calc(100dvh - 100px);
    }
    /* End Daybook Fields*/
    div#chartWrapper .marginLeft20:has(>.dateRangeContainer) {
        margin-left: 0px !important;
    }
    div#chartWrapper .dateRangeContainer .filterDateRange {
        width: calc(100dvw - 30px) !important;
    }
    div#chartWrapper .dateRangeContainer {
        margin-top: 10px;
    }
    div#chartWrapper input#btnGetChartData {
        margin-top: 10px;
        margin-left: 0px !important;
    }
    div#chartWrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100dvw;
    }
    div#chartWrapper>div,
    #chartWrapper>div>div {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        float: none !important;
        align-items: self-start;
        width: 100dvw;
    }
    div#chartWrapper .select2-container {
        width: calc(100dvw - 20px) !important;
        max-width: calc(100dvw - 20px);
    }
    div #chartWrapper span[id*="_lblChartableTemplate"] {
        display: none;
    }
    div[id*="_aDaybookCharts"],
    div[id*="_aDaybookCharts"] div {
        overflow: unset !important;
    }
    div[id*="_aDaybookCharts"],
    div[id*="_aDaybookCharts"] div {
        overflow: hidden !important;
    }
    div[id*="_upnlIncidents"] .filterToolbar.gradient {
        width: calc(100dvw + 1px);
        margin-left: -5px;
        overflow: hidden !important;
    }
    div[id*="_upnlIncidents"] .gridStatus {
        width: calc(100dvw - 80px);
    }
    div[id*="_upnlIncidents"] .item {
        margin-left: -10px;
    }
    div#contentHolder:not(:has(.notifiedContactContent .js-ClosePupilContacts)) .js-ClosePupilContactsClone {
        display: none;
    }
    #addDaybookEntry input[type=submit] {
        float: none !important;
        margin: 10px auto 0 auto;
    }
    #addDaybookEntry {
        padding: 40px 41px 10px 15px;
        text-align: justify;
    }
    .daybookContainer .mobileBottomScreen.mobileButtonsEvenly:not(:has(.actionsDropdownWrapper)) {
        justify-content: center;
    }
    .daybookContainer .mobileBottomScreen.mobileButtonsEvenly:not(:has(.actionsDropdownWrapper)) .js-addNewEntry-holder,
    .daybookContainer .mobileBottomScreen.mobileButtonsEvenly:not(:has(.actionsDropdownWrapper)) .js-addNewEntry-holder #addDaybookHolder,
    .daybookContainer .mobileBottomScreen.mobileButtonsEvenly:not(:has(.actionsDropdownWrapper)) .js-addNewEntry-holder #addDaybookHolder a {
        width: 100%;
        text-align: center;
    }
    /* End Daybook for mobile */
    /* #region Activity Booking */
    .attendanceDateContainer {
        flex-direction: column;
    }
    .attendanceSummaryModal {
        margin: 0px !important;
        max-width: calc(100dvw) !important;
    }
    .attendanceDateRange {
        position: static !important;
        padding-bottom: 20px;
        text-align: center;
    }
    .activity-action-buttons {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        /* Stack children vertically by default */
        align-items: center;
        /* Center align the children */
        text-align: center;
        z-index: 1002;
    }
    .activity-action-buttons div.js-unpaid-text {
        width: 100%;
        display: block;
        /* Ensure the div is on its own line by default */
        text-align: left;
        /* Default alignment */
        margin-bottom: 5px;
        margin-left: 20px;
    }
    .balanceControlContainer table.balanceControlOuterTable {
        width: calc(200vw - 100px);
    }
    .fa-pen-to-square,
    .fa-rotate-left,
    .fa-floppy-disk {
        font-size: var(--font-size-larger2);
        padding-left: 5px;
        padding-right: 5px;
    }
    .radMobileDropdowns .RadComboBox {
        z-index: 0;
    }
    .dayBookGrid {
        padding: 0px;
    }
    .gridActions a {
        text-align: center;
    }
    .showActionsDropDown,
    .mobileBottomScreenOptions {
        top: unset !important;
        position: fixed !important;
        bottom: 0px !important;
        left: 0px !important;
        right: 0px !important;
    }
    .radMobileDropdowns.rcbSlide {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: 65px !important;
    }
    .radMobileDropdowns.rcbSlide .custom_radCloseContainer .buttonBase {
        width: calc(100vw - 10px);
    }
    .radMobileDropdowns.rcbSlide li.rcbItem,
    .radMobileDropdowns.rcbSlide li.rcbHovered {
        padding-top: 10px !important;
    }
    .radMobileDropdowns .rcbItem:not(:has(input)),
    .radMobileDropdowns .rcbHovered:not(:has(input)) {
        padding-left: 10px !important;
    }
    .radMobileDropdowns .rcbScroll.rcbWidth {
        height: calc(100dvh - 120px) !important;
        max-height: unset !important;
    }
    .radMobileDropdowns .RadComboBoxDropDown {
        height: calc(100dvh - 115px) !important;
        overflow: hidden !important;
    }
    .mobileMaxHieght70vh {
        max-height: 70vh !important;
        overflow: auto;
    }
    .mobileMaxHieghtMinus210 {
        max-height: calc(100vh - 210px) !important;
        overflow: auto;
    }
    .udf_editbutton i {
        display: flex;
        display: -webkit-flex;
        align-items: unset;
        justify-content: center;
        padding: 5px;
    }
    .subFilter.mobileSubFilter .control {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        text-align: left;
        height: unset;
    }
    .subFilter.mobileSubFilter .control {
        width: calc(100% - 20px) !important;
    }
    .subFilter.mobileSubFilter .control .RadComboBox,
    .subFilter.mobileSubFilter .control .RadDropDownTree {
        width: 100% !important;
        height: 38px;
        align-content: center;
    }
    table.whiteTable .fs-wrap {
        width: calc(100vw - 30px) !important;
    }
    table.whiteTable .select2-container {
        width: 100% !important;
    }
    .balanceControlContainer {
        max-width: calc(100vw - 20px);
        overflow: auto;
    }
    .balanceControlContainer table.balanceControlOuterTable {
        width: calc(200vw - 100px);
    }
    .mobileTableRow .RadDropDownTree,
    .mobileTableRow .RadComboBox {
        width: calc(100vw - 45px) !important;
        padding-bottom: 2px;
    }
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:first-child,
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:nth-child(3) {
        width: calc(100vw - 120px);
    }
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:nth-child(2) {
        width: 30px !important;
    }
    .fullMobileModal .portalModalInner,
    .modalContent {
        max-height: calc(100dvh - 120px) !important;
    }
    .fullMobileModal div.portalModalInner.portalModalLargeInner {
        max-height: calc(100dvh - 20px) !important;
    }
    .fullMobileModal.deepBottomBar .portalModalInner,
    .modalContent {
        max-height: calc(100dvh - 190px) !important;
    }
    .portalModal.fullMobileModal.fullWidthMobileModal {
        width: 100vw !important;
    }
    .portalModal.fullMobileModal,
    .quickPointsContent.fullMobileModal {
        height: calc(100dvh - 20px);
        top: 0px !important;
        max-height: 100dvh !important;
        max-width: 100dvw !important;
        width: calc(100dvw - 20px) !important;
        min-width: 50% !important;
        padding: 10px;
        left: 0px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter input.buttonBase,
    .customModal.fullMobileModal .portalModalFooter input.buttonBase {
        height: 42px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter .buttonBase,
    .customModal.fullMobileModal .portalModalFooter input.buttonBase {
        height: 40px !important;
        align-content: center;
        padding-top: 0px;
        padding-bottom: 0px;
        border: 1px solid var(--school-primary-color);
        text-align: center;
        flex: 1 1;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter,
    .portalModal.fullMobileModal .spaceEvenly,
    .customModal.fullMobileModal .portalModalFooter,
    .customModal.fullMobileModal .spaceEvenly {
        display: flex;
        display: -webkit-flex;
        justify-content: space-evenly;
        /*            flex-direction: row-reverse;*/
    }
    .portalModal.fullMobileModal .portalModalFooter,
    .customModal.fullMobileModal .portalModalFooter {
        position: fixed;
        bottom: 0;
        z-index: 999;
    }
    #notice-wrapper.fullMobileModal a#closeModal {
        right: 30px;
    }
    #notice-wrapper.fullMobileModal #notice-attachments {
        position: sticky;
        bottom: 0px;
    }
    .topControls div.control {
        display: flex;
        height: unset;
    }
    .mobileTableRow {
        display: table-row;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: repeat(1, var(--filter-width));
    }
    .mainContent:has(#ctl00_PageContent_pupilInfo_pupilNavigationChoices_modal) .contentContainer:last-child {
        margin-bottom: 90px;
    }
    .mobileMax100wView {
        max-width: 100vw !important;
        overflow: auto;
    }
    .portalModal .modalMove.hand {
        display: none;
    }
    .filterBarDivWrapper label {
        margin-bottom: 0px;
    }
    .mobileFilters.topControls div.control label {
        width: 100%;
        min-width: 100%;
    }
    table.udf_container td:nth-child(2) {
        padding-left: 20px;
    }
    table.udf_container input[type='text'],
    table.udf_container select {
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
    .lastLoginInfo {
        display: none;
    }
    table.info.udf_container {
        width: 100%;
    }
    .item .RadComboBox {
        width: unset !important;
    }
    .mobileFlexDirectionUnSet {
        flex-direction: unset !important;
    }
    .mobileNoWidthSet {
        width: unset !important;
    }
    .mobileMinus10LeftMargin {
        margin-left: -10px;
    }
    .mobile0Padding {
        padding: 0px !important;
    }
    .activity-action-buttons .link-container {
        display: flex;
        /* Use flexbox to align a elements inline */
        justify-content: center;
        /* Center the a elements */
        text-align: center;
        width: 100%;
    }
    .activity-action-buttons a {
        height: 30px;
        line-height: 30px;
        width: 45%;
        display: inline-block;
        /* Ensure the a elements are inline */
    }
    .activity-action-buttons a:only-child {
        width: 100%;
    }
    /* #endregion Activity Booking */
    /* #region Activities mobile view */
    .mobileTitleHeader {
        margin-bottom: 5px;
        padding-right: 30px;
    }
    .mobile-activity-info-collapse {
        display: block !important;
        position: absolute;
        top: 12px;
        right: 10px;
        color: var(--global-grey);
        font-size: 27px;
    }
    .activityBookingContent #toggleDiv {
        display: none;
    }
    .activity-status-message {
        margin: 0px 15px -5px 15px;
    }
    /* #endregion Activities mobile view */
    .mobile0Padding {
        padding: 0px !important;
    }
    .activity-review-filter .mobile0Padding {
        padding-top: 40px !important;
    }
    .mobileMinus10SideMargin {
        margin-left: -10px;
        margin-right: -10px;
    }
    .mobileMinus20SideMargin {
        margin-left: -20px;
        margin-right: -20px;
    }
    .mobile0SideMargin {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .mobile5LeftMargin {
        margin-left: 5px;
    }
    .mobileMinus5LeftMargin {
        margin-left: -5px;
    }
    .mobilePaddingRight0 {
        padding-right: 0px;
    }
    .mobilePaddingLeft0 {
        padding-left: 0px !important;
    }
    .mobilePaddingLeft15 {
        padding-left: 15px !important;
    }
    .mobilePaddingTop40 {
        padding-top: 40px !important;
    }
    .mobilePaddingTop10 {
        padding-top: 10px !important;
    }
    .mobileFlex100Minus50 {
        flex-basis: calc(100vw - 50px) !important;
    }
    .mobileMarginTop10 {
        margin-top: 10px;
    }
    .mobileMargin0 {
        margin: 0px !important;
    }
    .topControls div.control {
        width: unset;
    }
    .udf_editbutton i {
        display: flex;
        align-items: unset;
        justify-content: center;
        padding: 5px;
    }
    .mobileMargin0 {
        margin: 0px !important;
    }
    .topControls div.control {
        width: unset;
    }
    .subFilter.mobileSubFilter .control {
        display: flex;
        flex-direction: column;
        text-align: left;
        height: unset;
    }
    .filterFlexRow .userFilterControl .dateRangeContainer {
        padding: 0px;
    }
    .mobileFullWidthMinus {
        width: calc(100%) !important;
    }
    .mobileFullWidthMinus10px {
        width: calc(100% - 10px) !important;
    }
    .mobileFullWidthMinus20px {
        width: calc(100% - 20px) !important;
    }
    .mobileFullDisplayWidthMinus30px {
        width: calc(100dvw - 30px) !important;
    }
    .mobileFullDisplayWidthMinus25px {
        width: calc(100dvw - 25px) !important;
    }
    .mobileFullDisplayWidthMinus20px {
        width: calc(100dvw - 20px) !important;
    }
    .subFilter.mobileSubFilter .control {
        width: calc(100% - 20px) !important;
    }
    .subFilter.mobileSubFilter .control .RadComboBox {
        width: 100% !important;
        height: 38px;
        align-content: center;
    }
    .mobileFullWidthMinus40px {
        width: calc(100% - 40px) !important;
    }
    .mobileFullWidthMinus50px {
        width: calc(100% - 60px) !important;
    }
    .flexTable .field.mobileFlexTableColumn {
        flex-direction: column;
    }
    .flexTable .field.mobileFlexTableColumn .item:first-child {
        padding-bottom: 0px !important;
    }
    table.whiteTable .fs-wrap {
        width: calc(100vw - 30px) !important;
    }
    table.whiteTable .select2-container {
        width: 100% !important;
    }
    .balanceControlContainer {
        max-width: calc(100vw - 20px);
        overflow: auto;
    }
    .balanceControlContainer table.balanceControlOuterTable {
        width: calc(200vw - 100px);
    }
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:first-child,
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:nth-child(3) {
        width: calc(100dvw - 120px);
    }
    .balanceControlContainer table.balanceControlOuterTable th.balanceControlHeader:nth-child(2) {
        width: 30px !important;
    }
    .fullMobileModal .portalModalInner,
    .modalContent {
        max-height: calc(100dvh - 120px) !important;
    }
    .portalModal.fullMobileModal,
    .quickPointsContent.fullMobileModal {
        height: calc(100vh - 20px);
        top: 0px !important;
        max-height: 100% !important;
        max-width: 100% !important;
        width: calc(100vw - 20px) !important;
        min-width: 50% !important;
        padding: 10px;
        left: 0px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter input.buttonBase,
    .customModal.fullMobileModal .portalModalFooter input.buttonBase {
        height: 42px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter .buttonBase,
    .customModal.fullMobileModal .portalModalFooter input.buttonBase {
        height: 40px !important;
        align-content: center;
        padding-top: 0px;
        padding-bottom: 0px;
        border: 1px solid var(--school-primary-color);
        text-align: center;
        flex: 1 1;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }
    .portalModal.fullMobileModal .portalModalFooter,
    .portalModal.fullMobileModal .spaceEvenly,
    .customModal.fullMobileModal .portalModalFooter,
    .customModal.fullMobileModal .spaceEvenly {
        display: flex;
        display: -webkit-flex;
        justify-content: space-evenly;
        /*            flex-direction: row-reverse;*/
    }
    .portalModal.fullMobileModal .portalModalFooter,
    .customModal.fullMobileModal .portalModalFooter {
        position: fixed;
        bottom: 0;
        z-index: 999;
    }
    .topControls div.control {
        display: flex;
        height: unset;
    }
    .mobileTableRow {
        display: table-row;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: repeat(1, var(--filter-width));
    }
    .mainContent:has(#ctl00_PageContent_pupilInfo_pupilNavigationChoices_modal) .contentContainer:last-child {
        margin-bottom: 90px;
    }
    .mobileMax100wView {
        max-width: 100vw !important;
        overflow: auto;
    }
    .portalModal .modalMove.hand {
        display: none;
    }
    .filterBarDivWrapper label {
        margin-bottom: 0px;
    }
    .mobileFilters.topControls div.control label {
        width: 100%;
        min-width: 100%;
    }
    div#progressDiv {
        margin-left: 0px;
        width: 100%;
        left: 0px;
        right: 0px;
    }
    table.info.udf_container th,
    table.udf_container td:nth-child(2) {
        display: block;
        width: calc(100vw - 100px);
        min-width: calc(100vw - 100px);
        max-width: calc(100vw - 100px);
    }
    table.udf_container td:nth-child(2) {
        padding-left: 20px;
        padding-bottom: 10px;
    }
    table.udf_container input[type='text'],
    table.udf_container select {
        min-width: 100%;
        max-width: 100%;
    }
    .lastLoginInfo {
        display: none;
    }
    table.info.udf_container {
        width: 100%;
    }
    .item .RadComboBox {
        width: unset !important;
    }
    .mobileFlexDirectionUnSet {
        flex-direction: unset !important;
    }
    .mobileNoWidthSet {
        width: unset !important;
    }
    .mobileMinus10LeftMargin {
        margin-left: -10px;
    }
    .mobileMinus10SideMargin {
        margin-left: -10px;
        margin-right: -10px;
    }
    .mobile0SideMargin {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .mobileMinus5LeftMargin {
        margin-left: -5px;
    }
    .mobilePaddingRight0 {
        padding-right: 0px;
    }
    .mobilePadding0 {
        padding: 0px !important;
    }
    .mobilePaddingTop0 {
        padding-top: 0px !important;
    }
    .mobilePadding10 {
        padding: 10px !important;
    }
    .mobilePaddingBottom10 {
        padding-bottom: 10px !important;
    }
    .mobileFlex100Minus50 {
        flex-basis: calc(100vw - 50px) !important;
    }
    .mobileMarginTop10 {
        margin-top: 10px;
    }
    .mobileMargin0 {
        margin: 0px !important;
    }
    .mobileMargin10 {
        margin: 10px !important;
    }
    .topControls div.control {
        width: unset;
    }
    .filterFlexRow .userFilterControl .dateRangeContainer {
        padding: 0px;
    }
    .mobileFullWidthMinus20px {
        width: calc(100% - 20px) !important;
    }
    .mobileFullWidthMinus40px {
        width: calc(100% - 40px) !important;
    }
    .flexTable .field.mobileFlexTableColumn {
        flex-direction: column;
    }
    .flexTable .field.mobileFlexTableColumn .item:nth-child(2) {
        padding-top: 0px !important;
    }
    .flexTable .field.mobileFlexTableColumn .item:nth-child(2) {
        padding-top: 0px !important;
    }
    .flexTable .field.mobileFlexTableColumn .item textarea {
        display: inline-table;
        height: auto !important;
        min-height: auto;
        padding-left: 15px;
    }
    .field.mobileFlexTableColumn .item:not(.label) span:not(:has(*)):not(:empty),
    .field.mobileFlexTableColumn .item:not(.label) span:has(>br) {
        padding-left: 15px;
        display: inline-block
    }
    .field.mobileFlexTableColumn .item:not(.label) span {
        padding-left: 15px;
    }
    .visibleCalendarContainer {
        float: none;
        width: 100% !important;
        margin-bottom: 20px;
    }
    .progressHolderMobile .triangleRightBase {
        display: none;
    }
    .progressHolderMobile .progressLabelSpan {
        padding: 10px 0px !important;
        width: 100%;
        border: 0px var(--school-primary-color) solid;
        text-align: center;
    }
    .progressHolderMobile.progressHolderMobileSplit3 .progressLabelWrapper {
        width: calc(100% / 3);
    }
    .progressHolderMobile .progressLabelWrapper {
        margin: 0px !important;
        display: flex;
        flex: 1 1 0px;
    }
    #progressHolder.progressHolderMobile {
        flex-wrap: nowrap;
        gap: 0px;
        width: 100%;
    }
    .mobileNoHPadding {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .mobileNoHMargin {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .mobile100pc {
        width: 100%;
    }
    .pupilInfoContainer,
    .pupilInfoHeader {
        margin-top: 0px !important;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign {
        align-items: flex-start;
        flex-direction: column;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign:has(.icontooltip) {
        padding-bottom: 10px;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign div:has(.icontooltip) {
        max-width: calc(100% - 40px) !important;
        padding-left: 0px !important;
        padding-top: 5px;
    }
    .mobileBottomBarPadding {
        margin-bottom: 90px;
    }
    .RadScheduler_Metro .rsHeader .rsPrevDay,
    .RadScheduler_Metro .rsHeader .rsNextDay {
        zoom: 1.2
    }
    .mobile100pc {
        width: 100%;
    }
    .pupilInfoContainer,
    .pupilInfoHeader {
        margin-top: 0px !important;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign {
        align-items: flex-start;
        flex-direction: column;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign:has(.icontooltip) {
        padding-bottom: 10px;
    }
    .pupilInfoHeader>div.FlexMiddleVAlign div:has(.icontooltip) {
        max-width: calc(100% - 40px) !important;
        padding-left: 0px !important;
        padding-top: 5px;
    }
    .mobileBottomScreen {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 4px 10px !important;
        margin: 0px;
        right: 0px;
        background: white !important;
        z-index: 9
    }
    .mobileBottomScreen.mobileButtonsEvenly {
        display: flex;
        display: -webkit-flex;
        justify-content: space-evenly;
    }
    .mobileBottomScreen.mobileButtonsEvenly.additionalButtons .buttonBase {
        flex: 1;
        margin: 0 10px;
        text-align: center;
        white-space: nowrap;
    }
    div.buttonBase,
    button.buttonBase:not(.desktopHeightButton),
    .gplus a,
    .firefly a,
    .managebac a,
    .saml a,
    .ruButton {
        min-height: var(--button-height-mobile) !important;
        align-content: center;
        justify-content: center;
    }
    a.buttonBase:not(.desktopHeightButton) {
        min-height: calc(var(--button-height-mobile) - 8px) !important;
        align-content: center;
        justify-content: center;
    }
    .dayBookGrid a.buttonBase,
    .dayBookGrid button.buttonBase {
        min-height: unset !important;
    }
    .gplus a,
    .firefly a,
    .managebac a,
    .saml a {
        padding: 0px !important;
        margin-top: 5px;
    }
    .staffHoverImage {
        color: var(--school-primary-color);
        text-decoration: underline;
    }
    .actionMenu:not(.buttonContainer) {
        padding: 5px;
    }
    .actionMenu:not(.buttonContainer) {
        background: transparent;
    }
    .actionMenu.containerClosed .actionHeader:not(.noBackgroundColor) {
        background: var(--global-grey-filter);
    }
    .actionMenu .actionHeader {
        padding: 5px 10px;
        transition: background .5s ease-in-out;
    }
    .actionMenu.buttonContainer {
        padding: 0px 0px 0px 20px;
        margin-top: 0px;
    }
    .actionMenu.buttonContainer>div>div>div {
        padding: 2px;
    }
    .siblingDetails,
    .actionMenuContainer,
    .pupiDetailHeaderInfo {
        width: 100%;
        max-width: 100%;
    }
    .calendarContainer {
        margin-left: 0px !important;
    }
    .visibleCalHeader,
    .calendarToggle {
        background-color: white;
    }
    #toggleBar:before,
    #toggleBar.toggleBarClosed:before,
    #toggleBar.toggleBarOpen:before {
        content: "";
    }
    .padding5Mobile10 {
        padding: 10px !important;
    }
    .paddingLeft5Mobile10 {
        padding-left: 10px !important;
    }
    .calendarToggle #toggleBar.toggleBarClosed {
        background-image: url(../images/StyleGuide/chevronDownBlack.svg);
    }
    .calendarToggle #toggleBar {
        width: 100% !important;
        background-image: url(../images/StyleGuide/chevronUpBlack.svg);
        background-position: calc(100% - 10px) center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    /* Display Dropdowns on Hover */
    .nav ul li:hover>ul {
        display: none;
    }
    .rsAgendaRow *:not(i) {
        font-weight: 400 !important;
        font-family: var(--global-font-family) !important;
        font-size: var(--font-size) !important;
        color: var(--global-font-colour-grey) !important;
    }
    .rsAgendaRow .rsDateBox {
        padding: 0 0 0 0 !important;
        text-align: center !important;
        align-content: center;
        width: 100%;
    }
    tr.rsAgendaRow td,
    tr.rsAgendaRow td * {
        text-align: center !important;
        align-content: center;
        padding: 0px !important;
    }
    .js-myCalPage span {
        display: none;
    }
    div.right.js-myCalPage.noMargin {
        position: relative;
        top: 36px;
        left: 20px;
        width: 0px;
        height: 0px;
        z-index: 999;
    }
    #contentHolder {
        margin: 0px;
    }
    #loggedInAs {
        height: unset !important;
        width: unset !important;
    }
    .userNav.rightMenu {
        right: 0px;
        left: 0px;
        background: white;
        top: 49px !important;
        bottom: 0px;
        padding: 0px;
    }
    .userNav.rightMenu li {
        width: 100%;
        padding: 10px;
    }
    #loginWrapper,
    .createAccountContent {
        padding: 10px;
        left: 0px;
        right: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        padding-top: 10px;
        align-content: center;
        background: white;
        overflow: auto;
    }
    .loginFormControl {
        padding: 0 20px 20px 20px;
    }
    #login,
    .login {
        margin-top: 0px !important;
    }
    .loginImg {
        padding-bottom: 50px !important;
    }
    #loginWrapper {
        padding: 10px;
        left: 0px;
        right: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        padding-top: 10px;
        align-content: center;
        background: white;
    }
    .loginFormControl {
        padding: 0 20px 20px 20px;
    }
    #login,
    .login {
        margin-top: 0px !important;
    }
    .loginImg {
        padding-bottom: 50px !important;
    }
    .attendance-mobile-view .gridStatus {
        float: none !important;
        width: auto;
    }
    .hideForMobile {
        display: none !important;
    }
    .showForMobile {
        display: revert !important;
    }
    .attendance-desktop-view {
        display: none;
    }
    .attendance-mobile-view {
        display: block;
    }
    .gridStatus.session-attendance-beta-tag {
        display: none;
    }
    .attendance-mobile-view .gridStatus {
        position: relative;
        display: block;
        margin-bottom: 10px;
    }
    .attendance-mobile-view .close-btn {
        position: absolute;
        top: 0px;
        right: 0px;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 18px;
        padding: 5px;
    }
    .attendance-mobile-view #session-wrapper {
        margin-bottom: 65px;
    }
    .attendance-mobile-view .attendanceContainer {
        width: 100%;
        /* max-width: 480px;*/
        margin: auto;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .fixedButtonBarWhite {
        left: 0px !important;
        right: 0px;
        border-radius: 0px;
        border: 0px;
    }
    .attendance-mobile-view .fixedButtonBarWhite {
        display: block;
        width: 100%;
        left: 0px !important;
        border: none;
        border-radius: 0px;
    }
    .attendanceToolbar {
        display: none;
    }
    .attendance-mobile-view .attendance-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px
    }
    .attendance-mobile-view .nav-arrow {
        font-size: 18px;
        cursor: pointer;
        color: var(--school-primary-color);
    }
    .attendance-mobile-view .nav-arrow.hidden {
        visibility: hidden;
    }
    .attendance-mobile-view .attendance-time {
        font-size: var(--font-size-larger1);
        font-weight: normal;
    }
    .attendance-mobile-view .attendance-item .student {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 10px 10px;
        background-color: #fff;
        margin-bottom: 5px;
        border-radius: var(--global-border-radius);
        overflow: hidden;
    }
    .attendance-mobile-view .attendance-item.readonly .student {
        background: #FAF9F6;
    }
    .attendance-mobile-view .attendance-item .student .reason-label {
        margin-top: 5px;
        margin-bottom: 5px;
        color: var(--school-primary-color);
    }
    .attendance-mobile-view .attendance-item .student>div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .attendance-mobile-view .attendance-item .student .full-width {
        position: absolute;
        left: 5px;
        right: 5px;
        bottom: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
        margin-top: 20px;
    }
    .attendance-mobile-view .attendance-item .student .full-width {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 10px;
        margin-top: 10px;
    }
    .attendance-mobile-view .attendance-item .student .full-width .attendance-selection-box-reason {
        position: absolute;
        top: -35px;
        right: 2px;
    }
    .attendance-mobile-view .attendance-item .student .full-width .reason-button-div {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 40px;
        margin-top: 10px;
    }
    .attendance-mobile-view .attendance-item .student .full-width .reason-button-div .buttonBase {
        flex-grow: 1;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin: 0 5px;
    }
    .attendance-mobile-view .attendance-item[data-unsaved="True"] .student {
        background-color: #fdf6ed;
    }
    .attendance-mobile-view .name {
        font-weight: bold;
        margin-bottom: 3px;
    }
    .attendance-mobile-view .status-text {
        font-size: var(--font-size);
    }
    .attendance-mobile-view .attendance-selection-box,
    .attendance-mobile-view .attendance-selection-box-reason {
        flex-shrink: 0;
        width: 24px;
        max-width: 24px;
        height: 24px;
        max-height: 24px;
        border-radius: 3px;
        display: flex;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        padding-bottom: 2px;
        font-size: var(--font-size-larger1);
        border: 2px solid #ccc;
        /* Default border */
        background-color: #f0f0f0;
        /* Default background */
    }
    .attendance-mobile-view .attendance-selection-box-reason {
        margin-right: 3px;
    }
    .attendance-mobile-view .attendance-item img.details {
        width: 40px;
        height: 60px;
        border-radius: var(--global-border-radius);
        margin-right: 10px;
    }
    img.attendance-mobile-spinner {
        margin-top: 8px;
        width: 40px;
        height: 40px !important;
    }
    .attendance-mobile-view .actions {
        text-align: center;
        width: 98%;
        z-index: 1002;
    }
    .attendance-mobile-view .actions button:nth-child(1),
    .attendance-mobile-view .actions button:not(.jointButtonRight):nth-child(3) {
        width: 23%;
    }
    button.jointButtonRight {
        padding-top: 2px;
        width: 30px;
    }
    button.jointButtonLeft {
        margin-right: -3px;
    }
    .attendance-mobile-view .actions button:nth-child(2) {
        width: calc(43% - 30px);
        margin-right: -3px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
    }
    .attendance-mobile-view .actions:has(.jointButtonLeft[style*="display: none"]) .jointButtonRight,
    .attendance-mobile-view .actions:has(.jointButtonLeft[style*="display:none"]) .jointButtonRight {
        display: none;
    }
    .attendance-mobile-view .actions button,
    .mobileBottomButtonContainer .mobileButton,
    .mobileButton {
        font-size: var(--font-size-larger1);
        height: 40px;
        display: inline-block;
    }
    .attendance-mobile-view .actions button:nth-child(6),
    .attendance-mobile-view .actions button:nth-child(5),
    .attendance-mobile-view .actions button:nth-last-child(2),
    .attendance-mobile-view .actions button:nth-last-child(1) {
        width: 45%;
    }
    .attendance-item .student .details {
        display: none;
    }
    .swipe-overlay {
        position: absolute;
        top: 0;
        height: 100%;
        width: 0%;
        background-color: transparent;
        transition: width 0.3s ease;
    }
    .present-overlay {
        left: 0;
        background-color: #C8E6C9;
        z-index: 100;
    }
    .absent-overlay {
        right: 0;
        background-color: #FFCDD2;
        z-index: 100;
    }
    .status-present {
        color: #388E3C !important;
    }
    .status-absent {
        color: #D32F2F !important;
    }
    .attendance-mobile-view .js-marker-container {
        width: 60%;
        overflow-x: auto;
    }
    .attendance-mobile-view .details .js-markerForm {
        width: 100%;
        max-height: 20px;
        overflow: hidden;
    }
    .attendance-mobile-view .details .js-markerForm.growMarkerContainer {
        max-height: 200px !important;
        overflow: visible !important;
    }
    .attendance-mobile-view .ellipsis-icon {
        vertical-align: middle;
        cursor: pointer;
        padding-left: 5px;
        font-weight: bold;
    }
    .attendance-mobile-view .fa-ellipsis {
        font-size: 24px;
        color: #ccc;
    }
    .attendance-icon-actions {
        display: none;
        position: absolute;
        right: 10px;
    }
    .attendance-icon-actions>a:not(:first-child) {
        margin-left: 5px;
    }
    .attendance-item.expanded .student {
        border: none;
    }
    .attendance-item.expanded .attendance-icon-actions {
        display: none !important;
    }
    .attendance-batch-reasons {
        position: fixed;
        top: 34px;
        left: 0;
        right: 0;
        background-color: var(--global-extralight-grey);
        padding: 10px 10px 5px 10px;
        z-index: 1002;
        display: flex;
        justify-content: flex-end;
        padding: 5px;
    }
    .attendance-batch-reasons>div {
        padding-right: 0px;
        margin-right: -5px;
    }
    .attendance-mobile-view.expanded {
        padding-top: 0px !important;
    }
    .attendance-mobile-view.expanded .session {
        padding-top: 40px !important;
    }
    .attendance-mobile-view.expanded .attendance-filter-current {
        position: sticky;
        top: 0;
        z-index: 3000;
        background-color: var(--school-primary-color-lighter4);
        padding: 6px;
    }
    .attendance-filter-current span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 95%;
    }
    .attendance-item.expanded .attendance-expanded-container {
        position: relative;
        padding: 10px 18px 10px 10px;
        display: block !important;
    }
    .attendance-item.expanded .attendance-expanded-container span {
        color: var(--school-primary-color);
    }
    .attendance-mobile-view.expanded {
        overflow: auto;
    }
    .attendance-item.expanded ol {
        list-style: none;
        margin-left: -30px;
    }
    .attendance-item.expanded ol a {
        position: relative;
        display: block;
        padding: .4em .4em .4em .8em;
    }
    .attendance-item.expanded .attendance-types-container {
        overflow-y: auto;
    }
    .attendance-item.expanded .attendance-comment-container {
        position: fixed;
        left: 15px;
        right: 20px;
        bottom: 75px;
    }
    .attendance-item.expanded .attendance-comment-container.comment-top {
        height: 100%;
        top: 130px
    }
    .attendance-mobile-view .disable-buttons {
        background-color: #ccc;
        color: #666;
        cursor: not-allowed;
    }
    /* #region Mobile View Copy Popout */
    .attendance-mobile-view textarea {
        min-height: 70px !important;
    }
    .mobile-copy-popup {
        display: none;
        position: fixed;
        bottom: 60px;
        left: 18px;
        z-index: 5500;
    }
    .mobile-copy-container {
        width: 100%;
        min-width: 150px;
        background: #fff;
        border-radius: var(--global-border-radius);
        border: 1px solid var(--status-value-orange);
    }
    .mobile-copy-container .header {
        padding: 10px 10px;
        font-size: var(--font-size);
        color: #fff;
        background-color: var(--status-value-orange);
    }
    .mobile-copy-container .content .option-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin-top: 5px;
    }
    .mobile-copy-container .content .option-text {
        font-size: var(--font-size);
    }
    .mobile-copy-container .content .option-row:hover,
    .mobile-copy-container .content .option-row:active {
        background: var(--status-inprogress-background);
        cursor: pointer;
    }
    .markAsAttendance {
        top: 35px;
        bottom: 57px;
        left: 0;
        right: 0;
        max-height: 100%;
        z-index: 1002;
        border-radius: 0px;
    }
    .textarea-icon-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .textarea-icon-container i {
        color: #f9d356 !important;
        margin-left: 10px;
    }
    .textarea-icon-container textarea {
        flex-grow: 1;
    }
    .attendance-batch-slider {
        display: inline-flex;
        align-items: center;
    }
    /* #endregion Mobile View Copy Popout*/
    /* #region Attendance Summary*/
    /* week starting column*/
    #tblAttendanceSummary tr th[rowspan],
    #tblAttendanceSummary tr:nth-child(2) th:first-child {
        display: none;
    }
    #tblAttendanceSummary .empty-cell {
        background-color: #ffffff;
    }
    #tblAttendanceSummary>#rowSessionType {
        position: sticky;
        top: 0;
        z-index: 9;
    }
    #tblAttendanceSummary>#rowSessionHeadings {
        position: sticky;
        top: 28px;
        z-index: 10;
    }
    #tblAttendanceSummaryWrapper {
        /*max-height: calc(100% - 50px);*/
    }
    #attendanceSummaryContainer {
        /*max-height: calc(100% - 50px);*/
    }
    #attendanceSummaryContainer>#infoText,
    #tblAttendanceSummary .day-of-week,
    #tblAttendanceSummary tr:nth-child(2) th:nth-child(2) {
        position: sticky;
        left: 0;
    }
    /* #endregion Attendance Summary*/
    .printTimetableLink {
        display: inline-block;
        cursor: pointer;
        background: url(/images/StyleGuide/file-pdf-red.svg) no-repeat left center;
        padding-left: 20px;
        height: 18px;
        border: 0;
        text-decoration: underline;
        background-size: 20px;
    }
}

.fieldContent {
    width: 100%;
    max-width: 300px;
    padding-left: 10px;
}

.fieldContent>div {
    display: flex;
    justify-content: space-between;
}

.pupilExpandTopIcons {
    display: flex;
    display: --webkit-flex;
    align-items: center;
}

.pupilExpandTopIcons .pupilMarkers {
    padding-right: 20px;
    flex-grow: 1;
}

/* #endregion Attendance Mobile View */

/* #region Card View */

.cardWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 60px;
}

.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 10px 10px 10px;
    flex: 1 1 100%;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
}

.cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cardHeader a {
    font-weight: bold;
    font-size: 16px;
}

.cardBody,
.cardFooter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cardRow {
    display: flex;
    justify-content: left;
    gap: 10px;
    margin-top: 10px;
}

.cardLabel {
    font-weight: bold;
}

.cardValue {
    text-align: right;
}

.cardValue {
    position: relative;
    display: inline-block;
}

.cardValue .fa-scroll,
.cardValue .fa-coins {
    font-size: 20px;
    color: #808080 !important;
}

.cardValue .tick-icon,
.cardValue .paid-tick {
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 14px !important;
    color: green;
}

.cardValue .paid-tick {
    right: 5px;
}

.cardCosts {
    display: flex;
    flex-direction: column;
}

.cardCosts span {
    margin-bottom: 5px;
}

.reviewDetailsView {
    padding-top: 10px;
}

.reviewDetailsView div {
    margin-bottom: 10px;
}

.reviewDetailsView .days-times,
.cardValue .days-times {
    display: flex;
    flex-wrap: wrap;
}

.reviewDetailsView .days-times span,
.cardValue .days-times span {
    margin-right: 10px;
}

.activity-review-filter.collapsibleFilterExpandedContent {
    background: var(--school-primary-color-lighter3) !important;
    border-radius: var(--global-border-radius);
}

.desktopReviewFilter .filterBarControl:last-child {
    margin-bottom: 20px;
}

.fixedButtonBarWhite,
.mobileBottomScreen.mobileButtonsEvenly {
    border-top: 2px solid var(--global-background);
}

a:not(.buttonPrimary,
.buttonSecondary).fa-regular:hover,
a:not(.buttonPrimary,
.buttonSecondar).fa-solid:hover,
a:not(.buttonPrimary,
.buttonSecondary)>i.fa-regular:hover,
a:not(.buttonPrimary,
.buttonSecondary)>.fa-solid:hover,
span:not(.buttonPrimary,
.buttonSecondary)>i.fa-regular.hand:hover,
span:not(.buttonPrimary,
.buttonSecondary)>.fa-solid.hand:hover,
.icontooltip:hover {
    opacity: 1;
}

@media only screen and (max-device-width: 600px) and (orientation: portrait),
only screen and (max-device-height: 600px) and (orientation: landscape) {
    .card {
        flex: 1 1 100%;
        margin-left: 5px;
        margin-right: 5px;
    }
    .card i {
        font-size: 26px;
    }
    .cardValue .fa-scroll,
    .cardValue .fa-coins {
        font-size: 26px;
        margin-right: 3px;
    }
    .cardValue .tick-icon,
    .cardValue .paid-tick {
        top: -10px;
        right: -2px;
        font-size: 18px !important;
    }
    .cardValue .paid-tick {
        right: -5px;
    }
}

@media only screen and (min-width: 600px) and (orientation: portrait),
only screen and (min-height: 600px) and (orientation: landscape) {
    .card .toggle-icon {
        display: none !important;
    }
    .card i {
        font-size: 18px;
    }
    .cardBody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
        gap: 1rem;
    }
    .cardValue {
        padding-right: 10px;
    }
    .cardRow {
        margin-top: 0;
    }
    .cardRow.firstRow {
        justify-content: flex-start;
    }
    .cardFooter {
        display: flex;
        justify-content: flex-end;
        padding-top: 10px;
    }
    .cardFooter .buttonBase {
        width: auto;
        margin-left: auto;
        max-width: 300px;
    }
}

/* #endregion Card View */

/* #region Pull Down Refresh Indicator */

#refresh-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 40px;
    background: var(--global-extralight-grey);
    color: var(--global-font-colour-grey);
    text-align: center;
    line-height: 40px;
    display: none;
    z-index: 6000;
    overflow: hidden;
    transition: height 0.3s, line-height 0.3s;
}

@keyframes ellipsis {
    0%,
    100% {
        content: "";
    }
    33% {
        content: " .";
    }
    66% {
        content: " ..";
    }
    99% {
        content: " ...";
    }
}

.refreshing::after {
    content: "";
    animation: ellipsis 1.5s infinite;
}

/* #endregion Pull Down Refresh Indicator */

@media only screen and (max-width: 1000px) {
    body:has(.menuSideBar.open) .fixedButtonBarWhite {
        display: none;
    }
    .menuSideBar ul li ul li {
        padding: 5px 0px;
    }
    .paddingLeft10Mobile {
        padding-left: 10px;
    }
    .marginLeft0Mobile {
        margin-left: 0px;
    }
    .paddingRight0Mobile {
        padding-right: 0px;
    }
    .paddingLeft20Mobile {
        padding-left: 20px !important;
    }
    .marginBottom90Mobile {
        margin-bottom: 90px;
    }
    .responsiveTable>tbody>tr>td,
    .responsiveTable>tbody>tr>th,
    .messageTable>tbody>tr>td,
    .messageTable>tbody>tr>th {
        display: inline-block;
        width: calc(100% - 20px) !important;
    }
    table.whiteTable.responsiveTable div {
        /*width: calc(100vw - 30px) !important;*/
    }
    .messageTable .noticeUploader table {
        width: 75% !important;
    }
    #rowSessionType>th:nth-child(3),
    #rowSessionType>th:nth-child(4) {
        position: sticky;
        left: 0;
    }
    .messageTable .noticeUploader {
        width: 75% !important;
    }
    .messageSubject {
        min-width: unset !important;
        width: 99%;
    }
    .message450 {
        min-width: unset !important;
        width: 99%;
        height: 200px;
    }
    .menuSideBar .mainNavigation {
        width: unset;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }
    .menuSideBar .mainNavigation .menuHolder {
        width: unset;
    }
    .marginsButtonsMobile .buttonBase {
        margin-top: 10px;
    }
    .mobileFlexColumn {
        flex-direction: column;
        align-items: center;
    }
    .mobileFlexColumn>* {
        margin-top: 5px;
    }
    .newsTickerOpen .news-ticker-contentContainer {
        height: 210px;
        padding-left: 10px;
    }
    .flexTable .column:nth-child(odd) {
        margin-right: unset;
    }
    .flexTable .column:nth-child(even) {
        margin-left: unset;
    }
    .flexTable .column .field .item {
        width: unset;
        min-width: unset;
        flex: 1 1 0px;
        flex-direction: column;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .flexTable .column .field .item.label {
        width: unset;
        min-width: unset;
        text-align: left;
        font-weight: bold;
    }
    .flexTable .column,
    .flexTable .columnWidget {
        max-width: 100%;
    }
    .flexTable .item li {
        display: block;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    .news-ticker-content {
        padding: 0px;
        max-height: 300px;
    }
    .news-ticker-itemwrapper {
        justify-content: center;
        /*            flex-wrap: wrap;
            flex-direction: column;*/
        padding: 0 10px 0 0;
        align-items: center;
    }
    .news-ticker-itemContent {
        padding: unset;
        margin: 0 10px;
        max-height: 150px;
    }
    .menuSideBar.open {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        --ms-overflow-style: none !important;
        scrollbar-width: none;
    }
    .menuSideBar {
        width: 0px;
        min-width: 0px;
        max-width: 0px;
        --ms-overflow-style: none !important;
        scrollbar-width: none;
    }
    .menuSideBar::-webkit-scrollbar {
        display: none;
    }
    .schoolLogo img {
        opacity: 0%;
        width: 0px;
    }
    .schoolLogo.min img {
        opacity: 0%;
        width: 0px;
    }
    .schoolLogo.open img {
        opacity: 100%;
        width: 130px;
    }
    .mainNavigation ul ul ul li .navItemContainer {
        padding: 0px 0px 0px 16%;
    }
    .navItem70Percent {
        font-size: var(--font-size-larger2);
    }
    .schoolLogo {
        min-width: 0px;
        padding: 0px 0px 0px 0px;
        width: 0px !important;
    }
    .schoolLogo.open {
        min-width: calc(100% - 55px);
        padding: 0px 0px 0px 10px;
    }
    .menuSideBar.min {
        width: 0px;
        min-width: 0px;
    }
    .fixedButtonBarWhite {
        left: 15px;
    }
    .portalNavigationToggle .js-desktopButton {
        display: none;
    }
    .portalNavigationToggle .js-phoneButton {
        display: unset;
    }
}

/* mobile on portrait */

@media only screen and (max-device-width: 600px) and (orientation: portrait) {
    .attendanceGroupContainer {
        display: none !important;
    }
    .mobileFullWidth,
    div.mobileFullWidth {
        width: 100% !important;
    }
    .admissionsModal.li.main_item_tab {
        width: calc((100vw - 30px) / 3);
        text-align: center;
    }
    .admissionsModal.li.main_item_tab a {
        padding: 10px 15px;
    }
    .mobilePortrait100width {
        width: 100vw !important;
    }
    #liWalkthough {
        display: none !important;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: repeat(1, var(--filter-width));
    }
    .userFilterControl .dateRangeContainer .filterDateRange,
    .mobileDatePickerFullWidth .dateRangeContainer .filterDateRange {
        width: 96% !important;
    }
    .commentViewModal .modalPopup {
        max-width: calc(100vw - 40px);
        min-width: calc(100vw - 40px);
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        position: fixed;
    }
    .commentViewModal .modalPopup .modalContent {
        width: 100%;
        height: 100%;
    }
    .modalContent .buttonBar {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        padding: 10px;
    }
    .mobileFullWidth,
    div.mobileFullWidth {
        width: 100% !important;
    }
    .mobileContentOnly {
        display: contents;
    }
    #iCalUrl {
        text-align: center;
    }
    .portalModal.fullMobileModal .portalModalFooter {
        display: flex;
        display: -webkit-flex;
        justify-content: space-evenly;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
    .showForMobile {
        display: revert !important;
    }
    .filterFlexRowMin:not(.filter2ColumnsMinimum),
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: calc(100vw - 30px) !important;
        grid-row-gap: 30px;
    }
    .hideForMobile,
    .hideMobilePortrait {
        display: none !important;
    }
    .mobile80HView {
        height: 80vh !important;
        overflow: auto;
    }
    .mobileFilters.topControls:not(.noTopPadding) {
        padding-left: 0px !important;
        padding-top: 40px;
    }
    .mobileFilters.topControls .RadComboBox:not(.radFullWidthTweak),
    .mobileFilters.topControls .flexRight .buttonSearch {
        width: 97% !important;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 0;
    }
    .mobileFilters.topControls .filterFlexRow:has(.buttonSearch) {
        padding-top: 30px;
    }
    .mobileFilters.topControls .filterTextbox {
        width: calc(100% - 20px) !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .mobileFilters.topControls .filterTextbox {
        width: calc(100% - 20px) !important;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 26px;
    }
    .subFilter.mobileSubFilter .filterTextbox {
        width: calc(100% - 12px) !important;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 0px;
    }
    .subFilter.mobileSubFilter .dateRangeContainer .filterDateRange {
        width: auto !important
    }
    .mobileFilters.topControls div.RadPicker span.RadInput {
        width: 100% !important;
    }
    .mobileFilters.topControls .RadInput .datepickerInputWidth {
        width: calc(100% - 8px) !important;
        max-width: unset !important;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 36px !important;
    }
    .mobileFilters.topControls .flexRight {
        position: unset !important;
        padding-left: 0px;
        width: 100%;
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .mobileFilters.topControls .flexRight .buttonSearch {
        margin-left: 5px;
        width: calc(100% - 3px) !important;
        height: 40px;
    }
    .mobileFilters.topControls .flexRight .resetFilter {
        width: 100%;
        display: flex;
        justify-content: left;
        padding-top: 10px;
        padding-left: 5px;
    }
    .mobileCenterJustify {
        justify-content: center;
    }
    .mobileFilters.topControls .filterFlexRow {
        grid-row-gap: 5px;
    }
    .mobileFilters.topControls div.control {
        height: unset;
        width: calc(100vw - 25px);
    }
    .mobileFilters.topControls .userFilterControl:not(.filter2ColumnsMinimum) .labelSpan {
        margin-left: 0px !important;
    }
    .filterSearchReset {
        display: block;
        align-items: unset;
    }
    :root {
        --filter-width: calc(100vw - 61px);
    }
    .hideForTabletMobile {
        display: none !important;
    }
}

/* mobile on landscape */

@media only screen and (max-device-height: 600px) and (orientation: landscape) {
    /* ::-webkit-scrollbar {
                    display: none;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                }*/
    .myAccountGridHolder.outstandingTransactions,
    .myAccountGridHolder.archiveTransactions {
        min-height: calc(100dvh - 160px);
    }
    .filterFlexRow .userFilterControl .dateRangeContainer {
        padding-left: 0px !important;
    }
    .mobileFilters.topControls div.control label {
        width: 50%;
        min-width: 50%;
    }
    .filterFlexRowMax:not(.filter2ColumnsMinimum) {
        grid-template-columns: repeat(2, var(--filter-width));
    }
    .showForMobileLandscape {
        display: revert !important;
    }
    .hideForMobileLandscape {
        display: none !important;
    }
    .mobile80HView {
        height: 80vh !important;
    }
    .mobile80HView {
        height: 80vh !important;
    }
    .flexBox .js-hideOpenOptions {
        order: 0;
        top: -2px !important;
    }
    .flexBox:has(.js-hideOpenOptions) .resetFilter {
        order: 1
    }
    .hideForTabletMobile {
        display: none !important;
    }
}

@media only screen and (min-device-width: 840px) and (orientation: portrait),
only screen and (min-device-height: 840px) and (orientation: landscape) {
    .showForTabletMobile {
        display: none !important;
    }
}

/* tablet on portrait */

@media only screen and (min-device-width: 600px) and (max-device-width: 840px) and (orientation: portrait) {
    /* ::-webkit-scrollbar {
                    display: none;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                }*/
    #pupilParentDetails .flex100Pc_Phone {
        flex-direction: row !important;
    }
    .attendanceGroupWidget {
        margin: 0px;
    }
    .showForTabletLandscape {
        display: revert !important;
    }
    .hideForTabletLandscape {
        display: none !important;
    }
    .hideForTabletMobile {
        display: none !important;
    }
    .attendanceTable .select2-container {
        width: 140px !important;
    }
    body.mobile .fixedButtonBar,
    body.mobile .fixedButtonBarWhite {
        left: 0px;
        right: 0px;
    }
    .batchUpdateContent {
        max-width: calc(100vw - 100px);
    }
}

/* tablet on landscape */

@media only screen and (min-device-height: 600px) and (max-device-height: 840px) and (orientation: landscape) {
    /* ::-webkit-scrollbar {
                    display: none;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                }*/
    .attendanceGroupWidget {
        margin: 0px;
    }
    #pupilParentDetails .flex100Pc_Phone {
        flex-direction: row !important;
    }
    .showForTabletLandscape {
        display: revert !important;
    }
    .hideForTabletLandscape {
        display: none !important;
    }
    .hideForTabletMobile {
        display: none !important;
    }
    .attendanceTable .select2-container {
        width: 150px !important;
    }
    body.mobile .fixedButtonBar,
    body.mobile .fixedButtonBarWhite {
        left: 0px;
        right: 0px;
    }
    .batchUpdateContent {
        max-width: calc(100vw - 100px);
    }
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .notices input#cbBatchDelete {
        margin-right: 0px;
    }
    .filterTextbox {
        height: 20px;
    }
    .adjustfieldSearch,
    .adjustFieldSearchForUserFilter,
    .adjustfieldSearchDaybook {
        width: 167px !important;
    }
    .rotateCellText {
        background-color: transparent !important;
        transform: rotate(-90deg);
    }
}

/* Firefox support only */

@supports (-moz-appearance: none) {
    #noticesRepeaterContainer .delete input {
        margin-right: 13px;
    }
    .myAccountStatus {
        height: 100% !important;
    }
}

/* FF that doesn't fully support scrollbar changes */

@supports not (-webkit-scrollbar-track) {
    .notices input#cbBatchDelete {
        margin-right: 30px;
    }
}

@media (hover: none) {
    .rsAptContent div:has(.js-cal-exportEventLink) {
        display: block;
    }
    .calDelete {
        visibility: visible;
    }
}

/* #region New Mobile Parents Evening */

.mobilePEcontainer {
    display: none;
}

.parentsevening-actions {
    display: none;
}

@media only screen and (max-device-width: 600px) and (orientation: portrait),
only screen and (max-device-height: 600px) and (orientation: landscape) {
    .single.opensright.show-calendar {
        top: -10px !important;
    }
    .absence-type-icon {
        height: 26px !important;
        width: 26px !important;
        min-width: 26px !important;
    }
    .mobile50vwMinus50 {
        width: calc(50dvw - 50px);
    }
    .faLargeMobileButton {
        font-size: 23px !important;
        padding: 5px;
    }
    .mobileFlexColumn100Pc {
        flex-direction: column;
        width: 100%;
    }
    .teacherClassFilter .pdfLinkHolder {
        display: none;
    }
    #gridContent {
        overflow: hidden;
    }
    .mobile-cutoff-alert {
        display: none;
    }
    .bookingTimeGrid {
        display: none;
    }
    .parentsevening-actions {
        display: flex;
    }
    .parentsevening-actions .reviewButton {
        flex-grow: 1;
    }
    .parentsevening-actions a.reviewButton {
        text-align: center;
        font-size: 20px;
    }
    .mobilePEcontainer {
        display: block;
        background: #fff;
        z-index: 1000;
        margin-bottom: 60px;
    }
    .mobilePEcontainer .disableBookingClick {
        pointer-events: none;
    }
    .mobilePEcontainer .disableBookingClick>* {
        pointer-events: auto;
    }
    /* #region Export Buttons */
    .export-icons {
        position: absolute;
        top: 80px;
        right: 10px;
        margin: 0 !important;
        z-index: 2501;
    }
    .export-icons i {
        margin: 0;
        padding: 0;
        font-size: 27px !important;
        color: #000;
        cursor: pointer;
    }
    .export-icons.adjustTop {
        top: 72px;
    }
    .export-icons a {
        display: inline-block;
    }
    .export-icons span {
        display: none;
    }
    /* #endregion Export Buttons */
    /* #region PE Header */
    .peContentHeader {
        font-size: 20px;
        margin-bottom: -15px;
    }
    .mobilePEcontainer .peheader {
        width: 100vw;
        text-align: center;
        position: relative;
        margin-bottom: 10px;
    }
    .mobilePEcontainer .peheader span {
        display: block;
        margin: 1px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 90px);
    }
    .mobilePEcontainer span.pupil-name {
        font-weight: bold;
        font-size: var(--font-size-larger2);
    }
    .mobilePEcontainer span.pe-name {
        font-size: 14px;
    }
    .mobilePEcontainer span.pe-summary {
        font-size: var(--font-size-larger1);
        color: var(--school-primary-color);
    }
    .mobilePEcontainer .peheader .fa-circle-chevron-down {
        position: absolute;
        right: 10px;
        top: 50%;
        font-size: 27px;
        transform: translateY(-50%);
        color: var(--school-primary-color);
        cursor: pointer;
    }
    .peheader {
        display: flex;
        flex-direction: column;
        /* Stack elements vertically */
        align-items: center;
        /* Center elements horizontally */
    }
    /* #endregion PE Header */
    /* #region Time Slots */
    .mobilePEcontainer .teacher-info {
        font-size: 16px;
        color: #333;
        margin-bottom: -10px;
        background-color: #fff;
    }
    .mobilePEcontainer .slots-container {
        height: calc(100dvh - 305px);
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .mobilePEcontainer .slots-container::-webkit-scrollbar {
        display: none;
    }
    .mobilePEcontainer .time-slot:not(.date-placeholder,
    .date-placeholder-label) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
    }
    .mobilePEcontainer .time-slot button {
        width: calc(100% - 55px);
        font-size: 14px;
        text-align: center;
    }
    .mobilePEcontainer .time-slot:not(.date-placeholder) span {
        color: var(--school-primary-color);
        padding: 12px;
    }
    .mobilePEcontainer .booked-button span {
        margin-top: 2px;
        font-weight: bold;
    }
    .mobilePEcontainer .time-slot.unavailable button {
        border: 1px dashed #808080;
        background: transparent !important;
        color: #808080 !important;
    }
    .mobilePEcontainer .time-slot.available button {
        border: 1px dashed #808080;
        background: transparent !important;
    }
    .mobilePEcontainer .booked-button button {
        position: relative;
        border: 1px solid var(--status-value-green);
        background-color: var(--status-complete-background);
        color: var(--status-value-green);
        cursor: default;
    }
    .mobilePEcontainer .booked-button span:first-child {
        background-color: var(--status-complete-background);
        border-radius: var(--global-border-radius);
        color: var(--status-value-green);
    }
    .mobilePEcontainer .left-icon,
    .mobilePEcontainer .right-icon {
        cursor: pointer;
        color: inherit;
        margin: 0 5px;
        vertical-align: middle;
    }
    .mobilePEcontainer .left-icon {
        position: absolute;
        top: 6px;
        left: 3px;
    }
    .mobilePEcontainer .left-icon.fa-message,
    .review-container .fa-message {
        color: #fff;
        -webkit-text-stroke: 1px var(--status-value-green);
        text-shadow: 1px 1px 0 var(--status-value-green), -1px 1px 0 var(--status-value-green), 1px -1px 0 var(--status-value-green), -1px -1px 0 var(--status-value-green);
        font-size: 27px;
    }
    .mobilePEcontainer .left-icon.fa-message-check,
    .review-container .fa-message-check {
        font-size: 29px !important;
    }
    .mobilePEcontainer .left-icon,
    .review-container .message-icon {
        cursor: pointer;
    }
    .review-container .delete-icon {
        cursor: pointer;
        --button-primary-font-color: var(--global-font-colour-grey);
    }
    .mobilePEcontainer .right-icon {
        position: absolute;
        top: 3px;
        right: 3px;
        color: var(--global-font-colour-grey);
        font-size: 32px !important;
        cursor: pointer;
    }
    /* #endregion Time Slots */
    /* #region Date slot */
    .mobilePEcontainer .time-slot.date-placeholder,
    .mobilePEcontainer .time-slot.date-placeholder-label {
        position: sticky;
        top: 0px;
        z-index: 10;
        box-shadow: rgba(67, 71, 85, 0.15) 0px 0px 0.18em, rgba(90, 125, 188, 0.03) 0px 0.18em 0.9em;
    }
    .mobilePEcontainer .date-placeholder {
        margin: 10px 0;
        background-color: var(--global-extralight-grey);
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobilePEcontainer .date-placeholder .fa-circle-chevron-up {
        font-size: 27px;
        margin-left: auto;
    }
    .mobilePEcontainer .date-placeholder-label {
        margin: 10px 0;
        padding-left: 5px !important;
        background-color: var(--global-extralight-grey);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobilePEcontainer .date-placeholder-label span {
        color: var(--global-font-colour-grey) !important;
        font-weight: bold;
    }
    /* #endregion Date Slot */
    /* #region Modals */
    .parentsevening-filter-container .peContentHeader {
        margin-bottom: 50px;
    }
    .parentsevening-filter-container .filter-close-btn {
        position: absolute;
        top: 70px;
        right: 10px;
        font-size: 27px;
        color: var(--school-primary-color);
    }
    .parentsevening-filter-container .pe-dates-container {
        width: calc(100vw - 20px);
        margin-top: 20px;
    }
    .parentsevening-filter-container .pe-filter-container {
        margin-top: -15px;
        padding: 0 10px;
    }
    .parentsevening-filter-container .pe-filter-container>span {
        display: inline-block;
        padding: 10px;
        text-align: center;
        width: calc(100vw - 40px);
        background-color: var(--grid-verylightgrey-background);
    }
    .parentsevening-filter-container .pe-dates-container .pe-overall-summary:first-of-type {
        margin-top: 10px;
    }
    .parentsevening-filter-container .pe-dates-container .pe-overall-summary {
        position: relative;
        width: 100%;
        font-size: 15px;
        margin: 0 0 10px 0;
        text-align: left;
        box-shadow: rgba(67, 71, 85, 0.15) 0px 0px 0.18em, rgba(90, 125, 188, 0.03) 0px 0.18em 0.9em;
    }
    .parentsevening-filter-container .pe-dates-container .pe-overall-summary i {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
    }
    .parentsevening-expanded-container {
        display: flex;
        flex-direction: column;
        display: none;
        width: 100vw;
    }
    .parentsevening-expanded-container .comment-close-modal-btn {
        position: absolute;
        top: 12px;
        right: 10px;
        background-color: #ddd;
        color: #333;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-size: 18px;
    }
    .parentsevening-expanded-container .comment-close-modal-btn:hover {
        filter: brightness(90%);
    }
    .parentsevening-expanded-container .header {
        background-color: var(--school-primary-color-lighter3);
        height: 35px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .parentsevening-expanded-container .header span {
        display: block;
    }
    .parentsevening-expanded-container textarea {
        width: calc(100vw - 25px);
        height: calc(100vh - 165px);
        margin-left: 10px;
    }
    .parentsevening-expanded-container .comment-container div {
        padding: 5px 10px;
    }
    .parentsevening-expanded-container .comment-container div span {
        color: var(--school-primary-color);
    }
    .parentsevening-expanded-container .parentsevening-actions {
        display: flex;
        width: calc(100vw - 10px);
    }
    .parentsevening-expanded-container .buttonBase {
        flex-grow: 1;
        font-size: var(--font-size-larger1);
    }
    .parentsevening-expanded-container .review-search {
        margin-bottom: 10px;
        position: fixed;
        top: 65px;
        background-color: white;
    }
    .parentsevening-expanded-container .review-container {
        height: calc(100dvh - 105px);
        overflow-y: auto;
        margin-top: 55px;
        margin-bottom: 40px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .parentsevening-expanded-container .review-container::-webkit-scrollbar {
        display: none;
    }
    .parentsevening-expanded-container .review-container .card {
        margin-bottom: 10px;
        background: #fff !important;
    }
    .parentsevening-expanded-container .review-search .baseTextbox {
        margin-left: 5px;
        height: 28px;
        width: calc(100vw - 21px);
    }
    .parentsevening-expanded-container .review-search .baseTextbox.withExport {
        width: calc(100vw - 90px);
    }
    .parentsevening-expanded-container .review-search .baseTextbox:focus {
        outline: none;
        box-shadow: none;
    }
    .parentsevening-expanded-container .no-results {
        margin-top: 30px;
        margin-left: 10px;
        z-index: 99999;
    }
    .review-search,
    .review-export {
        z-index: 1;
    }
    .review-container .collapsible-toggle {
        position: relative;
        width: calc(100vw -40px);
        margin: 10px 0;
        padding: 10px;
        cursor: pointer;
        border: none;
        background-color: var(--global-extralight-grey);
        text-align: left;
        box-shadow: rgba(67, 71, 85, 0.15) 0px 0px 0.18em, rgba(90, 125, 188, 0.03) 0px 0.18em 0.9em;
    }
    .review-container .collapsible-container {
        margin-top: 5px;
    }
    .review-container .fa-circle-chevron-down,
    .review-container .fa-circle-chevron-up {
        position: absolute;
        top: 5px;
        right: 15px;
        font-size: 27px;
    }
    /* #endregion Modals */
    /* #region Alert Panel */
    .mobilePEcontainer .incomplete {
        position: relative;
        width: calc(100vw - 42px);
    }
    .mobilePEcontainer .incomplete span:first-child {
        padding-right: 10px;
    }
    .mobilePEcontainer .close-btn {
        position: absolute;
        top: 7px;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
    }
    /* #endregion Alert Panel */
    /* #region Teacher Select Filter */
    .mobilePEcontainer .teacher-info .select2-container--default .select2-selection--single {
        display: flex;
        align-items: center;
        background-color: var(--school-primary-color-lighter3);
        color: white;
        padding: 5px;
        height: 60px !important;
        margin-top: 0px;
    }
    .mobilePEcontainer .teacher-info .select2-selection__rendered {
        white-space: pre-wrap;
        line-height: 1.2 !important;
    }
    .mobilePEcontainer .teacher-info .select2-selection__arrow {
        display: none;
    }
    .mobilePEcontainer .teacher-info .select2-teacher-booked {
        background-color: var(--status-complete-background) !important;
        color: var(--status-value-green) !important;
        border: 1px solid var(--status-value-green) !important;
    }
    .mobilePEcontainer .teacher-info .select2-teacher-booked span {
        color: var(--status-value-green) !important;
    }
    .mobilePEcontainer .expandedShowTitle {
        z-index: 2500;
    }
    .card.pe-selection-card.select2-teacher-booked {
        border: 1px solid var(--status-value-green) !important;
    }
    .card.pe-selection-card.select2-teacher-booked .cardHeader a,
    .card.pe-selection-card.select2-teacher-booked .cardRow:nth-child(2) .cardValue {
        color: var(--status-value-green) !important;
    }
    .pe-selection-card .cardRow.noTopMargin {
        margin-top: -5px !important;
    }
    .pe-select-text-elypsis,
    .pe-review-text-elypsis,
    .parentsevening-expanded-container .header span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100vw;
        text-align: left;
    }
    .pe-select-text-elypsis {
        max-width: calc(100vw - 40px);
    }
    .select2-teacher-booked .pe-select-text-elypsis {
        max-width: calc(100vw - 95px);
    }
    .pe-review-text-elypsis {
        max-width: calc(100vw - 10px);
    }
    .select2-teacher-booked .pe-review-text-elypsis {
        max-width: calc(100vw - 45px);
    }
    .parentsevening-expanded-container .header span {
        max-width: calc(100vw - 60px);
    }
    /* #endregion Teacher Select Filter */
}

/* #endregion New Mobile Parents Evening */

/* Landscape Warning for mobiles */

/* Full-page overlay */

#landscapeWarning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    color: black;
    display: flex;
    /* do not remove these */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9999;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    /* fade in and out transition */
}

/* Mobile Phone Rotation Icon */

.rotate-icon {
    font-size: 100px;
    color: var(--school-primary-color);
    animation: phoneRotate 3.5s linear infinite;
}

/* Animation: Rotates from landscape (90°) to portrait (0°), then pauses */

@keyframes phoneRotate {
    0% {
        transform: rotate(90deg);
    }
    /* Start in landscape */
    50% {
        transform: rotate(0deg);
    }
    /* Rotate to portrait */
    80% {
        transform: rotate(0deg);
    }
    /* Hold position */
    100% {
        transform: rotate(90deg);
    }
    /* Restart cycle */
}

/* Message Styling */

#landscapeWarning p {
    font-size: 18px;
    max-width: 80%;
    margin: 0;
    padding: 20px 20px;
}

/* End of Landscape Warning for mobiles */

/* Staff Exam Results */

.examresults-expanded-container {
    display: flex;
    flex-direction: column;
    display: none;
    width: 100vw;
}

.examresults-expanded-container .examresults-close-modal-btn {
    position: absolute;
    top: 12px;
    right: 10px;
    background-color: #ddd;
    color: #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    z-index: 3000;
}

.examresults-expanded-container .examresults-close-modal-btn:hover {
    filter: brightness(90%);
}

/* End staff exam results */

/* TES UL User Accounts */

.badge-ul {
    display: inline-block;
    height: 22px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 16px;
    background-color: #3a87ad;
    color: #fff;
    margin-left: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.badge-ul:hover {
    opacity: 0.7;
    text-decoration: none;
}

.ul-popout {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 240px;
    max-width: 320px;
}

.ul-popout-content {
    font-size: 13px;
    color: #333;
}

.ul-popup .close {
    float: right;
    font-size: 20px;
    cursor: pointer;
}

/* End TES UL User Accounts */

/* Autogenerated from portal code */

:root {
    --school-primary-color: #0091AE;
    --school-primary-font-color: #FFFFFF;
    --school-primary-color-darker: #007095;
    --school-primary-color-lighter: #66BDCE;
    --school-primary-color-lighter2: #99D3DE;
    --school-primary-color-lighter3: #B2DEE6;
    --school-primary-color-lighter4: #E5F4F6;
    --school-primary-color-30pc-trans: rgba(0, 145, 174, 30%);
    --school-primary-color-15pc-trans: rgba(0, 145, 174, 15%);
    --school-secondary-color: #9A182F;
    --school-tertiary-color: #312B6B;
    --school-secondary-font-color: #FFFFFF;
    --school-tertiary-font-color: #FFFFFF;
}