/* Minification failed. Returning unminified contents.
(21,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(132,25): run-time error CSS1039: Token not allowed after unary operator: '-level2'
(166,15): run-time error CSS1039: Token not allowed after unary operator: '-black'
(237,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(238,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(239,23): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(243,26): run-time error CSS1039: Token not allowed after unary operator: '-green'
(247,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(256,26): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(270,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(271,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(272,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(275,23): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(301,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(308,23): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(313,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(329,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(332,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(336,23): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(341,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(347,20): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(352,20): run-time error CSS1039: Token not allowed after unary operator: '-purple'
(357,20): run-time error CSS1039: Token not allowed after unary operator: '-red'
(362,20): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(367,20): run-time error CSS1039: Token not allowed after unary operator: '-green'
(372,20): run-time error CSS1039: Token not allowed after unary operator: '-pink'
(377,20): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(421,25): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(424,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(425,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(426,25): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(432,14): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(454,20): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(455,30): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(462,22): run-time error CSS1030: Expected identifier, found '>'
(462,24): run-time error CSS1030: Expected identifier, found 'thead'
(462,29): run-time error CSS1031: Expected selector, found ')'
(462,29): run-time error CSS1025: Expected comma or open brace, found ')'
(468,22): run-time error CSS1030: Expected identifier, found '>'
(468,24): run-time error CSS1030: Expected identifier, found 'thead'
(468,29): run-time error CSS1031: Expected selector, found ')'
(468,29): run-time error CSS1025: Expected comma or open brace, found ')'
(474,22): run-time error CSS1030: Expected identifier, found '>'
(474,24): run-time error CSS1030: Expected identifier, found 'tfoot'
(474,29): run-time error CSS1031: Expected selector, found ')'
(474,29): run-time error CSS1025: Expected comma or open brace, found ')'
(480,22): run-time error CSS1030: Expected identifier, found '>'
(480,24): run-time error CSS1030: Expected identifier, found 'tfoot'
(480,29): run-time error CSS1031: Expected selector, found ')'
(480,29): run-time error CSS1025: Expected comma or open brace, found ')'
(511,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(512,14): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(525,69): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(530,70): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(535,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(547,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(594,19): run-time error CSS1039: Token not allowed after unary operator: '-saturday'
(598,19): run-time error CSS1039: Token not allowed after unary operator: '-sunday'
(602,43): run-time error CSS1039: Token not allowed after unary operator: '-sunday'
(602,87): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(607,19): run-time error CSS1039: Token not allowed after unary operator: '-sunday'
(611,19): run-time error CSS1039: Token not allowed after unary operator: '-unavail'
(615,19): run-time error CSS1039: Token not allowed after unary operator: '-pink'
(621,38): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(621,68): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(626,19): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(627,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(645,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(646,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(653,20): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(694,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(700,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(714,14): run-time error CSS1039: Token not allowed after unary operator: '-black'
(719,25): run-time error CSS1039: Token not allowed after unary operator: '-green'
(723,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(732,25): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(734,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(735,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(736,25): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(758,27): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(797,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(799,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(801,26): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(813,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(814,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(818,16): run-time error CSS1039: Token not allowed after unary operator: '-red'
(844,23): run-time error CSS1030: Expected identifier, found '.'
(844,24): run-time error CSS1030: Expected identifier, found 'commandbar_controls'
(844,43): run-time error CSS1031: Expected selector, found ')'
(844,43): run-time error CSS1025: Expected comma or open brace, found ')'
(850,18): run-time error CSS1030: Expected identifier, found '.'
(850,38): run-time error CSS1031: Expected selector, found ')'
(850,38): run-time error CSS1025: Expected comma or open brace, found ')'
(893,30): run-time error CSS1039: Token not allowed after unary operator: '-red'
(897,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(898,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(902,30): run-time error CSS1039: Token not allowed after unary operator: '-red'
(903,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(909,30): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(913,32): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(917,30): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(923,30): run-time error CSS1039: Token not allowed after unary operator: '-red'
(927,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(931,30): run-time error CSS1039: Token not allowed after unary operator: '-red'
(939,13): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(944,13): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(950,13): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(955,13): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(970,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(976,15): run-time error CSS1039: Token not allowed after unary operator: '-black'
(982,15): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(989,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(990,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(996,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(999,24): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1019,33): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(1034,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1034,41): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1035,34): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(1036,25): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1041,16): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(1047,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1047,41): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1048,25): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(1052,17): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(1057,28): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(1074,15): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(1078,16): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(1122,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(1154,19): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(1155,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1156,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(1187,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1193,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1198,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(1199,26): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(1237,16): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(1270,20): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(1271,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1272,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(1290,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1296,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1331,20): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(1332,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1333,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(1599,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1606,25): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(1661,25): run-time error CSS1039: Token not allowed after unary operator: '-red'
(1696,30): run-time error CSS1039: Token not allowed after unary operator: '-level2'
(1727,15): run-time error CSS1039: Token not allowed after unary operator: '-black'
(1792,19): run-time error CSS1039: Token not allowed after unary operator: '-red'
(1802,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(1806,19): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(1868,20): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(1869,15): run-time error CSS1039: Token not allowed after unary operator: '-black'
(1873,20): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(1874,15): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(1891,31): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(2027,31): run-time error CSS1039: Token not allowed after unary operator: '-green'
(2031,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(2041,32): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2055,31): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2106,21): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2118,20): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2134,21): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2146,21): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2188,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col2-left'
(2193,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col3-left'
(2198,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col4-left'
(2203,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col5-left'
(2208,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col6-left'
(2228,14): run-time error CSS1039: Token not allowed after unary operator: '-sticky-col6-left'
(2282,14): run-time error CSS1039: Token not allowed after unary operator: '-head-row1-height'
(2295,30): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2343,15): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2365,26): run-time error CSS1039: Token not allowed after unary operator: '-level3'
(2376,25): run-time error CSS1039: Token not allowed after unary operator: '-level2'
(2397,33): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2399,20): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(2412,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(2413,32): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2458,19): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(2462,19): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(2467,29): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2471,29): run-time error CSS1039: Token not allowed after unary operator: '-green'
(2475,32): run-time error CSS1039: Token not allowed after unary operator: '-red'
(2479,19): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(2492,19): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(2497,20): run-time error CSS1039: Token not allowed after unary operator: '-red'
(2508,27): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2509,16): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(2510,27): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(2511,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2534,20): run-time error CSS1039: Token not allowed after unary operator: '-unavail'
(2535,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(2541,20): run-time error CSS1039: Token not allowed after unary operator: '-unavail'
(2545,16): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(2557,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2654,31): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2738,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2771,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2775,19): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2776,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(2777,25): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2781,19): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(2782,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(2783,25): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(2787,19): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(2788,14): run-time error CSS1039: Token not allowed after unary operator: '-black'
(2789,25): run-time error CSS1039: Token not allowed after unary operator: '-black'
(2796,25): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(2800,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2801,14): run-time error CSS1039: Token not allowed after unary operator: '-black'
(2805,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(2809,32): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(2813,31): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(2842,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(2853,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(2877,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(2879,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2883,20): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(2904,29): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(2957,14): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(2962,25): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(3008,31): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3018,25): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(3019,25): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3099,15): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3175,20): run-time error CSS1039: Token not allowed after unary operator: '-green'
(3201,57): run-time error CSS1030: Expected identifier, found '*'
(3201,59): run-time error CSS1031: Expected selector, found ')'
(3201,59): run-time error CSS1025: Expected comma or open brace, found ')'
(3223,25): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3224,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3227,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3238,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3239,19): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3242,27): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3285,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3286,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3292,19): run-time error CSS1039: Token not allowed after unary operator: '-level0'
(3309,20): run-time error CSS1039: Token not allowed after unary operator: '-dbp-item-h'
(3309,40): run-time error CSS1039: Token not allowed after unary operator: '-dbp-rows'
(3318,24): run-time error CSS1039: Token not allowed after unary operator: '-dbp-item-h'
(3319,16): run-time error CSS1039: Token not allowed after unary operator: '-dbp-item-h'
(3320,39): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3321,30): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3322,33): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3331,21): run-time error CSS1039: Token not allowed after unary operator: '-dbp-item-h'
(3331,42): run-time error CSS1039: Token not allowed after unary operator: '-dbp-rows'
(3342,15): run-time error CSS1039: Token not allowed after unary operator: '-dbp-item-h'
(3347,14): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3355,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3383,15): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3388,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3392,40): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3401,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3423,14): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3430,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3431,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3449,39): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3453,15): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3464,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3468,36): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3472,39): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3478,20): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3479,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3487,40): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3487,70): run-time error CSS1039: Token not allowed after unary operator: '-black'
(3488,16): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3498,25): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3499,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3504,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3510,35): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3514,14): run-time error CSS1039: Token not allowed after unary operator: '-gray'
(3518,25): run-time error CSS1030: Expected identifier, found '.'
(3518,26): run-time error CSS1030: Expected identifier, found 'es_text_box_input'
(3518,43): run-time error CSS1031: Expected selector, found ')'
(3518,43): run-time error CSS1025: Expected comma or open brace, found ')'
(3584,14): run-time error CSS1039: Token not allowed after unary operator: '-black'
(3590,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3591,21): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3592,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3598,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3599,21): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3600,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3604,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3605,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3607,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3611,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3615,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3619,25): run-time error CSS1039: Token not allowed after unary operator: '-level2'
(3620,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3621,21): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3622,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3623,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(3629,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3646,25): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3658,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3659,25): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3662,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3664,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3664,67): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(3669,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3724,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3725,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(3734,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3735,26): run-time error CSS1039: Token not allowed after unary operator: '-blue'
(3740,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3741,26): run-time error CSS1039: Token not allowed after unary operator: '-green'
(3746,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3747,26): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(3754,15): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3755,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(3760,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3764,26): run-time error CSS1039: Token not allowed after unary operator: '-green'
(3768,26): run-time error CSS1039: Token not allowed after unary operator: '-yellow'
(3772,26): run-time error CSS1039: Token not allowed after unary operator: '-red'
(3777,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(3796,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3816,14): run-time error CSS1039: Token not allowed after unary operator: '-main-text-color'
(3824,14): run-time error CSS1039: Token not allowed after unary operator: '-black'
(3836,30): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3858,19): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(3861,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3918,25): run-time error CSS1039: Token not allowed after unary operator: '-level1'
(3923,32): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(3924,14): run-time error CSS1039: Token not allowed after unary operator: '-white'
(3941,16): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3947,21): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3952,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3967,27): run-time error CSS1039: Token not allowed after unary operator: '-accent-text-color'
(3968,24): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3985,26): run-time error CSS1039: Token not allowed after unary operator: '-level3'
(3995,27): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(3999,16): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(4060,26): run-time error CSS1039: Token not allowed after unary operator: '-level3'
(4061,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(4061,40): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(4065,26): run-time error CSS1039: Token not allowed after unary operator: '-level4'
(4083,25): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4098,16): run-time error CSS1039: Token not allowed after unary operator: '-menu-color'
(4106,25): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
(4114,27): run-time error CSS1039: Token not allowed after unary operator: '-level3'
(4118,28): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4118,45): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4119,21): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(4120,27): run-time error CSS1039: Token not allowed after unary operator: '-border-subtle'
(4145,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast'
 */
/* Self-hosted Heebo (variable, latin + latin-ext) — replaces the Google Fonts
   CDN link so no visitor IP is sent to fonts.gstatic.com without consent. */
@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/Content/css/heebo-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(/Content/css/heebo-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.theme-dark {
	--accent-text-color: #4FB4E6;
	--main-text-color: #e8e8ed;
	--menu-color: #e8e8ed;
	--saturday: #444444;
	--sunday: #151517;
	--unavail: #926767;
	--level0: #2d2d2d;
	--level1: #333336;
	--level2: #1c1c1e; /*background*/
	--level3: #2a2a2c;
	--level4: #3a3a3c;
	--green: #59B040;
	--yellow: #E4A11B;
	--blue: #0e53a7;
	--red: #dc4c64;
	--purple: #6f42c1;
	--black: black;
	--gray: #8e8e93;
	--light-gray: #c7c7cc;
	--white: white;
	--pink: HotPink;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 9999px;
	--transition-fast: 150ms ease;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
	--border-subtle: rgba(255,255,255,0.08);
}

.theme-navy {
	--accent-text-color: #4FB4E6;
	--main-text-color: #e3e3e3;
	--menu-color: #e3e3e3;
	--saturday: #184058;
	--sunday: #1f5575;
	--unavail: #926767;
	--level0: #0f3044;
	--level1: #0a1e2d;
	--level2: #0d2a3b; /*background*/
	--level3: #14364a;
	--level4: #1a4a68;
	--green: #59B040;
	--yellow: #E4A11B;
	--blue: #0e53a7;
	--red: #dc4c64;
	--purple: #6f42c1;
	--black: black;
	--gray: #6d8fa3;
	--light-gray: #a0c4d9;
	--white: white;
	--pink: HotPink;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 9999px;
	--transition-fast: 150ms ease;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
	--border-subtle: rgba(255,255,255,0.08);
}


.theme-light {
	--accent-text-color: #4FB4E6;
	--main-text-color: #1d1d1f;
	--menu-color: #1d1d1f;
	--saturday: #949494;
	--sunday: #606060;
	--unavail: #cf9090;
	--level0: #ffffff;
	--level1: #c7c7cc;
	--level2: #e8e8ed; /*background*/
	--level3: #d1d1d6;
	--level4: #eeeef0;
	--green: #59B040;
	--yellow: #E4A11B;
	--blue: #0e53a7;
	--red: #dc4c64;
	--purple: #6f42c1;
	--black: #1d1d1f;
	--gray: #636366;
	--light-gray: #aeaeb2;
	--white: white;
	--pink: HotPink;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 9999px;
	--transition-fast: 150ms ease;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
	--border-subtle: rgba(0,0,0,0.2);
}

/*-------------------------------------------------------------------
Common
-------------------------------------------------------------------*/

body {
	font-family: 'Heebo', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	height: 100%;
	color: var(--main-text-color);
	background-color: var(--level2);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	display: block;
	min-height: 27px;
}

	h1 > img, h1 > a > img {
		position: relative;
		top: -2px;
	}

h2 {
	font-size: 16px;
	font-weight: 600;
	display: block;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 4px;
	text-align: left;
	line-height: 26px;
}

	h2.section {
		width: 100%;
		padding: 5px;
		color: var(--black);
	}

	h2 img {
		vertical-align: middle;
	}

h3 {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

h4 {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 10px 0 5px 0;
}

img {
	border: none;
}

.clickable {
	cursor: pointer;
}

/* The add-another-row affordance in the create panels: an icon-only plus
   (a circle-icon-24 <img> in the row markup like every other command icon,
   label in title/alt) at the end of the last field row. The icon is part of
   every appended/cloned row; the click handlers are delegated to the row
   container so clones keep working. */
.add_another {
	margin-left: 4px;
	margin-bottom: 5px; /* onto the field line: the edit_group's 3px bottom
	                       margin + 2px to center on the ~30px input */
}

	/* Every create row has the same shape - a div holding the field
	   block(s) plus the trailing .add_another icon - and is one flex line,
	   bottom-aligned on the field line. Every row carries the affordance;
	   only the last row shows it. */
	.create_rows > * {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.create_rows > *:not(:last-child) .add_another {
		display: none;
	}

.cancelled {
	text-decoration: line-through;
}

/* Save is the positive action (green, matching the editable controls'
   inline save icon), cancel the destructive one (red). */
/* All three button kinds (save, cancel, big) share one scale, matched to the
   form inputs (.es_text_box_input: 15px text, 5px vertical padding) so buttons
   and fields render at exactly the same height; they differ only in color
   (green = save, red = cancel, blue = CTA). */
.save_button, .cancel_button {
	cursor: pointer;
	padding: 5px 16px;
	display: inline-block;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	color: var(--white) !important;
	transition: all var(--transition-fast);
}

	.save_button {
		background-color: var(--green);
	}

	.cancel_button {
		background-color: var(--red);
	}

	.save_button:hover,
	.cancel_button:hover {
		opacity: 0.85;
	}

	.save_button.aspNetDisabled {
		background-color: var(--gray);
		cursor: default;
	}

	/* In a create panel the button sits below the fields, so restore the top
	   gap the global rule drops (it drops it to align in the edit row). */
	.create_panel .save_button,
	.create_panel .cancel_button {
		margin-top: 5px;
	}

.change_button {
	cursor: pointer;
	text-decoration: none;
	background-color: var(--accent-text-color);
	border-radius: var(--radius-pill);
	color: var(--white);
	padding: 4px 12px;
	font-weight: 500;
	transition: all var(--transition-fast);
}

	.change_button:hover {
		opacity: 0.85;
	}

.action_text_button {
	display: inline-block;
	padding-bottom: 5px;
}

h1 .circle-icon-24,
h2 .circle-icon-24,
h3 .circle-icon-24 {
	margin-left: 5px;
}

h1 .back_button,
h2 .back_button {
	margin-right: 5px;
	margin-left: 0;
}

.circle-icon-16 {
	display: inline-block;
	background: var(--accent-text-color);
	width: 12px;
	height: 12px;
	border-radius: 4px;
	padding: 2px;
	vertical-align: middle;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
}

	.circle-icon-16:hover {
		box-shadow: var(--shadow-sm);
		transform: translateY(-1px);
	}

.circle-icon-16-nb {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	padding: 2px;
	vertical-align: middle;
	cursor: pointer;
}

.circle-icon-24 {
	display: inline-block;
	background: var(--accent-text-color);
	width: 16px;
	height: 16px;
	border-radius: var(--radius-sm);
	padding: 5px;
	vertical-align: middle;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
}

	.circle-icon-24:hover {
		box-shadow: var(--shadow-sm);
		transform: translateY(-2px);
	}

	.circle-icon-16.blue,
	.circle-icon-24.blue {
		background: var(--blue);
	}

	.circle-icon-16.purple,
	.circle-icon-24.purple {
		background: var(--purple);
	}

	.circle-icon-16.red,
	.circle-icon-24.red {
		background: var(--red);
	}

	.circle-icon-16.yellow,
	.circle-icon-24.yellow {
		background: var(--yellow);
	}

	.circle-icon-16.green,
	.circle-icon-24.green {
		background: var(--green);
	}

	.circle-icon-16.pink,
	.circle-icon-24.pink {
		background: var(--pink);
	}

	.circle-icon-16.gray,
	.circle-icon-24.gray {
		background: var(--gray);
	}

.logo_icons {
	height: 24px;
	width: 24px;
	vertical-align: middle;
	margin-right: 5px;
	border-radius: 0;
}


.togglable, .hidden_button, .hidden_template {
	display: none;
}

.header_with_image h1 {
	display: inline-block;
}

.header_with_image img, .header_with_image input {
	vertical-align: top;
}

.loading {
	height: 32px;
	vertical-align: middle;
}

.command {
	margin-left: 5px;
}

.strikeout {
	text-decoration: line-through;
}

.multi_column {
	display: inline-block;
	margin-right: 10px;
	vertical-align: top;
}

.create_panel {
	background-color: var(--level0);
	padding: 16px;
	margin-bottom: 12px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-subtle);
}

.flatrate {
	font-size: 48px;
	font-weight: bold;
	color: var(--accent-text-color);
}

.taxes {
	font-size: 9px;
	vertical-align: top;
}

/* TABLE */
.floatThead-table {
	border-spacing: 0;
	border-collapse: separate;
}

table {
	border-spacing: 0;
	border-collapse: separate;
}

	table.alter td {
		padding: 5px 8px;
		height: auto;
		background: var(--level0);
		border-top: 1px solid var(--border-subtle);
	}

/* Runde Ecken wie bei den neueren Panels; der Radius liegt auf den Eckzellen
   statt auf einem overflow-Clip, damit position:sticky (Spalten/Kopfzeilen)
   und floatThead weiter funktionieren. */
table.alter > thead > tr:first-child > :first-child,
table.alter:not(:has(> thead)) > tbody > tr:first-child > :first-child,
#manpower_planning #matrix > thead > tr:first-child > :first-child {
	border-top-left-radius: var(--radius-md);
}

table.alter > thead > tr:first-child > :last-child,
table.alter:not(:has(> thead)) > tbody > tr:first-child > :last-child,
#manpower_planning #matrix > thead > tr:first-child > :last-child {
	border-top-right-radius: var(--radius-md);
}

table.alter > tfoot > tr:last-child > :first-child,
table.alter:not(:has(> tfoot)) > tbody > tr:last-child > :first-child,
#manpower_planning #matrix > tbody > tr:last-child > :first-child {
	border-bottom-left-radius: var(--radius-md);
}

table.alter > tfoot > tr:last-child > :last-child,
table.alter:not(:has(> tfoot)) > tbody > tr:last-child > :last-child,
#manpower_planning #matrix > tbody > tr:last-child > :last-child {
	border-bottom-right-radius: var(--radius-md);
}

@media screen and (orientation: landscape) and (min-width:1024px) {
	table.alter td:last-child .circle-icon-16,
	table.alter td.row_commands .circle-icon-16,
	table.numbers .circle-icon-16 {
		-moz-transition: opacity 500ms ease-out;
		-o-transition: opacity 500ms ease-out;
		-webkit-transition: opacity 500ms ease-out;
		transition: opacity 500ms ease-out;
		opacity: 0;
	}

	table.alter tr:hover td:last-child .circle-icon-16,
	table.alter tr:hover td.row_commands .circle-icon-16,
	table.numbers tr:hover .circle-icon-16 {
		-moz-transition: opacity 500ms ease-in;
		-o-transition: opacity 500ms ease-in;
		-webkit-transition: opacity 500ms ease-in;
		transition: opacity 500ms ease-in;
		opacity: 1;
	}
}

thead th,
td.in_table_header,
th.st-head-row,
tfoot th {
	background: var(--level1);
	color: var(--gray);
	padding: 5px 8px;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tablesorter-header {
	cursor: pointer;
}

.tablesorter-headerAsc {
	background: url(/Content/SortAsc.gif) no-repeat center right, var(--level4);
	padding-right: 20px;
}

.tablesorter-headerDesc {
	background: url(/Content/SortDesc.gif) no-repeat center right, var(--level4);
	padding-right: 20px;
}

#content th.st-head-row a {
	color: var(--white);
}

td.st-val {
	-ms-word-break: break-all;
	word-break: break-all;
}

#content thead th a,
#content thead th a:visited,
#content tfoot th a,
tfoot th a:visited {
	color: var(--menu-color);
}

thead th.header {
	cursor: pointer;
}

thead th.row_commands {
	min-width: 25px;
	display: table-cell;
}

table td.row_commands {
	white-space: nowrap;
}

table th.right, table td.right {
	text-align: right;
}

table th.left, table td.left {
	text-align: left;
}

table th.center, table td.center {
	text-align: center;
}

table th.currency, table td.currency {
	text-align: right;
	white-space: nowrap;
}

table td.st-key {
	text-align: right;
}

table td.st-val {
	text-align: left;
	padding-left: 10px;
}

table.narrow {
	width: 100%;
}

td.saturday, th.saturday {
	background: var(--saturday) !important;
}

td.block_cell.half_holiday, td.block_cell.half_holiday {
	background: var(--sunday) !important;
}

td.assignments_per_day_cell.half_holiday, th.assignments_per_day_cell.half_holiday {
	background: linear-gradient(135deg, var(--sunday) 0 50%, transparent 50% 100%), var(--level0) !important;
}

td.sunday, th.sunday,
td.holiday, th.holiday {
	background: var(--sunday) !important;
}

td.absent, th.absent {
	background: var(--unavail) !important;
}

td.clock_change, th.clock_change {
	background: var(--pink) !important;
}

td.today, th.today {
	/* Akzent-Tint statt Vollweiss: hebt die Heute-Spalte in jedem Theme ab,
	   ohne den Kopf zu ueberstrahlen (Textfarben bleiben lesbar geerbt). */
	background: color-mix(in srgb, var(--accent-text-color) 55%, var(--level0)) !important;
	color: inherit;
}

table.alter tbody tr:hover td {
	background: var(--level4) !important;
	transition: background var(--transition-fast);
}

/* APPLICATION_HELP*/
.application_help.warning {
	animation: pulseGlowWarning 1.5s infinite;
}

.application_help.error {
	animation: pulseGlowError 1.5s infinite;
}

/* FRONT PHONE MESSAGE*/
.front_phone_messages .message {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	padding: 10px 0 10px 10px;
	background: var(--level1);
	border-radius: var(--radius-sm);
}

	.front_phone_messages .message.marked {
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 10px 0 10px 10px;
		background: var(--level0);
	}

	.front_phone_messages .message .meta {
		font-size: 10px;
	}

	.front_phone_messages .message .subject {
		font-weight: bold;
	}

	.front_phone_messages .message .answers {
		margin-left: 20px;
	}

.front_phone_message_creation .subject input, .front_phone_message_creation .body textarea {
	width: 100%;
	max-width: 600px;
}

.front_phone_message_creation .body textarea {
	height: 200px;
}

.front_phone_message_creation .attachment_panel {
	padding-top: 5px;
	padding-bottom: 5px;
}

	.front_phone_message_creation .attachment_panel input {
		display: block;
		margin-bottom: 5px;
	}

/* TOOLTIP - the single self-made bubble, positioned by Site.Master's
   delegated hover handler. Mimics the former tippy dark theme. */
#tooltip_bubble {
	position: fixed;
	z-index: 99999;
	max-width: 350px;
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	background-color: #333;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	white-space: pre-line;
	box-shadow: var(--shadow-md);
	pointer-events: none;
}

/* MISC */
#map_canvas {
	width: 100%;
}

#PretoriansLink {
	display: block;
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: var(--black);
	text-decoration: none;
}

.privacy_declaration {
	background-color: var(--green);
	padding: 10px;
	font-size: 12px;
	max-width: 800px;
	border-radius: var(--radius-md);
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: justify;
}

.button_multi_panel {
	display: none;
	position: absolute;
	background-color: var(--level0); /* match .create_panel surface */
	z-index: 999;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border-subtle);
}

	.button_multi_panel > div {
		padding: 10px;
	}

	/* No overflow:hidden on the panel — it would clip absolutely positioned
	   picker flyouts inside the entries. The first/last entry inherit the
	   panel's rounded corners instead, so their hover background stays
	   inside the rounding. */
	.button_multi_panel > div:first-child {
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	.button_multi_panel > div:last-child {
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

		.button_multi_panel > div:hover {
			background-color: var(--level4);
		}

		.button_multi_panel > div.multi_panel_control,
		.button_multi_panel > div.multi_panel_control:hover {
			background-color: transparent;
		}

/* Anchor wrapper: gives the absolutely-positioned .button_multi_panel a
   trigger-sized containing block, so it opens beneath its trigger icon
   instead of falling onto a wrapped flex row. */
.button_multi_panel_anchor {
	position: relative;
	display: inline-block;
}

	.button_multi_panel_anchor > .button_multi_panel {
		top: 100%;
		left: 0;
		white-space: nowrap;
		/* The anchor is only trigger-sized, so shrink-to-fit would fall back to
		   the min-content width — which for side-by-side inline-block columns
		   (e.g. the schedule "+" panel forms) is narrower than the real nowrap
		   line, letting the last column stick out of the panel. */
		width: max-content;
	}


.file-pill-container {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

	.file-pill-container .file-pill {
		display: inline-flex;
		align-items: center;
		padding: 5px 10px;
		border-radius: var(--radius-sm);
		background-color: transparent;
		color: var(--main-text-color);
		font-size: 15px;
		border: 1px solid var(--border-subtle);
	}

		.file-pill-container .file-pill::before {
			content: "📎";
			margin-right: 6px;
		}

	.file-pill-container .file-pill-remove {
		margin-left: 8px;
		cursor: pointer;
		font-weight: bold;
		color: var(--main-text-color);
		transition: color var(--transition-fast);
	}

		.file-pill-container .file-pill-remove:hover {
			color: var(--red);
		}

.attachment_preview {
	max-width: 200px;
	max-height: 200px;
}

.toggle-password {
	position: absolute;
	margin: 8px;
}

/* Commandbar: a horizontal bar with optional heading, a group of controls,
   and a group of commands (action buttons) at the end. */
.commandbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 3px; /* row-gap 6px between wrapped lines, column-gap 3px between items */
	align-items: center;
}

	/* The heading lives inside the bar. Without filter controls it stays an
	   inline flex item, so the commands sit right next to the title on one
	   line. With filter controls it takes the full first line and controls +
	   commands wrap beneath it. */
	.commandbar:not(:has(.commandbar_controls)) > h1,
	.commandbar:not(:has(.commandbar_controls)) > h2,
	.commandbar:not(:has(.commandbar_controls)) > h3 {
		margin: 0;
	}

	.commandbar:has(.commandbar_controls) > h1,
	.commandbar:has(.commandbar_controls) > h2,
	.commandbar:has(.commandbar_controls) > h3 {
		flex: 0 0 100%;
		margin-bottom: -8px;
	}

	/* Controls and commands stay individual flex items (display:contents) so they
	   wrap one at a time and fill each line. The bar's column-gap is the tight
	   command spacing (3px); controls get an extra 7px via margin so they sit 10px
	   apart and 10px before the first command. Real gap + positive margins (no
	   negative-margin trick) keep the wrap math honest, so the bar no longer breaks
	   early and no whole block jumps to the next line. */
	.commandbar .commandbar_controls {
		display: contents;
	}

		.commandbar .commandbar_controls > * {
			margin-right: 7px;
		}

	/* Commands stay individual flex items (display:contents) so the icons wrap one
	   at a time and fill each line. A flex:1 group would instead collapse to a
	   one-icon-wide vertical column when the controls take most of the width (e.g.
	   the date filter in its wide edit mode); individual items just flow onto the
	   next line. flex-shrink:0 keeps the icons at their natural size. */
	.commandbar .commandbar_commands {
		display: contents;
	}

		.commandbar .commandbar_commands > * {
			flex-shrink: 0;
		}

	/* Cancel the 5px inherited from h1/h2/h3 .circle-icon-24 — gap is owned by the commandbar. */
	.commandbar .circle-icon-24 {
		margin-left: 0;
	}
/*-------------------------------------------------------------------
Common Animations
-------------------------------------------------------------------*/
@keyframes pulseGlowRed {
	0% {
		box-shadow: 0 0 8px 0 var(--red);
	}

	50% {
		box-shadow: 0 0 8px 2px var(--red);
		background-color: var(--red);
	}

	100% {
		box-shadow: 0 0 8px 0 var(--red);
		background-color: var(--accent-text-color);
	}
}

@keyframes pulseGlowWarning {
	0% {
		box-shadow: 0 0 8px 0 var(--yellow);
	}

	50% {
		box-shadow: 0 0 8px 2px var(--yellow);
	}

	100% {
		box-shadow: 0 0 8px 0 var(--yellow);
	}
}

@keyframes pulseGlowError {
	0% {
		box-shadow: 0 0 8px 0 var(--red);
	}

	50% {
		box-shadow: 0 0 8px 2px var(--red);
	}

	100% {
		box-shadow: 0 0 8px 0 var(--red);
	}
}

/*-------------------------------------------------------------------
Common Hichart
-------------------------------------------------------------------*/
.highcharts-container .highcharts-data-labels tspan {
	fill: var(--main-text-color);
	text-shadow: none !important;
}

.highcharts-container .highcharts-stack-labels tspan {
	fill: var(--main-text-color);
	text-shadow: none !important;
	font-weight: bold;
}

.highcharts-container .highcharts-axis-labels tspan {
	fill: var(--gray) !important;
	text-shadow: none !important;
}

.highcharts-container .highcharts-legend text {
	fill: var(--gray) !important;
	text-shadow: none !important;
}

/*-------------------------------------------------------------------
Site.master
-------------------------------------------------------------------*/
#content {
	padding: 30px;
	margin-top: 50px;
}

	#content a,
	#content a:visited,
	#content a:active {
		color: var(--main-text-color);
	}

	#content .map_info a,
	#content .map_info a:visited,
	#content .map_info a:active {
		color: var(--black);
		display: block;
		padding-top: 10px;
	}

	#content td.today a {
		color: var(--gray); /* HACK: overwrites the color from 754*/
	}

	/* span: JS-driven click targets rendered as asp:Label (e.g. Standard-Text einfügen).
	   Sized like save_button/cancel_button - one scale for all three button kinds. */
	#content a.big_button,
	#content span.big_button {
		background-color: var(--accent-text-color);
		color: var(--white);
		padding: 5px 16px;
		display: inline-block;
		margin-top: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		border-radius: var(--radius-sm);
		font-weight: 600;
		font-size: 15px;
		transition: all var(--transition-fast);
	}

		#content a.big_button:hover,
		#content span.big_button:hover {
			opacity: 0.85;
		}

@media (max-width:900px) {
	#content {
		padding: 5px;
	}
}

.tabcontrol {
	margin-top: 15px;
}

	.tabcontrol .tabpages {
		background: transparent;
		border-bottom: 1px solid var(--border-subtle);
		margin-bottom: 10px;
		display: flex;
		gap: 4px;
	}

		.tabcontrol .tabpages a {
			text-decoration: none;
			text-transform: uppercase;
			font-size: 14px;
		}

		.tabcontrol .tabpages .activepage {
			padding: 10px 16px;
			display: inline-block;
			border-radius: var(--radius-sm) var(--radius-sm) 0 0;
			border-bottom: 2px solid var(--accent-text-color);
			transition: all var(--transition-fast);
		}

		#content .tabcontrol .tabpages .activepage a,
		.tabcontrol .tabpages .page.ui-tabs-active a {
			color: var(--accent-text-color) !important;
		}

		.tabcontrol .tabpages .page {
			padding: 10px 16px;
			display: inline-block;
			border-radius: var(--radius-sm) var(--radius-sm) 0 0;
			transition: all var(--transition-fast);
		}

			.tabcontrol .tabpages .page a {
				color: var(--menu-color) !important;
			}

			.tabcontrol .tabpages .page:hover,
			.tabcontrol .tabpages .activepage:hover {
				background-color: var(--level4);
			}

@media (max-width:795px) {
	.tabcontrol .tabpages .activepage, .tabcontrol .tabpages .page {
		display: block;
		margin: 0;
	}
}

.first_letter_filter {
}

	.first_letter_filter a.item {
		display: inline-block;
		margin-right: 10px;
		text-decoration: none;
		color: var(--menu-color);
	}

		.first_letter_filter a.item:hover {
			color: var(--accent-text-color) !important;
		}

#globalclipboard {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

.uv-icon.uv-bottom-right {
	top: 200px;
	right: 12px;
}

/*-------------------------------------------------------------------
Contact.aspx
-------------------------------------------------------------------*/
#contact #form input {
	width: 300px;
}

#contact #form textarea {
	height: 200px;
	width: 300px;
}

/*-------------------------------------------------------------------
Error.aspx
-------------------------------------------------------------------*/
#error {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

	#error .row {
		margin-bottom: 20px;
	}

	#error .sorry {
		width: 100px;
	}

	#error .debug_panel {
		background-color: var(--red);
		text-align: left;
		margin-left: auto;
		margin-right: auto;
		padding: 10px;
	}

/*-------------------------------------------------------------------
Imprint.aspx
-------------------------------------------------------------------*/
#imprint .header .multi_column {
	min-width: 200px;
}

#imprint .block {
	padding-top: 50px;
}

#imprint .no_list {
	list-style: none;
}

/*-------------------------------------------------------------------
Login.aspx
ForgotPassword.aspx
-------------------------------------------------------------------*/
#login {
	text-align: center;
	max-width: 420px;
	margin-right: auto;
	margin-left: auto;
	padding: 40px 32px;
	background: var(--level0);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	margin-top: 40px;
}

	#login > img:first-child {
		width: 100px;
	}

	#login h2 {
		text-align: center;
	}

	#login .credentials {
		margin-top: 16px;
		margin-bottom: 16px;
		text-align: center;
	}

	#login .privacy_declaration {
		margin-left: auto;
		margin-right: auto;
	}

	#login label {
		display: block;
		font-weight: 600;
		font-size: 13px;
	}

	#login input {
		padding: 12px 14px;
		border-radius: var(--radius-sm);
	}

	#login textarea.contact_body {
		height: 200px;
		width: 400px;
		border-radius: var(--radius-sm);
		font-family: 'Heebo', sans-serif;
		padding: 12px 14px;
		font-size: 15px;
		background-color: transparent;
		color: var(--main-text-color);
		border: 1px solid var(--border-subtle);
	}

	#login input[type=checkbox] {
		zoom: 2;
	}

	#login .g-recaptcha {
		position: relative;
		left: 50px;
	}

	#login .forgot_password {
		display: block;
		color: gray;
		font-size: 14px;
		margin-top: 5px;
	}

	#login #RegisterPanel {
		margin-top: 50px;
	}

		#login #RegisterPanel span:first-child {
			font-weight: bold;
		}

		#login #RegisterPanel span {
			display: block;
		}

	.website_link {
		max-width: 420px;
		margin: 16px auto 0;
		text-align: center;
	}

		.website_link a {
			color: var(--main-text-color);
			opacity: 0.4;
			font-size: 13px;
			text-decoration: none;
		}

			.website_link a:hover {
				opacity: 1;
				text-decoration: underline;
			}

	#login ul {
	}

		#login ul li {
			margin-bottom: 15px;
			text-align: left;
		}

/*-------------------------------------------------------------------
Tutorial.aspx
-------------------------------------------------------------------*/
#tutorial {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 660px;
	margin: 40px auto 0;
}

	#tutorial .tutorial_card {
		text-align: center;
		padding: 40px 32px;
		background: var(--level0);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}

		#tutorial .tutorial_card h2 {
			text-align: center;
		}

		#tutorial .tutorial_card p {
			text-align: center;
		}

		#tutorial .tutorial_card ol {
			display: inline-block;
			text-align: left;
		}

		#tutorial .tutorial_card iframe {
			max-width: 100%;
			border-radius: var(--radius-sm);
			margin-top: 16px;
		}

		#tutorial .tutorial_card .youtube {
			max-width: 100%;
			border-radius: var(--radius-sm);
		}

/*-------------------------------------------------------------------
ReleaseNotes.aspx
-------------------------------------------------------------------*/
#release_notes {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 660px;
	margin: 40px auto 0;
}

	#release_notes h1,
	#release_notes h2 {
		text-align: center;
	}

	#release_notes h2 {
		cursor: pointer;
	}

	#release_notes .release_year_group {
		display: none;
		flex-direction: column;
		gap: 20px;
	}

		#release_notes .release_year_group.active {
			display: flex;
		}

	#release_notes .release_card {
		padding: 40px 32px;
		background: var(--level0);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}

		#release_notes .release_card h3 {
			margin-top: 0;
			text-align: center;
		}

		#release_notes .release_card ul {
			margin-bottom: 0;
		}

		#release_notes .release_card li {
			margin-bottom: 8px;
		}

/* {Addresses} */
/*-------------------------------------------------------------------
Addresses/CoContractors/Default.aspx
-------------------------------------------------------------------*/
#cocontractors {
}

	#cocontractors .column {
		min-width: 250px;
		display: inline-block;
		vertical-align: top;
	}

/*-------------------------------------------------------------------
Addresses/Common/EditPosition.aspx
-------------------------------------------------------------------*/
#position_edit .column {
	vertical-align: top;
	display: inline-block;
	min-width: 200px;
}

#position_edit #map_canvas {
	width: 100%;
	height: calc(100vh - 350px);
}

/*-------------------------------------------------------------------
Addresses/Customers/Default.aspx
-------------------------------------------------------------------*/
#customers_table td {
	height: 25px;
}

#customer .column,
#customer_site .column,
#addresses .column {
	min-width: 300px;
	display: inline-block;
	vertical-align: top;
}

/*-------------------------------------------------------------------
Addresses/Customers/Sites
-------------------------------------------------------------------*/
#customer_site table.numbers thead {
	display: none;
}

/*-------------------------------------------------------------------
Addresses/Customers/Sites/Alerts/Default.aspx
-------------------------------------------------------------------*/
.alert_details .column {
	padding-right: 50px;
	display: inline-block;
	vertical-align: top;
}

@media screen and (max-width:1024px) {
	.alert_details .column {
		padding-right: 0;
	}
}

/*-------------------------------------------------------------------
Addresses/Customers/Sites/Checkpoints
-------------------------------------------------------------------*/
#customer_site .checkpoints .add_checkpoint_panel .current_location {
	position: relative;
	top: 22px;
}

@media (min-width: 1024px) {
	#customer_site .checkpoints #checkpoints_panel {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
	}

		#customer_site .checkpoints #checkpoints_panel > div:first-child {
			flex: 0 0 auto;
		}

		#customer_site .checkpoints #checkpoints_panel > div:last-child {
			flex: 1 1 auto;
			min-width: 0; /* CRUCIAL: allow it to actually shrink */
		}

	#customer_site .checkpoints #checkpoint_list {
		width: max-content;
	}

		#customer_site .checkpoints #checkpoint_list th,
		#customer_site .checkpoints #checkpoint_list td {
			white-space: nowrap;
		}
}

#customer_site .checkpoints #overview_map,
#customer_site .checkpoints #new_checkpoint_map,
#customer_site .checkpoints #edit_checkpoint_map {
	color: black;
	margin-bottom: 20px;
	width: 100%;
	height: 350px;
}

#customer_site .checkpoints #planned_tours td {
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: top;
	text-align: center;
}

#customer_site .checkpoints #planned_tours .add_panel {
	text-align: left;
}

/*-------------------------------------------------------------------
Addresses/Customers/Sites/Districts/Edit.aspx
-------------------------------------------------------------------*/
#district_details #district_tours #list {
	width: 100%;
}

	#district_details #district_tours #list td {
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
		vertical-align: top;
	}

		#district_details #district_tours #list td .district_slot {
			margin-bottom: 10px;
		}

	#district_details #district_tours #list .add_panel {
		text-align: left;
	}

#district_details .column {
	min-width: 200px;
}

#district_details .district_description textarea {
	width: 400px;
	height: 300px;
}


#district_details #pictures .district_image {
	width: 150px;
	max-height: 150px;
}

#district_details #district_images .item .circle-icon-16 {
	transition: opacity 500ms ease-out;
	opacity: 0;
}

#district_details #district_images .item:hover .circle-icon-16 {
	transition: opacity 500ms ease-in;
	opacity: 1;
}

#district_details #district_images .district_image {
	max-width: 200px;
	height: 100px;
}

/*-------------------------------------------------------------------
Addresses/Customers/Sites/MonitorCalls
-------------------------------------------------------------------*/
#customer #monitor_calls #list {
	width: 100%;
}

	#customer #monitor_calls #list td {
		width: 150px;
		text-align: center;
	}

	#customer #monitor_calls #list .add_panel {
		text-align: left;
	}

/*-------------------------------------------------------------------
Addresses/Customers/Sites/Watchman/Edit.aspx
-------------------------------------------------------------------*/
#SchedulePanel {
	margin-top: 10px;
}

	#SchedulePanel table {
		min-width: 100%;
	}

@media (min-width: 800px) {
	#SchedulePanel table.alter {
		min-width: 800px;
	}
}

#SchedulePanel #base_data {
}

	#SchedulePanel #base_data .multi_column {
		margin-right: 50px;
	}

#SchedulePanel #employees {
	margin-right: 20px;
	min-width: 350px;
}

	#SchedulePanel #employees .info {
		text-align: justify;
		margin-bottom: 20px;
		max-width: 330px;
	}

#SchedulePanel .head_count input {
	width: 89px;
}

#SchedulePanel .intermission input {
	width: 50px;
}

#SchedulePanel #documents .info {
	text-align: justify;
	margin-bottom: 20px;
	max-width: 250px;
}

#SchedulePanel #assigned_employees_list tr:first-child .move_employee_up_button {
	display: none;
}

#SchedulePanel #assigned_employees_list tr:last-child .move_employee_down_button {
	display: none;
}

/*-------------------------------------------------------------------
Addresses/Employees/Default.aspx
-------------------------------------------------------------------*/
#employee .profile_image {
	margin-top: 15px;
	width: 200px;
	border-radius: var(--radius-sm);
}

#edit_profile_image_panel {
	display: none;
	position: fixed;
	z-index: 1000;
	background-color: var(--level0);
	padding: 10px;
}

#employee .info {
	max-width: 300px;
	text-align: justify;
	margin-bottom: 20px;
}

#employee .column {
	min-width: 200px;
	padding-right: 20px;
	display: inline-block;
	vertical-align: top;
}

#employee .notes {
	width: 250px;
	text-align: justify;
}

	#employee .notes textarea {
		width: 250px;
		height: 200px;
	}

#employee #employee_table {
	border-spacing: 0;
	border-collapse: collapse;
}

/*-------------------------------------------------------------------
Addresses/Overview/Default.aspx
-------------------------------------------------------------------*/
#overview #map_canvas {
	color: black;
	width: 100%;
	height: calc(100vh - 170px);
}

/* {Administration} */
/*-------------------------------------------------------------------
Administration/*
-------------------------------------------------------------------*/
#administration .column {
	display: inline-block;
	vertical-align: top;
	min-width: 250px;
}

/*-------------------------------------------------------------------
Administration/Misc/Mandantor/Default.aspx
-------------------------------------------------------------------*/
#administration #misc #mandantors .error {
	background-color: var(--red);
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/*-------------------------------------------------------------------
Administration/WageGroups/Edit.aspx
-------------------------------------------------------------------*/
#administration #wage_groups_edit .wage_type_with_time {
	min-width: 300px;
}

/* {Backend} */
/*-------------------------------------------------------------------
Backend/Default.aspx
-------------------------------------------------------------------*/
#mandantor_table_search {
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 5px;
}

.mandantor_table_filter {
	padding-left: 10px;
}

#mandantor_table td:nth-child(2) {
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#mandantor_table .month_splitter {
	border-left: solid 3px var(--level2);
}

#mandantor_table th, #mandantor_table td {
	word-break: keep-all;
	white-space: nowrap;
}

/*-------------------------------------------------------------------
Backend/Details.aspx
-------------------------------------------------------------------*/
#mandantor_master_data .column {
	display: inline-block;
	min-width: 200px;
	vertical-align: top;
}

/*-------------------------------------------------------------------
Backend/Map.aspx
-------------------------------------------------------------------*/
#mandantor_map #map_canvas {
	color: black;
	width: 100%;
	height: calc(100vh - 200px);
	border-radius: 6px;
	overflow: hidden;
}

	#mandantor_map #map_canvas a,
	#mandantor_map #map_canvas a:visited,
	#mandantor_map #map_canvas a:active {
		color: var(--black);
	}

/* {Content} */
/*-------------------------------------------------------------------
Content/Icons/Default.aspx
-------------------------------------------------------------------*/
#content_icons {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
}

	#content_icons .icon {
		text-align: center;
		width: 150px;
		padding: 30px;
	}

		#content_icons .icon > img {
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			height: 50px;
			width: 50px;
			display: block;
		}

		#content_icons .icon > span {
			display: block;
			color: white;
			text-align: center;
		}

/* {ECS} */
/*-------------------------------------------------------------------
ECS/AlertReport/Default.aspx
-------------------------------------------------------------------*/
#alert textarea {
	width: 300px;
	height: 250px;
}

#alert .column {
	min-width: 300px;
	margin-right: 20px;
}

#alert .info {
	max-width: 480px;
	text-align: justify;
	margin-bottom: 20px;
}

#alert tfoot {
	font-weight: bold;
}


#alert .hardware_defect_alert {
	padding: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: var(--red);
}

#alert .diagnosis {
	max-width: 300px;
}

#alert #alert_table tbody tr td.intervention_time {
	text-align: center;
	width: 75px;
	background: var(--level1);
}

#alert #alert_table tbody tr:hover td.intervention_time {
	background: var(--level4);
}

/*-------------------------------------------------------------------
ECS/District/Default.aspx
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
ECS/FrontPhoneMessages/Default.aspx
-------------------------------------------------------------------*/
#front_phone_messages .info {
	max-width: 420px;
	text-align: justify;
	margin-bottom: 20px;
}

/*-------------------------------------------------------------------
ECS/GCS/Default.aspx
-------------------------------------------------------------------*/
#gcs_live #overview_map {
	color: black;
	width: 100%;
	height: calc(100vh - 200px);
}

/*-------------------------------------------------------------------
ECS/GuardBook/Default.aspx
-------------------------------------------------------------------*/
#ecs_guard_book .location_cell {
	text-align: center;
}

#ecs_guard_book .attachment .circle-icon-16 {
	opacity: 1 !important;
}

/*-------------------------------------------------------------------
ECS/MonitorCalls/Default.aspx
-------------------------------------------------------------------*/
#monitor_calls {
}

	#monitor_calls td {
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
		vertical-align: top;
	}

		#monitor_calls td .call_slot {
			padding-bottom: 10px;
		}

		#monitor_calls td textarea {
			height: 50px;
		}

	#monitor_calls .site {
		text-align: left;
	}

	#monitor_calls .current_hour {
		background: var(--menu-color);
		color: var(--black);
	}

	#monitor_calls tr:hover .current_hour {
		background: var(--level4);
		color: var(--menu-color);
	}

/*-------------------------------------------------------------------
ECS/Scheduling/Default.aspx
-------------------------------------------------------------------*/
#ecs_scheduling_default #schedule_table td,
#ecs_scheduling_default #schedule_table th {
	font-size: 12px;
}

	#ecs_scheduling_default #schedule_table td span {
		white-space: nowrap;
	}

#ecs_scheduling_default #schedule_table tr td:first-child,
#ecs_scheduling_default #schedule_table tr th:first-child {
	border-right: solid 3px var(--light-gray);
}

#ecs_scheduling_default #schedule_table td.assignment {
	text-align: center;
}

/* {Evaluation} */
/*-------------------------------------------------------------------
Evaluation/Absenteeism/Default.aspx
-------------------------------------------------------------------*/
#evaluation_absenteeism .chart_size {
	min-width: 600px;
	margin: 0 auto;
}

/*-------------------------------------------------------------------
Evaluation/Alerts/Default.aspx
-------------------------------------------------------------------*/
#evaluation_alerts .chart_size {
	min-width: 400px;
	max-width: 800px;
	margin: 0 auto;
}

/*-------------------------------------------------------------------
Evaluation/GCS/Default.aspx
-------------------------------------------------------------------*/
#gcs_table img {
	vertical-align: middle;
}

.gcs_share_panel {
	margin-bottom: 20px;
}

/*-------------------------------------------------------------------
Evaluation/GuardBook/Default.aspx
-------------------------------------------------------------------*/
#evaluation_guardbook .chart_size {
	min-width: 600px;
	margin: 0 auto;
}

/*-------------------------------------------------------------------
Evaluation/ManpowerPlanning/Default.aspx
-------------------------------------------------------------------*/
#evaluation_manpowerplanning .chart_size {
	min-width: 600px;
	margin: 0 auto;
}

/* {ManpowerPlanning} */
/*-------------------------------------------------------------------
ManpowerPlanning — shared inset scroll-frame layout
-------------------------------------------------------------------*/
/* App-style layout (mirrors Schedule.aspx / Default2.aspx): the title and
   command toolbar stay pinned while only the table scrolls inside an inset
   box with a gap to the viewport edges. */
.mp_scroll_layout {
	position: absolute;
	top: 70px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
}

	/* Header rows keep their height and never shrink; only the scroll frame
	   flexes, so the document itself never scrolls (which would carry the
	   absolutely positioned layout, toolbar included, off the top). */
	.mp_scroll_layout > *:not(.mp_scroll_frame) {
		flex: 0 0 auto;
	}

	.mp_scroll_frame {
		flex: 1 1 auto;
		min-height: 0;
		overflow: auto;
	}

/* Sticky single-row header inside the scroll frame (replaces floatThead, which
   tracks window scroll and would not follow the inner container). Scoped per
   page root because #schedule_table is shared across several pages. */
#free_man_power #schedule_table > thead > tr > th,
#manpower_planning_overview #schedule_table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 990;
}

	/* Leading sticky columns stay above the scrolling middle headers. */
	/* Eck-Kopfzellen ueber den scrollenden Tages-Koepfen halten; FreeManPower
	   hat drei Sticky-Spalten (Avatar + Name + Planstunden), Overview zwei. */
	#free_man_power #schedule_table > thead > tr > th:nth-child(-n+3),
	#manpower_planning_overview #schedule_table > thead > tr > th:nth-child(-n+2) {
		z-index: 991;
	}

/* Keep the filter's picker flyout above the sticky thead (z-index 990) - same
   fix as #manpower_planning #schedule_filter. #schedule_overview is the
   Dienstpläne page (Schedule/Default2.aspx, sticky #services_table thead). */
#free_man_power .commandbar,
#manpower_planning_overview .commandbar,
#schedule_overview .commandbar {
	position: relative;
	z-index: 1000;
}

/*-------------------------------------------------------------------
ManpowerPlanning/Comment/Default.aspx
-------------------------------------------------------------------*/
#manpower_planning_comments .comment_column,
#manpower_planning_comments .comment_payroll_billing_column {
	max-width: 200px;
}

/*-------------------------------------------------------------------
ManpowerPlanning/FreeManPower/Default.aspx
-------------------------------------------------------------------*/
#free_man_power #schedule_table td,
#free_man_power #schedule_table th {
	text-align: center;
	font-size: 12px;
}

	#free_man_power #schedule_table td:first-child {
		text-align: left;
	}

	#free_man_power #schedule_table td.cell {
		white-space: nowrap;
	}

	#free_man_power #schedule_table td.hire_date {
		border-left: solid 5px var(--green);
	}

	#free_man_power #schedule_table td.discharge_date {
		border-right: solid 5px var(--red);
	}

	#free_man_power #schedule_table td:last-child {
		text-align: right;
	}

	/* Trenner rechts der letzten Sticky-Spalte (Avatar + Name + Planstunden). */
	#free_man_power #schedule_table td:nth-child(3),
	#free_man_power #schedule_table th:nth-child(3) {
		border-right: solid 3px var(--level1);
	}

/*-------------------------------------------------------------------
ManpowerPlanning/Overview/Default.aspx
-------------------------------------------------------------------*/
#manpower_planning_overview #schedule_table td,
#manpower_planning_overview #schedule_table th {
	white-space: nowrap;
	font-size: 12px;
}

#manpower_planning_overview #schedule_table tr td:nth-child(2),
#manpower_planning_overview #schedule_table tr th:nth-child(2) {
	border-right: solid 3px var(--level1);
}

#manpower_planning_overview #schedule_table td.assignment {
	text-align: center;
}

/*-------------------------------------------------------------------
ManpowerPlanning/Schedule/Default2.aspx
-------------------------------------------------------------------*/
#services_table {
	font-size: 13px;
	line-height: 1.3;
}

	#services_table td,
	#services_table th {
		padding: 3px 6px;
	}

		#services_table td.customer {
		}

	#services_table .expand-icon {
		cursor: pointer;
	}

	#services_table .customer_site_row {
		display: none;
	}

	#services_table .watchman_service_row {
		display: none;
	}

	/* position: sticky (not relative) so these cells follow the sticky leading
	   columns during horizontal scroll. Sticky still establishes a containing
	   block for the ::before / ::after connection lines below. */
	#services_table td.vline,
	#services_table td.hline {
		position: sticky;
	}

		#services_table td.vline::before { /* vertical line */
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 1px;
			background: var(--gray);
			pointer-events: none;
		}

	#services_table td.hline::after { /* horizontal line (center -> right) */
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		right: 0;
		transform: translateY(-50%);
		height: 1px;
		background: var(--gray);
		pointer-events: none;
	}

	#services_table td.elbow {
		position: sticky;
	}

		#services_table td.elbow::before { /* upper-middle -> center (vertical half) */
			content: "";
			position: absolute;
			left: 50%;
			top: 0;
			bottom: 50%; /* stops at center */
			transform: translateX(-50%);
			width: 1px;
			background: var(--gray);
			pointer-events: none;
		}

		#services_table td.elbow::after { /* center -> right-middle (horizontal half) */
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			right: 0;
			transform: translateY(-50%);
			height: 1px;
			background: var(--gray);
			pointer-events: none;
		}

	/* Sticky leading columns (shared).
	   Tables opt in via data-sticky-cols="N"; $.fn.stickyColumns(N) in
	   morphtable.js sets the attribute and keeps --sticky-col2-left ..
	   --sticky-col6-left in sync with column widths. Assumes uniform body
	   rows (every row has N+ leading cells). Tables with heterogeneous
	   row classes provide position:static overrides per row class. */
	table[data-sticky-cols="1"] > thead > tr:first-child > th:nth-child(1),
	table[data-sticky-cols="1"] > tbody > tr > td:nth-child(1),
	table[data-sticky-cols="2"] > thead > tr:first-child > th:nth-child(-n+2),
	table[data-sticky-cols="2"] > tbody > tr > td:nth-child(-n+2),
	table[data-sticky-cols="3"] > thead > tr:first-child > th:nth-child(-n+3),
	table[data-sticky-cols="3"] > tbody > tr > td:nth-child(-n+3),
	table[data-sticky-cols="4"] > thead > tr:first-child > th:nth-child(-n+4),
	table[data-sticky-cols="4"] > tbody > tr > td:nth-child(-n+4),
	table[data-sticky-cols="5"] > thead > tr:first-child > th:nth-child(-n+5),
	table[data-sticky-cols="5"] > tbody > tr > td:nth-child(-n+5),
	table[data-sticky-cols="6"] > thead > tr:first-child > th:nth-child(-n+6),
	table[data-sticky-cols="6"] > tbody > tr > td:nth-child(-n+6) {
		position: sticky;
		z-index: 1;
	}

	table[data-sticky-cols="1"] > thead > tr:first-child > th:nth-child(1),
	table[data-sticky-cols="2"] > thead > tr:first-child > th:nth-child(-n+2),
	table[data-sticky-cols="3"] > thead > tr:first-child > th:nth-child(-n+3),
	table[data-sticky-cols="4"] > thead > tr:first-child > th:nth-child(-n+4),
	table[data-sticky-cols="5"] > thead > tr:first-child > th:nth-child(-n+5),
	table[data-sticky-cols="6"] > thead > tr:first-child > th:nth-child(-n+6) {
		z-index: 3;
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(1),
	table[data-sticky-cols] > tbody > tr > td:nth-child(1) {
		left: 0;
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(2),
	table[data-sticky-cols] > tbody > tr > td:nth-child(2) {
		left: var(--sticky-col2-left, 0);
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(3),
	table[data-sticky-cols] > tbody > tr > td:nth-child(3) {
		left: var(--sticky-col3-left, 0);
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(4),
	table[data-sticky-cols] > tbody > tr > td:nth-child(4) {
		left: var(--sticky-col4-left, 0);
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(5),
	table[data-sticky-cols] > tbody > tr > td:nth-child(5) {
		left: var(--sticky-col5-left, 0);
	}

	table[data-sticky-cols] > thead > tr:first-child > th:nth-child(6),
	table[data-sticky-cols] > tbody > tr > td:nth-child(6) {
		left: var(--sticky-col6-left, 0);
	}

	/* Schedule services_table — heterogeneous row classes. Some leading td's
	   colspan across multiple visual columns, so cells past each row's
	   leading-column block need to be un-stuck. With 6 sticky columns the
	   leading block ends at the row_commands cell (visual column 6):
	   customer_row covers cols 1-6 in 4 cells (td3 colspans 3-5), so its
	   day cells start at nth-child(5); customer_site_row covers cols 1-6 in
	   5 cells (td4 colspans 4-5), so its day cells start at nth-child(6). */
	#services_table > tbody > tr.customer_row > td:nth-child(n+5),
	#services_table > tbody > tr.customer_site_row > td:nth-child(n+6) {
		position: static;
	}

	/* The row_commands cell is visual column 6 but sits at a lower nth-child
	   index in the colspan rows, so the generic --sticky-colN-left offset
	   keyed by nth-child is wrong — pin it to the column-6 offset. */
	#services_table > tbody > tr.customer_row > td:nth-child(4),
	#services_table > tbody > tr.customer_site_row > td:nth-child(5) {
		left: var(--sticky-col6-left, 0);
	}

	/* App-style layout (mirrors Schedule.aspx): the title, search and command
	   toolbar stay pinned while only the table scrolls inside an inset frame.
	   #schedule_overview is an absolutely positioned, inset box, so the table
	   keeps a gap to the viewport edges when it is bigger than the frame. */
	#schedule_overview {
		position: absolute;
		top: 70px;
		left: 20px;
		right: 20px;
		bottom: 20px;
		display: flex;
		flex-direction: column;
	}

		/* Title, search and command toolbar keep their natural height and never
		   shrink, so the toolbar can't be squeezed off-screen on short windows. */
		#schedule_overview > *:not(.services_panel) {
			flex: 0 0 auto;
		}

		/* The services panel and the scroller it wraps fill the remaining height.
		   The scroller owns the scrolling (bounded height + overflow), so the
		   document itself never scrolls — otherwise it would carry the whole
		   absolutely-positioned overview, toolbar included, off the top. */
		#schedule_overview > .services_panel {
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}

		#schedule_overview #matrix_vertical_scroller {
			flex: 1 1 auto;
			min-height: 0;
			overflow: auto;
		}

	/* Sticky 2-row header inside the scroll frame (replaces floatThead, which
	   tracks window scroll and would not follow the inner container).
	   --head-row1-height is kept in sync with the date-row height in
	   Default2.aspx's ready handler. */
	#services_table > thead > tr > th {
		position: sticky;
		z-index: 990;
	}

		#services_table > thead > tr:first-child > th {
			top: 0;
		}

		#services_table > thead > tr:nth-child(2) > th {
			top: var(--head-row1-height, 0);
		}

		/* Leading corner cells stay above the scrolling date headers. */
		#services_table > thead > tr:first-child > th:nth-child(-n+6) {
			z-index: 991;
		}

/*-------------------------------------------------------------------
ManpowerPlanning/Schedule/History.aspx
-------------------------------------------------------------------*/
#manpower_planning_history tr > td.original_column,
#manpower_planning_history tr > td.new_column {
	border-left: solid 3px var(--level1);
}

/*-------------------------------------------------------------------
ManpowerPlanning/Schedule/Schedule.aspx
-------------------------------------------------------------------*/
/* The schedule is a viewport-fixed flex column below the nav: the header
   (title row + filter row) takes only the height it needs and the matrix flexes
   to fill the rest and scrolls internally. Replaces the old hard-coded top:180px
   reserve and the absolute filter that overlapped the table. Fixed (not in flow)
   so the page itself never grows a scrollbar. */
#manpower_planning {
	position: fixed;
	top: 50px; /* below the fixed nav band */
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 20px 12px;
	box-sizing: border-box;
}

@media (max-width:900px) {
	#manpower_planning {
		padding-left: 5px;
		padding-right: 5px;
		padding-bottom: 5px;
	}
}

	/* Row 1: the title. Row 2: the address/numbers on their own dimmed line. */
	#manpower_planning #schedule_title {
		min-width: 0;
		flex: 0 0 auto;
	}

		#manpower_planning #schedule_title h1 {
			margin: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	#manpower_planning #numbers {
		margin: 0;
		font-size: 10px;
		color: var(--gray);
	}

#manpower_planning h2 {
	margin: 0;
}

#manpower_planning #schedule_filter {
	position: relative; /* in flow now, so its edit/dropdown pushes content
	                       down instead of floating over the matrix */
	z-index: 1000;      /* keep the picker dropdown above the sticky thead */
	flex: 0 0 auto;
}

	/* Nudge the "Zeitraum" caption 5px lower to line it up within the row. */
	#manpower_planning #schedule_filter .caption {
		position: relative;
		top: 5px;
	}

	#manpower_planning #schedule_filter .datetimepicker .togglable,
	#manpower_planning #schedule_filter .daterangetimepicker .togglable {
		background-color: var(--level3);
		padding: 10px;
	}

#manpower_planning #matrix_vertical_scroller {
	flex: 1 1 auto;
	min-height: 0; /* let the flex item shrink so it scrolls instead of growing the page */
	overflow: auto;
}

#manpower_planning #matrix .isediting {
	background-color: var(--level2);
}

#manpower_planning #matrix td,
#manpower_planning #matrix th {
	font-size: 12px;
}

	#manpower_planning #matrix th.employee_info {
	}

		#manpower_planning #matrix th.employee_info > div {
			width: 175px;
			margin: auto;
		}

			#manpower_planning #matrix th.employee_info > div .circle-icon-16 {
				margin: 3px;
			}

	#manpower_planning #matrix td.any_cell {
		border-bottom: solid 1px var(--gray);
		min-height: 24px;
		background: var(--level0);
	}

/* Sticky col-1 is provided by data-sticky-cols="1" (set via $.fn.stickyColumns
   in morphtable.js). Rules below add the matrix-specific extras: sticky thead
   (top axis), elevated z-index for the top-left intersection cell, padding
   and overflow behaviour for the first-column day-info cells. */
#manpower_planning #matrix > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 990;
	/* Kopfzellen tragen hier echte Plandaten (Schichtmuster) — nicht die
	   gedaempfte Listen-Optik der globalen thead-Regel verwenden. */
	color: var(--menu-color);
	border-bottom: 1px solid var(--gray);
}

	#manpower_planning #matrix > thead > tr > th:first-child {
		z-index: 991;
	}

#manpower_planning #matrix > tbody > tr > td:first-child {
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
	overflow: hidden;
	align-items: center;
}

	#manpower_planning #matrix > tbody > tr > td:first-child > .header_left {
		display: flex;
		align-items: center;
	}

		#manpower_planning #matrix > tbody > tr > td:first-child > .header_left > .header_weekday,
		#manpower_planning #matrix > tbody > tr > td:last-child > .header_left > .header_weekday {
			display: inline-block;
			width: 20px;
		}

		#manpower_planning #matrix > tbody > tr > td:first-child > .header_left > .header_day,
		#manpower_planning #matrix > tbody > tr > td:last-child > .header_left > .header_day {
			display: inline-block;
			width: 40px;
		}

		#manpower_planning #matrix > tbody > tr > td:first-child > .header_left > .header_status,
		#manpower_planning #matrix > tbody > tr > td:last-child > .header_left > .header_status {
			display: inline-block;
			width: 20px;
		}

		#manpower_planning #matrix > tbody > tr > td:first-child > .header_left > .header_shifts,
		#manpower_planning #matrix > tbody > tr > td:last-child > .header_left > .header_shifts {
			display: inline-block;
		}

#manpower_planning #matrix td.block_cell {
	width: 10px;
	background: var(--level0);
}

#manpower_planning #matrix td.accept_block_drop {
	background: var(--main-text-color) !important;
	border: none;
}

#manpower_planning #matrix td.first_day_of_month {
	border-top: solid 5px var(--gray);
}

#manpower_planning #matrix td.first_day_of_work {
	border-top: solid 5px var(--green);
}

#manpower_planning #matrix td.last_day_of_work {
	border-bottom: solid 5px var(--red);
}

#manpower_planning #matrix td.ui-state-hover {
	background: var(--level4) !important;
	border: none;
}

#manpower_planning #matrix td.shifts_cell .shift_label {
	cursor: pointer;
	font-size: 9px;
	white-space: nowrap;
	word-break: keep-all;
}

#manpower_planning #matrix td.assignments_per_day_cell {
	width: 200px !important;
	background: var(--level0);
}

	#manpower_planning #matrix td.assignments_per_day_cell.error {
		transition: background 500ms ease-in-out;
		background: var(--red);
	}

	#manpower_planning #matrix td.assignments_per_day_cell .edit_panel {
		padding: 5px;
	}

		#manpower_planning #matrix td.assignments_per_day_cell .edit_panel input,
		#manpower_planning #matrix td.assignments_per_day_cell .edit_panel textarea,
		#manpower_planning #matrix td.assignments_per_day_cell .edit_panel select,
		#manpower_planning #matrix td.assignments_per_day_cell .create_assignment_panel input {
			background-color: var(--level1);
			color: var(--main-text-color);
			border: 1px solid var(--accent-text-color);
			border-radius: var(--radius-sm);
			padding: 4px;
		}

	#manpower_planning #matrix td.assignments_per_day_cell .create_assignment_panel {
		border: none;
		padding: 5px;
		text-align: center;
		display: none;
	}

		#manpower_planning #matrix td.assignments_per_day_cell .create_assignment_panel .from_box,
		#manpower_planning #matrix td.assignments_per_day_cell .create_assignment_panel .until_box {
			width: 40px;
		}

	#manpower_planning #matrix td.assignments_per_day_cell .edit_panel .assignment_details {
		text-align: left;
	}

	#manpower_planning #matrix td.assignments_per_day_cell .absenteeism {
		font-size: 9px;
		text-align: center;
		background: var(--unavail);
		color: var(--main-text-color);
	}

	#manpower_planning #matrix td.assignments_per_day_cell .collision {
		font-size: 9px;
		text-align: center;
		background: var(--unavail);
	}

		#manpower_planning #matrix td.assignments_per_day_cell .collision a {
			color: var(--main-text-color);
		}

#manpower_planning .day_cell {
	white-space: nowrap;
	font: monospace;
}

#manpower_planning #matrix .single_assignment {
	min-height: 20px;
	text-align: center;
	margin-left: auto;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-right: auto;
	cursor: pointer;
	vertical-align: middle;
	line-height: 20px;
	word-break: keep-all;
	white-space: nowrap;
}

	#manpower_planning #matrix .single_assignment .planned_shift_label.is_briefing .planned_shift_label_from:before {
		content: '[';
	}

	#manpower_planning #matrix .single_assignment .planned_shift_label.is_briefing .planned_shift_label_until:after {
		content: ']';
	}

	#manpower_planning #matrix .single_assignment .planned_shift_label_from:after {
		content: ' - ';
	}

	#manpower_planning #matrix .single_assignment .planned_shift_label_intermission:before {
		content: ' (';
	}

	#manpower_planning #matrix .single_assignment .planned_shift_label_intermission:after {
		content: ')';
	}

	#manpower_planning #matrix .single_assignment .delete_assignment_button {
		margin-left: 10px;
	}

@media (max-width:1280px) {
	#manpower_planning h1 {
		font-size: 20px;
	}
}

@media (max-width:1024px) {
	#manpower_planning h1 {
		font-size: 18px;
	}
}

@media (max-width:520px) {
	#manpower_planning h1 {
		font-size: 12px;
		min-height: 18px;
		margin: 0;
		padding: 0;
	}

	#manpower_planning #numbers {
		margin: 0;
		padding: 0;
	}

		#manpower_planning #schedule_filter .multi_column:nth-child(3) {
			padding-top: 10px;
		}

	#manpower_planning #matrix_vertical_scroller {
		left: 0;
		right: 0;
		bottom: 0;
	}
}

@media (max-width:420px) {
	#manpower_planning #schedule_filter .multi_column:nth-child(3) {
		padding-top: 0;
	}
}

/*-------------------------------------------------------------------
ManpowerPlanning/Schedule/Schedule.aspx nextgen
-------------------------------------------------------------------*/
#manpower_planning.nextgen th {
	vertical-align: top;
}

#manpower_planning.nextgen .header_weekday,
#manpower_planning.nextgen .header_day {
	display: block;
}

#manpower_planning.nextgen .shift_label {
	white-space: nowrap;
}

#manpower_planning.nextgen #matrix td.first_day_of_month {
	border-top: none;
}

	#manpower_planning.nextgen #matrix td.first_day_of_month.block_cell {
		border-left: solid 5px var(--gray);
	}

#manpower_planning.nextgen #matrix .single_assignment .planned_shift_label_from:after {
	content: none;
}

#manpower_planning.nextgen #matrix .single_assignment .planned_shift_label_from,
#manpower_planning.nextgen #matrix .single_assignment .planned_shift_label_until,
#manpower_planning.nextgen #matrix .single_assignment .planned_shift_label_intermission {
	display: block;
}

/*-------------------------------------------------------------------
ManpowerPlanning/TimeSheets/Default.aspx
-------------------------------------------------------------------*/
#time_sheets .location_cell {
	text-align: center;
}

#time_sheets .time-cell {
	text-align: center;
}

#time_sheets .planned-time {
	font-size: smaller;
	color: gray;
}

#time_sheets .multi_column .planned-time {
	position: relative;
	top: -10px;
}

/* {MyDarkBird} */
/*-------------------------------------------------------------------
MyDarkBird Common
-------------------------------------------------------------------*/
/* if viewport <= 1023 display fixed width*/
@media (max-width: 1023px) {
	.my_dark_bird textarea {
		height: 200px;
		width: 98%;
	}

	.my_dark_bird .select2-container {
		width: 98% !important;
	}

	.my_dark_bird .current_location_control {
		width: 98%;
	}
}
/* if viewport >= 1024 display fixed width*/
@media (min-width: 1024px) {
	.my_dark_bird textarea {
		height: 200px;
		width: 600px;
	}

	.my_dark_bird .select2-container {
		width: 600px !important;
	}

	.my_dark_bird .current_location_control {
		width: 600px;
	}
}

/*-------------------------------------------------------------------
MyDarkBird/Documents
-------------------------------------------------------------------*/
#start_documents div.document_category {
	margin-bottom: 40px;
}

/*-------------------------------------------------------------------
MyDarkBird/GuardBook
-------------------------------------------------------------------*/
#my_guard_book .message {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	padding: 10px 0 10px 10px;
	background: var(--level1);
}

	#my_guard_book .message .type {
		font-weight: bold;
	}

#my_guard_book .entry .time {
	font-size: 12px;
}

#my_guard_book .entry .watchman_service {
	font-weight: bold;
	font-style: italic;
}

#my_guard_book .attachment_panel {
	padding-top: 5px;
	padding-bottom: 5px;
}

	#my_guard_book .attachment_panel input {
		display: block;
		margin-bottom: 5px;
	}

/*-------------------------------------------------------------------
MyDarkBird/Profile
-------------------------------------------------------------------*/
.theme-button {
	cursor: pointer;
	display: inline-block;
	padding: 20px;
	border-radius: var(--radius-md);
}

.theme_button_dark {
	background: var(--gray);
	color: var(--white) !important;
	border: solid 1px var(--gray);
}

.theme_button_navy {
	background: var(--blue);
	color: var(--white) !important;
	border: solid 1px var(--blue);
}

.theme_button_light {
	background: var(--light-gray);
	color: var(--black) !important;
	border: solid 1px var(--black);
}

/*-------------------------------------------------------------------
MyDarkBird/Today
-------------------------------------------------------------------*/
#mydarkbird .warning, #myschedule .warning {
	background-color: var(--yellow);
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: var(--radius-sm);
	color: var(--black);
}

#myschedule table.alter td.block_start {
	border-top: 2px solid var(--accent-text-color);
}

#myschedule table.alter td.block_end {
	border-bottom: 2px solid var(--accent-text-color);
}

#myschedule table.alter td.block_bracket {
	border-right: 2px solid var(--accent-text-color);
}

#mydarkbird h1 {
	margin-top: 10px;
}

#mydarkbird .big_button {
	width: 150px;
	text-align: center;
}

@media(min-width:1000px) {
	#mydarkbird .multi_column {
		margin-right: 50px;
	}
}

#mydarkbird .the_ping_panel {
	display: flex;
}

	#mydarkbird .the_ping_panel div:last-child {
		flex-grow: 1;
	}

#mydarkbird .the_ping {
	height: 100px;
	width: 100px;
	background-color: var(--accent-text-color);
	padding: 10px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 1 auto;
	margin: 15px;
}

	#mydarkbird .the_ping:hover {
		box-shadow: var(--shadow-lg);
		animation: pulseGlowRed 1.5s infinite;
	}

	#mydarkbird .the_ping input {
		height: 75%;
		width: 75%;
	}

#mydarkbird .alert a {
	text-decoration: none;
}

#mydarkbird .alert h2 img {
	padding-right: 5px;
	margin: 0;
}

#mydarkbird .address {
	margin-bottom: 15px;
}

#mydarkbird .next_assignments {
	padding: 5px 5px 15px 5px;
	background: var(--level1);
	margin-bottom: 2px;
	border-radius: var(--radius-sm);
}

	#mydarkbird .next_assignments.today {
		background: var(--level4);
	}

#mydarkbird .schedule_table td {
	padding: 3px;
	height: 28px;
}

#mydarkbird .schedule_table .duration {
	text-align: right;
}

#mydarkbird .center {
	text-align: center;
}

#mydarkbird .schedule_table tfoot th {
	text-align: left;
}

#mydarkbird .schedule_table td.day {
	border-top: solid 1px var(--light-gray);
}

#mydarkbird .text {
	max-width: 390px;
}

#mydarkbird .chart_size {
	width: 300px;
	height: 200px
}

/* {QA} */
/*-------------------------------------------------------------------
QA/Audits/Default.aspx
-------------------------------------------------------------------*/
#audits .info {
	margin-bottom: 20px;
	max-width: 480px;
	text-align: justify;
}

#audits .approved_column {
	min-width: 50px;
	text-align: center;
}

/* {Service} */
/*-------------------------------------------------------------------
Service/Imprint/Default.aspx
-------------------------------------------------------------------*/
/* Long-form text page layout (headings, justified paragraphs, TOC with
   anchor offset below the fixed header). Formerly the shared .text_pages
   relic; the imprint is its only remaining consumer. */
#imprint h1 {
	margin-bottom: 10px;
}

#imprint h2 {
	margin-top: 20px;
	margin-bottom: 10px;
}

#imprint p {
	margin-top: 0;
	text-align: justify;
}

#imprint .info_group {
	margin-bottom: 10px;
}

#imprint .caption {
	color: var(--gray);
	font-size: 12px;
}

#imprint .toc {
	background-color: var(--level1);
	padding: 10px;
	display: inline-block;
}

	#imprint .toc ul {
		list-style: decimal;
	}

	#imprint .toc li {
		cursor: pointer;
	}

#imprint .offset:before {
	display: block;
	content: " ";
	height: 150px; /* Give height of your fixed element */
	margin-top: -150px; /* Give negative margin of your fixed element */
	visibility: hidden;
}

/*-------------------------------------------------------------------
Service/Lohnfortzahlung/Default.aspx
-------------------------------------------------------------------*/
#wage_continuation_table td {
	padding: 10px;
}

/*-------------------------------------------------------------------
Service/Tarif/Default.aspx
-------------------------------------------------------------------*/
#tariff .twolines {
	font-size: 10px;
	white-space: nowrap;
}

#tariff tbody td {
	text-align: right;
	white-space: nowrap;
}

	#tariff tbody td:first-child {
		text-align: left;
	}

	#tariff tbody td.section, #tariff th.section {
		border-left: solid 1px var(--gray);
	}

#tariff th img {
	vertical-align: top;
	margin-left: 5px;
}

#tariff .calculation_rule {
	padding: 10px;
	border: solid 1px var(--light-gray);
	background-color: var(--white);
}

#tariff #vacation_calculation .edit_group label,
#tariff #vacation_calculation .edit_group input,
#tariff #vacation_calculation .edit_group select {
	display: block;
}

#tariff #vacation_calculation .edit_group input,
#tariff #vacation_calculation .edit_group select {
	padding: 5px;
}

#tariff .logo {
	text-decoration: none;
}

	#tariff .logo img {
		height: 100px;
	}

#tariff .sources {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

#tariff .source {
	display: inline-block;
}

	#tariff .source span {
		display: block;
	}

#tariff_table th:last-child,
#tariff_table td:last-child {
	text-align: center;
}

/*-------------------------------------------------------------------
Service/Tutorials/Default.aspx
-------------------------------------------------------------------*/
#tutorial {
	text-align: center;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

	#tutorial iframe {
		width: 400px;
		height: 250px;
		cursor: pointer;
	}

	#tutorial h2 {
		text-align: center;
	}

	#tutorial .youtube {
		width: 400px;
		cursor: pointer;
	}

.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}

/* Editable controls (BaseControl + TextBox + DynamicDropDown/select2 +
   DateTimePicker + DateTimeRangePicker incl. the darkbirdPicker flyout).
   Documented in Wiki/EditableControls.md - read it before touching these.
   Loads AFTER Screen.css and select2.css in the style bundle, so the
   scoped rules here override the generic ones there. Moved verbatim out
   of Screen.css; block order preserved. */

.edit_group {
	margin-bottom: 3px;
}

	.edit_group .caption {
		color: var(--gray);
		font-size: 12px;
		font-weight: 500;
		white-space: nowrap;
		margin-block: 4px;
	}

	.edit_group.editable .caption {
		cursor: pointer;
	}


table .edit_group {
	margin-bottom: 0;
}

table.numbers .edit_group {
	margin-bottom: 5px;
}

/* BASECONTROL */
.base_control_body,
.datetimepicker,
.daterangetimepicker {
	min-height: 32px;
}

	/* Match the standard textbox's 5px vertical padding so the picker's input
	   row is the same height as a plain textbox / dropdown. The 4px horizontal
	   (vs the standard 10px) keeps the narrow day/month/year boxes readable. */
	.datetimepicker .es_text_box_input,
	.daterangetimepicker .es_text_box_input {
		padding: 5px 4px;
		text-align: center;
	}

.base_control_body {
	display: flex;
	align-items: flex-start;
}

	.base_control_body .view_panel {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	/* Editable controls signal tap/click-to-edit on the value and caption — and on
	   iOS this pointer cursor is what makes click fire on these non-interactive
	   elements. cursor inherits, so the value/icon descendants get it too. */
	.edit_group.editable .view_panel,
	.edit_group.editable .caption {
		cursor: pointer;
	}

	/* One centered line for the edit widget and the info/warning/error icons,
	   mirroring the view panel. */
	.base_control_body .edit_panel {
		display: none;
		align-items: center;
		gap: 6px;
	}

	/* Icon-only: strip the text-pill chrome the other .save_button
	   consumers (create panels etc.) use, leaving just the circle icon. */
	.base_control_body .save_button,
	.base_control_body .save_button:hover {
		line-height: 0;
		padding: 0;
		border: none;
		background-color: transparent;
	}

	/* The pending save is the one action the user must not miss: tint it
	   green - every other icon in the app is accent-blue. */
	.base_control_body .save_button .circle-icon-24 {
		background: var(--green);
	}

	/* The 'editing' class (toggled by the JS) is the single source of truth
	   for the view/edit swap: CSS owns the display, the JS owns the flag. */
	.edit_group.editing .base_control_body .view_panel {
		display: none;
	}

	.edit_group.editing .base_control_body .edit_panel {
		display: flex;
	}

	/* Every element centers its own content (custom icon, value text, the
   injected step controls, the nav icon). gap spaces multi-child elements
   such as the step controls or the info/warning/error icons. */
	.base_control_body .view_element,
	.base_control_body .edit_element {
		display: inline-flex;
		align-items: center;
		gap: 2px;
	}

		/* Collapse an element whose control is hidden (renders no child element),
			so it leaves no gap in the row. The value panel is exempt: it always has
			content and scripts may write bare text into it via JQueryDisplayTextID. */
		.base_control_body .view_element:not(.value):not(:has(*)),
		.base_control_body .edit_element:not(:has(*)) {
			display: none;
		}

	.base_control_body .navigate_link {
		display: inline-flex;
		align-items: center;
	}

	.base_control_body .view_element > p {
		margin: 0;
	}

.datetimepicker,
.daterangetimepicker {
	position: relative;
}

.picker_inline {
	position: absolute;
	z-index: 100;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	width: fit-content;
	box-shadow: var(--shadow-lg);
}

/* Manual-close (X) button, pinned to the flyout's top-right corner.
   The accent background keeps the white xmark legible in every theme -
   the same white-on-accent treatment the circle icons use. */
.picker_close {
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	padding: 4px;
	border-radius: var(--radius-sm);
	background: var(--accent-text-color);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity var(--transition-fast);
}

	.picker_close:hover {
		opacity: 1;
	}

.picker_inline > .picker_close {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 5;
}

.datetimepicker .value_null_panel,
.datetimepicker .calendar_inputs {
	white-space: nowrap;
}

/* Row-lay the date field, the multi-select box and the clear icon. */
.datetimepicker .calendar_inputs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

	.datetimepicker .value_null_panel span {
		cursor: pointer;
	}

/* DARKBIRDPICKER (#476) — flyout body of the jQuery-free picker module:
   calendar grid with drilldown + scroll-snap time wheels. Rendered by
   darkbirdPicker.js into .picker_inline; --dbp-item-h must match the
   module's ITEM_HEIGHT constant. */
/* The flyout layout is sized border-box throughout: the wheel scroller is
   height:100% PLUS its centering padding, which would overflow the wheel by
   two rows under the app's default content-box. */
.dbp_row,
.dbp_row * {
	box-sizing: border-box;
}

.dbp_row {
	--dbp-item-h: 36px;
	--dbp-rows: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	padding: 8px;
	background: var(--level0);
}

/* Wheels — one band per wheel element (a band on the row container would
   paint a ghost band when the row is empty). */
.dbp_wheels {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}

	.dbp_wheels:empty {
		display: none;
	}

.dbp_wheel {
	position: relative;
	height: calc(var(--dbp-item-h) * var(--dbp-rows));
	min-width: 48px;
}

	.dbp_wheel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(50% - var(--dbp-item-h) / 2);
		height: var(--dbp-item-h);
		background: color-mix(in srgb, var(--accent-text-color) 12%, transparent);
		border-top: 1px solid var(--accent-text-color);
		border-bottom: 1px solid var(--accent-text-color);
		pointer-events: none;
	}

.dbp_wheel_scroll {
	height: 100%;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	overscroll-behavior: contain;
	padding: calc(var(--dbp-item-h) * (var(--dbp-rows) - 1) / 2) 0;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}

	.dbp_wheel_scroll::-webkit-scrollbar {
		display: none;
	}

.dbp_wheel_item {
	height: var(--dbp-item-h);
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
	color: var(--gray);
	padding: 0 8px;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

	.dbp_wheel_item.is_center {
		color: var(--accent-text-color);
		font-weight: 600;
	}

/* Calendar grid */
.dbp_cal {
	user-select: none;
	width: 252px;
	flex: 0 0 auto;
}

.dbp_cal_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 4px;
}

	/* Keep the › nav clear of the manual-close X, which the flyout pins to
	   its top-right corner (.picker_inline > .picker_close). */
	.picker_inline .dbp_cal_head {
		padding-right: 24px;
	}

	.dbp_cal_head button {
		background: none;
		border: none;
		color: var(--main-text-color);
		font: inherit;
		font-weight: 600;
		padding: 6px 8px;
		cursor: pointer;
		border-radius: var(--radius-sm);
	}

		.dbp_cal_head button:hover:not(:disabled) {
			background: color-mix(in srgb, var(--accent-text-color) 25%, transparent);
		}

	/* The topmost drill view has nowhere to go up to. */
	.dbp_cal_title:disabled {
		cursor: default;
	}

	.dbp_cal_nav {
		color: var(--accent-text-color);
		font-size: 18px;
		line-height: 1;
	}

.dbp_cal_grid {
	display: grid;
	gap: 2px;
}

	.dbp_cal_grid.days {
		grid-template-columns: repeat(7, 1fr);
	}

	.dbp_cal_grid.months,
	.dbp_cal_grid.years {
		grid-template-columns: repeat(3, 1fr);
	}

.dbp_cal_dow {
	text-align: center;
	font-size: 11px;
	color: var(--gray);
	padding: 2px 0;
}

.dbp_cal_cell {
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	color: var(--main-text-color);
	font: inherit;
	font-variant-numeric: tabular-nums;
	padding: 0;
	height: 32px;
	min-width: 32px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

	.dbp_cal_grid.months .dbp_cal_cell,
	.dbp_cal_grid.years .dbp_cal_cell {
		height: 38px;
	}

	/* Accent-tinted hover: the level tokens sit too close to the flyout's
	   --level0 in the dark/navy themes to read as a hover at all. */
	.dbp_cal_cell:hover:not(:disabled) {
		background: color-mix(in srgb, var(--accent-text-color) 25%, transparent);
	}

	.dbp_cal_cell.other {
		color: var(--gray);
		opacity: 0.6;
	}

	.dbp_cal_cell:disabled {
		cursor: default;
	}

	/* Weekend day numbers keep the accent tint of the previous calendar. */
	.dbp_cal_cell.sat,
	.dbp_cal_cell.sun {
		color: var(--accent-text-color);
	}

	.dbp_cal_cell.today {
		box-shadow: inset 0 0 0 1px var(--accent-text-color);
	}

	.dbp_cal_cell.inrange {
		background: color-mix(in srgb, var(--accent-text-color) 15%, transparent);
		border-radius: 0;
	}

	/* White-on-accent, the same treatment the circle icons use. */
	.dbp_cal_cell.selected {
		background: var(--accent-text-color);
		color: var(--white);
	}

		/* A selected day must stay visibly selected under the cursor (the
		   generic hover outranks .selected and would strip the fill, which
		   reads as "will be deselected"). Hover feedback is a slight darken
		   of the accent instead. */
		.dbp_cal_cell.selected:hover:not(:disabled) {
			background: color-mix(in srgb, var(--accent-text-color) 80%, var(--black));
			color: var(--white);
		}

/* Picker text boxes: one compact bordered field, no dividers between the
   boxes; the time pair sets itself apart from the date triple by a larger
   gap (product decision #476). Boxes not needed by the DisplayMode are not
   rendered server-side, so no visibility juggling is required. */
.picker_field {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	padding: 2px 4px;
}

	.picker_field:focus-within {
		border-color: var(--accent-text-color);
	}

	/* Range picker: the active boundary carries an accent underline (inset
	   shadow, not a border, so nothing shifts). */
	.picker_field.active {
		box-shadow: inset 0 -2px 0 var(--accent-text-color);
	}

.range_sep {
	color: var(--gray);
}

	/* Collapse when the mode renders no boxes at all (multi-day mode). */
	.picker_field:not(:has(.es_text_box_input)) {
		display: none;
	}

	.picker_field .es_text_box_input {
		box-sizing: content-box;
		width: 20px !important; /* 2-digit day/month/hour/minute */
		border: none;
		padding: 3px 4px;
		text-align: center;
		background: transparent;
		font-variant-numeric: tabular-nums;
	}

		.picker_field .es_text_box_input.picker_year {
			width: 40px !important; /* the 4-digit year, shown in full */
		}

		.picker_field .es_text_box_input:focus {
			box-shadow: none;
		}

	.picker_time_gap {
		width: 10px;
		flex: 0 0 auto;
	}

		/* No gap when the mode renders only one of the two groups (date-only
		   modes leave it as last child, HourMinute as first). */
		.picker_time_gap:first-child,
		.picker_time_gap:last-child {
			display: none;
		}

/* Touch (#476, revised after iPad test): every touch device gets the
   keyboard-free calendar toggle button (hidden on fine pointers, where the
   flyout opens on textbox focus). Only PHONE-sized touch screens drop the
   wheels — there the numeric keyboard is the input method; tablets keep the
   desktop behaviour (see the matching media query in the picker controls). */
.picker_cal_toggle {
	display: none;
}

@media (pointer: coarse) {
	.picker_cal_toggle {
		display: inline-block;
	}
}

@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
	.dbp_wheels {
		display: none;
	}
}

/* DATERANGETIMEPICKER */
.daterangetimepicker_textboxes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* SELECT2 DropDownBoxes */
.select2-container {
	min-width: 250px;
	color: var(--black);
	background-color: transparent;
}

.select2-container--default .select2-selection--single {
	background-color: transparent !important;
	color: var(--main-text-color) !important;
	border-color: var(--border-subtle) !important;
	border-radius: var(--radius-sm) !important;
	min-height: 32px;
}

.select2-container--default .select2-selection--multiple {
	background-color: transparent !important;
	color: var(--main-text-color) !important;
	border-color: var(--border-subtle) !important;
	border-radius: var(--radius-sm) !important;
}

	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: var(--accent-text-color) !important;
		color: var(--white) !important;
		border: none !important;
		border-radius: var(--radius-sm) !important;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		color: var(--white) !important;
	}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--main-text-color) !important;
}

.select2-dropdown {
	background-color: var(--level2) !important;
	color: var(--main-text-color) !important;
	border-color: var(--border-subtle) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow-lg) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
	background-color: transparent !important;
	color: var(--main-text-color) !important;
}

.shift_entry .select2-container {
	min-width: 100px;
}

/* Constrain only the top-level results list (the scroll container). Scoping to
   the direct child — as select2's own CSS does — keeps nested optgroup lists
   flowing at their natural height; an unscoped rule caps each group's list at
   35vh with overflow:visible, so a tall group spills its options over the
   following group (#415). */
.select2-results > .select2-results__options {
	max-height: 35vh !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--accent-text-color) !important;
}

.select2-item-tooltip {
	display: block;
	margin: -6px;
	padding: 6px;
}

/* TEXTBOX CONTROL */
.es_text_box_input {
	background-color: transparent;
	color: var(--main-text-color);
	border: 1px solid var(--border-subtle);
	font-size: 15px;
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

	.es_text_box_input:focus {
		outline: none;
		border-color: var(--accent-text-color);
		box-shadow: 0 0 0 3px rgba(79, 180, 230, 0.15);
	}

/* Edit control widths */
.edit_group .es_text_box_input {
	width: 200px;
}

.edit_group textarea.es_text_box_input {
	width: 100%;
}

/* Default dropdowns match the text input width so a textbox and a dropdown on
   the same form line up. 200px fits the columns (which are >= 200px wide).
   Large (below) is the only size variant.
   min-width:0 is essential: the container is a flex item inside .edit_element,
   so its default min-width:auto (= min-content, select2's longest-option width)
   would clamp the width upward and ignore the value. */
.edit_group .select2-container {
	width: 200px !important;
	min-width: 0;
}

/* Large: a wider minimum for dropdowns with heavy content. The default
   width:200px gets clamped up to this. (A min-width works here because the
   default releases the flex min-content via min-width:0.) */
.edit_group select.dropdown-large + .select2-container {
	min-width: 350px;
}


/* Standalone user controls (Web.UI/Controls/*.ascx) outside the
   BaseControl family: MainMenu, ApplicationMessages, ClosestAssignment,
   CurrentLocation, EmployeeImage, NumberList, ScheduleAddShift.
   The BaseControl subsystem lives in Screen.EditableControls.css;
   page-scoped overrides stay in Screen.css. Loads after Screen.css in
   the style bundle. Moved verbatim out of Screen.css. */

/* <Controls> */
/*-------------------------------------------------------------------
Controls/ApplicationMessagesControl
-------------------------------------------------------------------*/
/* Toast bar pinned below the fixed header, right-aligned by the auto left
   margin; the control's JS collapses it to a pill (.minimized) after 2s,
   the transitions animate width and radius. */
#ApplicationMessagesPanel {
	position: fixed;
	left: 0;
	right: 0;
	top: 50px;
	z-index: 15000;
	margin: 12px;
	margin-left: auto;
	max-width: calc(100% - 24px);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: max-width 300ms ease, border-radius 300ms ease;
}

	/* Solid per-type coloring for the whole toast; header and list set
	   their own text color, the messages inherit the white. */
	.application_message_panel.info,
	#ApplicationMessagesPanel.info {
		color: var(--white);
		background-color: var(--blue);
	}

	.application_message_panel.success,
	#ApplicationMessagesPanel.success {
		color: var(--white);
		background-color: var(--green);
	}

	.application_message_panel.warning,
	#ApplicationMessagesPanel.warning {
		color: var(--white);
		background-color: var(--yellow);
	}

	.application_message_panel.error,
	.application_message_panel.exception,
	#ApplicationMessagesPanel.error,
	#ApplicationMessagesPanel.exception {
		color: var(--white);
		background-color: var(--red);
	}

	/* Type-colored hairline on the container (none for exception). */
	#ApplicationMessagesPanel.info {
		border: 1px solid var(--accent-text-color);
	}

	#ApplicationMessagesPanel.success {
		border: 1px solid var(--green);
	}

	#ApplicationMessagesPanel.warning {
		border: 1px solid var(--yellow);
	}

	#ApplicationMessagesPanel.error {
		border: 1px solid var(--red);
	}

	#ApplicationMessagesPanel.minimized {
		max-width: 110px;
		border-radius: var(--radius-pill);
	}

		#ApplicationMessagesPanel.minimized #application_messages_summary {
			display: none;
		}

		#ApplicationMessagesPanel.minimized #application_messages_header {
			padding: 6px 8px;
			gap: 6px;
		}

#application_messages_header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--main-text-color);
}

	/* Only effective in the minimized pill: with the summary hidden there is
	   free space, and the auto margin pushes the close icon to the right edge. */
	#application_messages_header img:last-child {
		margin-left: auto;
	}

#application_messages_summary {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#application_messages_list {
	padding: 0 16px 12px 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--main-text-color);
}

/* The messages render as a flat list inside #ApplicationMessagesPanel - the
   card chrome (color, border, shadow) lives on that container. The !important
   neutralisation must beat the MORE SPECIFIC .info/.success/... variants
   above, whose background-color is only meant for the container selector. */
.application_message_panel {
	color: var(--black);
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

	.application_message_panel + .application_message_panel {
		margin-top: 8px !important;
		padding-top: 8px !important;
		border-top: 1px solid var(--border-subtle) !important;
	}

	.application_message_panel div:first-child {
		font-weight: 600;
	}

	.application_message_panel div:nth-child(2),
	.application_message_panel div:nth-child(3) {
		font-size: 12px;
		opacity: 0.8;
		margin-top: 4px;
		word-break: break-word;
	}

/*-------------------------------------------------------------------
Controls/ClosestAssignmentControl
-------------------------------------------------------------------*/
.closest_assignment_control {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	background: var(--level1);
	display: flex;
	flex-wrap: wrap;
	border-radius: var(--radius-md);
}

	.closest_assignment_control > div {
		margin-right: 10px;
	}
/*-------------------------------------------------------------------
Controls/CurrentLocationControl
-------------------------------------------------------------------*/
.current_location_control .location_map_panel {
	display: none;
}

.current_location_control .location_not_allowed_panel {
	display: none;
}

.current_location_control .location_map_panel {
	height: 100%;
	min-height: 150px;
	border-radius: 20px;
}

/*-------------------------------------------------------------------
Controls/EmployeeImageControl.aspx
-------------------------------------------------------------------*/
.employee_image_control {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.employee_image_control img {
		width: 25px;
		height: 25px;
		object-fit: cover;
		object-position: center top;
		border-radius: 50%;
	}

	/* Fallback-Icon (id-badge.svg) nicht beschneiden, Fotos dagegen rund croppen. */
	.employee_image_control img[src$='.svg'] {
		object-fit: contain;
	}

/*-------------------------------------------------------------------
Controls/MainMenu.ascs
-------------------------------------------------------------------*/
header {
	z-index: 20000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: var(--level1);
	/* No backdrop-filter/transform here: those establish a containing block for
	   position:fixed descendants, which would anchor the fixed hamburger to the
	   (content-width) header instead of the viewport. The background is opaque, so
	   a blur had no visible effect anyway. */
	border-bottom: 1px solid var(--border-subtle);
	color: var(--white);
}

	header nav .darkbird_logo {
		position: absolute;
		top: 0;
		left: 0;
		height: 50px;
	}

	header nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

		header nav ul .selected {
			color: var(--accent-text-color) !important;
		}

		header nav ul div.current_user {
			height: 36px;
			width: 36px;
			background: var(--accent-text-color);
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			border-radius: var(--radius-sm);
			margin: 7px 8px;
		}

			header nav ul div.current_user img.no_user_image {
				margin: 12px;
			}

			header nav ul div.current_user img.user_image {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}

		header nav ul.main_menu .register_link {
			background-color: var(--accent-text-color);
			border-radius: var(--radius-sm);
		}

			header nav ul.main_menu .register_link:hover {
				opacity: 0.85;
			}

/* If viewport < 1023px: show hamburger menu*/
@media(max-width: 1023px) {
	header nav ul.main_menu {
		top: 50px;
		left: 0;
		right: 0;
		height: calc(100vh - 50px);
		position: absolute;
		overflow: scroll;
		display: none;
		background-color: var(--level3);
	}

	header > nav li {
		display: block;
		padding: 10px;
		cursor: pointer;
	}

		header > nav li:hover {
			background-color: var(--level4);
		}

		header > nav li a {
			color: var(--menu-color);
			text-decoration: none;
			display: inline-block;
			width: 100%;
		}

	header > nav ul.sub_menu {
		display: none;
		margin-top: 10px;
	}

		header > nav ul.sub_menu > li {
			padding: 10px;
		}

	header > nav > ul.main_menu > li:last-child .login {
		display: flex;
		align-items: center;
	}

		header > nav > ul.main_menu > li:last-child .login > span,
		header > nav > ul.main_menu > li:last-child .login > img {
			display: inline-block;
			vertical-align: middle;
			margin-right: 10px;
		}

	header nav ul.main_menu .register_link {
		padding: 10px;
	}

	header nav .mainmenu_hamburger {
		position: fixed; /* pinned to the viewport's top-right, not the (wider) content */
		top: 8px;
		right: 8px;
		height: 34px;
		cursor: pointer;
		z-index: 20001; /* above the header */
	}
}

/* If viewport > 1024px and < 1290px: Make menu smaller */
@media(min-width: 1024px) and (max-width: 1290px) {
	header > nav > ul.main_menu li > a {
		font-size: 12px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
	}
}

/* If viewport > 1024px and < 1120px: hide "My account" text */
@media(min-width: 1024px) and (max-width: 1120px) {
	header > nav > ul.main_menu > li:last-child .login span {
		display: none;
		margin-right: 0;
	}
}

/* If viewport > 1024px: show default menu */
@media(min-width: 1024px) {
	header > nav > ul.main_menu > li:hover {
		background-color: var(--level3);
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	}

	header > nav ul.sub_menu > li:hover {
		background-color: var(--level4);
	}

	header > nav > ul.main_menu {
		overflow: hidden;
		margin-left: 50px;
		right: 0;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		justify-content: flex-start;
	}

		header > nav > ul.main_menu > li {
			flex: 0 1 auto;
			margin: 0;
			padding: 0;
			transition: all var(--transition-fast);
			vertical-align: middle;
		}

			header > nav > ul.main_menu > li:last-child {
				margin-left: auto;
			}

				header > nav > ul.main_menu > li:last-child .login span {
					margin-right: 10px;
				}

		header > nav > ul.main_menu li > a {
			font-size: 13px;
			align-items: flex-start;
			color: var(--menu-color);
			display: flex;
			font-weight: 600;
			letter-spacing: 0.05em;
			max-width: 500px;
			padding-left: 10px;
			padding-right: 10px;
			text-decoration: none;
			transition: all var(--transition-fast);
			text-transform: uppercase;
			height: 50px;
			line-height: 50px;
			vertical-align: middle;
		}

		header > nav > ul.main_menu > li a + div {
			background-color: var(--level3);
			display: none;
			position: absolute;
			z-index: 99999;
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			box-shadow: var(--shadow-lg);
			border: 1px solid var(--border-subtle);
			border-top: none;
			overflow: hidden;
			margin-top: 0;
		}

		header > nav > ul.main_menu > li:hover a + div {
			display: block;
		}

		header > nav > ul.main_menu > li:last-child {
			margin-left: auto;
		}

			header > nav > ul.main_menu > li:last-child a {
				padding-right: 0;
			}

				header > nav > ul.main_menu > li:last-child a + div {
					right: 0;
				}

	header > nav ul.sub_menu li > a {
		text-transform: none;
		white-space: nowrap;
		transition: color var(--transition-fast);
	}

	header nav .mainmenu_hamburger {
		display: none;
	}
}

/*-------------------------------------------------------------------
Controls/Numberlist.ascx
-------------------------------------------------------------------*/
#number_list_panel table.numbers thead {
	display: none;
}

/*-------------------------------------------------------------------
Controls/ScheduleAddShiftControl.ascx
-------------------------------------------------------------------*/
.schedule_add_shift .multi_column {
	margin-right: 100px;
}


