/* Minification failed. Returning unminified contents. (42,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-size' (43,23): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-line-height' (48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (230): run-time error CSS1030: Expected identifier, found ' ' (230): run-time error CSS1019: Unexpected token, found ' ' (277,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (284,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (318,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (319,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (320,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (329,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (330,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-hover' (331,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-hover' (337,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (338,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-active' (339,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-active' (344,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-surface' (346,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-surface' (355,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-error' (356,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-surface' (357,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-surface' (370,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (371,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (385,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (390,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (414,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (425,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-sm' (430,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (431,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (442,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (446,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary-subtle' (447,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (448,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (471,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (472,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (484,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-subtle-active' (521,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (525,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (529,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (538,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-subtle' (539,33): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-emphasis' (540,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-on-subtle' (620,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-base' (621,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (622,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (627,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-base' (642,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-base' (643,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (644,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (655,35): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (672,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (684,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (688,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-surface' (699,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (701,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-sm' (708,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (722,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-subtle-active' (724,21): run-time error CSS1039: Token not allowed after unary operator: '-kendo-spacing-4' (724,50): run-time error CSS1039: Token not allowed after unary operator: '-kendo-spacing-4' (774,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-spacing-2' (775,19): run-time error CSS1039: Token not allowed after unary operator: '-kendo-spacing-2' (807,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (826,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error' (851,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (853,35): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (869,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (875,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (882,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (917,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (923,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (929,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (930,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (953,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (991,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (1000,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1013,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1024,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error' (1039,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (1051,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (1093,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (1109,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (1116,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1129,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (1268,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1357,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-subtle' (1358,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-on-subtle' (1359,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (1365,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-subtle' (1366,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-on-subtle' (1367,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-emphasis' (1375,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-subtle' (1376,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-on-subtle' (1377,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-emphasis' (1383,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-subtle' (1384,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-on-subtle' (1385,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-emphasis' (1389,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-subtle' (1390,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-on-subtle' (1391,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error-emphasis' (1394,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-subtle' (1395,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-on-subtle' (1396,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-info-emphasis' (1399,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-subtle' (1400,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-on-subtle' (1401,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (1404,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-subtle' (1405,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-on-subtle' (1406,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-emphasis' (1411,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-subtle' (1412,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-on-subtle' (1413,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-warning-emphasis' (1443,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1535,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (1544,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1551,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (1557,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (1619,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1661,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (1662,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (1663,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1713,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1755,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (1760,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1765,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-secondary' (1799,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (1847,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1847,31): run-time error CSS1035: Expected colon, found '{' (2056,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2082,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2104,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2141,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2223,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2247,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2260,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2271,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2291,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2397,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2445,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (2446,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2504,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2519,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2524,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (2542,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (2549,35): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2589,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2597,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2609,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2610,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2663,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2701,35): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2733,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2741,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2750,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2762,35): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2821,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2827,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2833,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2850,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2872,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (2880,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2884,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2895,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (2915,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (2923,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (2959,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (2974,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (2978,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (3091,39): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (3123,21): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (3164,32): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (3191,21): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (3263,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (3310,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (3345,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error' (3623,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success' (4047,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (4053,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (4058,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (4071,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-opacity-on-base-50' (4082,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (4088,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (4574,16): run-time error CSS1030: Expected identifier, found '.11' (4575): run-time error CSS1002: Unterminated string: 't need a breakpoint of their own. */ (4574,54): run-time error CSS1031: Expected selector, found ''t need a breakpoint of their own. */ ' (4574,54): run-time error CSS1025: Expected comma or open brace, found ''t need a breakpoint of their own. */ ' (4600,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4601,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4602,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4603,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4604,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4607,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4608,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4609,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4610,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4613,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4615,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4616,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4619,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4620,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4621,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4622,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4623,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4691,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4692,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4693,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4694,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4695,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4696,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4697,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4699,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4700,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-text' (4701,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-card' (4708,22): run-time error CSS1039: Token not allowed after unary operator: '-cs-card' (4709,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (4738,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (4739,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-text' (4744,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (4745,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-text' (4750,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (4756,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-primary' (4757,24): run-time error CSS1039: Token not allowed after unary operator: '-cs-primary' (4767,22): run-time error CSS1039: Token not allowed after unary operator: '-cs-card' (4768,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border-alt' (4782,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-primary' (4797,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (4802,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-primary' (4803,22): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (4816,32): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (4832,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (4954,38): run-time error CSS1030: Expected identifier, found '.' (4954,51): run-time error CSS1031: Expected selector, found ')' (4954,51): run-time error CSS1025: Expected comma or open brace, found ')' (4973,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (4995,59): run-time error CSS1030: Expected identifier, found '.' (4995,76): run-time error CSS1031: Expected selector, found ')' (4995,76): run-time error CSS1025: Expected comma or open brace, found ')' (5001,22): run-time error CSS1039: Token not allowed after unary operator: '-cs-card' (5002,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border-alt' (5041,22): run-time error CSS1039: Token not allowed after unary operator: '-cs-card' (5042,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border-alt' (5051,35): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (5059,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-accent' (5064,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (5069,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-accent' (5095,32): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (5111,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (5130,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (5176,35): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (5187,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (5196,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-text' (5212,32): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (5485,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-app-surface' (5487,36): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (5488,37): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (5593,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-app-surface' (5594,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (5617,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base-subtle' (5624,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (5632,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-subtle' (5643,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-base' (5644,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (5645,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (5650,21): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-base' (5701,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (5808,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (5828,66): run-time error CSS1030: Expected identifier, found '.' (5828,73): run-time error CSS1031: Expected selector, found ')' (5828,73): run-time error CSS1025: Expected comma or open brace, found ')' (5835,66): run-time error CSS1030: Expected identifier, found '.' (5835,73): run-time error CSS1031: Expected selector, found ')' (5835,73): run-time error CSS1025: Expected comma or open brace, found ')' (6016,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error' (6017,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-error' (6722,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6785,35): run-time error CSS1039: Token not allowed after unary operator: '-cs-border' (6790,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-primary' (6811,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (6821,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (6862,22): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-subtle' (6863,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-on-subtle' (6864,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-success-emphasis' (6880,28): run-time error CSS1039: Token not allowed after unary operator: '-cs-border-alt' (6882,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-text' (6892,17): run-time error CSS1039: Token not allowed after unary operator: '-cs-subtle-text' (7036,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (7037,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7038,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7045,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-primary' (7046,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-hover' (7047,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary-hover' (7051,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7052,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-base' (7053,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (7060,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7062,24): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-border' (7098,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7102,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7107,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7275,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (7276,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7280,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface-alt' (7281,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (7295,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-sm' (7298,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7302,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7303,28): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-surface' (7313,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7318,25): run-time error CSS1039: Token not allowed after unary operator: '-kendo-border-radius-md' (7359,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7364,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7369,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-primary' (7635,17): run-time error CSS1039: Token not allowed after unary operator: '-kendo-color-on-app-surface' (7705,40): run-time error CSS1030: Expected identifier, found '.' (7705,63): run-time error CSS1031: Expected selector, found ')' (7705,63): run-time error CSS1025: Expected comma or open brace, found ')' (7804,29): run-time error CSS1030: Expected identifier, found '.' (7804,40): run-time error CSS1031: Expected selector, found ')' (7804,40): run-time error CSS1025: Expected comma or open brace, found ')' */ /*************************************************************************************************************************************************** Kendo UI + Bootstrap 5 Typography Integration Notes Context: This application was migrated from Bootstrap 3 to Bootstrap 5.3 while continuing to use Kendo UI for jQuery (2024.x) and the Kendo Bootstrap theme. Bootstrap 5 and modern Kendo deliberately default to larger, accessibility‑first typography (16px / 1rem). However, this application requires a denser, legacy (Bootstrap‑3‑style) UI for data‑heavy enterprise screens (grids, toolbars, forms). The CSS in master.css contains intentional typography overrides to reconcile these differences. Bootstrap 5 default font size is 16px (1rem) with line-height 1.5 This is by design and is part of Bootstrap’s Reboot layer. [w3schools.com] Kendo Bootstrap theme (v11.3+) is based on Bootstrap 5 typography metrics and no longer depends on Bootstrap CSS directly. [telerik.com] Kendo components explicitly size certain internals (buttons, inputs, grid headers) using classes like: k-button-md k-input-md k-input-inner Because of this, generic rules like .k-widget { font-size } are not sufficient. We set Bootstrap’s base font size to 14px (0.875rem) to match legacy density: Note: If You Need Different Sizes Going Forward, Kendo supports explicit sizing per component: $("#myButton").kendoButton({ size: "small" }); $("#myDatePicker").kendoDatePicker({ size: "small" }); Summary: Bootstrap 5 + Kendo UI are working as designed This app intentionally enforces dense enterprise typography CSS overrides are localized, documented, and upgrade‑safe Any future UI work should respect this normalization layer If UI sizing looks “too big,” do not fight Bootstrap globally — check for: k-button-md, k-input-md, or k-input-inner. */ /* Prevent legacy CSS from overriding Bootstrap 5 base */ body { font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); } /* Bootstrap 5 baseline normalization */ :root { --bs-body-font-size: 0.875rem; /* 14px */ --bs-body-line-height: 1.42857143; } /* ===================================================================== Bridge Kendo spacing to Bootstrap spacing ===================================================================== */ :root { --kendo-spacing-4: var(--bs-gutter-y, 1rem); } /* The Kendo theme is pinned to v13.1.1 on the CDN (_Layout.cshtml), one major version behind the vendored kendo.all.min.js (2024.3.806) bundled locally — v13.1.1 ships --kendo-color-subtle as #565e64, while the Figma library token (and the locally vendored 2024.3.806 theme) use #596169. */ :root { --kendo-color-subtle: #596169; } /* === KENDO + BOOTSTRAP 5 TYPOGRAPHY BRIDGE === */ /* Base Kendo font normalization */ .k-widget, .k-input, .k-textbox, .k-dropdownlist, .k-combobox, .k-picker, .k-multiselect, .k-list, .k-list-item, .k-button { font-size: 0.875rem; /* 14px */ line-height: 1.42857143; } /* Grid headers and header buttons */ .k-grid-header, .k-grid-header th, .k-grid-header .k-link, .k-grid-header .k-button, .k-grid-header .k-icon { font-size: 0.875rem; line-height: 1.42857143; } /* Grid body cells */ .k-grid td { font-size: 0.875rem; line-height: 1.42857143; } /* Dropdown popup items */ .k-list-content, .k-list-item { font-size: 0.875rem; } /* Normalize Kendo Grid typography to classic density */ .k-grid, .k-grid td, .k-grid th, .k-widget { font-size: 0.875rem; line-height: 1.42857143; } /* Grid header buttons (filter, sort, command) */ .k-grid-header .k-button, .k-grid-header .k-button .k-icon, .k-grid-header .k-link { font-size: 0.875rem; line-height: 1.42857143; } /* Grid pager buttons */ .k-grid-pager .k-button, .k-grid-pager .k-icon { font-size: 0.875rem; line-height: 1.42857143; } /* Kendo input displayed value (Dropdowns, DatePicker, ComboBox, etc.) */ .k-input-inner { font-size: 0.875rem; line-height: 1.42857143; } /* Calendar popup text */ .k-calendar, .k-calendar th, .k-calendar td, .k-calendar .k-link { font-size: 0.875rem; } /* === KENDO BUTTON SIZE NORMALIZATION (Bootstrap 5 migration) === */ /* Grid toolbar & header buttons */ .k-grid-header .k-button-md, .k-grid-toolbar .k-button-md { font-size: 0.875rem; line-height: 1.42857143; } /* Ensure icons scale with text */ .k-grid-header .k-button-md .k-icon, .k-grid-toolbar .k-button-md .k-icon { font-size: inherit; } /* Kendo input size normalization */ .k-input-md .k-input-inner { font-size: 0.875rem; line-height: 1.42857143; } /* === KENDO DATEPICKER / CALENDAR INPUT ALIGNMENT FIX === */ /* Normalize height for md inputs after font-size override */ .k-datepicker.k-input-md, .k-dateinput.k-input-md { height: 38px; } /* Input text vertical alignment */ .k-input-md .k-input-inner { padding-block: 6px; /* top/bottom */ } /* Calendar icon button alignment */ /*.k-input-md .k-input-button { padding: 0 8px; display: flex; align-items: center; justify-content: center; }*/ /* SVG icon size consistency */ .k-input-md .k-input-button .k-icon { font-size: 1rem; } /* === KENDO DATEPICKER ICON SPACING FIX (k-input-md) === */ /* Ensure wrapper behaves consistently */ .k-datepicker.k-input, .k-dateinput.k-input { display: inline-flex; align-items: stretch; } /*Control overall height for md inputs (dense UI)*/ .k-datepicker.k-input-md, .k-dateinput.k-input-md { height: 38px; } /*Input: remove extra right padding and center text vertically */ /*.k-datepicker.k-input-md > .k-input-inner, .k-dateinput.k-input-md > .k-input-inner { flex: 1 1 auto; height: 100%; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 8px; key: prevents "reserved space" look min-width: 0; }*/ /*Button: make it a consistent square and center the SVG */ ./*k-datepicker.k-input-md > .k-input-button, .k-dateinput.k-input-md > .k-input-button { flex: 0 0 38px; width: 38px; height: 100%; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; }*/ /*Remove any icon margin that can offset the SVG */ .k-datepicker.k-input-md .k-button-icon, .k-dateinput.k-input-md .k-button-icon { margin: 0; } /*Keep rounding clean: icon button shouldn’t round on the left */ .k-datepicker.k-rounded-md > .k-input-button, .k-dateinput.k-rounded-md > .k-input-button { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* ===================================================================== KENDO INPUT SIZE NORMALIZATION (Bootstrap 5 dense UI) Fixes DatePicker / Calendar icon spacing correctly ===================================================================== */ /*.k-input-md { --kendo-input-height: 38px;*/ /* matches BS3-ish input height */ /*--kendo-input-padding-y: 0.375rem;*/ /* vertical text centering */ /*--kendo-input-padding-x: 0.75rem;*/ /* horizontal padding */ /*--kendo-input-button-width: 38px;*/ /* calendar icon button width */ /*}*/ /* Ensure SVG icons scale cleanly */ .k-input-md .k-button-icon { font-size: 1rem; } .breadcrumb { padding: 8px 15px; margin-bottom: 8px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } /* ===================================================================== KENDO PRIMARY BUTTON TEXT COLOR FIX Ensures primary buttons use white foreground text ===================================================================== */ /* Primary button – default state */ .k-button.k-button-solid-primary { color: var(--kendo-color-on-primary, #ffffff); } /* Primary button – interactive states */ .k-button.k-button-solid-primary:hover, .k-button.k-button-solid-primary:active, .k-button.k-button-solid-primary.k-state-active { color: var(--kendo-color-on-primary, #ffffff); } /* Disabled state – applies to all Kendo solid buttons */ .k-button:disabled, .k-button.k-state-disabled { opacity: 0.45; cursor: not-allowed; } /* ===================================================================== KENDO PRIMARY BUTTON SIZE FIX (restore legacy 13px) ===================================================================== */ .k-button.k-button-solid-primary { font-size: 13px; } .k-button.k-button-solid-primary:hover, .k-button.k-button-solid-primary:active, .k-button.k-button-solid-primary.k-state-active { font-size: 13px; } /* ============================================================ Crew Collections module — Figma-aligned button overrides Scope: any page inside the Crew Collections module. Apply by adding class `crew-collections` to the page root. Affects Kendo primary (solid) and cancel (outline + error) buttons so they match the Brenock Design System (Figma). ============================================================ */ /* Primary action — Validate, Replace File, Upload N valid records */ .crew-collections .k-button.k-button-solid-primary { color: var(--kendo-color-on-primary, #ffffff); background-color: var(--kendo-color-primary, #0074e4) !important; border-color: var(--kendo-color-primary, #0074e4) !important; font-size: 14px; line-height: 1.42; } .crew-collections .k-button.k-button-solid-primary:hover, .crew-collections .k-button.k-button-solid-primary.k-hover, .crew-collections .k-button.k-button-solid-primary:focus, .crew-collections .k-button.k-button-solid-primary.k-focus { color: var(--kendo-color-on-primary, #ffffff); background-color: var(--kendo-color-primary-hover, #005acb) !important; border-color: var(--kendo-color-primary-hover, #005acb) !important; } .crew-collections .k-button.k-button-solid-primary:active, .crew-collections .k-button.k-button-solid-primary.k-active, .crew-collections .k-button.k-button-solid-primary.k-state-active { color: var(--kendo-color-on-primary, #ffffff); background-color: var(--kendo-color-primary-active, #004ba6) !important; border-color: var(--kendo-color-primary-active, #004ba6) !important; } /* Cancel action — outline + error theme. Hover/focus fills red with white text. */ .crew-collections .k-button.k-button-outline-error { color: var(--kendo-color-error-on-surface, #d63939); background-color: transparent; border-color: var(--kendo-color-error-on-surface, #d63939); font-size: 14px; line-height: 1.42; } .crew-collections .k-button.k-button-outline-error:hover, .crew-collections .k-button.k-button-outline-error.k-hover, .crew-collections .k-button.k-button-outline-error:focus, .crew-collections .k-button.k-button-outline-error.k-focus { color: var(--kendo-color-on-error, #ffffff); background-color: var(--kendo-color-error-on-surface, #d63939); border-color: var(--kendo-color-error-on-surface, #d63939); } /* ============================================================ Tabular Import Wizard — Step 1 (Upload File) ============================================================ */ .import-wizard, .expense-types-page { background-color: #f6f8fb; padding: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--kendo-border-radius-md, 6px); color: var(--kendo-color-on-app-surface, #343a40); } .expense-types-page > .card, .expense-types-page .k-tabstrip-content { padding: 8px !important; } .import-wizard .page-header-card, .import-wizard .wizard-card, .import-wizard .step1-card, .import-wizard .upload-result, .expense-types-page .page-header-card { background-color: var(--kendo-color-surface-alt, #fff); } .import-wizard .page-header-card, .expense-types-page .page-header-card { border-radius: var(--kendo-border-radius-md, 6px); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .import-wizard .wizard-card { border: 1px solid #eaf0f6; border-radius: 8px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .import-wizard .back-link, .import-wizard .instructions-title, .import-wizard .instructions-list, .import-wizard .upload-result-name, .expense-types-page .back-link { font-size: 14px; line-height: 1.42; color: var(--kendo-color-on-app-surface, #343a40); } .import-wizard .back-link, .expense-types-page .back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; text-decoration: none; border-radius: var(--kendo-border-radius-sm, 4px); } .import-wizard .back-link:hover, .expense-types-page .back-link:hover { color: var(--kendo-color-on-app-surface, #212529); background-color: var(--kendo-color-surface, #f6f8fb); text-decoration: none; } .import-wizard .page-title, .expense-types-page .page-title { margin: 0; padding: 0 8px; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--kendo-color-on-app-surface, #212529); } .import-wizard .wizard-step { background-color: var(--kendo-color-secondary-subtle, #f6f8fb); border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: var(--kendo-border-radius-md, 6px); overflow: hidden; } .import-wizard .wizard-step + .wizard-step { margin-top: -1px; } .import-wizard .wizard-step-header { display: flex; align-items: center; gap: 8px; padding: 16px; min-height: 31px; } .import-wizard .wizard-step-indicator { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px; background-color: var(--kendo-color-primary, #0074e4); color: var(--kendo-color-on-primary, #fff); font-size: 14px; line-height: 1.42; opacity: 0.6; flex-shrink: 0; } .import-wizard .wizard-step-title { margin: 0; font-size: 16px; line-height: 1.42; font-weight: 700; color: var(--kendo-color-base-subtle-active, #bdc4cb); } .import-wizard .wizard-step-body { display: flex; flex-direction: column; gap: 16px; height: 0; padding: 0 16px; overflow: hidden; visibility: hidden; pointer-events: none; } .import-wizard .wizard-step--active .wizard-step-body { height: auto; padding: 0 16px 16px; overflow: visible; visibility: visible; pointer-events: auto; } .import-wizard #uploadCollectionsForm { display: flex; flex-direction: column; gap: 16px; margin: 0; width: 100%; } .import-wizard .wizard-step--active .wizard-step-indicator, .import-wizard .wizard-step--complete .wizard-step-indicator { opacity: 1; } .import-wizard .wizard-step--active .wizard-step-title, .import-wizard .wizard-step--complete .wizard-step-title { color: var(--kendo-color-on-app-surface, #343a40); } .import-wizard .wizard-step--complete .wizard-step-indicator { background-color: var(--kendo-color-success, #319064); } .import-wizard .step1-card { border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; } .import-wizard .alert-important { background-color: var(--kendo-color-warning-subtle, #fdf1cc); border-left: 4px solid var(--kendo-color-warning-emphasis, #f9d466); color: var(--kendo-color-warning-on-subtle, #8f6b00); padding: 4px 8px 4px 12px; border-radius: 0; font-size: 14px; line-height: 1.42; } .import-wizard .alert-important-label { font-weight: 700; } .import-wizard .instructions-title { margin: 0 0 0.25rem; font-weight: 700; } .import-wizard .step1-instructions { display: flex; flex-direction: column; gap: 4px; max-width: 449px; } .import-wizard .instructions-list { margin: 0; padding-left: 20px; } .import-wizard .instructions-list li { margin-bottom: 2px; } .import-wizard .step1-actions { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .import-wizard .step1-upload-section { display: flex; flex-direction: column; align-items: flex-start; } .import-wizard .upload-result-container { display: flex; flex-direction: column; width: 600px; max-width: 100%; } .import-wizard .upload-result-container:not(:empty) { margin-top: 16px; } /* Shared button base for step 1 + step 2 — only properties that are truly identical live here. Step 1 adds border-radius; step 2 adds !important on font-size. */ .import-wizard .step1-actions .k-button, .import-wizard .step1-footer .k-button, .step2-replace-btn, .step2-preview-actions .k-button { min-height: 30px; padding: 5px 9px; line-height: 1.42; box-shadow: none; } .import-wizard .step1-actions .k-button, .import-wizard .step1-footer .k-button { border-radius: 4px; font-size: 14px; } .import-wizard .step1-actions .k-button .k-button-icon, .import-wizard .step1-footer .k-button .k-button-icon { font-size: 14px; } .import-wizard .step1-actions .k-button.k-button-solid-base { color: var(--kendo-color-on-base, #343a40); background-color: var(--kendo-color-base, #e5e8ec); border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08)); } .import-wizard .step1-actions .k-button.k-button-solid-base:hover, .import-wizard .step1-actions .k-button.k-button-solid-base:focus { color: var(--kendo-color-on-base, #343a40); background-color: #dbe0e6; border-color: #c9d1da; } .import-wizard .upload-trigger { display: inline-flex; align-items: center; cursor: pointer; margin-bottom: 0; } .import-wizard .upload-trigger.k-disabled, .import-wizard .upload-trigger.k-disabled:hover { opacity: 0.6; color: var(--kendo-color-on-base, #343a40); background-color: var(--kendo-color-base, #e5e8ec); border-color: var(--kendo-color-primary, #0074e4); } .import-wizard .upload-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 599px; max-width: 100%; padding: 8px 8px 11px; border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); } .import-wizard .upload-result-file, .import-wizard .upload-result-info { display: flex; min-width: 0; } .import-wizard .upload-result-file { align-items: center; gap: 8px; flex: 1; } .import-wizard .upload-result-icon { font-size: 1.5rem; color: var(--kendo-color-on-app-surface, #343a40); flex-shrink: 0; } .import-wizard .upload-result-info { flex-direction: column; gap: 6px; } .import-wizard .upload-result-status { font-size: 0.6875rem; line-height: 11px; color: var(--kendo-color-success, #319064); } .import-wizard .upload-result-status--error { color: var(--kendo-color-error-on-surface, #d63939); } .import-wizard .upload-result-remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: 1px solid transparent; color: var(--kendo-color-on-app-surface, #343a40); padding: 7px; border-radius: var(--kendo-border-radius-sm, 4px); cursor: pointer; line-height: 1; flex-shrink: 0; } .import-wizard .upload-result-remove:hover { background-color: var(--kendo-color-surface, #f6f8fb); } .import-wizard .step1-footer { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 16px; margin: 0 -16px -16px; border-radius: 0; } .import-wizard .step-placeholder { color: var(--kendo-color-base-subtle-active, #bdc4cb); font-style: italic; padding: 0 var(--kendo-spacing-4, 1rem) var(--kendo-spacing-4, 1rem); } /* ============================================================ Tabular Import Wizard — Step 2 (Review & Validate) ============================================================ */ .step2-file-icon, .field-validation-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .step2-review .file-bar-info { display: flex; flex-direction: column; min-width: 0; } .stat-card-value { color: #03A9F4; font-size: 21px; font-weight: 700; line-height: 1.2; } .stat-card-valid .stat-card-value { color: #319064; } .stat-card-invalid .stat-card-value { color: #d63939; } .step2-grid-section .k-grid tbody tr.k-no-data > td, .step2-grid-section .k-grid tbody tr.k-grid-norecords > td, .step2-grid-section .k-grid .k-grid-norecords { text-align: center !important; vertical-align: middle !important; padding: 0 !important; border: 0 !important; background-color: transparent !important; } .step2-grid-section .k-grid-norecords-template { display: block; width: 100%; } span.cell-validation-error { display: block; background-color: #f7d7d7; color: #700000; margin: calc(-1 * var(--kendo-spacing-2, 0.5rem)); padding: var(--kendo-spacing-2, 0.5rem); } .preview-value.has-errors { color: #d63939; } .step2-error-box { padding: 4px 8px 4px 12px; margin-bottom: 16px; color: #700000; background: #f7d7d7; border-left: 4px solid #e27474; font-size: 14px; line-height: 1.42; } .step2-error-box strong { display: block; margin-bottom: 2px; color: #700000; font-size: 14px; line-height: 1.42; } .step2-error-box p { margin: 0; color: #700000; font-size: 13px; } /* Step 2 Figma alignment overrides */ .import-wizard #wizardStep2.wizard-step--active, .import-wizard #wizardStep3.wizard-step--active { background-color: var(--kendo-color-surface, #f6f8fb); } .import-wizard #wizardStep2.wizard-step--active .wizard-step-body { padding: 0 16px 16px; } .import-wizard .wizard-step--complete .wizard-step-indicator::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; } .import-wizard .wizard-step--complete .wizard-step-indicator { font-size: 0; } .import-wizard .wizard-step--error .wizard-step-indicator { background-color: var(--kendo-color-error, #d63939); opacity: 1; font-size: 0; } .import-wizard .wizard-step--error .wizard-step-indicator::before { content: "\f071"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; } .step2-review { display: flex; flex-direction: column; gap: 16px; } .step2-review-header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px; gap: 8px; background-color: var(--kendo-color-surface-alt, #fff); border: 0; border-bottom: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 0; } .step2-file-summary { display: flex; align-items: center; min-width: 0; gap: 8px; flex: 1; } .step2-file-icon { width: 24px; height: 24px; border-radius: 0; color: var(--kendo-color-on-app-surface, #343a40); background-color: transparent; font-size: 24px; } .step2-review .file-bar-name { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; font-weight: 400; line-height: 1.42; } .step2-review .file-bar-rows { color: var(--kendo-color-success, #319064); font-size: 11px; line-height: 11px; } .step2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; background: transparent; border: 0; border-radius: 0; } .step2-stats .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 16px; background-color: #fff; border: 0; border-radius: 4px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); text-align: center; } .step2-stats .stat-card:last-child { border-right: 0; } .stat-card-label { color: var(--kendo-color-secondary, #596169); font-size: 16px; line-height: 20px; } .step2-stats .stat-card:not(.stat-card-valid):not(.stat-card-invalid):last-child .stat-card-value { color: var(--kendo-color-on-app-surface, #343a40); } .step2-validation-panel, .step2-upload-preview { padding: 16px; background-color: var(--kendo-color-surface-alt, #fff); border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 0; } .step2-grid-section { padding: 0; margin-top: 16px; background-color: transparent; border: 0; border-radius: 0; } .step2-section-heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .step2-section-heading::after { content: ""; width: 100%; height: 1px; background-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08)); } .step2-section-heading h3 { margin: 0; color: #02557A; font-size: 14px; font-weight: 700; line-height: 1.42; text-transform: uppercase; } .field-validation-list { display: flex; flex-direction: column; gap: 16px; } .field-validation-row { display: flex; align-items: flex-start; gap: 8px; min-height: 20px; padding: 0; border: 0; border-radius: 0; font-size: 14px; line-height: 1.42; } .field-validation-icon { width: 12px; height: 12px; font-size: 12px; margin-top: 4px; } .field-validation-row--valid .field-validation-icon { color: var(--kendo-color-success, #319064); } .field-validation-row--error .field-validation-icon { color: #F5B800; } .field-validation-row .field-name { flex: 0 0 120px; color: var(--kendo-color-on-app-surface, #212529); font-weight: 700; } .field-message-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .field-validation-row .field-message { color: var(--kendo-color-on-app-surface, #343a40); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; white-space: pre-line; } .field-validation-row--error .field-message { color: var(--kendo-color-error, #d63939); } .field-message-wrap.is-expanded .field-message { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .field-message-toggle { align-self: flex-start; background: transparent; border: 0; padding: 0; color: var(--kendo-color-primary, #0074E4); font-size: 12px; font-weight: 600; cursor: pointer; } .field-message-toggle:hover, .field-message-toggle:focus { text-decoration: underline; } .step2-grid-section .k-grid { border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 0; } .step2-grid-section .k-grid-header th { background-color: #f3f6fa; } .step2-grid-section .k-grid-header th, .step2-grid-section .k-grid-header .k-link, .step2-grid-section .k-grid-header .k-cell-inner { font-size: 14px; line-height: 1.42; font-weight: 700; } .step2-grid-section .k-grid, .step2-grid-section .k-grid td, .step2-grid-section .k-grid .k-table-td, .step2-grid-section .k-grid .k-pager, .step2-grid-section .k-grid .k-pager-info, .step2-grid-section .k-grid .k-pager-sizes, .step2-grid-section .k-grid .k-pager-sizes .k-dropdownlist, .step2-grid-section .k-grid .k-pager-numbers, .step2-grid-section .k-grid .k-pager-numbers .k-link, .step2-grid-section .k-grid .k-pager-numbers .k-selected { font-size: 14px; line-height: 1.42; } .step2-grid-section .crew-grid-empty-heading, .step2-grid-section .crew-grid-empty-body { font-size: 14px; line-height: 1.42; } .upload-preview-fields { display: grid; grid-template-columns: 250px repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; padding: 10px; background-color: var(--kendo-color-surface, #f6f8fb); border-radius: 6px; } .upload-preview-field { display: flex; flex-direction: column; min-width: 0; gap: 4px; padding: 0; background-color: transparent; border: 0; border-radius: 0; } .upload-preview-field .preview-label { color: var(--kendo-color-secondary, #596169); font-size: 10px; font-weight: 400; line-height: 1; } .upload-preview-field .preview-value { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; font-weight: 400; line-height: 1.42; } .step2-preview-actions { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 0 -16px -16px; padding: 8px 16px; background-color: var(--kendo-color-surface, #f8f9fa); border-top: 0; } .step2-replace-btn .k-button-text, .step2-preview-actions .k-button .k-button-text { font-size: 14px; line-height: 1.42; } .step2-replace-btn .k-button-icon, .step2-preview-actions .k-button .k-button-icon { font-size: 16px; line-height: 1; } @media (max-width: 992px) { .upload-preview-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .upload-preview-field--file { grid-column: 1 / -1; } } @media (max-width: 768px) { .step2-review-header, .step2-file-summary, .step2-preview-actions, .import-wizard .step1-actions, .import-wizard .step1-footer { align-items: stretch; flex-direction: column; } .import-wizard .step1-upload-section { align-items: stretch; } .import-wizard .step1-actions { flex-wrap: nowrap; width: 100%; } .import-wizard .step1-actions > .k-button, .import-wizard .step1-actions > .upload-trigger, .import-wizard .step1-footer > .k-button { width: 100%; justify-content: center; } .step2-stats, .upload-preview-fields { grid-template-columns: 1fr; } .step2-stats .stat-card { border-bottom: 0; } .field-validation-row { align-items: flex-start; flex-wrap: wrap; } .field-validation-row .field-name { flex: 1 1 calc(100% - 20px); } .field-validation-row .field-message-wrap { flex: 1 1 100%; padding-left: 20px; } } /* ===================================================================== Hambuger Bootstrap Menu with support for child menus - Right arrow - Bootstrap submenu behavior ===================================================================== */ .dropdown-submenu { position: relative; } /* hidden original submenu inside the dropdown */ .dropdown-submenu > .submenu { display: none; } /* floating submenu appended to body */ .floating-submenu { position: fixed; min-width: 240px; background: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); z-index: 3000; padding: 0; margin: 0; list-style: none; } .floating-submenu .dropdown-item { display: block; width: 100%; padding: 0.5rem 1rem; color: #212529; text-decoration: none; background-color: transparent; white-space: nowrap; } /* hover effect SAME as parent */ .floating-submenu .dropdown-item:hover { background-color: #e9ecef; /* Bootstrap default hover */ color: #212529; } /* optional: match rounded look */ .floating-submenu { padding-top: 0.25rem; padding-bottom: 0.25rem; } .floating-submenu .dropdown-item:hover, .floating-submenu .dropdown-item:focus { background-color: #e9ecef; color: #212529; } /* Mobile drawer: inline accordion submenu */ .hb-drawer-list .dropdown-item i { width: 20px; text-align: center; margin-right: 8px; font-size: 16px; color: var(--kendo-color-on-app-surface, #343a40); } .hb-drawer-list.dropdown-submenu > .submenu { display: none; list-style: none; padding: 0; margin: 0; } .hb-drawer-list.dropdown-submenu.open > .submenu { display: block; } .hb-drawer-list.dropdown-submenu > .submenu .dropdown-item { padding-left: 40px; /* indent children under their parent */ } .hb-drawer-list.dropdown-submenu > a .fa-angle-right { transition: transform .15s ease; transform: rotate(90deg); } .hb-drawer-list.dropdown-submenu.open > a .fa-angle-right { transform: rotate(270deg); } /* Section dividers (top-level only) */ .dropdown-menu[aria-labelledby="navbarDropdownMenu"] .hb-drawer-list { border-bottom: 1px solid #dee2e6; } .dropdown-menu[aria-labelledby="navbarDropdownMenu"] .hb-drawer-list:last-child { border-bottom: none; } .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active { background-color: #e9ecef; /* ✅ same gray as hover */ color: #212529; } .dropdown-menu .dropdown-item:focus { background-color: #e9ecef; color: #212529; outline: none; } /* Top-nav header menu dropdowns: gap below the menu bar so the panel doesn't sit flush on the bar. Scoped to the left menu wrapper only — the user dropdown and hamburger drawer are positioned separately. */ .header-bar-inner-wrapper .dropdown-menu { margin-top: 0.5rem; } .header-bar .dropdown-menu .dropdown-item { font-size: 14px; } /* ===================================================================== STATUS BADGES — soft pastel pills with matching foreground + outline. Reusable across views rendering an Expense / Collection status badge. Use alongside Bootstrap 5 .badge: Pending ===================================================================== */ .badge-status-draft, .badge-status-archived, .badge-status-active, .badge-status-submitted, .badge-status-pending, .badge-status-disputeapproval, .badge-status-disputepending, .badge-status-onhold, .badge-status-approved, .badge-status-disputeapproved, .badge-status-paid, .badge-status-rejected, .badge-status-active, .badge-status-archived, .badge-status-disputeapproval, .badge-status-disputeapproved, .badge-status-disputepending, .badge-status-base, .badge-status-warning, .badge-status-onhold { padding: 0.25em 0.75em; font-weight: 400; border: 1px solid transparent; border-radius: 9999px; font-size: 0.875rem; } /* Bg = {semantic}-subtle; Text = {semantic}-on-subtle; Border = {semantic}-emphasis. Hex fallbacks read VERBATIM from Figma 1233:58916 (Reimbursements Grid-Expenses badges). Submitted = INFO (NOT tertiary). */ .badge-status-draft, .badge-status-base, .badge-status-archived { background-color: var(--kendo-color-base-subtle, #dee2e6); color: var(--kendo-color-base-on-subtle, #343a40); border-color: var(--kendo-color-base, #e5e8ec); } .badge-status-active, .badge-status-escalated, .badge-status-submitted { background-color: var(--kendo-color-info-subtle, #d8f1fd); color: var(--kendo-color-info-on-subtle, #026999); border-color: var(--kendo-color-info-emphasis, #61c9f9); } .badge-status-pending, .badge-status-disputeapproval, .badge-status-disputepending, .badge-status-warning, .badge-status-onhold { background-color: var(--kendo-color-warning-subtle, #fdf1cc); color: var(--kendo-color-warning-on-subtle, #8f6b00); border-color: var(--kendo-color-warning-emphasis, #f9d466); } .badge-status-approved, .badge-status-disputeapproved, .badge-status-paid { background-color: var(--kendo-color-success-subtle, #d1e7dd); color: var(--kendo-color-success-on-subtle, #0f5132); border-color: var(--kendo-color-success-emphasis, #75b798); } .badge-status-rejected { background-color: var(--kendo-color-error-subtle, #f7d7d7); color: var(--kendo-color-error-on-subtle, #700000); border-color: var(--kendo-color-error-emphasis, #e27474); } .badge-status-active { background-color: var(--kendo-color-info-subtle, #d8f1fd); color: var(--kendo-color-info-on-subtle, #026999); border-color: var(--kendo-color-info-emphasis, #61c9f9); } .badge-status-archived { background-color: var(--kendo-color-base-subtle, #dee2e6); color: var(--kendo-color-base-on-subtle, #343a40); border-color: var(--kendo-color-base, #e5e8ec); } .badge-status-disputeapproved { background-color: var(--kendo-color-success-subtle, #d1e7dd); color: var(--kendo-color-success-on-subtle, #0f5132); border-color: var(--kendo-color-success-emphasis, #75b798); } .badge-status-disputeapproval, .badge-status-disputepending, .badge-status-onhold { background-color: var(--kendo-color-warning-subtle, #fdf1cc); color: var(--kendo-color-warning-on-subtle, #8f6b00); border-color: var(--kendo-color-warning-emphasis, #f9d466); } /* ===================================================================== CREW DASHBOARD — scoped styles for the new crew landing page. Kept inside master.css per Niurka's convention (common shared CSS). All rules are .crew-dashboard scoped — no global .card / body override. ===================================================================== */ .crew-dashboard { background-color: #F8F9FA; min-height: calc(100vh - 60px); padding-top: 1rem; padding-bottom: 2rem; } .crew-dashboard .card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); } .crew-dashboard .card-header { background-color: #fff; border-bottom: 0; padding: 1rem 1.25rem; } .crew-dashboard .card-header h2 { font-weight: 700; font-size: 21px; color: var(--kendo-color-on-app-surface, #343a40); } /* KPI cards — Figma-spec'd: fixed-ish 290px width, 16px padding, 42px icon, Kendo color tokens. */ .crew-dashboard .crew-kpi-card { width: 290px; flex-shrink: 0; border: 0; border-radius: 4px; box-shadow: 0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1); } /* Clickable KPI cards (reimbursement only — they carry role="button"); Collections cards are static. */ .crew-dashboard .crew-kpi-card[role="button"] { cursor: pointer; transition: box-shadow 0.15s ease, background-color 0.15s ease; } .crew-dashboard .crew-kpi-card[role="button"]:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .crew-dashboard .crew-kpi-card[role="button"]:focus-visible { outline: 2px solid #0074e4; outline-offset: 2px; } .crew-dashboard .crew-kpi-card.selected { background-color: #e5f1fc; box-shadow: inset 0 0 0 2px #0074e4; } .crew-dashboard .crew-kpi-card .card-body { display: flex; align-items: center; gap: 16px; padding: 16px; } .crew-kpi-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; } /* KPI icon palette per Figma 561:78762 (Balance), 561:78772 (Pending), 561:78781 (Approved). Hex values forced verbatim from Figma response — bypassing CSS variable lookup for ALL parts (bg + fg). Kendo Bootstrap theme 13.x defines --kendo-color-tertiary-* as PURPLE, not the cyan #d8f1fd Figma's designer intended (verified by user 2026-05-12). Same risk applies to --kendo-color-success (theme may differ from Figma's #319064). Icons are visual identity primary — force hex to guarantee Figma match regardless of theme. */ .crew-kpi-icon-balance { background-color: #d1e7dd; color: #319064; } .crew-kpi-icon-pending { background-color: #dee2e6; color: #343a40; } .crew-kpi-icon-approved { background-color: #d1e7dd; color: #319064; } .crew-kpi-icon-owed { background-color: #f7d7d7; color: #d63939; } .crew-kpi-icon-dispute { background-color: #fdf1cc; color: #f5b800; } /* Reimbursement bucket icons — hex forced verbatim from Figma 3659:82490 (crew cards). */ .crew-kpi-icon-approval { background-color: #d8f1fd; color: #03a9f4; } .crew-kpi-icon-paid { background-color: #e5f1fc; color: #80b9f2; } .crew-kpi-icon-reject { background-color: #f7d7d7; color: #d63939; } .crew-pager-hidden .k-grid-pager { display: none !important; } .crew-kpi-text { min-width: 0; } .crew-kpi-label { font-size: 14px; color: var(--kendo-color-subtle, #596169); font-weight: 400; line-height: 20px; margin-bottom: 2px; } .crew-kpi-value { font-size: 21px; font-weight: 700; color: var(--kendo-color-on-app-surface, #343a40); line-height: 1.33; margin-bottom: 2px; } .crew-kpi-sublabel { font-size: 10px; color: var(--kendo-color-secondary, #596169); line-height: 1; } .crew-kpi-period { font-size: 10px; color: var(--kendo-color-secondary, #596169); line-height: 1; margin-top: 3px; white-space: nowrap; } .crew-kpi-period i { margin-right: 3px; } /* Filter bar — labels on top of fields per Figma; Apply/Reset bottom-align with field row. */ .crew-filter-bar { display: flex; align-items: flex-end; gap: 24px; flex-wrap: nowrap; } .crew-filter-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; flex-basis: 0; } .crew-filter-date-inputs { display: flex; align-items: center; gap: 8px; } /* MultiSelect — wrap tags inside instead of expanding sideways. */ .crew-filter-group .k-multiselect { width: 100%; min-width: 0; max-width: 100%; } .crew-filter-group .k-multiselect .k-input-values { flex-wrap: wrap; max-height: 90px; overflow-y: auto; } /* DropDownList — lock width to slot regardless of selected option text length. */ .crew-filter-group .k-dropdownlist, .crew-filter-group .k-dropdown { width: 100%; min-width: 0; max-width: 100%; } .crew-filter-label { font-size: 14px; font-weight: 700; color: #020202; margin: 0; white-space: nowrap; } .crew-filter-dash { color: var(--kendo-color-on-app-surface, #343a40); padding: 0 2px; } .crew-filter-checkbox { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; font-weight: 400; color: #020202; cursor: pointer; white-space: nowrap; } .crew-filter-checkbox input[type="checkbox"] { cursor: pointer; } .crew-filter-date-group { flex: 0 0 auto; } /* Filter Apply button — force vertical center (Bootstrap .btn padding + Kendo theme line-height conflict). */ .crew-dashboard .crew-filter-btn { height: 30px; padding: 0 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .crew-filter-reset { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background-color: var(--kendo-color-surface, #f6f8fb); border: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); color: var(--kendo-color-on-app-surface, #343a40); line-height: 1; } .crew-filter-reset:hover { background-color: #e9ecef; } .crew-filter-reset i { display: block; } /* FA5 Free has no filter-slash glyph; overlay a diagonal stroke on fa-filter. */ .crew-filter-slash { position: relative; display: inline-block; line-height: 1; } .crew-filter-slash::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); transform-origin: center; pointer-events: none; } /* Grid — bold table headers per Figma (Noto Sans Bold 14px). */ .crew-dashboard .k-grid, .crew-dashboard .k-grid-header, .crew-dashboard .k-grid-header-wrap, .crew-dashboard .k-grid-content, .crew-dashboard .k-grid td, .crew-dashboard .k-grid th, .crew-dashboard .k-table-td, .crew-dashboard .k-table-th { border-color: transparent; } .crew-dashboard .k-grid td, .crew-dashboard .k-grid th, .crew-dashboard .k-table-td, .crew-dashboard .k-table-th { border-left-width: 0; border-right-width: 0; font-size: 14px; } .crew-dashboard .k-grid-header th, .crew-dashboard .k-grid-header .k-link, .crew-dashboard .k-grid-header .k-cell-inner { font-weight: 700; color: var(--kendo-color-on-app-surface, #212529); } /* Expense ID link in grid — primary blue per Figma. Hex direct: Kendo theme --kendo-color-primary may differ from Figma's designer #0074e4. Hyperlink color is visual identity primary. */ .crew-dashboard .k-grid td a.crew-expense-link { color: #0074e4; text-decoration: none; } .crew-dashboard .k-grid td a.crew-expense-link:hover { text-decoration: underline; } /* Grid NoRecords — center empty state across all columns regardless of Kendo class variant (.k-grid-norecords / .k-no-data / both — Kendo Grid jQuery 2024 emits different markup depending on ServerOperation + theme. Target broadly with !important.). */ .crew-dashboard .k-grid tbody tr.k-no-data > td, .crew-dashboard .k-grid tbody tr.k-grid-norecords > td, .crew-dashboard .k-grid .k-grid-norecords { text-align: center !important; vertical-align: middle !important; padding: 0 !important; border: 0 !important; background-color: transparent !important; } .crew-dashboard .k-grid-norecords-template { display: block; width: 100%; } /* Template itself is a flex centering box — guarantees centering no matter what the parent TD/cell does. Used inside NoRecords template HTML. */ .crew-grid-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 200px; padding: 2rem 1rem; color: var(--kendo-color-secondary, #596169); } .crew-grid-empty-heading { font-weight: 700; font-size: 14px; color: var(--kendo-color-on-app-surface, #343a40); margin-bottom: 4px; } .crew-grid-empty-body { font-size: 13px; color: var(--kendo-color-secondary, #596169); } /* ===================================================================== CREW COLLECTIONS — Admin/Reviewer dashboard. Scoped to .crew-collections-admin; reuses global .crew-kpi-*, .crew-filter-*, .crew-toggle, .crew-grid-empty recipes from the crew dashboard. ===================================================================== */ .crew-collections-admin .page-title, .crew-dashboard .page-title { font-size: 24px; font-weight: 700; color: #C1C0C0; } .crew-collections-admin-section { border: none; } .crew-collections-admin-section .card-header { border-bottom: 0; } .crew-collections-admin-section .section-title { font-size: 21px; font-weight: 700; margin: 0; color: #212529; } .crew-collections-admin-section .section-toggle-caret { width: 16px; text-align: center; color: var(--kendo-color-on-app-surface, #343a40); } .crew-collections-admin .crew-kpi-card { min-width: 290px; border: 0; border-radius: 4px; box-shadow: 0 1px 1.5px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1); } .crew-collections-admin .crew-kpi-card .card-body { display: flex; align-items: center; gap: 16px; padding: 16px; } /* New KPI icon hues per design-tokens.md §1.1 — forced hex (Kendo theme tokens diverge from Figma). Outstanding = error red, In Dispute = warning yellow, Collected = success green. */ .crew-collections-admin .crew-kpi-icon-outstanding { background-color: #f7d7d7; color: #d63939; } .crew-collections-admin .crew-kpi-icon-dispute { background-color: #fdf1cc; color: #f5b800; } .crew-collections-admin .crew-kpi-icon-collected { background-color: #d1e7dd; color: #319064; } .crew-collections-admin .crew-kpi-value-success { color: #319064; } .crew-collections-admin .crew-kpi-sublabel { margin-top: 4px; } .crew-collections-admin .crew-kpi-escalated { font-size: 10px; color: #e65100; line-height: 1; margin-top: 4px; } .crew-collections-admin .crew-kpi-escalated i { margin-right: 4px; } .crew-collections-admin .crew-kpi-card { position: relative; } .crew-collections-admin .crew-kpi-card.crew-kpi-loading .card-body { opacity: 0.4; pointer-events: none; } .crew-collections-admin .crew-kpi-card.crew-kpi-loading::after { content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, 0.12); border-top-color: #0074e4; border-radius: 50%; animation: crew-kpi-spin 0.7s linear infinite; } @keyframes crew-kpi-spin { to { transform: rotate(360deg); } } .crew-collections-admin .crew-filter-btn { height: 30px; padding: 0 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } /* Collections Admin filter row — vertical labels, equal flex distribution per Figma 865:84137 */ .crew-collections-admin .crew-filter-bar { align-items: flex-end; gap: 8px; width: 100%; flex-wrap: nowrap; /* Room for the absolutely-positioned "Needs Review" checkbox below the Status dropdown, so it does not push the Status group taller and misalign the other filters. */ padding-bottom: 26px; } .crew-collections-admin .crew-filter-group { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; position: relative; } .crew-collections-admin .crew-filter-checkbox { position: absolute; top: 100%; left: 0; margin: 4px 0 0; } .crew-collections-admin .crew-filter-group .crew-filter-label { margin-bottom: 0; padding: 0; } .crew-collections-admin .crew-filter-group .k-multiselect, .crew-collections-admin .crew-filter-group .k-datepicker, .crew-collections-admin .crew-filter-group .form-control { width: 100% !important; max-width: none; } /* Normalize all input heights to 30px (textbox, datepicker, multiselect) */ .crew-collections-admin .crew-filter-bar .form-control, .crew-collections-admin .crew-filter-bar .k-input, .crew-collections-admin .crew-filter-bar .k-picker { height: 30px; min-height: 30px; } .crew-collections-admin .crew-filter-bar .k-input-inner { height: 28px; padding: 0 8px; } /* Dashboard search box — 30px control height per Figma (sits outside .crew-filter-bar, so the filter-bar height normalization above does not reach it). Component-level so both Admin (.crew-collections-admin) and Crew (.crew-dashboard) get it. */ .crew-dash-search, .crew-dash-search .form-control, .crew-dash-search .input-group-text { height: 30px; min-height: 30px; } .crew-dash-search .form-control, .crew-dash-search .input-group-text { padding-top: 0; padding-bottom: 0; } .crew-dash-search .form-control { font-size: 14px; } /* Noto Sans (variable font, weight axis 100-900) — bundled locally so the dashboard grid renders the Figma font without an external call. Relative url resolves from /Content/theme/ to /Content/fonts/ in both debug (raw file) and release (CssRewriteUrlTransform). */ @font-face { font-family: 'Noto Sans'; src: url(/Content/fonts/NotoSans.ttf) format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Dashboard grid font — Noto Sans first per Figma. Kendo's --kendo-font-family lists system-ui/"Segoe UI" BEFORE "Noto Sans", so Segoe UI wins on Windows. Higher-specificity (.crew-dash-grid.k-grid) override beats the CDN theme regardless of load order. */ .crew-dash-grid.k-grid, .crew-dash-grid .k-grid-header, .crew-dash-grid .k-grid-content, .crew-dash-grid .k-grid td, .crew-dash-grid .k-grid th, .crew-dash-grid .k-table-td, .crew-dash-grid .k-table-th { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; } /* Borderless grid per Figma — transparent borders keep the box model (no layout shift), and drop the vertical cell borders. */ .crew-dash-grid.k-grid, .crew-dash-grid .k-grid-header, .crew-dash-grid .k-grid-header-wrap, .crew-dash-grid .k-grid-content, .crew-dash-grid .k-grid td, .crew-dash-grid .k-grid th, .crew-dash-grid .k-table-td, .crew-dash-grid .k-table-th { border-color: transparent; } .crew-dash-grid .k-grid td, .crew-dash-grid .k-grid th, .crew-dash-grid .k-table-td, .crew-dash-grid .k-table-th { border-left-width: 0; border-right-width: 0; } /* === Dashboard panel typography — Noto Sans + Figma sizes. Component-level (.crew-dash-panel) so Admin and Crew share it. Kendo widgets set their own font, so override them inside the panel (the MultiSelect popup renders at , hence the separate .crew-multiselect-popup rule). === */ .crew-dash-panel, .crew-dash-panel .k-grid, .crew-dash-panel .k-input, .crew-dash-panel .k-picker, .crew-dash-panel .k-button, .crew-dash-panel .k-multiselect, .crew-multiselect-popup { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Page wrapper font — both dashboards. .crew-dash-panel (above) covers the panel's Kendo widgets; the wrapper rule carries Noto Sans to page-level text outside the panel (e.g. the .page-title). */ .crew-dashboard, .crew-collections-admin, .crew-dashboard .k-grid, .crew-dashboard .k-input, .crew-dashboard .k-picker, .crew-dashboard .k-button, .crew-dashboard .k-multiselect, .crew-dashboard .k-grid td, .crew-dashboard .k-grid th, .crew-dashboard .k-table-td, .crew-dashboard .k-table-th { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .crew-dash-panel .crew-kpi-label { font-size: 14px; } /* KPI card title */ .crew-dash-panel .crew-kpi-value { font-size: 21px; } /* KPI figure (h5) */ .crew-dash-panel .crew-kpi-sublabel { font-size: 10px; } /* KPI sub-label */ .crew-dash-panel .crew-filter-label, .crew-dash-panel .crew-filter-bar .k-input, .crew-dash-panel .crew-filter-bar .k-input-inner, .crew-dash-panel .crew-filter-bar .form-control { font-size: 14px; } /* Date range — two pickers side-by-side under a shared "Date" label */ .crew-collections-admin .crew-filter-date-group { flex: 1.4 1 0; } .crew-collections-admin .crew-filter-date-inputs { display: flex; align-items: center; gap: 4px; } .crew-collections-admin .crew-filter-date-inputs .k-datepicker { flex: 1 1 0; min-width: 0; } .crew-collections-admin .crew-datepicker-wrap { position: relative; flex: 1 1 0; min-width: 0; display: flex; } .crew-collections-admin .crew-datepicker-wrap .k-datepicker { flex: 1 1 0; } .crew-dashboard .crew-filter-date-inputs .k-datepicker { width: 140px; flex: 0 0 auto; min-width: 0; } .crew-dashboard .crew-datepicker-wrap { position: relative; display: inline-flex; } .crew-datepicker-clear { display: none; position: absolute; top: 50%; right: 34px; transform: translateY(-50%); background: none; border: none; padding: 0 3px; cursor: pointer; color: #9aa0a6; font-size: 10px; line-height: 1; z-index: 1; } .crew-datepicker-wrap.has-value .crew-datepicker-clear { display: flex; align-items: center; } .crew-datepicker-clear:hover { color: #343a40; } .crew-collections-admin .crew-filter-dash { flex: 0 0 auto; padding: 0 2px; color: var(--kendo-color-on-app-surface, #343a40); } /* Apply + Clear buttons sit at the row's bottom edge, do not flex-grow */ .crew-collections-admin .crew-filter-bar > .crew-filter-btn, .crew-collections-admin .crew-filter-bar > .crew-filter-reset { flex: 0 0 auto; align-self: flex-end; } /* MultiSelect TagMode("single") — single summary chip, vertically centered */ .crew-collections-admin .crew-filter-bar .k-multiselect .k-input-values { flex-wrap: nowrap; max-height: 28px; overflow: hidden; align-items: center; padding: 0 8px; } .crew-collections-admin .crew-filter-bar .k-multiselect .k-chip-list { flex-wrap: nowrap; } .crew-collections-admin .crew-filter-bar .k-multiselect .k-chip { background: transparent; border: none; padding: 0; font-size: 14px; color: var(--kendo-color-on-app-surface, #343a40); } .crew-collections-admin .crew-filter-bar .k-multiselect .k-chip .k-chip-remove-action { display: none; } /* Same single-summary-chip treatment for the crew dashboard filter bar */ .crew-dashboard .crew-filter-bar .k-multiselect .k-input-values { flex-wrap: nowrap; max-height: 28px; overflow: hidden; align-items: center; padding: 0 8px; } .crew-dashboard .crew-filter-bar .k-multiselect .k-chip-list { flex-wrap: nowrap; } .crew-dashboard .crew-filter-bar .k-multiselect .k-chip { background: transparent; border: none; padding: 0; font-size: 14px; color: var(--kendo-color-on-app-surface, #343a40); } .crew-dashboard .crew-filter-bar .k-multiselect .k-chip .k-chip-remove-action { display: none; } /* Normalize all filter input heights to 30px (dropdownlist, datepicker, multiselect) */ .crew-dashboard .crew-filter-bar .form-control, .crew-dashboard .crew-filter-bar .k-input, .crew-dashboard .crew-filter-bar .k-picker { height: 30px; min-height: 30px; } .crew-dashboard .crew-filter-bar .k-input-inner { height: 28px; padding: 0 8px; } /* Checkbox-style dropdown items in multi-select popups (scoped via custom class added in Open event) */ .crew-multiselect-popup .k-list-item { display: flex; align-items: center; gap: 8px; } .crew-multiselect-popup .k-list-item::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(61, 61, 61, 0.5); border-radius: 3px; background-color: #fff; flex-shrink: 0; } .crew-multiselect-popup .k-list-item.k-selected { background-color: transparent; color: var(--kendo-color-on-app-surface, #343a40); } .crew-multiselect-popup .k-list-item.k-selected::before { content: "\2713"; background-color: #0074e4; border-color: #0074e4; color: #fff; text-align: center; line-height: 12px; font-size: 11px; font-weight: 700; } .crew-multiselect-popup .k-list-item.k-hover, .crew-multiselect-popup .k-list-item:hover { background-color: rgba(0, 116, 228, 0.06); } /* "Select All" header row — matches the option rows, sits above the list with a divider */ .crew-multiselect-popup .crew-ms-selectall { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; cursor: pointer; font-weight: 600; border-bottom: 1px solid rgba(61, 61, 61, 0.12); } .crew-multiselect-popup .crew-ms-selectall:hover { background-color: rgba(0, 116, 228, 0.06); } .crew-multiselect-popup .crew-ms-selectall-cb { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: 14px; height: 14px; margin: 0; flex-shrink: 0; border: 1px solid rgba(61, 61, 61, 0.5); border-radius: 3px; background-color: #fff; cursor: pointer; } /* All selected — solid blue box + white check (matches the option rows) */ .crew-multiselect-popup .crew-ms-selectall-cb:checked { background-color: #0074e4; border-color: #0074e4; } .crew-multiselect-popup .crew-ms-selectall-cb:checked::after { content: "\2713"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* Partial selection — outlined box + blue dash */ .crew-multiselect-popup .crew-ms-selectall-cb:indeterminate { background-color: #fff; border-color: #0074e4; } .crew-multiselect-popup .crew-ms-selectall-cb:indeterminate::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 2px; border-radius: 1px; background-color: #0074e4; } .crew-collections-admin .k-grid-header th, .crew-collections-admin .k-grid-header .k-link, .crew-collections-admin .k-grid-header .k-cell-inner { font-weight: 700; color: var(--kendo-color-on-app-surface, #212529); } .crew-collections-admin .k-grid td a.crew-expense-link { color: #0074e4; text-decoration: none; } .crew-collections-admin .k-grid td a.crew-expense-link:hover { text-decoration: underline; } .crew-collections-admin .k-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== CREW COLLECTIONS — Invoice Detail page. Scoped to .crew-collections-detail; no global card/table/button changes. ===================================================================== */ .crew-collections-detail { background-color: #f6f8fb; color: var(--kendo-color-on-app-surface, #343a40); min-height: calc(100vh - 60px); padding: 24px 16px 38px; } .invoice-detail-header { background-color: #fff; border-radius: 6px; padding: 16px 24px; margin-bottom: 24px; } .invoice-detail-back { color: var(--kendo-color-subtle, #596169); display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 1.42; padding: 5px 0; text-decoration: none; } .invoice-detail-back:hover { color: var(--kendo-color-on-app-surface, #343a40); text-decoration: none; } .invoice-detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 6px; } .invoice-detail-title-group { display: flex; align-items: center; gap: 24px; min-width: 0; } .invoice-detail-title-group h1 { color: var(--kendo-color-on-app-surface, #343a40); font-size: 21px; font-weight: 700; line-height: 1.33; margin: 0; } .invoice-detail-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; } .invoice-detail-actions .btn { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 9px; font-size: 14px; line-height: 1.42; } /* Approver "Approve" action uses the Kendo success green (#319064), not Bootstrap's btn-success. */ .invoice-detail-actions .btn-approve-dispute { background-color: #319064; border-color: #319064; color: #fff; } .invoice-detail-actions .btn-approve-dispute:hover, .invoice-detail-actions .btn-approve-dispute:focus { background-color: #2a7d56; border-color: #2a7d56; color: #fff; } /* Shared confirmation modal shell (_ActionModalShell): dispute approve/reject/escalate + archive/unarchive. Cancel is the neutral bordered default button; inputs use the 14px form scale. */ .action-modal .modal-header { border-bottom-color: #e5e8ec; } .action-modal .modal-footer { border-top-color: #e5e8ec; } .action-modal .modal-body, .action-modal .form-select, .action-modal .form-control { font-size: 14px; line-height: 1.42; color: #343a40; } /* Shared "(Optional)" tag next to a form-label — Figma's "_Base Input Label" component (Reason for Hold, Escalate Notes, File a Dispute / Update Dispute Supporting Documentation all reference the same node). */ .form-label-optional { font-size: 12px; font-weight: 400; font-style: italic; line-height: 1.5; color: #343a40; margin-left: 6px; } .action-modal .btn-cancel { background: #e5e8ec; border: 1px solid rgba(0, 0, 0, 0.08); color: #343a40; } .action-modal .btn-cancel:hover, .action-modal .btn-cancel:focus { background: #d7dbe0; color: #343a40; } /* Overflow (…) trigger only: Figma Menu-Dot spec — wider hit area, centered dot, #343a40 border, 4px radius, spacing-1/2 padding, and #343a40 hover/active fill (Bootstrap btn-outline-dark fills #212529). Hex direct, not var(--kendo-color-*): see the token-shadowing note below. */ .invoice-detail-actions #invoiceActionsMenuBtn { min-width: 34px; padding: 4px 8px; justify-content: center; border-color: #343a40; border-radius: 4px; --bs-btn-hover-bg: #343a40; --bs-btn-active-bg: #343a40; } /* Figma #343a40. Hex direct: the loaded Kendo theme defines --kendo-color-on-app-surface as #212529, so var(--kendo-color-on-app-surface, #343a40) never reaches the fallback — it resolves to the same #212529 Bootstrap's --bs-dropdown-link-color already gives. */ .invoice-detail-actions .dropdown-menu { --bs-dropdown-link-color: #343a40; --bs-dropdown-link-hover-color: #343a40; --bs-dropdown-link-active-color: #343a40; } /* Beats the theme-wide .dropdown-menu .dropdown-item:focus/.active #212529 rules. */ .invoice-detail-actions .dropdown-menu .dropdown-item:focus, .invoice-detail-actions .dropdown-menu .dropdown-item:active, .invoice-detail-actions .dropdown-menu .dropdown-item.active { color: #343a40; } .invoice-detail-card { background-color: #fff; border: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); border-radius: 10px; padding: 16px; overflow: hidden; margin-bottom: 24px; } /* On Hold banner (Invoice Information card) and rejected-dispute banner (Dispute Details card). Figma's "Messagebox" component has no border-radius - square corners. */ .invoice-onhold-banner, .invoice-dispute-banner { background: #fdf1cc; border-left: 4px solid #f9d466; color: #8f6b00; font-size: 14px; line-height: 1.42; padding: 8px 12px; border-radius: 0; margin-bottom: 16px; } /* Dispute Details section */ /* .invoice-section-title is shared by every Invoice Detail card (Expense Breakdown, Invoice Information, Movement Context, Dispute Details); scoped here so only this card's title - and its flag icon, via color inheritance - picks up Figma's #343a40 instead of the var-never-reaches-fallback #212529. */ .invoice-dispute-details .invoice-section-title { color: #343a40; } .invoice-dispute-details .dispute-activity-list { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* Expanding past the preview count would stretch the page, so the list scrolls instead. The 480px here is only a no-JS fallback - InvoiceDetail.cshtml's #disputeActivityToggle handler measures the actual 5-entry preview height on click and sets it as an inline max-height (which wins over this), so the card never shrinks below whatever height it was already showing before the click. */ .invoice-dispute-details .dispute-activity-list.dispute-activity-scrollable { max-height: 480px; overflow-y: auto; padding-right: 4px; } .invoice-dispute-details .dispute-entry { background: var(--kendo-color-surface-alt, white); border: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; padding: 12px; } .invoice-dispute-details .dispute-entry-collapsed { display: none; } .invoice-dispute-details .dispute-entry-header { display: flex; align-items: center; gap: 8px; width: 100%; } .invoice-dispute-details .dispute-entry-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 8px; border-radius: 9999px; } /* Dispute Details entry action chips */ .invoice-dispute-details .dispute-chip-onhold { background-color: #fff4d3; color: #b45b00; } .invoice-dispute-details .dispute-chip-escalated { background-color: #d8f1fd; color: #026999; } .invoice-dispute-details .dispute-chip-rejected { background-color: #fbebeb; color: #700000; } .invoice-dispute-details .dispute-chip-approved { background-color: #d1e7dd; color: #0f5132; } .invoice-dispute-details .dispute-entry-author { color: #343a40; font-size: 14px; font-weight: 700; line-height: 1.42; } .invoice-dispute-details .dispute-entry-date { color: var(--kendo-color-subtle, #596169); font-size: 10px; line-height: 1.4; margin-left: auto; white-space: nowrap; } .invoice-dispute-details .dispute-entry-body { display: flex; flex-direction: column; gap: 6px; width: 100%; } .invoice-dispute-details .dispute-entry-field-subtle strong { color: var(--kendo-color-subtle, #596169); } .invoice-dispute-details .dispute-activity-toggle { align-items: center; color: var(--kendo-color-primary, #0d6efd); display: flex; font-size: 14px; font-weight: 700; gap: 8px; justify-content: center; margin: 12px auto 0; padding: 4px 8px; } .invoice-dispute-details .dispute-entry-attachments { display: flex; flex-direction: column; gap: 2px; width: 100%; } .invoice-dispute-details .invoice-file-row { background: var(--kendo-color-surface-alt, white); gap: 8px; min-height: 51px; padding: 8px 8px 11px; } .invoice-dispute-details .invoice-file-row:last-child { border-bottom: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); } .invoice-dispute-details .invoice-file-row > div { gap: 8px; } .invoice-dispute-details .invoice-file-row > div > i { font-size: 14px; color: #596169; } .invoice-dispute-details .invoice-file-size { color: #0074e4; } .invoice-dispute-details .invoice-file-download i { color: #596169; } .invoice-dispute-details .invoice-field strong { color: #343a40; } .invoice-dispute-details .invoice-file-download { border-radius: 4px; line-height: 1; padding: 7px; } .invoice-expense-breakdown { margin-bottom: 24px; } .invoice-section-title { display: flex; align-items: center; gap: 8px; color: var(--kendo-color-on-app-surface, #343a40); font-size: 16px; font-weight: 700; line-height: 1.42; margin: 0; } .invoice-section-separator { background-color: var(--kendo-color-border, rgba(0,0,0,0.08)); height: 1px; margin: 16px 0; width: 100%; } .invoice-detail-table { margin: 0; } .invoice-detail-table th, .invoice-detail-table td { border-color: var(--kendo-color-border, rgba(0,0,0,0.08)); color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; line-height: 1.42; padding: 8px 12px; } .invoice-detail-table td { border: none; } .invoice-detail-table thead th, .invoice-total-row td { font-weight: 700; } .invoice-total-row td { border-bottom: 0; font-size: 16px; } .invoice-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); /* Only a column gap. The gap below this block comes from the inner cards' margin-bottom; a grid margin-bottom here would stack on top of it and make the gap above the next section (Audit Trail) larger than the others. */ column-gap: 24px; margin-bottom: 0; } .invoice-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .invoice-field-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .invoice-field-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .invoice-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .invoice-field span, .invoice-subsection-label { color: var(--kendo-color-subtle, #596169); font-size: 10px; font-weight: 400; line-height: 1; text-transform: uppercase; } .invoice-field strong { color: #1a2232; font-size: 14px; font-weight: 400; line-height: 1.42; overflow-wrap: anywhere; } .invoice-field-full strong { white-space: normal; } .invoice-upload-shell { padding: 8px 0px; } .invoice-upload-shell * { font-size: 14px; } .invoice-file-list { margin-top: 16px; max-height: 500px; overflow-y: auto; } .invoice-file-row:last-child { border-bottom: none; } .invoice-file-row { border-bottom: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); display: flex; align-items: center; justify-content: space-between; min-height: 54px; gap: 16px; padding: 8px 8px 8px 12px; } .invoice-file-row > div { display: flex; align-items: center; gap: 12px; min-width: 0; } .invoice-file-row i { font-size: 24px; } .invoice-file-name { color: #0074e4; font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .invoice-file-size { color: var(--kendo-color-subtle, #596169); font-size: 14px; white-space: nowrap; } .invoice-file-download { background: transparent; border: 0; color: var(--kendo-color-on-app-surface, #343a40); cursor: pointer; } .invoice-file-download:hover { background-color: rgba(0,0,0,0.04); } .invoice-empty-row { color: var(--kendo-color-subtle, #596169); font-size: 14px; padding: 12px 0; } .invoice-upload-shell .k-upload .k-upload-files .k-file { padding: 8px 9px 11px; } .invoice-upload-shell .k-file { background: transparent; border-top: none; border-bottom: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 8px 8px 8px 12px; } .invoice-upload-shell .k-file:last-child { border-bottom: none; } .invoice-comment-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 500px; overflow-y: auto; } .invoice-comment-list button { font-size: 16px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: #E5E8EC; } .invoice-comment-list button:hover { color: #E5E8EC; background-color: #343A40; } .invoice-comment { background-color: #f6f8fb; border-radius: 6px; margin: 0; padding: 12px; } .invoice-comment header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .invoice-comment header div { display: flex; flex-direction: column; gap: 2px; } .invoice-comment strong { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; line-height: 1.42; } .invoice-comment span { color: var(--kendo-color-subtle, #596169); font-size: 14px; line-height: 1.42; } .invoice-comment p { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; line-height: 1.42; margin: 0; } .invoice-add-comment { background-color: #f6f8fb; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 8px; border-radius: 6px; } .invoice-add-comment label { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; font-weight: 700; line-height: 1.42; margin: 0; } .invoice-add-comment textarea { font-size: 14px; resize: vertical; } .invoice-add-comment-textarea { position: relative; } .invoice-add-comment-clear { position: absolute; top: 4px; right: 6px; background: transparent; border: 0; color: var(--kendo-color-subtle, #596169); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; } .invoice-add-comment-clear:hover { color: var(--kendo-color-on-app-surface, #343a40); } .invoice-add-comment small { color: var(--kendo-color-on-app-surface, #343a40); font-size: 12px; font-style: italic; } .invoice-audit-card .k-grid { border-color: transparent; } .invoice-audit-card .k-grid-header th, .invoice-audit-card .k-grid td { border-color: var(--kendo-color-border, rgba(0,0,0,0.08)); font-size: 14px; white-space: pre-line; vertical-align: middle; } .invoice-audit-card .k-grid-header th { font-weight: 700; } /* Payment History */ .payment-history-summary { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .payment-summary-row { align-items: center; color: var(--kendo-color-on-app-surface, #343a40); display: flex; font-size: 14px; font-weight: 700; justify-content: space-between; } .payment-summary-total { color: var(--kendo-color-success, #319064); font-size: 21px; font-weight: 700; line-height: 1.33; } .payment-summary-balance { font-size: 21px; font-weight: 700; line-height: 1.33; } .payment-entry { background: #f7f9fc; border-radius: 8px; display: flex; flex-direction: column; gap: 16px; padding: 12px 16px; } .payment-entry + .payment-entry { margin-top: 16px; } .payment-entry-header { align-items: center; color: #1a2232; display: flex; font-size: 14px; font-weight: 700; justify-content: space-between; line-height: 1.42; } .payment-entry-amount { color: var(--kendo-color-success, #319064); } .payment-entry-fields { align-items: flex-start; display: flex; gap: 32px; } .payment-entry-fields .invoice-field { flex: 1 0 0; min-width: 0; } .invoice-field .payment-status-paid { color: var(--kendo-color-success, #319064); } .payment-entry-attachments .invoice-file-row { background: var(--kendo-color-surface-alt, white); } /* Tablet (Figma 834px): single-column page; field grids keep their columns. */ @media (max-width: 1199px) { .invoice-detail-title-row { align-items: flex-start; flex-direction: column; } .invoice-detail-title-group { flex-wrap: wrap; gap: 8px 12px; } .invoice-detail-actions { justify-content: flex-start; } /* minmax(0, 1fr) — not 1fr (= minmax(auto,1fr)) — so the column can shrink below its content's min size and long, unbreakable values (e.g. attachment file names) don't push the card past the viewport. gap/margin zeroed so the single-column spacing comes only from each card's margin-bottom (otherwise the grid gap stacks on top of it → uneven gaps). */ .invoice-detail-columns { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 0; } .invoice-upload-shell { align-items: flex-start; flex-direction: column; } } /* Mobile (Figma 393px). */ @media (max-width: 767px) { .crew-collections-detail { padding: 16px 16px 24px; } /* Header sits directly on the page surface (no card) per the mobile design. */ .invoice-detail-header { background: transparent; border-radius: 0; padding: 0; margin-bottom: 16px; } .invoice-detail-title-group h1 { font-size: 18px; } /* Cards: tighter gap between stacked cards. */ .invoice-detail-card { border-radius: 8px; margin-bottom: 16px; } /* Movement Context: 3-up → 2-up, Movement Date spans the full row. */ .invoice-field-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invoice-field-grid-three .invoice-field:last-child { grid-column: 1 / -1; } /* Movement Context: 4-up → clean 2×2 grid. */ .invoice-field-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Payment History: compact entry card, 4 fields wrap into a 2×2 grid. */ .payment-entry { gap: 8px; padding: 12px; border-radius: 6px; } .payment-entry-fields { flex-wrap: wrap; column-gap: 12px; row-gap: 8px; } .payment-entry-fields .invoice-field { flex: 1 1 40%; } /* Edit invoice modal: single-column form. */ .edit-invoice-field-grid { grid-template-columns: 1fr; } /* Expense Breakdown table → stacked rows: Expense Type + amount on top, date beneath as sub-text, Reference Number hidden. */ .invoice-expense-breakdown .invoice-detail-table thead { display: none; } .invoice-expense-breakdown .invoice-detail-table, .invoice-expense-breakdown .invoice-detail-table tbody { display: block; } .invoice-expense-breakdown .invoice-detail-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); } .invoice-expense-breakdown .invoice-detail-table td { display: block; border: 0; padding: 0; } .invoice-expense-breakdown .invoice-detail-table tbody tr:not(.invoice-total-row) td:nth-child(3) { display: none; } .invoice-expense-breakdown .invoice-detail-table tbody tr:not(.invoice-total-row) td:nth-child(2) { order: 1; flex: 1 1 auto; font-size: 13px; font-weight: 500; } .invoice-expense-breakdown .invoice-detail-table tbody tr:not(.invoice-total-row) td:nth-child(4) { order: 2; margin-left: auto; text-align: right; font-size: 13px; font-weight: 500; } .invoice-expense-breakdown .invoice-detail-table tbody tr:not(.invoice-total-row) td:nth-child(1) { order: 3; flex: 1 1 100%; font-size: 11px; color: var(--kendo-color-subtle, #596169); } .invoice-expense-breakdown .invoice-detail-table tr.invoice-total-row { justify-content: space-between; border-bottom: 0; } .invoice-expense-breakdown .invoice-detail-table tr.invoice-total-row td { font-size: 13px; } /* Audit Trail Kendo grid → stacked cards. Column order is fixed by _AuditTrailPartialView.cshtml (see its hard-coded-column note). */ .invoice-audit-card .k-grid, .invoice-audit-card .k-grid-content { height: auto !important; max-height: none !important; } .invoice-audit-card .k-grid-content { overflow: visible !important; } .invoice-audit-card .k-grid-header { display: none !important; } .invoice-audit-card .k-grid-content table, .invoice-audit-card .k-grid-content tbody { display: block !important; width: 100% !important; } .invoice-audit-card .k-grid-content colgroup { display: none !important; } .invoice-audit-card .k-grid-content tbody > tr { display: block !important; background: #fff; border: 1px solid var(--kendo-color-border, rgba(0,0,0,0.08)); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; } .invoice-audit-card .k-grid-content tbody > tr.k-alt, .invoice-audit-card .k-grid-content tbody > tr.k-table-alt-row { background: #fff; } .invoice-audit-card .k-grid-content td { display: flex !important; justify-content: space-between; gap: 16px; width: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; padding: 4px 0 !important; text-align: right; white-space: pre-line; overflow: visible !important; } .invoice-audit-card .k-grid-content td::before { font-weight: 700; color: var(--kendo-color-subtle, #596169); text-align: left; white-space: nowrap; } .invoice-audit-card .k-grid-content td:nth-child(1)::before { content: "Changed By"; } .invoice-audit-card .k-grid-content td:nth-child(2)::before { content: "Changed On"; } .invoice-audit-card .k-grid-content td:nth-child(3)::before { content: "Action Code"; } .invoice-audit-card .k-grid-content td:nth-child(4)::before { content: "Changed Value"; } .invoice-audit-card .k-grid-content td:nth-child(5)::before { content: "Old Value"; } .invoice-audit-card .k-grid-content td:nth-child(6)::before { content: "New Value"; } .invoice-audit-card .k-grid-content td:nth-child(7) { display: none !important; } .invoice-audit-card .k-pager { flex-wrap: wrap; row-gap: 4px; } } /* Crew dashboard ON/OFF toggle pill — inline label inside the track. */ .crew-toggle { background: transparent; border: 0; padding: 0; cursor: pointer; } .crew-toggle:focus { outline: none; } .crew-toggle .crew-toggle-track { position: relative; display: inline-flex; align-items: center; width: 56px; height: 24px; border-radius: 9999px; background-color: #D1D5DB; transition: background-color 0.2s ease; } .crew-toggle .crew-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left 0.2s ease; } .crew-toggle .crew-toggle-label-on, .crew-toggle .crew-toggle-label-off { position: absolute; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1; color: #FFFFFF; pointer-events: none; } .crew-toggle .crew-toggle-label-on { left: 8px; display: none; } .crew-toggle .crew-toggle-label-off { right: 7px; color: #6B7280; } .crew-toggle[aria-checked="true"] .crew-toggle-track { background-color: #2563EB; } .crew-toggle[aria-checked="true"] .crew-toggle-thumb { left: 34px; } .crew-toggle[aria-checked="true"] .crew-toggle-label-on { display: inline; } /* Crew Collections — Step 3 (Upload Result) */ .crew-collections .step3-panel { background: var(--kendo-color-surface-alt, #ffffff); border: 1px solid rgba(0, 0, 0, 0.08); padding: 16px; } .crew-collections .step3-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center; } .crew-collections .step3-loading-spinner { font-size: 32px; color: #4e80e0; } .crew-collections .step3-loading-primary { font-size: 16px; font-weight: 700; line-height: 1.42; color: #343a40; } .crew-collections .step3-loading-sub { font-size: 14px; color: #596169; line-height: 1.42; } .crew-collections .step3-success { display: flex; flex-direction: column; gap: 16px; } .crew-collections .step3-success-header { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; background: transparent; border: none; text-align: center; } .crew-collections .step3-success-icon { font-size: 32px; color: var(--kendo-color-primary, #0074e4); margin-bottom: 10px; } .crew-collections .step3-success-primary { font-size: 21px; font-weight: 700; line-height: 1.33; color: #343a40; } .crew-collections .step3-success-secondary { font-size: 14px; font-weight: 400; line-height: 1.42; color: #343a40; } .crew-collections .step3-start-over { margin-top: 10px; } .crew-collections .step3-failure { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; text-align: center; } .crew-collections .step3-failure-icon { font-size: 32px; color: #f31700; } .crew-collections .step3-failure-primary { font-size: 16px; font-weight: 700; line-height: 1.42; color: var(--kendo-color-error, #d63939); } .crew-collections .step3-failure-secondary { font-size: 14px; font-weight: 400; line-height: 1.42; color: #343a40; margin-top: 4px; } .crew-collections .step3-invoice-list { padding-top: 8px; } .crew-collections .created-invoices-grid { border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; } .crew-collections .created-invoices-grid a.js-attachment-count, .crew-collections .created-invoices-grid td a { color: #1a6eb5 !important; text-decoration: none; } .crew-collections .created-invoices-grid a.js-attachment-count:hover, .crew-collections .created-invoices-grid td a:hover { text-decoration: underline; } .crew-collections .created-invoices-grid .js-attachment-upload { width: 30px; height: 30px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; } .crew-collections .created-invoices-grid .js-attachment-upload .fas { font-size: 16px; line-height: 1; } .crew-collections .created-payments-grid { border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; } .crew-collections .created-payments-grid .k-header { font-weight: bold; } .crew-collections .created-payments-grid a.js-payment-attachment-count, .crew-collections .created-payments-grid td a { color: #1a6eb5 !important; text-decoration: none; } .crew-collections .created-payments-grid a.js-payment-attachment-count:hover, .crew-collections .created-payments-grid td a:hover { text-decoration: underline; } .crew-collections .created-payments-grid .js-payment-attachment-upload { width: 30px; height: 30px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; } .crew-collections .created-payments-grid .js-payment-attachment-upload .fas { font-size: 16px; line-height: 1; } .attachment-modal-body .k-upload, .attachment-modal-body .k-upload .k-upload-button, .attachment-modal-body .k-upload .k-button, .attachment-modal-body .k-upload .k-dropzone, .attachment-modal-body .k-upload .k-dropzone-hint, .attachment-modal-body .k-upload .k-file, .attachment-modal-body .k-upload .k-file-name, .attachment-modal-body .k-upload .k-file-size, .attachment-modal-body .k-upload .k-file-information, .attachment-modal-body .k-upload .k-upload-status { font-size: 0.875rem; line-height: 1.42857143; } .attachment-modal-body .k-upload > .k-actions, .attachment-modal-body .k-upload .k-upload-selected, .attachment-modal-body .k-upload .k-clear-selected { display: none !important; } .attachment-modal-body .k-upload .k-file { position: relative; } .attachment-modal-body .k-upload .k-file .payment-upload-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(0, 0, 0, 0.06); overflow: hidden; pointer-events: none; } .attachment-modal-body .k-upload .k-file .payment-upload-progress-fill { height: 100%; width: 0; background: #337ab7; transition: width 0.15s ease-out; } .attachment-modal-body .k-upload .k-file.k-file-success .payment-upload-progress-fill { background: #5cb85c; } .attachment-modal-body .k-upload .k-upload-files .k-file { padding: 8px 9px 11px; } /* Unified Attachment Modal */ .attachment-modal-content { background: #fff; border-radius: 8px; overflow: hidden; border: none; box-shadow: 0 4px 24px rgba(0,0,0,0.12); pointer-events: auto; position: relative; width: 100%; display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); } .attachment-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid #e5e8ec; } .attachment-modal-title { font-size: 24px; font-weight: 700; color: #424242; line-height: 1.2; margin: 0 0 8px; } .attachment-modal-subtitle { font-size: 14px; color: #424242; line-height: 1.42; margin: 0; } .attachment-modal-close { background: none; border: none; font-size: 16px; color: #212529; cursor: pointer; padding: 2px; flex-shrink: 0; line-height: 1; } .attachment-modal-close:hover { color: #000; } .attachment-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .attachment-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px; border-top: 1px solid #e5e8ec; } /* Staged / attached file rows */ .attachment-file-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px 11px; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); } .attachment-file-row:last-child { border-bottom: none; } .attachment-file-icon { font-size: 20px; color: #596169; flex-shrink: 0; width: 32px; text-align: center; } .attachment-file-info { flex: 1 0 0; min-width: 0; font-size: 14px; color: #343a40; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment-file-btn { flex-shrink: 0; width: 30px; height: 30px; padding: 7px; display: inline-flex; align-items: center; justify-content: center; color: #343a40; } .attachment-file-btn .fas { font-size: 14px; line-height: 1; } /* Labels / hints */ .attachment-currently-label { font-size: 12px; color: #596169; margin: 0; line-height: 1.5; } .attachment-no-files { font-size: 12px; color: #8094a8; margin: 0; line-height: 1.5; } .attachment-error-msg { font-size: 12px; color: #B91C1C; margin: 0; } .attachment-format-hint { font-size: 12px; font-style: italic; color: #343A40; margin: 4px 0 0px; } .attachment-file-status { font-size: 11px; line-height: 11px; } .attachment-status-success { color: #319064; } .attachment-status-error { color: #B91C1C; } /* Deleting in-progress indicator below the attached files list */ .attachment-deleting-text { font-size: 12px; color: #596169; margin: 0; line-height: 1.5; } /* Pending-delete state for currently attached files */ .attachment-file-row--pending-delete .attachment-file-name { text-decoration: line-through; } .crew-toggle[aria-checked="true"] .crew-toggle-label-off { display: none; } /* ===================================================================== Crew Dashboard — Responsive layout + drawer + grid card transform. Breakpoints: mobile ≤767, tablet 768-1199, desktop ≥1200. ===================================================================== */ /* Total Paid value — green per design tokens. */ .crew-kpi-value.crew-kpi-value-paid { color: var(--kendo-color-success, #319064); } /* Constrain header logo to fit the compact header height. */ .header-bar .header-image { max-height: 40px; height: auto; width: auto; margin: 0; } /* Drawer toggle swaps hamburger ↔ X. */ .menu-dropdown-btn .fa-times { display: none; } .menu-dropdown-btn.show .fa-bars { display: none; } .menu-dropdown-btn.show .fa-times { display: inline; } /* Drawer list hidden by default; the desktop hamburger shows the nav-bar list. */ .dropdown-menu[aria-labelledby="navbarDropdownMenu"] .hb-drawer-list { display: none; } /* Desktop (≥1200): hide the hamburger when the user has no nav-bar menus. */ @media (min-width: 1200px) { .header-bar .hb-no-desktop-nav .menu-dropdown-btn { display: none; } } /* Small screens (≤1199): hamburger LEFT, hide the horizontal nav, username RIGHT, full-screen drawer. */ @media (max-width: 1199px) { .header-bar { min-height: 56px; } .header-bar-line { display: none; } /* allow the row to grow , username wraps*/ .header-bar > .container-fluid > .d-flex { position: relative; height: auto !important; min-height: 56px; padding: 4px 0; } .header-bar .header-bar-inner-wrapper > .dropdown, .header-bar .header-bar-inner-wrapper > .display-in-line { display: none !important; } .header-bar .header-bar-inner-wrapper { padding-left: 48px; } .header-bar .hide-on-mobile { display: flex; } /* All roles: cap the header username width on small screens so it wraps within its own column and never renders under the logo. */ .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle { display: block; max-width: 45vw; overflow: hidden; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: right; line-height: 1.2; } /* Crew/SSO only: username is a non-interactive label (logout lives in the drawer); back-office keeps a clickable dropdown so Change Password stays reachable. */ body.role-crew .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle { pointer-events: none; } body.role-crew .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle::after { display: none; } body.role-crew .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle > span:last-child { display: none; } /* All roles: let the name label wrap instead of clipping on long values. */ .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle > span:first-child, .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle > span:first-child label { display: inline; white-space: normal; margin-bottom: 0; } .header-bar .hide-on-mobile > .dropdown:last-child { position: absolute; left: 16px; right: auto; top: 18px; z-index: 1031; } .header-bar #navbarDropdownMenu { position: static; } .header-bar .menu-dropdown-btn { padding: 4px 8px; } .header-bar .menu-dropdown-btn i.fas { font-size: 22px; } /* swap nav-bar list → full drawer list */ .dropdown-menu[aria-labelledby="navbarDropdownMenu"] .hb-nav-list { display: none; } .dropdown-menu[aria-labelledby="navbarDropdownMenu"] .hb-drawer-list { display: block; } .header-bar .dropdown-menu[aria-labelledby="navbarDropdownMenu"].show { position: fixed !important; top: 56px !important; left: 0 !important; right: auto !important; bottom: 0; max-height: none !important; height: calc(100vh - 56px); margin: 0; border-radius: 0; overflow-y: auto; box-shadow: 2px 0 12px rgba(0,0,0,0.15); transform: none !important; inset: 56px auto 0 0 !important; } } @media (min-width: 768px) and (max-width: 1199px) { .header-bar .dropdown-menu[aria-labelledby="navbarDropdownMenu"].show { width: 320px; } } @media (max-width: 767px) { .header-bar .dropdown-menu[aria-labelledby="navbarDropdownMenu"].show { width: 280px; } .header-bar .header-image { max-height: 28px; } /* full "Name (Role)" fits on small phones (all roles). */ .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle { max-width: 46vw; font-size: 11px; line-height: 1.2; } .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle span, .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle label { font-size: inherit; } /* All roles: drop the Bootstrap .px-2 side padding on the name label so the full value fits inside the capped width without the right edge clipping. */ .header-bar .hide-on-mobile > .dropdown:first-child > a.dropdown-toggle > span:first-child { padding-left: 0 !important; padding-right: 0 !important; } } /* Crew dashboard responsive: mobile ≤767, tablet 768-1199, desktop ≥1200. */ .crew-dashboard .collections-actions-overflow { display: none; } .crew-dashboard .collections-actions .btn, .crew-collections-admin .section-header-actions .btn { height: 30px; padding: 4px 8px; font-size: 14px; border-radius: 4px; } .crew-dashboard .collections-actions .btn-light, .crew-collections-admin .section-header-actions .btn-light { background-color: #E5E8EC; border-color: #E5E8EC; color: #343A40; } .crew-dashboard .collections-actions .btn-primary { background-color: #0074E4; border-color: #0074E4; } .crew-collections-admin .section-header-actions .btn-outline-primary { color: #0074E4; border-color: #0074E4; } .crew-collections-admin .section-header-actions .btn-outline-primary:hover { background-color: #0074E4; color: #fff; } @media (max-width: 767px) { .crew-dashboard .collections-actions-inline { display: none !important; } .crew-dashboard .collections-actions-overflow { display: inline-block !important; } .crew-dashboard .crew-kpi-card { width: 100%; } .crew-dashboard .collections-content > .d-flex.justify-content-end, .crew-dashboard .reimbursements-content > .d-flex.justify-content-end { flex-direction: column; align-items: stretch !important; gap: 8px; } .crew-dashboard .collections-content .input-group, .crew-dashboard .reimbursements-content .input-group { max-width: 100% !important; } .crew-dashboard .card-header { padding: 10px 12px; } .crew-dashboard .collections-content, .crew-dashboard .reimbursements-content { padding: 12px; } .crew-dashboard .collections-actions .btn-sm { font-size: 14px; } } /* Footer scrolls with content (avoids overlap on small viewports). */ @media (max-width: 1199px) { .footer-bar { position: static; } } /* Filter bar wraps: each group on its own row, compact font. */ @media (max-width: 1199px) { .crew-filter-bar { flex-wrap: wrap; gap: 8px 10px; align-items: stretch; } .crew-filter-group { flex: 1 1 100%; gap: 8px; min-width: 0; } .crew-filter-label { font-size: 13px; white-space: nowrap; font-weight: 600; } .crew-filter-group .k-widget, .crew-filter-group .k-dropdownlist, .crew-filter-group .k-multiselect, .crew-filter-group .k-input { width: 100% !important; min-width: 0 !important; font-size: 13px; } .crew-filter-date-group { flex-wrap: nowrap; } .crew-filter-date-group .k-datepicker { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; } .crew-filter-date-group .k-datepicker .k-input, .crew-filter-date-group .k-datepicker input { min-width: 0 !important; width: 100% !important; } .crew-filter-dash { flex: 0 0 auto; padding: 0 2px; } /* Apply + Reset row. */ .crew-filter-bar .crew-filter-btn { flex: 1 1 auto; font-size: 13px; } .crew-filter-bar .crew-filter-reset { flex: 0 0 auto; } } /* Tablet KPI cards equal-width flex; search row spreads to fill. */ @media (min-width: 768px) and (max-width: 1199px) { .crew-dashboard .crew-kpi-card { width: auto; flex: 1 1 0; min-width: 0; flex-shrink: 1; align-self: stretch; } /* KPI row stretch — equal card heights. */ .crew-dashboard .collections-content > .d-flex.flex-wrap, .crew-dashboard .reimbursements-content > .d-flex.flex-wrap { align-items: stretch !important; } .crew-dashboard .crew-kpi-card .card-body { height: 100%; } .crew-dashboard .collections-content > .d-flex.justify-content-end, .crew-dashboard .reimbursements-content > .d-flex.justify-content-end { justify-content: space-between !important; } .crew-dashboard .collections-content .input-group, .crew-dashboard .reimbursements-content .input-group { max-width: 100% !important; flex: 1 1 auto; } } /* Kendo Grid rows → card layout (3 rows: id+date / ship / amount+status). */ @media (max-width: 1199px) { /* Hide grid header. */ #crewCollectionsGrid .k-grid-header, #crewCollectionsGrid > table > thead, #crewExpensesGrid .k-grid-header, #crewExpensesGrid > table > thead { display: none !important; } /* Strip table layout. */ #crewCollectionsGrid > table, #crewExpensesGrid > table { display: block !important; width: 100% !important; table-layout: auto !important; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; } #crewCollectionsGrid > table > colgroup, #crewExpensesGrid > table > colgroup { display: none !important; } #crewCollectionsGrid tbody, #crewExpensesGrid tbody { display: block !important; width: 100% !important; } /* Row → card. */ #crewCollectionsGrid tbody > tr, #crewExpensesGrid tbody > tr { display: flex !important; flex-wrap: wrap !important; align-items: baseline; column-gap: 8px; row-gap: 2px; padding: 10px 12px !important; margin-bottom: 4px !important; height: auto !important; min-height: 0 !important; background-color: #f6f8fb !important; background-image: none !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; } #crewCollectionsGrid tbody > tr.k-alt, #crewExpensesGrid tbody > tr.k-alt, #crewCollectionsGrid tbody > tr.k-table-alt-row, #crewExpensesGrid tbody > tr.k-table-alt-row { background-color: #f6f8fb !important; } /* Cell reset. */ #crewCollectionsGrid tbody > tr > td, #crewExpensesGrid tbody > tr > td { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; border: 0 !important; padding: 0 !important; background: transparent !important; white-space: normal !important; overflow: visible !important; height: auto !important; min-height: 0 !important; line-height: 1.4 !important; } /* Position cells in the card by class. */ #crewCollectionsGrid td.crew-card-id, #crewExpensesGrid td.crew-card-id { order: 1; flex: 1 1 auto; font-size: 14px; } #crewExpensesGrid td.crew-card-id a, #crewExpensesGrid td.crew-card-id .crew-expense-link { text-decoration: none; } #crewCollectionsGrid td.crew-card-date, #crewExpensesGrid td.crew-card-date { order: 2; flex: 0 0 auto; text-align: right; font-size: 12px; white-space: nowrap; } #crewCollectionsGrid td.crew-card-ship, #crewExpensesGrid td.crew-card-ship { order: 3; flex: 1 1 100%; font-size: 12px; } #crewCollectionsGrid td.crew-card-original { display: none !important; } #crewCollectionsGrid td.crew-card-amount, #crewExpensesGrid td.crew-card-amount { order: 4; flex: 1 1 auto; font-size: 14px; } #crewCollectionsGrid td.crew-card-status, #crewExpensesGrid td.crew-card-status { order: 5; flex: 0 0 auto; margin-left: auto; text-align: right; } /* Pager wrap. */ .crew-dashboard .k-grid .k-pager-wrap, .crew-dashboard .k-grid .k-pager { flex-wrap: wrap !important; row-gap: 4px; padding: 8px 0; } /* Keep the item-count info visible */ #crewCollectionsGrid .k-pager .k-pager-info, #crewExpensesGrid .k-pager .k-pager-info { display: inline-flex !important; width: auto !important; } } /* Drawer (Crew role): user card + categorized menu items with icons. */ .dropdown-menu .drawer-user-card { padding: 16px 16px 12px; border-bottom: 1px solid #dee2e6; background-color: #f6f8fb; cursor: default; list-style: none; } .dropdown-menu .drawer-user-name { font-weight: 700; font-size: 14px; color: var(--kendo-color-on-app-surface, #212529); text-transform: uppercase; line-height: 1.3; } .dropdown-menu .drawer-user-role { font-size: 12px; color: var(--kendo-color-subtle, #596169); margin-top: 4px; } .dropdown-menu .drawer-user-meta { font-size: 12px; color: var(--kendo-color-subtle, #596169); margin-top: 4px; } .dropdown-menu .drawer-user-meta-sep { margin: 0 6px; color: #ced4da; } /* Section heading*/ .dropdown-menu .drawer-section-heading { padding: 8px 16px; font-size: 14px; line-height: 1.42; color: var(--kendo-color-base-opacity-on-base-50, rgba(61, 61, 61, 0.5)); font-weight: 700; cursor: default; list-style: none; } .dropdown-menu .drawer-menu-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--kendo-color-on-app-surface, #343a40); } .dropdown-menu .drawer-menu-item i { width: 20px; text-align: center; font-size: 16px; color: var(--kendo-color-on-app-surface, #343a40); } .dropdown-menu .drawer-menu-item.disabled, .dropdown-menu .drawer-menu-item.disabled i { color: #adb5bd; } /* ================================================ Edit Invoice Modal ================================================ */ #editInvoiceModal .modal-header, #editInvoiceModal .modal-body, #editInvoiceModal .modal-footer { padding: 8px 16px; } #editInvoiceModal .modal-header { border-bottom: 1px solid #e5e8ec; } #editInvoiceModal .modal-title { font-weight: 700; font-size: 24px; margin: 0; } #editInvoiceModal .modal-body { max-height: 650px; overflow-y: auto; } #editInvoiceModal .modal-footer { border-top: 1px solid #e5e8ec; justify-content: flex-end; gap: 4px; } #editInvoiceModal .modal-dialog { max-width: 550px; } #editInvoiceModal .attachment-no-files, #editInvoiceModal .attachment-error-msg { font-size: 12px; padding-top: 4px; font-style: italic; } #editInvoiceModal .attachment-no-files { color: unset; } #editInvoiceModal .attachment-error-msg { color: #dc3545; } #editInvoiceModal .attachment-modal-body { padding: unset } #editInvoiceModal .attachment-modal-body .k-upload .k-upload-files { max-height: unset; overflow-y: unset; } .edit-invoice-modal-subtitle { margin: 4px 0 0; color: #666; } .edit-invoice-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .edit-invoice-field label, .edit-invoice-section .edit-invoice-section-title { display: block; margin-bottom: 4px; font-weight: 700; } .edit-invoice-field .form-control[disabled] { background-color: unset; } .edit-invoice-field .k-textbox { padding: unset; } .edit-invoice-field input, .edit-invoice-field .k-widget { width: 100%; } .edit-invoice-field .k-invalid .k-input-inner, .edit-invoice-field .k-invalid.k-input { border-color: #dc3545; } .edit-invoice-optional { font-weight: normal; font-style: italic; } .edit-invoice-notes { resize: none; } .edit-invoice-btn-cancel, .edit-invoice-btn-save { font-size: 14px; } .edit-invoice-btn-cancel { background-color: #e5e8ec; color: #333; border-color: #e5e8ec; } .edit-invoice-btn-save { background-color: #0074e4; color: #fff; border-color: #0074e4; } .edit-invoice-btn-save:hover, .edit-invoice-btn-save:focus { background-color: #005bb5; border-color: #005bb5; color: #fff; } .edit-invoice-btn-save:disabled{ background-color: #005bb5; border-color: #005bb5; color: #fff; opacity: 0.6 } .edit-invoice-error { display: block; color: #dc3545; font-size: 12px; margin-top: 3px; min-height: 1em; font-style: italic; } /* Reimbursements: Expense Type cell in mobile/tablet card layout. */ @media (max-width: 1199px) { #crewExpensesGrid td.crew-card-type { order: 3; flex: 1 1 100%; font-size: 12px; color: #6B7280; } } /************************* DASHBOARD **************************************/ .dashboard-shell { background: #f5f7fb; min-height: 100vh; } .dashboard-topbar { height: 58px; background: #001d74; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .dashboard-brand img { height: 38px; } .dashboard-topnav { display: flex; align-items: center; gap: 28px; flex: 1; margin-left: 24px; } .topnav-link { color: #dfe6ff; text-decoration: none; display: inline-flex; align-items: center; font-size: 14px; } .topnav-link:hover { color: #fff; } .dashboard-user { white-space: nowrap; font-weight: 600; } .dashboard-body { display: grid; grid-template-columns: 320px 1fr; gap: 0; min-height: calc(100vh - 58px); } .dashboard-sidebar { background: #fff; border-right: 1px solid #d9e0ea; padding: 20px 16px; } .dashboard-search { position: relative; margin-bottom: 22px; } .dashboard-search i { position: absolute; left: 14px; top: 14px; color: #6c757d; } .dashboard-search input { width: 100%; height: 42px; border: 1px solid #dee2e6; border-radius: 8px; padding: 0 15px 0 40px; font-size: 14px; } .sidebar-block { margin-bottom: 20px; } .sidebar-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #6c757d; margin-bottom: 12px; } .frequent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .frequent-card { background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 14px 12px; text-decoration: none; color: #212529; display: flex; align-items: center; gap: 12px; } .frequent-card:hover { background: #f8f9fa; } .card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .card-icon-blue { background-color: #e8f1ff; color: #568cdc; } .card-icon-yellow { background-color: #fdf1cc; color: #f5b800; } .card-icon-green { background-color: #d1e7dd; color: #319064; } .card-icon-purple { background-color: #e9ddf8; color: #8c4fe3; } .sidebar-category { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; color: #212529; text-decoration: none; margin-bottom: 8px; font-size: 14px; } .sidebar-category:hover { background: #f1f3f5; color: #212529; } .sidebar-category.active { background: #e8f1ff; color: #568cdc; font-weight: 600; } .sidebar-left { display: inline-flex; align-items: center; } .dashboard-main { padding: 24px 40px 40px; } .dashboard-welcome { font-size: 28px; font-weight: 700; margin-bottom: 24px; color: #817b7b; } .dashboard-section { background: #fff; border: 1px solid #dee2e6; border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; } .section-title { font-size: 14px; font-weight: 700; color: #5c6670; margin-bottom: 18px; display: flex; align-items: center; } .dashboard-card { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 1px solid #dee2e6; border-radius: 12px; padding: 16px 18px; text-decoration: none; color: #212529; } .dashboard-card.active { border-color: #0d6efd; background: #eef5ff; } .dashboard-card:hover { border-color: #0d6efd; box-shadow: 0 0 0 1px rgba(13,110,253,.15); background: #eef5ff; } .dashboard-card.featured { background: #eef5ff; border-color: #0d6efd; } .card-content { min-width: 0; } .card-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; } .card-description { color: #6c757d; font-size: 12px; line-height: 1.4; } .no-results { display: flex; justify-content: center; align-items: center; height: 70%; text-align: center; } .no-results-content { color: #6c757d; } .no-results-icon { font-size: 40px; margin-bottom: 15px; color: #ced4da; } /* The Kendo BS5 theme strips the default .card border; restore the BS3 panel look for expense/approval cards. */ .camex-card { border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .camex-card > .card-header { background-color: #f5f5f5; border-bottom: 1px solid #ddd; padding: 10px 15px; } /* BS5 dropped BS3's bold label default (700 -> 400); restore it globally so label weight is consistent. */ label { font-weight: 700; } /* BS5 .form-control dropped BS3's fixed height: 34px, so the (often empty) adjusted-amount box collapses to padding height. Restore the box height. */ [id^="OverrideAmount_"] { height: 34px; } /* Attachments section runs compact at 12px (BS5's larger base font makes it look oversized). */ [id^="attachments"] > .card-body { font-size: 12px; } /* Kendo Upload sets its own font; bring its button + drag-and-drop hint down to 12px too. */ [id^="attachments"] .k-upload-button, [id^="attachments"] .k-dropzone-hint { font-size: 12px; } /* ===== Bootstrap 5 regression shims (CM-477) ===== */ /* P0 — BS5 removed .btn-default; restore the BS3 grey button so it is not transparent. */ .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default.disabled, .btn-default:disabled { background-color: #fff; border-color: #ccc; opacity: .65; } /* P1 — BS5 removed .form-horizontal / .form-group row behaviour; restore the 2-column layout. */ .form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-right: 15px; } /* P2 — BS5 .table sets a cell colour that overrides .color-white; keep header text white. */ .color-white { color: #fff !important; } /* P3 — BS5 .row negative margins overflow the full-width footer bar. */ .footer-bar > .row { margin-right: 0; margin-left: 0; } /* P2 — Audit Trail grid (Kendo Window) truncated column headers; let them wrap. */ #divAudits .k-grid .k-column-title { white-space: normal; } /* ===== BS3 removed-class shims (col-xs-*, pull-*, btn-xs) ===== */ /* BS5 dropped the xs tier and added `.row > * { width: 100% }`, which forces bare columns full-width. Restore col-xs-1..11 with a doubled class (specificity 0,2,0) so they beat `.row > *` (0,1,0) regardless of nesting. col-xs-12 is intentionally NOT redefined: `.row > *` already makes it 100%, and the col-sm-*/col-md-* it is paired with overrides it at the matching breakpoint — in this app only col-xs-12 is ever combined with a higher tier, so col-xs-1..11 never conflict with col-md and don't need a breakpoint of their own. */ [class*="col-xs-"] { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .col-xs-1.col-xs-1 { width: 8.333333%; } .col-xs-2.col-xs-2 { width: 16.666667%; } .col-xs-3.col-xs-3 { width: 25%; } .col-xs-4.col-xs-4 { width: 33.333333%; } .col-xs-5.col-xs-5 { width: 41.666667%; } .col-xs-6.col-xs-6 { width: 50%; } .col-xs-7.col-xs-7 { width: 58.333333%; } .col-xs-8.col-xs-8 { width: 66.666667%; } .col-xs-9.col-xs-9 { width: 75%; } .col-xs-10.col-xs-10 { width: 83.333333%; } .col-xs-11.col-xs-11 { width: 91.666667%; } /* BS5 dropped pull-right / pull-left; restore them. */ .pull-right { float: right !important; } .pull-left { float: left !important; } /* BS5 runs .btn on a 16px (1rem) font, so buttons look chunky/tall vs BS3's 14px. Restore BS3 button sizing via BS5's button CSS vars. lg/sm/xs are re-declared AFTER the base (source order) so they keep their relative scale instead of inheriting the base size. btn-md is undefined in BS5 and intentionally falls back to the base. */ .btn { --bs-btn-padding-y: 6px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 14px; --bs-btn-line-height: 1.42857143; --bs-btn-border-radius: 4px; } .btn-lg { --bs-btn-padding-y: 10px; --bs-btn-padding-x: 16px; --bs-btn-font-size: 18px; --bs-btn-border-radius: 6px; } .btn-sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 10px; --bs-btn-font-size: 12px; --bs-btn-border-radius: 3px; } .btn-xs { --bs-btn-padding-y: 1px; --bs-btn-padding-x: 5px; --bs-btn-font-size: 12px; --bs-btn-line-height: 1.5; --bs-btn-border-radius: 3px; } /* BS5 removed the .panel family (replaced by .card). Restore the BS3 panel chrome for views still on it (search/filter panels, Your Expenses buckets, etc.). Background is intentionally left to each panel's own bg class (e.g. .background-light-gray-custom / .background-dark-blue) so we only restore borders + headers. */ .panel { margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .panel-body { padding: 15px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-default { border-color: #ddd; } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-primary { border-color: #337ab7; } .panel-info { border-color: #bce8f1; } .panel-success { border-color: #d6e9c6; } .panel-warning { border-color: #faebcc; } .panel-danger { border-color: #ebccd1; } .no-results-text { font-size: 18px; margin-bottom: 6px; } .no-results-subtext { font-size: 14px; } @media (max-width: 1199px) { .dashboard-body { grid-template-columns: 280px 1fr; } } @media (max-width: 991px) { .dashboard-body { grid-template-columns: 1fr; } .dashboard-sidebar { border-right: 0; border-bottom: 1px solid #d9e0ea; } .dashboard-main { padding: 20px; } } /* ======================================================================================================================== Configuration Settings Page ======================================================================================================================== */ .configuration-settings-page { --cs-primary: #0d6efd; --cs-primary-subtle: #e5f1fc; --cs-on-subtle: #0041b1; --cs-accent: #0074e4; --cs-card: #ffffff; --cs-border: rgba(0, 0, 0, 0.08); --cs-border-alt: rgba(0, 0, 0, 0.16); --cs-subtle-text: #596169; --cs-text: #343a40; color: var(--cs-text); background-color: var(--cs-card); padding: 24px 32px; border-radius: 8px; } /* Outer panel wrapping the whole Email Notifications section (header + cards) */ .configuration-settings-page .cs-panel { background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 24px 32px; margin-bottom: 16px; } .configuration-settings-page .cs-panel .email-card:last-child { margin-bottom: 0; } .configuration-settings-page .cs-section-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .configuration-settings-page .cs-section-title { font-size: 24px; font-weight: 700; line-height: 1.2; color: #212529; margin: 0 0 4px; } /* Discard changes — light grey filled (Kendo base), not outline */ .configuration-settings-page .cs-btn-discard { background: #e5e8ec; border: 1px solid var(--cs-border); color: var(--cs-text); } .configuration-settings-page .cs-btn-discard:hover { background: #dadee3; border: 1px solid var(--cs-border); color: var(--cs-text); } .configuration-settings-page .cs-section-subtitle { font-size: 14px; color: var(--cs-subtle-text); margin: 0; } /* Buttons — Save is primary blue, Discard is outline */ .configuration-settings-page .btn-primary { background-color: var(--cs-primary); border-color: var(--cs-primary); } .configuration-settings-page .btn-primary:hover { background-color: #0b5ed7; border-color: #0b5ed7; } /* Notification cards */ .configuration-settings-page .email-card { background: var(--cs-card); border: 1px solid var(--cs-border-alt); border-radius: 6px; padding: 0 24px 16px; margin-bottom: 16px; } .configuration-settings-page .email-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .configuration-settings-page .email-card-title { color: var(--cs-primary); font-size: 16px; font-weight: 400; padding: 16px 0 8px; margin: 0; } /* Per-card audit trail trigger, right-aligned in the card header. */ .configuration-settings-page .en-audit-icon { flex: 0 0 auto; background: transparent; border: none; padding: 6px; line-height: 1; cursor: pointer; color: var(--cs-subtle-text); border-radius: 4px; } .configuration-settings-page .en-audit-icon:hover { color: var(--cs-primary); background: var(--cs-border); } .configuration-settings-page .en-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; } .configuration-settings-page .en-row + .en-row { border-top: 1px solid var(--cs-border); } .configuration-settings-page .en-row-info { flex: 0 0 320px; width: 320px; } .configuration-settings-page .en-row-label { font-size: 14px; font-weight: 700; } .configuration-settings-page .en-row-desc { font-size: 12px; line-height: 1.5; color: var(--cs-subtle-text); margin: 2px 0 0; } .configuration-settings-page .en-row-control { flex: 1 1 auto; display: flex; justify-content: flex-start; } .configuration-settings-page .en-row-control .k-numerictextbox { width: 120px; } .configuration-settings-page .en-row-control .k-multiselect { width: 100%; } .configuration-settings-page .en-edit-body { height: 32px; } /* Enabled-toggle Kendo Switch — Figma node 1353:100687 (56x26, #0074e4 track when ON, inline ON/OFF text). Fully self-contained: the installed Kendo.Mvc.dll's SwitchBuilder.Messages() does not reach the widget's client init options (verified — the rendered init script is always kendoSwitch({}) regardless of .Messages() config), and kendo-theme-bootstrap ships .k-switch-label-on/off as unconditional display:none with no visible-state override. text comes from Kendo's own baked-in "On"/"Off" content, uppercased here. */ .configuration-settings-page .en-row-control .k-switch, .configuration-settings-page .en-row-control .k-switch-track { width: 56px; height: 26px; } .configuration-settings-page .en-row-control .k-switch-thumb { width: 20px; height: 20px; } .configuration-settings-page .en-row-control .k-switch-off .k-switch-thumb-wrap { inset-inline-start: 13px; } .configuration-settings-page .en-row-control .k-switch-on .k-switch-thumb-wrap { inset-inline-start: calc(100% - 13px); } .configuration-settings-page .en-row-control .k-switch-label-on, .configuration-settings-page .en-row-control .k-switch-label-off { text-transform: uppercase; font-size: 10px; font-weight: 400; letter-spacing: 0.4px; } .configuration-settings-page .en-row-control .k-switch-label-on { left: 8px; } .configuration-settings-page .en-row-control .k-switch-label-off { right: 7px; } .configuration-settings-page .en-row-control .k-switch-off .k-switch-label-on, .configuration-settings-page .en-row-control .k-switch-on .k-switch-label-off { display: none; } .configuration-settings-page .en-row-control .k-switch-off .k-switch-label-off { display: inline-block; color: #6c757d; } .configuration-settings-page .en-row-control .k-switch-on .k-switch-label-on { display: inline-block; color: #ffffff; } .configuration-settings-page .en-row-control .k-switch-on .k-switch-track { background-color: #0074e4; border-color: #0074e4; } /* CC popup/tag styles are unscoped: Kendo appends the popup to . */ .en-recipient-icon { margin-right: 6px; color: #596169; } .en-cc-name { font-weight: 700; color: #212529; } .en-cc-email { font-size: 12px; color: #596169; } .en-add-email { display: block; padding: 8px 12px; cursor: pointer; font-size: 12px; color: #343a40; } .en-add-email:hover { background: #f0f4f9; } .en-recipient-popup { border-radius: 8px; padding: 4px 0; } .en-recipient-popup .k-list-item { padding: 8px 12px; } /* Free-typed emails live only as tags — hide them from the user dropdown list. */ .en-recipient-popup .k-list-item:has(.en-cc-custom) { display: none; } /* Drop Kendo's 140px min-height + centering so the popup hugs the add-email row. */ .en-recipient-popup .k-no-data { display: block; min-height: 0; padding: 0px 12px; text-align: left; font-weight: normal; color: inherit; } .en-recipient-popup .k-list-item.k-hover, .en-recipient-popup .k-list-item:hover, .en-recipient-popup .k-list-item.k-focus, .en-recipient-popup .k-list-item.k-selected { background-color: #f0f4f9; color: var(--kendo-color-on-app-surface, #343a40); box-shadow: none; } /* Keep readable on hover/focus/selected (Kendo forces white otherwise). */ .en-recipient-popup .k-list-item.k-hover .en-cc-name, .en-recipient-popup .k-list-item.k-focus .en-cc-name, .en-recipient-popup .k-list-item.k-selected .en-cc-name { color: #212529; } .en-recipient-popup .k-list-item.k-hover .en-cc-email, .en-recipient-popup .k-list-item.k-focus .en-cc-email, .en-recipient-popup .k-list-item.k-selected .en-cc-email { color: #596169; } .configuration-settings-page .en-invalid-email { color: #dc3545; font-weight: 600; } .configuration-settings-page .k-multiselect .k-button:has(.en-invalid-email) { border-color: #dc3545; } /* Audit Trail card */ .configuration-settings-page .cs-audit-card { background: var(--cs-card); border: 1px solid var(--cs-border-alt); border-radius: 6px; padding: 16px; } .configuration-settings-page .cs-audit-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } @media (max-width: 991px) { .configuration-settings-page .en-row { flex-direction: column; align-items: stretch; } .configuration-settings-page .en-row-info { flex-basis: auto; width: auto; } .configuration-settings-page .en-row-control { justify-content: flex-start; } } /* Dispute Approval Threshold panel */ .configuration-settings-page .dat-levels { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .configuration-settings-page .dat-level-card { background: var(--cs-card); border: 1px solid var(--cs-border-alt); border-radius: 6px; padding: 16px 20px; } .configuration-settings-page .dat-level-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--cs-border); padding-bottom: 12px; } .configuration-settings-page .dat-level-badge { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--cs-accent); } .configuration-settings-page .dat-level-status { font-size: 12px; color: var(--cs-subtle-text); margin-top: 2px; } .configuration-settings-page .dat-status-name { color: var(--cs-accent); font-weight: 600; } .configuration-settings-page .dat-remove { background: none; border: none; color: #d63939; font-size: 13px; padding: 0; cursor: pointer; } .configuration-settings-page .dat-remove i { margin-right: 4px; } .configuration-settings-page .dat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 12px 0; } .configuration-settings-page .dat-row + .dat-row { border-top: 1px solid var(--cs-border); } .configuration-settings-page .dat-row-info { flex: 0 0 300px; width: 300px; } .configuration-settings-page .dat-row-label { font-size: 14px; font-weight: 700; } .configuration-settings-page .dat-row-desc { font-size: 12px; line-height: 1.5; color: var(--cs-subtle-text); margin-top: 2px; } .configuration-settings-page .dat-row-control { flex: 1 1 auto; min-width: 0; } .configuration-settings-page .dat-row-control .k-numerictextbox { width: 220px; } .configuration-settings-page .dat-row-control .k-multiselect { width: 100%; } .configuration-settings-page .dat-nolimit { font-weight: 400; color: var(--cs-subtle-text); padding: 6px 0; } .configuration-settings-page .dat-error { color: #d63939; font-size: 12px; margin-top: 4px; } .configuration-settings-page .dat-invalid .k-numerictextbox, .configuration-settings-page .dat-invalid .k-multiselect { border-color: #d63939; } .configuration-settings-page .dat-add-row { margin-bottom: 16px; } /* Remove-level dialog */ .dat-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 10050; display: flex; align-items: center; justify-content: center; } .dat-modal { background: #fff; border-radius: 6px; width: 480px; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .dat-modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--cs-border); } .dat-modal-title { font-size: 20px; font-weight: 700; margin: 0; } .dat-modal-subtitle { font-size: 14px; color: var(--cs-subtle-text); margin-top: 2px; } .dat-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--cs-text); cursor: pointer; padding: 0; } .dat-modal-body { font-size: 14px; line-height: 1.5; padding: 16px; } .dat-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px; border-top: 1px solid var(--cs-border); } @media (max-width: 991px) { .configuration-settings-page .dat-row { flex-direction: column; gap: 8px; } .configuration-settings-page .dat-row-info { flex-basis: auto; width: auto; } .configuration-settings-page .dat-row-control .k-numerictextbox { width: 100%; } } .setting-group { cursor: pointer; border: none; } .setting-group.active { background-color: #e7f1ff; color: #0d6efd; font-weight: 600; } .setting-group:hover { background-color: #f5f5f5; } /* .k-grid td { vertical-align: middle; } */ .list-group-item.active { background-color: #e7f1ff; border-color: #e7f1ff; color: #0d6efd; } .config-header { background-color: white; /*border: 1px solid #e5e7eb;*/ border-radius: 8px; padding: 14px 20px; margin-bottom: 15px; } /* Sidebar container */ .config-sidebar { background: #fff; /* border: 1px solid #e5e7eb;*/ border-radius: 8px; padding: 10px; } .config-sidebar-rigth { border: none; } /* Search */ .config-search-row { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; } .config-search { flex: 1; position: relative; } .config-search input { padding-right: 35px; height: 30px; font-size: 14px; } .search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #6c757d; cursor: pointer; } .config-sidebar-toggle { width: 30px; height: 29px; padding: 0; display: flex; align-items: center; justify-content: center; } /* Category */ .config-category { margin-top: 15px; } .config-category-title { font-size: 11px; font-weight: 600; color: #9aa0a6; margin-bottom: 5px; } /* Group item */ .config-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: #333; } .config-group i { width: 16px; text-align: center; } /* Hover */ .config-group:hover { background: #f5f7fa; } /* Active (VERY important for design) */ .config-group.active { background: #e7f1ff; color: #0d6efd; font-weight: 500; } .config-group i { font-size: 14px; width: 18px; color: #6c757d; } .config-group.active i { color: #0d6efd; } .config-content-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .config-content-header > div:first-child { flex: 1; } .config-group-description { margin-top: 8px; color: #6c757d; font-size: 13px; max-width: 900px; } .config-actions { display: flex; gap: 10px; margin-top: 10px; } #settingsSidebar.sidebar-collapsed { width: 72px; flex: 0 0 72px; max-width: 72px; } #settingsSidebar.sidebar-collapsed .config-category-title, #settingsSidebar.sidebar-collapsed .config-search { display: none !important; } #settingsSidebar.sidebar-collapsed .config-sidebar { padding: 8px 0; } #settingsSidebar.sidebar-collapsed .config-group { width: 40px; height: 40px; margin: 6px 0; padding: 0; display: flex; align-items: center; justify-content: center; } #settingsSidebar.sidebar-collapsed .config-group span { display: none; } #settingsSidebar.sidebar-collapsed .config-group i { width: 20px; min-width: 20px; text-align: center; margin: 0px !important; font-size: 18px; } #settingsSidebar.sidebar-collapsed .config-group.active { background: #e7f1ff; } #settingsSidebar.sidebar-collapsed .config-group.active i { color: #0d6efd; } #settingsSidebar.sidebar-collapsed .config-category { display: flex; flex-direction: column; align-items: center; } #settingsSidebar.sidebar-collapsed .config-search-row { display: flex; justify-content: center; margin-bottom: 12px; } #settingsSidebar.sidebar-collapsed .config-sidebar-toggle { width: 40px; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } #ConfigurationSettingGrid, #ConfigurationSettingGrid .k-grid-content, #ConfigurationSettingGrid .k-grid-header, #ConfigurationSettingGrid td, #ConfigurationSettingGrid th { font-size: 0.90em !important; } /* Single-line truncation — table-layout:fixed keeps every column within the viewport (no horizontal scroll) and stops big values (e.g. email HTML) from ballooning row height. */ #ConfigurationSettingGrid tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .config-grid-scroll-wrapper { max-height: calc(100vh - 320px); min-height: 120px; overflow-x: hidden; overflow-y: auto; } #ConfigurationSettingGrid table { table-layout: fixed; width: 100%; } #ConfigurationSettingGrid thead th { position: sticky; top: 0; z-index: 2; background-color: var(--kendo-color-app-surface, #fff); white-space: normal; box-shadow: inset 0 1px 0 var(--kendo-color-border, #dee2e6), inset 0 -1px 0 var(--kendo-color-border, #dee2e6); } .k-tooltip { max-width: 800px !important; } .k-tooltip-content { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; max-height: 400px; overflow-y: auto; } /********* REJECTION REASON SECTION ****************/ .rejection-reason-popup .p-3 { padding: 12px !important; } .rejection-reason-popup .border-top { padding-top: 12px !important; padding-bottom: 12px !important; } .k-window-content#NewRejectionReasonWindow { padding-top: 12px !important; padding-bottom: 12px !important; } .field-with-clear { position: relative; } .field-with-clear .field-clear { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 5; color: #adb5bd; font-size: 13px; } .field-with-clear .field-clear:hover { color: #5f5f5f; } .textarea-with-clear .field-clear { top: 16px; transform: none; } /* Search results (item + category matching) */ .config-search-count { font-size: 12px; color: #6c757d; margin: 4px 2px 8px; } .config-search-results { margin-top: 4px; } .config-search-item { display: flex; flex-direction: column; padding: 5px 10px 5px 30px; border-radius: 6px; cursor: pointer; } .config-search-item:hover { background: #f5f7fa; } .config-search-item .csi-code { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Matched substring — bold + blue */ .config-search-results strong, .config-group strong { font-weight: 700; color: #0d6efd; } /* ~5s blue highlight on the located grid row, then fade back */ .config-row-highlight > td { background-color: #cfe2ff !important; transition: background-color 0.6s ease; } /* ======================================================================================================================== END - CONFIGURATION SETTINGS PAGE ======================================================================================================================== */ .access-denied-card { background-color: var(--kendo-color-app-surface, #fff); border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 6px; min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; padding: 24px; margin: 0; } .access-denied { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 40px; text-align: center; } .access-denied-icon { font-size: 48px; line-height: 1; color: var(--kendo-color-base-subtle, #dee2e6); } .access-denied-title { font-size: 16px; font-weight: 700; line-height: 1.42; color: var(--kendo-color-on-app-surface, #343a40); } .access-denied-message { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.42; color: var(--kendo-color-subtle, #596169); } .access-denied-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; font-size: 14px; line-height: 1.42; text-decoration: none; color: var(--kendo-color-on-base, #343a40); background-color: var(--kendo-color-base, #e5e8ec); border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)); border-radius: 4px; } .access-denied-btn:hover { color: var(--kendo-color-on-base, #343a40); text-decoration: none; background-color: #d9dce1; } .crew-filter-checkbox { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; cursor: pointer; } /* ==================================================== Crew Statement ==================================================== */ .crew-statement { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; background: #fff; border-radius: 8px; padding: 20px 24px; margin: 16px 0 24px; } .crew-statement .crew-statement-invoice-number { font-size: 16px; font-weight: 700; } .crew-statement .k-grid, .crew-statement .k-input, .crew-statement .k-picker, .crew-statement .k-button, .crew-statement .k-multiselect { font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .crew-statement .crew-statement-page-header { margin-bottom: 16px; } .crew-statement .crew-statement-title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .crew-statement .crew-statement-title { color: var(--kendo-color-on-app-surface, #343a40); font-size: 1.5rem; font-weight: 700; margin: 0; } .crew-statement .crew-statement-header-right { display: flex; align-items: center; gap: 12px; } .crew-statement .crew-statement-header-actions { display: contents; } .crew-statement .crew-statement-generated { color: #555; font-size: 0.9rem; } .crew-statement .crew-statement-header-band { display: flex; align-items: center; margin-bottom: 16px; } .crew-statement .crew-statement-logo { min-width: 148px; padding: 0 16px; } .crew-statement .crew-statement-logo-img { max-height: 30px; } .crew-statement .crew-statement-header-fields { display: flex; align-items: center; flex: 1; gap: 8px; background: #f6f8fb; border-radius: 4px; padding: 16px; } .crew-statement .crew-statement-header-field { display: flex; flex-direction: column; flex: 1; min-width: 0; } .crew-statement .crew-statement-header-separator { width: 1px; height: 40px; background: #dee2e6; flex-shrink: 0; } .crew-statement .crew-statement-field-label { font-size: 0.8rem; color: #6c757d; margin-bottom: 2px; } .crew-statement .crew-statement-field-value { font-size: 0.95rem; } .crew-statement .crew-statement-filter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .crew-statement .crew-statement-period-btns { display: flex; gap: 8px; } .crew-statement .crew-statement-period-btn { color: #2B2F32; } .crew-statement .crew-statement-period-btn.active { color: #fff; } .crew-statement .crew-statement-status-filter { display: flex; align-items: center; } .crew-statement .crew-statement-status-filter .k-multiselect .k-chip-list { flex-wrap: nowrap; } .crew-statement .crew-statement-status-filter .k-multiselect { font-size: 14px; } .crew-statement .crew-statement-status-filter .k-multiselect .k-chip { background: transparent; border: none; box-shadow: none; color: var(--kendo-color-on-app-surface, #343a40); } .crew-statement .crew-statement-status-filter .k-multiselect .k-chip .k-chip-remove-action { display: none; } /* Kendo MultiSelect has no built-in dropdown arrow — add the chevron the design expects. */ .crew-statement .crew-statement-status-filter .k-multiselect { position: relative; } /* Reserve room for the caret only in the empty state. Once a value is selected, Kendo's own .k-clear-value is a flex sibling of .k-input-values with its own reserved slot — adding this padding unconditionally double-reserved space in that state and forced the chip + hidden search input to wrap onto a second line, inflating the widget's height. */ .crew-statement .crew-statement-status-filter .k-multiselect .k-input-values { padding-right: 26px; } .crew-statement .crew-statement-status-filter .k-multiselect:has(.k-chip) .k-input-values { padding-right: 0; } /* Caret and Kendo's clear (×) button are mutually exclusive: show the caret only in the empty/placeholder state. Once a value is selected Kendo shows its clear button (a chip is rendered), so hide the caret to avoid two icons overlapping. */ .crew-statement .crew-statement-status-filter .k-multiselect:has(.k-chip)::after { display: none; } .crew-statement .crew-statement-status-filter .k-multiselect::after { content: ""; position: absolute; top: 50%; right: 12px; margin-top: -2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6c757d; pointer-events: none; } .crew-statement .crew-statement-cards { display: flex; gap: 16px; margin-bottom: 16px; } .crew-statement .crew-statement-content { margin-bottom: 1rem; } .crew-statement .crew-statement-card { flex: 1; border-radius: 4px; padding: 16px; background: #fff; box-shadow: 0px 1px 1.5px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.1); } .crew-statement .crew-statement-card-label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 6px; } .crew-statement .crew-statement-card-value { font-size: 1.3rem; font-weight: 600; } .crew-statement .crew-statement-info-banner { font-size: 0.875rem; border-left: 4px solid #0074e4; border-radius: 0; } .crew-statement .crew-statement-empty { color: #6c757d; } .crew-statement .crew-statement-allpaid-banner { font-size: 0.9rem; } .crew-statement .crew-statement-payment-history { background: #f6f8fb; border-radius: 8px; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; } .crew-statement .cs-pay-row { background: #fff; border-radius: 6px; padding: 8px 12px; display: flex; gap: 32px; align-items: center; overflow: hidden; } .crew-statement .cs-pay-row + .cs-pay-row { margin-top: 10px; } .crew-statement .cs-pay-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .crew-statement .cs-pay-label { font-size: 10px; color: #596169; line-height: 1; white-space: nowrap; } .crew-statement .cs-pay-val { font-size: 14px; color: #1a2232; line-height: 1.42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crew-statement .cs-pay-amount { color: #218b54; font-weight: 700; } .crew-statement .cs-pay-status { color: #218b54; } .crew-statement .crew-statement-invoice-card { background: #f6f8fb; overflow: hidden; } .crew-statement .crew-statement-invoice-toggle { background: #f6f8fb; user-select: none; } .crew-statement .crew-statement-invoice-toggle:hover { background: #ebeef2; } .crew-statement .crew-statement-invoice-sub { font-size: 0.875rem; background: #f6f8fb; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .crew-statement .crew-statement-sub-sep { display: inline-block; width: 1px; height: 14px; background: rgba(0,0,0,0.12); vertical-align: middle; flex-shrink: 0; } .crew-statement .crew-statement-details-btn { background: #e5e8ec; border: 1px solid rgba(0,0,0,0.08); color: #343a40; font-size: 0.8125rem; padding: 4px 10px; border-radius: 4px; text-decoration: none; white-space: nowrap; display: inline-block; } .crew-statement .crew-statement-details-btn:hover { background: #d8dce1; color: #343a40; text-decoration: none; } .crew-statement .crew-statement-movement-on { display: inline-block; padding: 1px 6px; font-size: 0.75rem; border: 1px solid #319064; color: #319064; border-radius: 9999px; line-height: 1.4; } .crew-statement .crew-statement-movement-off { display: inline-block; padding: 1px 6px; font-size: 0.75rem; border: 1px solid var(--kendo-color-error, #d63939); color: var(--kendo-color-error, #d63939); border-radius: 9999px; line-height: 1.4; } .crew-statement .crew-statement-table { font-size: 0.875rem; margin-bottom: 0; table-layout: fixed; width: 100%; } .crew-statement .crew-statement-table th:first-child, .crew-statement .crew-statement-table td:first-child { padding-left: 1rem; } .crew-statement .crew-statement-table th:last-child, .crew-statement .crew-statement-table td:last-child { padding-right: 1rem; } /* Reset Bootstrap's thick 2px border-top on tbody that conflicts with thead th border-bottom */ .crew-statement .crew-statement-table > :not(:first-child) { border-top: none; } .crew-statement .crew-statement-table thead th { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); font-weight: 700; } .crew-statement .crew-statement-table tbody tr td { background: #fff; border: none; } .crew-statement .crew-statement-table tbody tr:nth-child(even) td { background: #fafbfd; } /* Payment lines are highlighted by type (not row position), per Figma "Payments Highlighted (Option 3 — Hybrid)" (node 5764:99202): no row background change — just a left accent bar + bold amount, so every payment is easy to spot without altering the zebra pattern. */ .crew-statement .crew-statement-table tbody tr.cs-payment-row td:first-child { position: relative; } .crew-statement .crew-statement-table tbody tr.cs-payment-row td:first-child::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #0f5132; } .crew-statement .crew-statement-table tbody tr.cs-payment-row td.cs-payment-amount { color: #0f5132; font-weight: 700; } .crew-statement .crew-statement-table tfoot tr td { background: #fff; font-size: 14px; font-weight: 700; border-top: none; border-bottom: 1px solid rgba(0,0,0,0.08); } /* ---------------------------------------------------- Crew Statement — Responsive ---------------------------------------------------- */ @media (max-width: 1199px) { .crew-statement .crew-statement-header-fields { flex-wrap: wrap; gap: 12px 24px; } .crew-statement .crew-statement-header-separator { display: none; } .crew-statement .crew-statement-filter-row { flex-wrap: wrap; gap: 12px; } .crew-statement .crew-statement-period-btns { flex-wrap: wrap; } } @media (max-width: 767px) { /* Header: title + generated on row 1, action buttons full-width on row 2 */ .crew-statement .crew-statement-title-row { flex-wrap: wrap; align-items: baseline; gap: 12px; } .crew-statement .crew-statement-title { flex: 1 1 auto; font-size: 21px; } .crew-statement .crew-statement-header-right { display: contents; } .crew-statement .crew-statement-generated { order: 1; margin-left: auto; } .crew-statement .crew-statement-header-actions { order: 2; display: flex; flex: 1 1 100%; gap: 8px; margin-top: 4px; } .crew-statement .crew-statement-header-actions #paymentHistoryBtn, .crew-statement .crew-statement-header-actions #printStatementBtn { flex: 1 1 0; margin-left: 0 !important; } /* Crew info band: drop logo, 2-col grid, Statement Period spans full width */ .crew-statement .crew-statement-header-band { display: block; } .crew-statement .crew-statement-logo { display: none; } .crew-statement .crew-statement-header-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .crew-statement .crew-statement-header-field:last-child { grid-column: 1 / -1; } /* Filter row: stack; status label above a full-width MultiSelect */ .crew-statement .crew-statement-filter-row { flex-direction: column; align-items: stretch; } .crew-statement .crew-statement-status-filter { gap: 6px; } .crew-statement .crew-statement-status-filter .k-multiselect { width: 100% !important; } /* Summary cards: single column */ .crew-statement .crew-statement-cards { flex-direction: column; gap: 12px; } /* Invoice card: solid white card (not grey w/ floating row boxes) */ .crew-statement .crew-statement-invoice-card { position: relative; padding-bottom: 44px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; } .crew-statement .crew-statement-invoice-toggle, .crew-statement .crew-statement-invoice-toggle:hover, .crew-statement .crew-statement-invoice-sub { background: #fff; } .crew-statement .crew-statement-invoice-toggle { flex-wrap: wrap; gap: 8px; } /* "View Invoice Details" -> full-width footer bar pinned to card bottom (padding-bottom on the card reserves its space so it never overlaps the total) */ .crew-statement .crew-statement-details-btn { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border: none; border-radius: 0; color: #0d6efd; text-align: center; font-size: 14px; padding: 10px 0; } .crew-statement .crew-statement-details-btn:hover { background: #f8f9fb; color: #0d6efd; text-decoration: none; } .crew-statement .crew-statement-invoice-sub { gap: 12px; font-size: 10px; } .crew-statement .crew-statement-invoice-sub .crew-statement-movement-on, .crew-statement .crew-statement-invoice-sub .crew-statement-movement-off { font-size: 10px; } /* Meta label shortens "Movement Date" -> "Date" on mobile (matches Figma) */ .crew-statement .crew-statement-md-prefix { display: none; } .crew-statement .crew-statement-invoice-sub .crew-statement-sub-sep { display: none; } /* Line-item table -> stacked card rows (Option A: right column = running balance) */ .crew-statement .crew-statement-table colgroup, .crew-statement .crew-statement-table thead { display: none; } .crew-statement .crew-statement-movement-off { padding: 0; border: none; color: unset; } .crew-statement .crew-statement-table th:first-child, .crew-statement .crew-statement-table td:first-child { padding-left: 0; } .crew-statement .crew-statement-table, .crew-statement .crew-statement-table tbody, .crew-statement .crew-statement-table tfoot { display: block; } .crew-statement .crew-statement-table tbody tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; padding: 8px 16px; } .crew-statement .crew-statement-table tbody tr td { padding: 0; } .crew-statement .crew-statement-table tbody td:nth-child(2) { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 500; } .crew-statement .crew-statement-table tbody td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: 10px; color: #6c757d; } /* Charge/Payment amount (whichever is present) -> top-right */ .crew-statement .crew-statement-table tbody td:nth-child(3), .crew-statement .crew-statement-table tbody td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; font-size: 12px; } /* Running balance -> bottom-right, labelled "Bal:" (matches Figma) */ .crew-statement .crew-statement-table tbody td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; font-size: 10px; color: #6c757d; } .crew-statement .crew-statement-table tbody td:nth-child(5)::before { content: "Bal: "; } /* Hide the empty charge/payment cell so only the real amount shows */ .crew-statement .crew-statement-table tbody td.cs-empty { display: none; } .crew-statement .crew-statement-table tfoot tr { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .crew-statement .crew-statement-table tfoot tr td { padding: 0; border: none; } .crew-statement .crew-statement-table tfoot td:nth-child(2), .crew-statement .crew-statement-table tfoot td:nth-child(3) { display: none; } /* Payment History popup: clean white rows with hairline separators (Figma 5305:114645) */ .crew-statement .crew-statement-payment-history { background: transparent; padding: 0; gap: 0; } .crew-statement .crew-statement-payment-total { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: 12px; } .crew-statement .crew-statement-payment-total .text-success { font-size: 13px; font-weight: 700; } .crew-statement .cs-pay-row { flex-wrap: wrap; gap: 2px 8px; padding: 8px 0; background: transparent; border-radius: 0; } .crew-statement .cs-pay-row + .cs-pay-row { margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .crew-statement .cs-pay-label { display: none; } .crew-statement .cs-pay-col { flex: 0 0 auto; min-width: 0; } .crew-statement .cs-pay-col:nth-child(4) { order: 1; flex: 1 1 auto; } .crew-statement .cs-pay-col:nth-child(4) .cs-pay-val { font-size: 15px; font-weight: 700; color: #146c43; } .crew-statement .cs-pay-col:nth-child(5) { order: 2; flex: 0 0 auto; text-align: right; } .crew-statement .cs-pay-col:nth-child(5) .cs-pay-val { font-size: 13px; font-weight: 700; color: #146c43; } .crew-statement .cs-pay-col:nth-child(2) { order: 3; flex: 1 1 100%; } .crew-statement .cs-pay-col:nth-child(1) { order: 4; } .crew-statement .cs-pay-col:nth-child(3) { order: 5; flex: 1 1 auto; } .crew-statement .cs-pay-col:nth-child(3) .cs-pay-val::before { content: "\00a0\00b7\00a0"; color: #343a40; } /* No dangling separator when the reference is empty */ .crew-statement .cs-pay-col:nth-child(3) .cs-pay-val:empty::before { content: none; } .crew-statement .cs-pay-col:nth-child(1) .cs-pay-val, .crew-statement .cs-pay-col:nth-child(3) .cs-pay-val { font-size: 11px; color: #343a40; } /* Font sizes matched to Figma mobile 393 (node 5305:107836) */ .crew-statement .crew-statement-generated { font-size: 12px; } .crew-statement .crew-statement-field-label { font-size: 11px; } .crew-statement .crew-statement-field-value { font-size: 14px; } .crew-statement .crew-statement-card-label { font-size: 16px; } .crew-statement .crew-statement-card-value { font-size: 21px; } .crew-statement .crew-statement-status-filter label { font-size: 13px; } .crew-statement .crew-statement-table tfoot tr td { font-size: 12px; } .crew-statement .cs-pay-col:nth-child(2) .cs-pay-val { font-size: 13px; } } /* ===================================================================== Email Notifications — "Edit email" popup (Kendo Window content). Scoped by .en-editor (the Window is re-parented to , outside the page). ===================================================================== */ .en-editor { font-size: 14px; color: #343a40; } /* Kendo's own .k-window default is position:absolute, so it scrolls with the page — .center() only computes top/left once at open time, never recalculated on scroll. Both these are modal Kendo Windows (re-parented to , overlay-backed), so they must stay pinned to the viewport instead. Kendo's .center() computes top/left assuming position:absolute — it adds the page's scroll offset AT OPEN TIME so the math lands correctly in document coordinates (top = scrollY + (viewportH - wndH)/2). Switching to fixed alone leaves that baked-in scrollY untouched, so opening the popup after scrolling down pushes it off the bottom of the viewport by however far the page had scrolled. Centering purely in CSS (ignoring Kendo's inline top/left entirely) sidesteps the mismatch — safe here since both windows have title:false/resizable:false, i.e. no drag handle to reposition them anyway. */ .en-editor-window, .en-audit-window { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .en-editor-window .k-window-content { /* Kendo theme sets padding-block: 2.5rem !important on .k-window-content, so !important is required. */ padding-block: 1rem !important; padding-inline: 20px !important; } /* Custom header (Kendo title bar is disabled): title + subtitle grouped, divider below the group. */ .en-editor-header { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, .16); } .en-editor-title { font-size: 21px; font-weight: 700; line-height: 1.33; color: #343a40; } .en-editor-subtitle { font-size: 12px; margin-top: 2px; } .en-editor-columns { display: flex; gap: 24px; align-items: flex-start; } .en-editor-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .en-editor-label { font-size: 14px; font-weight: 700; margin: 0; } /* Kendo TextBox (clear-button) wraps the input in .k-input — that wrapper carries the border. Make the wrapper span the column; the inner input has no border of its own (no k-textbox class). */ .en-editor-col .k-textbox, .en-editor-col .k-input { width: 100%; } .en-editor-help { font-size: 12px; opacity: .85; margin: 0 0 10px; } .en-editor-body { width: 100%; box-sizing: border-box; min-height: 260px; font-family: 'Roboto Mono', 'Consolas', 'Courier New', monospace; font-size: 12px; line-height: 1.42; padding: 8px; color: #343a40; border: 1px solid rgba(0, 0, 0, .16); border-radius: 4px; resize: vertical; } .en-editor-vars { flex: 0 0 340px; width: 340px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 8px; overflow: hidden; } .en-vars-header { padding: 14px 16px 12px; } .en-vars-title { font-size: 14px; font-weight: 700; } .en-vars-brace { font-family: monospace; } .en-vars-hint { font-size: 11px; opacity: .85; margin: 6px 0 0; } .en-vars-list { border-top: 1px solid rgba(0, 0, 0, .16); } .en-var-row { padding: 10px 16px; } .en-var-row + .en-var-row { border-top: 1px solid rgba(0, 0, 0, .08); } .en-var-top { display: flex; align-items: center; gap: 8px; } .en-var-token { flex: 1 1 auto; font-family: monospace; font-weight: 700; font-size: 13px; color: #343a40; background: none; padding: 0; } .en-var-copy { border: 0; background: none; padding: 4px; cursor: pointer; color: #343a40; display: inline-flex; align-items: center; justify-content: center; } .en-var-copy:hover { color: #0074e4; } .en-var-desc { font-size: 12px; margin-top: 2px; } .en-var-eg { font-size: 12px; opacity: .85; margin-top: 2px; } .en-editor-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e8ec; } .en-editor-right { display: flex; gap: 8px; } /* Confirmation dialog (Restore defaults / unsaved-changes) — Figma 853:167213. Sections carry their own 16px padding, so the Kendo window content padding is zeroed. */ .en-confirm-window .k-window-content { padding: 0 !important; } .en-confirm { font-size: 14px; color: #424242; } .en-confirm-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid #e5e8ec; } .en-confirm-title { font-size: 20px; font-weight: 700; line-height: 1.2; } .en-confirm-x { border: 0; background: none; padding: 0; cursor: pointer; color: #212529; font-size: 16px; line-height: 1; } .en-confirm-body { padding: 16px; line-height: 1.42; min-height: 64px; box-sizing: border-box; } .en-confirm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px; border-top: 1px solid #e5e8ec; } /* ============================================================ Dispute Reasons config sub-page ============================================================ */ #drPanelDialog.k-window-content { padding-block: unset !important; } .configuration-settings-page .dispute-reasons-page { --cs-primary: #0074e4; } .configuration-settings-page .dr-filter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .configuration-settings-page .dr-search { flex: 1 1 auto; } .configuration-settings-page .dr-search .form-control { font-size: 14px; } .configuration-settings-page .dr-status { display: flex; flex-direction: column; flex: 0 0 240px; width: 240px; } .configuration-settings-page .dr-status .form-select, .configuration-settings-page .dr-status .k-dropdownlist, .configuration-settings-page .dr-status .k-input-inner { font-size: 14px; } .configuration-settings-page .dr-status .form-select, .configuration-settings-page .dr-status .k-dropdownlist { height: 35px; } .configuration-settings-page .dr-status .k-dropdownlist .k-input-inner { height: 35px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; } .configuration-settings-page .dr-status-label { font-size: 14px; font-weight: 700; color: #212529; margin-bottom: 4px; } .configuration-settings-page .dr-list { margin-top: 8px; border: none; } .configuration-settings-page .dr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--cs-border); } .configuration-settings-page .dr-name { display: inline-block; color: var(--cs-primary); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; } .configuration-settings-page .dr-name:hover { text-decoration: none; } .configuration-settings-page .dr-name-static { cursor: default; } .configuration-settings-page .dr-name-static:hover { text-decoration: none; } .configuration-settings-page .dr-desc { font-size: 12px; color: var(--cs-subtle-text); margin: 4px 0 0; } .configuration-settings-page .dr-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 10px; color: var(--cs-subtle-text); } .configuration-settings-page .dr-used { display: inline-flex; align-items: center; gap: 4px; } .configuration-settings-page .dr-badge-used { background: #e9ecef; color: #000000; border-radius: 9999px; padding: 2px 8px; font-weight: 400; } .configuration-settings-page .dr-updated .fa-pen { margin-right: 4px; font-size: 12px; } .configuration-settings-page .dr-row-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .configuration-settings-page .dr-badge-status { height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 4px; font-size: 14px; font-weight: 400; border: 1px solid transparent; } .configuration-settings-page .dr-status-active { background: var(--kendo-color-success-subtle, #d1e7dd); color: var(--kendo-color-success-on-subtle, #0f5132); border-color: var(--kendo-color-success-emphasis, #75b798); } .configuration-settings-page .dr-status-inactive { background: #e9ecef; color: #495057; border-color: #dee2e6; } .configuration-settings-page .dr-audit-btn { width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--cs-border-alt); border-radius: 4px; color: var(--cs-text); cursor: pointer; } .configuration-settings-page .dr-audit-btn:hover { background: #eceff3; } .configuration-settings-page .dr-empty { padding: 24px 0; color: var(--cs-subtle-text); font-size: 14px; } .dr-panel-window .k-window-content { padding: 0; } .dr-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.16); } .dr-panel-title { font-size: 21px; font-weight: 700; line-height: 1.33; color: #343a40; margin: 0; } .dr-panel-body { padding: 16px; } .dr-form-group { margin-bottom: 16px; } .dr-form-group:last-child { margin-bottom: 0; } .dr-form-label { display: block; font-size: 14px; font-weight: 700; color: #343a40; margin-bottom: 6px; } .dr-field { position: relative; } .dr-field .dr-clear { position: absolute; right: 10px; top: 8px; color: #6c757d; cursor: pointer; display: none; font-size: 13px; } .dr-field input.form-control + .dr-clear { top: 50%; transform: translateY(-50%); } .dr-field textarea.form-control { resize: vertical; padding-right: 28px; font-size: 14px; } .dr-field input.form-control { padding-right: 28px; font-size: 14px; } .dr-input-error { border-color: #d63939 !important; } .dr-error { display: none; color: #d63939; font-size: 12px; margin-top: 4px; } .dr-check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; color: #343a40; margin: 0; } .dr-check input[type="checkbox"] { accent-color: #0074e4; width: 16px; height: 16px; } .dr-help { font-size: 12px; font-style: italic; line-height: 1.5; color: #596169; margin: 6px 0 0; } .dr-panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px; border-top: 1px solid rgba(0, 0, 0, 0.16); } /* Panel buttons — the panel is outside the shell scope, so style them here. */ .dr-panel-footer .btn-primary { background-color: #0074e4; border-color: #0074e4; } .dr-panel-footer .btn-primary:hover { background-color: #0063c4; border-color: #0063c4; } .dr-panel-footer .cs-btn-discard { background: #e5e8ec; border: 1px solid rgba(0, 0, 0, 0.08); color: #343a40; } .dr-panel-footer .cs-btn-discard:hover { background: #dadee3; color: #343a40; } /* ============================================================ Expense Types page ============================================================ */ .expense-types-page .k-grid-toolbar .k-grid-add { color: var(--kendo-color-on-primary, #ffffff); background-color: var(--kendo-color-primary, #0074e4) !important; border-color: var(--kendo-color-primary, #0074e4) !important; } .expense-types-page .k-grid-toolbar .k-grid-add:hover, .expense-types-page .k-grid-toolbar .k-grid-add:focus, .expense-types-page .k-grid-toolbar .k-grid-add.k-hover, .expense-types-page .k-grid-toolbar .k-grid-add.k-focus { color: var(--kendo-color-on-primary, #ffffff); background-color: var(--kendo-color-primary-hover, #005acb) !important; border-color: var(--kendo-color-primary-hover, #005acb) !important; } .expense-types-page .k-grid .k-grid-edit { color: var(--kendo-color-on-app-surface, #343a40); background-color: var(--kendo-color-base, #e5e8ec) !important; border-color: var(--kendo-color-border, #00000014) !important; } .expense-types-page .k-grid .k-grid-edit:hover, .expense-types-page .k-grid .k-grid-edit:focus, .expense-types-page .k-grid .k-grid-edit.k-hover, .expense-types-page .k-grid .k-grid-edit.k-focus { color: var(--kendo-color-on-app-surface, #343a40); background-color: #d7dce2 !important; border-color: var(--kendo-color-border, #00000014) !important; } #expenseTypeGrid .k-grid-edit-command, #collectionExpenseTypeGrid .k-grid-edit-command { color: #343A40 !important; background-color: #E5E8EC !important; border-color: rgba(0, 0, 0, 0.08) !important; } #expenseTypeGrid .k-grid-edit-command:hover, #expenseTypeGrid .k-grid-edit-command:active, #collectionExpenseTypeGrid .k-grid-edit-command:hover, #collectionExpenseTypeGrid .k-grid-edit-command:active { background-color: #DEE2E6 !important; } #expenseTypeGrid .k-grid-save-command, #collectionExpenseTypeGrid .k-grid-save-command { width: 76px; } #expenseTypeGrid .k-grid-cancel-command, #collectionExpenseTypeGrid .k-grid-cancel-command { width: 80px; } #expenseTypeGrid .k-grid-save-command svg, #expenseTypeGrid .k-grid-cancel-command svg, #collectionExpenseTypeGrid .k-grid-save-command svg, #collectionExpenseTypeGrid .k-grid-cancel-command svg { width: 16px; height: 16px; } /* TabStrip — active tab in Figma primary blue, inactive neutral */ .expense-types-page .k-tabstrip-items .k-item .k-link { color: var(--kendo-color-on-app-surface, #343a40); } .expense-types-page .k-tabstrip-items .k-item.k-active .k-link { color: var(--kendo-color-primary, #0074e4); font-weight: 400; } .expense-types-page .k-tabstrip-items .k-tabstrip-item { color: var(--kendo-color-primary, #0074e4); font-weight: 400; } .expense-types-page .k-tabstrip-items .k-tabstrip-item .k-link { font-size: 14px; } .expense-types-page .k-tabstrip-items-wrapper .k-tabstrip-item.k-focus { box-shadow: none; } .expense-types-page .k-grid .k-button.k-button-solid-primary { font-size: 14px; color: #ffffff; border: 1px solid #0074E4 !important; background-color: #0074E4 !important; } .expense-types-page .k-grid .k-button.k-button-solid-primary:hover, .expense-types-page .k-grid .k-button.k-button-solid-primary:active, .expense-types-page .k-grid .k-button.k-button-solid-primary.k-state-active { background-color: #005ACB !important; border: 1px solid #005ACB !important; } .expense-types-page .k-button.k-button-solid-base { font-size: 14px; color: #343A40; border: 1px solid #00000014 !important; background-color: #E5E8EC !important; } /* Dropdown expand/arrow button keeps the base style but with no border */ .expense-types-page .k-button.k-button-solid-base.k-input-button, .expense-types-page .k-button.k-button-solid-base.k-select { border: none !important; } .expense-types-page .k-button.k-button-solid-base:hover, .expense-types-page .k-button.k-button-solid-base:active, .expense-types-page .k-button.k-button-solid-base.k-state-active { background-color: #DEE2E6 !important; } /* Inline-edit editors — uniform style so plain text boxes match the Kendo dropdown / multiselect editors (Group, Position Codes, Position Groups). */ .expense-types-page .k-grid td input.text-box, .expense-types-page .k-grid td input[type="text"]:not(.k-input-inner) { box-sizing: border-box; width: 100%; height: 34px; padding: 4px 8px; font-size: 14px; line-height: 1.4285; color: #343A40; border: 1px solid #00000026; border-radius: 4px; background-color: #ffffff; } .expense-types-page .k-grid td input.text-box:focus, .expense-types-page .k-grid td input[type="text"]:not(.k-input-inner):focus { outline: none; border-color: #0074E4; } .expense-types-page .k-grid td .k-dropdownlist { max-height: 34px; } .expense-types-page .k-input:focus-within, .expense-types-page .k-input.k-input-solid:focus-within, .expense-types-page .k-grid td .k-dropdownlist:focus-within { border-color: #0074E4; color: #343A40; background-color: #ffffff; box-shadow: unset; } .expense-types-page .k-checkbox:checked, .expense-types-page .k-checkbox.k-checked, .expense-types-page .k-checkbox:indeterminate, .expense-types-page .k-checkbox.k-indeterminate, .expense-types-page .k-checkbox:checked:focus, .expense-types-page .k-checkbox.k-checked.k-focus { border-color: #0074E4; color: #FFFFFF; background-color: #0074E4; box-shadow: unset; } .expense-types-page .k-checkbox:focus { border-color: #0074E4; box-shadow: unset; } .expense-types-page .k-grid .k-checkbox:disabled { opacity: 0.6; } .expense-types-page .k-grid td .k-button.k-icon-button { width: 30px; height: 30px; padding: 0; } .expense-types-page .k-grid td .k-dropdownlist .k-button.k-icon-button { width: 32px; height: 32px; padding: 0; } /* Sub-Types & Log button icon color */ .expense-types-page .k-grid td .k-button.k-icon-button .expense-icon, .expense-types-page .k-grid td .k-button.k-icon-button .expense-icon i { color: #343A40; } /* Uniform row height in view & edit mode. Editors are 34px, so fix the cell height and trim vertical padding so an editing row is the same height as a display row. */ .expense-types-page .k-grid td, .expense-types-page .k-grid .k-table-td { height: 48px; padding-top: 4px; padding-bottom: 4px; vertical-align: middle; box-sizing: border-box; } /* Uniform 4px border-radius on all controls (buttons, textboxes, dropdowns, multiselects, ...) — excluding the dropdown expand/arrow button (.k-input-button / .k-select) */ .expense-types-page .k-button:not(.k-input-button):not(.k-select), .expense-types-page .k-input, .expense-types-page .k-textbox, .expense-types-page .k-picker, .expense-types-page .k-dropdownlist, .expense-types-page .k-combobox, .expense-types-page .k-multiselect, .expense-types-page .k-datepicker, .expense-types-page .k-numerictextbox { border-radius: 4px !important; } .expense-types-page .k-checkbox { border-radius: 2px !important; width: 16px !important; height: 16px !important; } /* Grid header in bold */ .expense-types-page .k-grid-header th, .expense-types-page .k-grid-header .k-cell-inner, .expense-types-page .k-grid-header .k-column-title, .expense-types-page .k-grid-header .k-link { font-weight: 700; } /* ============================================================ User Administration — mirrors the .expense-types-page Collections design system. ============================================================ */ .user-administration-page { background-color: #f6f8fb; padding: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--kendo-border-radius-md, 6px); color: var(--kendo-color-on-app-surface, #343a40); } .user-administration-page .page-header-card { background-color: var(--kendo-color-surface-alt, #fff); border-radius: var(--kendo-border-radius-md, 6px); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .user-administration-page .back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; text-decoration: none; border-radius: var(--kendo-border-radius-sm, 4px); font-size: 14px; line-height: 1.42; color: var(--kendo-color-on-app-surface, #343a40); } .user-administration-page .back-link:hover { color: var(--kendo-color-on-app-surface, #212529); background-color: var(--kendo-color-surface, #f6f8fb); text-decoration: none; } .user-administration-page .page-title { margin: 0; padding: 0 8px; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--kendo-color-on-app-surface, #212529); } .user-administration-page .card { border: 0; border-radius: var(--kendo-border-radius-md, 6px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); background-color: #fff; } .user-administration-page #useradminpopupwrapper { width: 100%; min-height: 450px; margin-left: unset; } .user-administration-page .ua-columns { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .user-administration-page .ua-list-col { flex: 752 1 0; min-width: 320px; } .user-administration-page .ua-detail-col { flex: 636 1 0; min-width: 320px; } /* Anchors the Kendo loading mask to the panel. The height matches the loaded card so the mask is centred in the same place before the first row loads; :empty cannot be used because the mask itself is a child. */ .user-administration-page #UserDetails { position: relative; min-height: 450px; } .user-administration-page .ua-detail-placeholder { height: 450px; } .user-administration-page .k-tabstrip-items .k-item .k-link { color: var(--kendo-color-on-app-surface, #343a40); font-size: 14px; } .user-administration-page .k-tabstrip-items .k-item.k-active .k-link { color: var(--kendo-color-primary, #0074e4); font-weight: 400; } .user-administration-page .k-tabstrip-items .k-tabstrip-item { color: var(--kendo-color-primary, #0074e4); font-weight: 400; } .user-administration-page .k-tabstrip-items-wrapper .k-item.k-focus { box-shadow: none; } .user-administration-page .k-tabstrip > .k-content, .user-administration-page .k-tabstrip-content { padding: 12px 0 0; } .user-administration-page .ua-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 12px 12px 12px; } .user-administration-page .ua-search { position: relative; width: 260px; max-width: 45%; } .user-administration-page .ua-search .k-textbox { height: 30px; padding-left: 28px; } .user-administration-page .ua-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #596169; font-size: 12px; pointer-events: none; z-index: 1; } .user-administration-page .btn-ua-primary { color: #fff; background-color: #0074e4; border: 1px solid #0074e4; border-radius: 4px; padding: 4px 12px; font-size: 14px; } .user-administration-page .btn-ua-primary:not(:disabled):hover, .user-administration-page .btn-ua-primary:not(:disabled):focus { color: #fff; background-color: #005acb; border-color: #005acb; } .user-administration-page .btn-ua-secondary { color: #343a40; background-color: #e5e8ec; border: 1px solid #00000014; border-radius: 4px; padding: 6px 14px; font-size: 14px; } .user-administration-page .btn-ua-secondary:not(:disabled):hover { background-color: #dee2e6; color: #343a40; } .user-administration-page .ua-detail-actions .btn:disabled { opacity: .55; cursor: not-allowed; } .user-administration-page .ua-log-btn { background-color: #E5E8EC; border: 1px solid #00000014; border-radius: 4px; color: #343a40; width: 30px; height: 30px; } .user-administration-page .k-grid-header th, .user-administration-page .k-grid-header .k-column-title, .user-administration-page .k-grid-header .k-link { font-weight: 700; } .user-administration-page .k-grid td { padding-block: 11px; } .user-administration-page .ua-list-col .k-grid { border-width: 0; margin-left: -1px; } .user-administration-page .ua-detail-card { padding: 0; } .user-administration-page .ua-detail-header { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 16px; } .user-administration-page .ua-detail-body { padding: 16px; } .user-administration-page .ua-detail-name { margin: 0 0 16px; font-size: 24px; font-weight: 700; color: #212529; word-break: break-word; } .user-administration-page .ua-detail-actions { display: flex; gap: 8px; flex-shrink: 0; } .user-administration-page .ua-detail-actions .btn { padding: 4px 12px; font-size: 14px; } .user-administration-page .ua-field { margin-bottom: 16px; } .user-administration-page .ua-field > label, .user-administration-page .ua-section-label { display: block; font-size: 14px; font-weight: 700; color: #343a40; margin-bottom: 4px; } .user-administration-page .ua-field .k-input, .user-administration-page .ua-field .k-picker, .user-administration-page .ua-field .text-box { width: 100%; } .user-administration-page .ua-field-readonly { background-color: #f1f3f5; border: 1px solid #e5e8ec; border-radius: 4px; padding-left: 12px; color: #6c757d; font-size: 14px; height: 30px; align-items: center; display: flex; } .user-administration-page .ua-row { display: flex; gap: 16px; } .user-administration-page .ua-row > .ua-field { flex: 1 1 0; min-width: 0; } .user-administration-page .ua-row > .ua-field.ua-field--half { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } .user-administration-page .ua-check-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; } .user-administration-page .ua-check { display: inline-flex; align-items: center; } .user-administration-page .k-button:not(.k-input-button):not(.k-select), .user-administration-page .k-input, .user-administration-page .k-textbox, .user-administration-page .k-picker, .user-administration-page .k-dropdownlist, .user-administration-page .k-multiselect, .user-administration-page .k-numerictextbox { border-radius: 4px !important; } .user-administration-page .k-checkbox { border-radius: 2px !important; width: 16px !important; height: 16px !important; } .user-administration-page .k-checkbox:checked, .user-administration-page .k-checkbox:checked:focus { border-color: #0074E4; background-color: #0074E4; color: #FFFFFF; box-shadow: unset; } .user-administration-page .k-checkbox:focus { border-color: #0074E4; box-shadow: unset; } .user-administration-page .k-input:focus-within, .user-administration-page .k-picker:focus-within { border-color: #0074e4; box-shadow: unset; } .user-administration-page .ua-detail-body .k-input-md:not(.k-multiselect), .user-administration-page .ua-detail-body .k-picker-md, .user-administration-page .ua-detail-body .k-multiselect.k-input-md { height: 30px; } .user-administration-page .ua-detail-body .k-input-md, .user-administration-page .ua-detail-body .k-picker-md, .user-administration-page .ua-detail-body .k-input-md .k-input-inner, .user-administration-page .ua-detail-body .k-picker-md .k-input-inner { font-size: 14px; } .user-administration-page .ua-detail-body .k-input-md .k-input-inner, .user-administration-page .ua-detail-body .k-picker-md .k-input-inner { padding-block: 4px; } .user-administration-page .ua-ms-summary .k-multiselect .k-input-values { flex-wrap: nowrap; max-height: 28px; overflow: hidden; align-items: center; padding: 0 8px; } .user-administration-page .ua-ms-summary .k-multiselect .k-chip-list { flex-wrap: nowrap; } .user-administration-page .ua-ms-summary .k-multiselect .k-chip { background: transparent; border: none; padding: 0; font-size: 14px; color: var(--kendo-color-on-app-surface, #343a40); } .user-administration-page .ua-ms-summary .k-multiselect .k-chip .k-chip-remove-action { display: none; } /* Passwords use plain inputs (no Kendo password widget) — match the compact Kendo control look. */ .user-administration-page .ua-detail-body .form-control { height: 30px; padding: 4px 8px; font-size: 14px; line-height: 1.42; border: 1px solid #ced4da; border-radius: 4px; box-shadow: none; } .user-administration-page .ua-detail-body .form-control:focus { border-color: #0074e4; box-shadow: none; outline: none; } .user-administration-page .ua-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e9edf2; } .user-administration-page .ua-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .user-administration-page .ua-section-title { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #0074e4; margin: 0; } .user-administration-page .ua-section-subtitle { font-size: 14px; color: #6c757d; margin: 2px 0 12px; } .user-administration-page .ua-chips-empty { font-size: 14px; color: #adb5bd; font-style: italic; } .user-administration-page .k-textbox { padding: unset; } .user-administration-page .k-chip, .user-administration-page .k-chip.k-chip-md { font-size: 14px; padding-block: unset; padding-inline: unset; } /* Red border on the Kendo wrapper, not the inner input (which rccl.css .input-validation-error borders). */ .user-administration-page .k-input:has(.input-validation-error), .user-administration-page .k-picker:has(.input-validation-error), .user-administration-page .k-multiselect:has(.input-validation-error) { border-color: #d63939; } .user-administration-page .k-input .input-validation-error.k-input-inner { border: 0; } .user-administration-page .ua-detail-body .form-control.input-validation-error { border-color: #d63939; } .user-administration-page .text-danger { font-size: 12px; color: #d63939; } .user-administration-page .ua-validation-summary.validation-summary-errors { margin-bottom: 16px; padding: 12px 16px; border: 1px solid #f5c2c2; border-radius: 6px; background-color: #fdf1f1; } .user-administration-page .ua-validation-summary ul { margin: 0; padding-left: 18px; font-size: 12px; color: #d63939; } /* MultiSelect popup (Ships / Expense Type) — Kendo renders it at body root, so unscoped. */ .ua-ms-selectall { display: flex; align-items: center; gap: 10px; padding: 4px 16px; color: #212529; cursor: pointer; } .ua-ms-item { display: flex; align-items: center; gap: 10px; } /* Mirrors the native Kendo bootstrap checkbox (.k-checkbox.k-checkbox-md). */ .ua-ms-check { position: relative; width: 16px; height: 16px; border: 1px solid #00000014; border-radius: 2px; display: inline-block; flex: 0 0 auto; background-color: #FFFFFF; box-sizing: border-box; } .k-list-item.k-selected .ua-ms-check, .k-item.k-state-selected .ua-ms-check, .ua-ms-check.ua-ms-checked { border-color: #0074E4; background-color: #0074E4; } /* Tick */ .k-list-item.k-selected .ua-ms-check::after, .k-item.k-state-selected .ua-ms-check::after, .ua-ms-check.ua-ms-checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Dash */ .ua-ms-check.ua-ms-indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; border: 0; border-radius: 1px; background-color: #0074E4; transform: none; } .k-list-item.k-selected:has(.ua-ms-item), .k-item.k-state-selected:has(.ua-ms-item) { background-color: transparent; color: #212529; } .toast-title { font-weight: bold; } .toast-message { -ms-word-wrap: break-word; word-wrap: break-word; } .toast-message a, .toast-message label { color: #ffffff; } .toast-message a:hover { color: #cccccc; text-decoration: none; } .toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; font-size: 20px; font-weight: bold; color: #ffffff; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); } .toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter: alpha(opacity=40); } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } .toast-top-center { top: 0; right: 0; width: 100%; } .toast-bottom-center { bottom: 0; right: 0; width: 100%; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; right: 0; width: 100%; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } #toast-container { position: fixed; z-index: 999999; pointer-events: none; /*overrides*/ } #toast-container * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #toast-container > div { position: relative; pointer-events: auto; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; -moz-box-shadow: 0 0 12px #999999; -webkit-box-shadow: 0 0 12px #999999; box-shadow: 0 0 12px #999999; color: #ffffff; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); } #toast-container > :hover { -moz-box-shadow: 0 0 12px #000000; -webkit-box-shadow: 0 0 12px #000000; box-shadow: 0 0 12px #000000; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); cursor: pointer; } #toast-container > .toast-info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; } #toast-container > .toast-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; } #toast-container > .toast-success { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; } #toast-container > .toast-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; } #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { width: 300px; margin-left: auto; margin-right: auto; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { width: 96%; margin-left: auto; margin-right: auto; } .toast { background-color: #030303; } .toast-success { background-color: #51a351; } .toast-error { background-color: #bd362f; } .toast-info { background-color: #2f96b4; } .toast-warning { background-color: #f89406; } .toast-progress { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter: alpha(opacity=40); } /*Responsive Design*/ @media all and (max-width: 240px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 11em; } #toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { #toast-container > div { padding: 8px 8px 8px 50px; width: 18em; } #toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { #toast-container > div { padding: 15px 15px 15px 50px; width: 25em; } } /* latin-ext */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url('https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url('https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* latin-ext */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* latin-ext */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url('https://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url('https://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }