/* Minification failed. Returning unminified contents. (838,42): run-time error CSS1034: Expected closing parenthesis, found ',' (838,42): run-time error CSS1042: Expected function, found ',' (838,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (1026,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (1027,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (1466,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (1467,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (1471,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (1472,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (1486,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (1487,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (1507,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (1509,42): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (1512,46): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (1512,73): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (1520,43): run-time error CSS1046: Expect comma, found '189' (1520,50): run-time error CSS1046: Expect comma, found ')' (1988,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-sm' (1990,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (1999,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (2004,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (2009,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4234,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4235,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4236,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-xl' (4237,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-3' (4244,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4248,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (4262,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4264,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4268,43): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4297,34): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4299,47): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4315,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4345,41): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4346,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (4351,54): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4351,81): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4351,115): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4360,37): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4365,42): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (4366,44): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (4367,37): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (4403,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (4404,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (4405,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4406,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (4421,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4422,50): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4422,71): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4423,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (4439,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4442,46): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4442,80): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4442,107): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4470,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (4569,35): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4570,46): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4570,67): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4599,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4637,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (4643,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4644,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4645,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4646,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (4660,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy-soft' (4662,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4663,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4682,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-info' (4686,35): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4714,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy-soft' (4716,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4717,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-sm' (4718,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4737,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy-soft' (4739,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (4740,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-sm' (4741,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4752,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4753,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4754,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4755,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (4757,37): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4757,70): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4769,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4784,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4785,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4788,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4794,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4795,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4796,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4818,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4819,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (4833,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (4834,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4836,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4848,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4850,35): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (4851,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (4871,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (4872,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4873,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4874,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (4880,40): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4880,72): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4880,99): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4880,131): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4880,162): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4884,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (4885,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (4887,42): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (4891,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4892,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-navy' (4965,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (4969,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (4970,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (4972,40): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4972,72): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (4977,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (4998,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (4999,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (5016,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (5017,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-2' (5018,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (5063,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (5064,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (5065,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (5066,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (5073,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (5073,65): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (5073,99): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (5073,131): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (5073,159): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (5105,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (5106,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (5108,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (5109,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6247,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6248,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6250,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6251,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6252,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6253,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6254,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6255,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6258,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6259,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6260,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6266,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6269,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6271,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6289,5): run-time error CSS1060: Expected closing curly-brace, found ';' (6290,1): run-time error CSS1019: Unexpected token, found '}' (6305,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6311,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6328,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6329,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6333,38): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6333,65): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6333,99): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6338,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-3' (6339,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (6340,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6354,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-3' (6360,49): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6361,31): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-pill' (6361,48): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-pill' (6362,37): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6366,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-3' (6367,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (6368,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6372,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6384,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6385,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6389,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6392,1): run-time error CSS1019: Unexpected token, found '@keyframes' (6393,10): run-time error CSS1035: Expected colon, found '{' (6407,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (6408,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (6412,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6424,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6425,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6426,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-pill' (6430,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6447,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6457,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (6458,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6466,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6484,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6485,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6489,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (6490,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6491,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6506,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6507,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6508,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6509,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6515,40): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6515,72): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6515,104): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6523,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6537,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6544,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6550,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6551,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6557,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (6558,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6565,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6583,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6584,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (6585,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-2' (6596,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6597,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6598,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6599,40): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6599,72): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6603,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6604,36): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6609,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6613,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6617,30): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6621,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6629,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6639,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6642,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-sm' (6644,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6644,65): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6648,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6653,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6654,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6661,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-sm' (6676,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6677,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-pill' (6678,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6679,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6683,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6683,67): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6683,99): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6690,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (6691,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (6692,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6709,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-3' (6710,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6721,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (6722,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6723,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (6727,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (6728,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (6729,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-soft' (6734,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange' (6738,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (6739,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (6743,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6744,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-600' (6745,24): run-time error CSS1039: Token not allowed after unary operator: '-dk-orange-ring' (6760,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6763,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (6767,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6768,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6790,48): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6856,1): run-time error CSS1019: Unexpected token, found '}' (6873,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (6874,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (6875,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-lg' (6890,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6891,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6892,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6905,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6921,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-2' (6922,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (6923,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (6924,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-pill' (6925,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (6927,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6927,67): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6927,99): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6936,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (6948,17): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (6978,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (6980,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (6981,41): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6981,73): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6981,101): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (6986,30): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-2' (6995,33): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (7018,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (7019,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (7020,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (7021,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (7022,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-1' (7024,41): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (7024,73): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (7024,107): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (7030,32): run-time error CSS1039: Token not allowed after unary operator: '-dk-line-strong' (7031,30): run-time error CSS1039: Token not allowed after unary operator: '-dk-sh-2' (7040,22): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface' (7041,28): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (7042,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' (7053,26): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (7054,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-line' (7062,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (7078,21): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink' (7079,39): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-3' (7087,30): run-time error CSS1039: Token not allowed after unary operator: '-dk-surface-2' (7092,25): run-time error CSS1039: Token not allowed after unary operator: '-dk-ink-3' (7094,41): run-time error CSS1039: Token not allowed after unary operator: '-dk-ease' (7098,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-danger' (7114,29): run-time error CSS1039: Token not allowed after unary operator: '-dk-r-md' */ .include-commitment-add { font-size: 10px; font-weight: 900; color: rgba(0,0,0,.3); display: block; } .commitment-type-item { border-bottom: 1px solid rgba(0,0,0,0.2); font-size: 12px; font-weight: 900; color: rgba(0,0,0,.4); padding: 5px 0 10px 0; cursor: pointer; transition: 0.4s; opacity: 1; } .commitment-type-item > i { position: relative; top: 7px; } .commitment-type-item ko-select { display: inline-block; width: calc(100% - 30px); position: relative; top: 3px; } .commitment-user-photo { height: 55px; width: 55px; background-size: cover; border-radius: 50%; border: 2px solid rgb(143,197,65); } .include-commitment-to { font-size: 10px; font-weight: 900; color: rgba(0,0,0,.3); display: block; } .include-commitment-to-name { font-size: 19px; font-weight: 400; display: block; } .include-commitment .ko-checkbox { zoom: .9; } .commitment-item { margin-top: -1px; border-top: 1px solid rgb(200,200,200); border-bottom: 1px solid rgb(200,200,200); cursor: pointer; background: rgb(249,249,249); } .commitment-item.active { background: white !important; } .commitment-item .commitment-item-header { cursor: pointer; padding: 15px 25px; } .commitment-item .commitment-item-header .arrow { font-size: 18px; color: rgba(0,0,0,.5); position: relative; top: 4px; } .commitment-item .commitment-item-header .icon { font-size: 20px; color: rgba(0,0,0,0.6); position: relative; top: 4px; } .commitment-item .commitment-item-header .text { font-size: 12px; font-weight: 900; color: rgba(0,0,0,0.6); display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 120px); position: relative; top: 2px; } .commitment-item .commitment-item-header .close { font-size: 16px; display: inline-block; background: white; border-radius: 50%; padding: 7px; text-shadow: none; transition: .4s; position: relative; bottom: 2px; color: rgba(0,0,0,0.5); user-select: none; } .commitment-item .commitment-item-header .close:hover { background: rgba(0,0,0,0.1) !important; } .commitment-item .commitment-item-body { transition: 0.4s; height: 0; width: 100%; } .commitment-item.active > .commitment-item-body { height: auto !important; cursor: text; padding: 5px 30px 10px 30px; } .commitment-item .commitment-item-body ko-input { display: inline-block; width: calc(100% - 50px); } .commitment-item .commitment-item-body .close { font-size: 16px; display: inline-block; background: white; border-radius: 50%; padding: 7px; text-shadow: none; transition: .4s; position: relative; right: 15px; color: rgba(0,0,0,0.5); user-select: none; } .commitment-item .commitment-item-body .close:hover { background: rgba(0,0,0,0.1) !important; } .owner-select .ko-select span { font-size: 14px; line-height: 12px; } .owner-select { margin-top: 4px; opacity: 0.9; } .transparent-input { margin-top: 2px; } .transparent-input input { background: transparent; } .schedule-header { position: fixed; width: 100%; right: 0; z-index: 50; background: rgb(246,247,251); height: 50px; } .schedule-header .right-content { position: fixed; right: 0; } .schedule-body { padding-top: 50px; } .include-commitment .user-photo img { height: 65px; width: 65px; border-radius: 50%; } .include-commitment .user-photo-small img { height: 35px; width: 35px; border-radius: 50%; } .commitment-item .commitment-item-body .counter { float: right; font-weight: 700; line-height: 1; opacity: .5; font-size: 14px; display: inline-block; background: white; padding: 7px; text-shadow: none; position: relative; top: 12px; color: rgba(0,0,0,0.5) !important; user-select: none; } .commitment-item .commitment-item-body .status { font-weight: 700; line-height: 1; opacity: .5; font-size: 14px; text-shadow: none; position: relative; color: black !important; margin-top: 3px; } .commitment-item .commitment-item-body .status i { font-size: 22px; cursor: pointer; } .commitment-item .commitment-item-body .status .number { font-weight: 700; line-height: 1; opacity: .5; font-size: 14px; display: inline-block; background: white; text-shadow: none; position: relative; color: rgba(0,0,0,0.5) !important; } .task-file { width: 100%; border: 2px rgba(0,0,0,0.5) dashed; text-align: center; line-height: 10px; padding: 10% 5px 0% 5px; cursor: pointer; border-radius: 5px; user-select: none; } .task-file i { font-size: 30px; color: rgba(0,0,0,0.6); } .task-file .display-name { margin-top: 8px; min-height: 40px; } .task-file .display-name span { font-size: 9px; word-break: break-word; } .file { width: 100%; min-width: 100px; border: 2px rgba(0,0,0,0.5) dashed; text-align: center; line-height: 10px; padding: 10% 5px 0% 5px; cursor: pointer; border-radius: 5px; user-select: none; } .file i { font-size: 30px; color: rgba(0,0,0,0.6); } .file .display-name { margin-top: 8px; min-height: 40px; } .file .display-name span { font-size: 9px; word-break: break-word; } .file-image { width: 100%; border: 2px rgba(0,0,0,0.5) dashed; text-align: center; line-height: 10px; padding: 10% 5px 0% 5px; cursor: pointer; border-radius: 5px; user-select: none; } .file-image img { max-height: 400px; max-width: 600px; } #alerts { width: 400px; top: 60px; right: 10px; position: fixed; z-index: 9999999; list-style: none; } .alert { width: 100%; margin-bottom: 8px; display: block; position: relative; border-left: 4px solid; right: -50px; opacity: 0; line-height: 1; padding: 0; transition: right 400ms, opacity 400ms, line-height 300ms 100ms, padding 300ms 100ms; display: table; line-height: 1.2; font-size: 0.8rem; } .alert:hover { cursor: pointer; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } .open { right: 0; opacity: 1; line-height: 1.2; font-size: 0.8rem; padding: 10px 15px; transition: line-height 200ms, padding 200ms, right 350ms 200ms, opacity 350ms 200ms; } .alert-title { font-weight: bold; } .alert-block { width: 80%; width: -webkit-calc(100% - 60px); width: calc(100% - 60px); text-align: left; } .alert-message small { font-size: 0.7rem !important; } .alert-block em, .alert-block small { font-size: .75em; opacity: .75; } .alert i { font-size: 2em; width: 1.5em; max-height: 48px; top: 50%; margin-top: -12px; display: table-cell; vertical-align: middle; } .alert-error { color: #FFF; border-color: #D93D3D; background-color: #F86C6B; } .alert-success { color: #FFF; border-color: #2CA956; background-color: #4DBD74; } .alert-info { color: #FFF; border-color: rgb(44,92,168); background-color: rgb(115,170,224); } .alert-warning { color: #FFF; border-color: #C09D00; background-color: #F8CB00; } .alert-confirm { color: #FFF; border-color: #C09D00; background-color: #F8CB00; } .alert-confirm button { display: inline-block; background: white; padding: 10px 25px; color: #C09D00; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 7px; transition: 0.4s; opacity: 1; border: none; margin: 5px; width: 80px; } .alert-confirm button:hover { background: rgba(255,255,255, 0.9); } .alert-confirm button:active { background: rgba(255,255,255, 0.6); } /*! * required gridstack 1.1.2 CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. */:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed #d3d3d3;margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-width='1']{width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-x='1']{left:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-min-width='1']{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-max-width='1']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s} /*! * Viewer.js v1.11.3 * https://fengyuanchen.github.io/viewerjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2023-03-05T07:01:15.525Z */.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px}.viewer-zoom-in:before{background-position:0 0;content:"Zoom In"}.viewer-zoom-out:before{background-position:-20px 0;content:"Zoom Out"}.viewer-one-to-one:before{background-position:-40px 0;content:"One to One"}.viewer-reset:before{background-position:-60px 0;content:"Reset"}.viewer-prev:before{background-position:-80px 0;content:"Previous"}.viewer-play:before{background-position:-100px 0;content:"Play"}.viewer-next:before{background-position:-120px 0;content:"Next"}.viewer-rotate-left:before{background-position:-140px 0;content:"Rotate Left"}.viewer-rotate-right:before{background-position:-160px 0;content:"Rotate Right"}.viewer-flip-horizontal:before{background-position:-180px 0;content:"Flip Horizontal"}.viewer-flip-vertical:before{background-position:-200px 0;content:"Flip Vertical"}.viewer-fullscreen:before{background-position:-220px 0;content:"Enter Full Screen"}.viewer-fullscreen-exit:before{background-position:-240px 0;content:"Exit Full Screen"}.viewer-close:before{background-position:-260px 0;content:"Close"}.viewer-container{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.viewer-container ::-moz-selection,.viewer-container::-moz-selection{background-color:transparent}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container:focus{outline:0}.viewer-container img{display:block;height:auto;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.viewer-canvas>img{height:auto;margin:15px auto;max-width:90%!important;width:auto}.viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5);overflow:hidden}.viewer-list{box-sizing:content-box;height:50px;margin:0;overflow:hidden;padding:1px 0}.viewer-list>li{color:transparent;cursor:pointer;float:left;font-size:0;height:50px;line-height:0;opacity:.5;overflow:hidden;transition:opacity .15s;width:30px}.viewer-list>li:focus,.viewer-list>li:hover{opacity:.75}.viewer-list>li:focus{outline:0}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-loading{position:relative}.viewer-list>.viewer-loading:after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px}.viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1}.viewer-player{background-color:#000;bottom:0;cursor:none;display:none;right:0;z-index:1}.viewer-player,.viewer-player>img{left:0;position:absolute;top:0}.viewer-toolbar>ul{display:inline-block;margin:0 auto 5px;overflow:hidden;padding:6px 3px}.viewer-toolbar>ul>li{background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;transition:background-color .15s;width:24px}.viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:rgba(0,0,0,.8)}.viewer-toolbar>ul>li:focus{box-shadow:0 0 3px #fff;outline:0;position:relative;z-index:1}.viewer-toolbar>ul>li:before{margin:2px}.viewer-toolbar>ul>li+li{margin-left:1px}.viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px}.viewer-toolbar>ul>.viewer-small:before{margin:-1px}.viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px}.viewer-toolbar>ul>.viewer-large:before{margin:5px}.viewer-tooltip{background-color:rgba(0,0,0,.8);border-radius:10px;color:#fff;display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px}.viewer-title{color:#ccc;display:inline-block;font-size:12px;line-height:1.2;margin:5px 5%;max-width:90%;min-height:14px;opacity:.8;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;white-space:nowrap}.viewer-title:hover{opacity:1}.viewer-button{-webkit-app-region:no-drag;background-color:rgba(0,0,0,.5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;transition:background-color .15s;width:80px}.viewer-button:focus,.viewer-button:hover{background-color:rgba(0,0,0,.8)}.viewer-button:focus{box-shadow:0 0 3px #fff;outline:0}.viewer-button:before{bottom:15px;left:15px;position:absolute}.viewer-fixed{position:fixed}.viewer-open{overflow:hidden}.viewer-show{display:block}.viewer-hide{display:none}.viewer-backdrop{background-color:rgba(0,0,0,.5)}.viewer-invisible{visibility:hidden}.viewer-move{cursor:move;cursor:grab}.viewer-fade{opacity:0}.viewer-in{opacity:1}.viewer-transition{transition:all .3s}@keyframes viewer-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.viewer-loading:after{animation:viewer-spinner 1s linear infinite;border:4px solid hsla(0,0%,100%,.1);border-left-color:hsla(0,0%,100%,.5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1}@media (max-width:767px){.viewer-hide-xs-down{display:none}}@media (max-width:991px){.viewer-hide-sm-down{display:none}}@media (max-width:1199px){.viewer-hide-md-down{display:none}} html { overflow-x: hidden; } body { background: rgb(246,247,251); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #555; } h1, h2, h3, h4, h5, h6 { font-weight: 400; } .pointer { cursor: pointer; } .bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom { top: 50px !important; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); width: 240px; padding: 10px 20px; } .bootstrap-datetimepicker-widget table { font-size: 10px; font-weight: 300; } .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: #f6551e; } .bootstrap-datetimepicker-widget table td span.active { background-color: #f6551e; } .bootstrap-datetimepicker-widget table td.active { background-color: #f6551e; } .bootstrap-datetimepicker-widget table td.active:hover { background-color: #f6551e; opacity: .8; } .bootstrap-datetimepicker-widget table td.day { border: none !important; height: 15px; line-height: 20px; transition: .4s; border-radius: 50%; } .bootstrap-datetimepicker-widget table th.picker-switch { font-size: 16px; font-weight: 200; } .bootstrap-datetimepicker-widget table th { border: none !important; } .bootstrap-datetimepicker-widget table td.active.today:before { border: none; } .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 470px !important; } .occurrenceView { padding: 0px 15px 0px 0px; } .occurrence-table { height: 100%; width: 100%; margin: auto; transition: 0.55s; } .retract { margin-right: 275px; } .occurrenceView .filterButton { cursor: pointer !important; padding: 0px 0px 0px 0px; text-align: center; margin: 0px; width: calc(100vh - 158px); height: 28px; background: #a3a3a361; color: #606060; font-style: oblique; z-index: 15; border-radius: 5px 5px 0px 0px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: right bottom; position: absolute; right: 0px; top: 19px; } .occurrence-switch-view-buttons { white-space: nowrap; max-width: 500px; user-select: none; display: flex; align-items: center; } .occurrence-switch-view-button { background: rgb(240, 240, 240); padding: 0 15px; font-size: 12px; border-radius: 30px; line-height: 30px; height: 30px; font-weight: 500; letter-spacing: 2px; color: #616161; cursor: pointer; transition: .4s; display: inline-block; white-space: nowrap; max-width: 30px; padding-right: 6px; overflow: hidden; direction: rtl; opacity: 1; } .occurrence-switch-view-button i { vertical-align: middle; font-size: 18px; position: relative; margin-bottom: 2px; } .occurrence-switch-view-button:hover { padding-right: 15px; max-width: 200px; opacity: .8; } .occurrence-switch-view-button.noRetract { max-width: 200px !important; } .occurrence-switch-view-button.selected { pointer-events: none; color: #cc7f18e3; padding-right: 15px; max-width: 200px; opacity: .8; } .occurrence-switch-view-button.selectedUnfixed { color: #cc7f18e3; opacity: .8; } .occurrenceView .switchView { display: flex; flex-wrap: wrap; justify-content: left !important; margin: auto; user-select: none; padding: 0px 15px; } .occurrenceView .switchView .content { background-color: #fff; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-width: 3px; border-radius: 0px 0px 7px 7px; border-color: lightgrey; } .occurrenceView .switchView .content .option { cursor: pointer !important; text-align: center; } .occurrenceView .switchView .content .separator { border-left: 3px solid lightgrey; } .occurrenceView .switchView .content .option i { font-size: 20px; vertical-align: text-bottom; } .occurrenceView .switchView .content .option span { font-weight: 500; } .occurrenceView .filterButton i { font-size: 20px; vertical-align: text-bottom; } .occurrenceView .menu { align-self: center; background: white; border-radius: 15px; padding: 5px; box-shadow: 0 3px 10px #ccc; } .occurrenceView .menu fieldset { border: 1px grey double; border-radius: 15px; margin: auto; margin-top: -5px; text-align: center; } .occurrenceView .menu fieldset .content { margin: auto; margin-top: inherit; } .occurrenceView .menu legend { border: 1px grey double; border-radius: 15px; margin: auto; padding: 0em 0.8em; width: auto; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; } ko-occurrence-filter { width: 100%; height: 100%; margin: auto; } ko-occurrence-filter .statusOverview { border: solid; border-color: lightgrey; border-radius: 7px; background-color: white; } ko-occurrence-filter .statusOverview .title { background-color: #d3d3d380; margin: auto; text-align: center; font-weight: 500; font-size: 14px; color: #636363; display: flow-root; user-select: none; cursor: pointer; } ko-occurrence-filter .statusOverview .title i { vertical-align: bottom; font-size: 21px; } ko-occurrence-filter .statusOverview .item-list { margin: auto; overflow-x: clip; overflow-y: auto; max-height: 140px; min-height: 54px; } ko-occurrence-filter .statusOverview .content { margin: auto; font-size: 13px } ko-occurrence-filter .statusOverview .content .description { font-weight: 500; } ko-occurrence-statistics { border: solid; border-color: lightgrey; border-radius: 7px; background-color: #fff; width: 100%; height: calc(100vh - 120px); margin: auto; overflow-x: auto; } ko-occurrence-statistics .menu-bar { background-color: lightgrey; border-bottom: solid; border-color: lightgrey; border-radius: 7px; box-shadow: 0 3px 10px #ccc; } ko-occurrence-statistics .menu-bar .category { border: solid; background-color: #ffffffb0 !important; border-color: lightgrey; border-radius: 5px; display: flex; align-items: center; } ko-occurrence-statistics .menu-bar .category .category-icon { vertical-align: middle; position: relative; margin-bottom: 2px; color: grey; font-size: 22px; } ko-occurrence-statistics .menu-bar .category .filter-button { cursor: pointer; user-select: none; font-size: 10px; font-weight: 500; color: #4d4d4dd6; padding: 1px 5px 1px 1px; border: solid; background-color: lightgrey !important; border-color: lightgrey; border-radius: 15px; display: flex; align-items: center; } ko-occurrence-statistics .menu-bar .category .filter-button i { font-size: 20px; } ko-occurrence-statistics .menu-bar .category .custom-reports { } ko-occurrence-statistics .menu-bar .category .custom-reports .ko-input input { font-size: 15px; top: 15px; } ko-occurrence-statistics .menu-bar .category .custom-reports .action-button { cursor: pointer; font-weight: 500; font-size: 14px; color: #479b46b0; border: solid 2px; border-radius: 7px; display: flex; align-items: center; } ko-occurrence-statistics .action-menu { bottom: 20px; right: 40px; position: absolute; } ko-occurrence-statistics .action-menu .add-button { background: rgb(174, 208, 239, 0.49); padding: 0 15px; font-size: 12px; border-radius: 30px; line-height: 30px; height: 30px; font-weight: 500; letter-spacing: 2px; color: #616161; cursor: pointer; transition: .4s; display: inline-block; white-space: nowrap; max-width: 30px; padding-right: 6px; overflow: hidden; direction: rtl; opacity: 1; user-select: none; } ko-occurrence-statistics .action-menu .add-button i { vertical-align: middle; font-size: 18px; position: relative; margin-bottom: 2px; } ko-occurrence-statistics .action-menu .add-button:hover { padding-right: 15px; max-width: 200px; opacity: .8; } ko-occurrence-statistics .add-propover { position: absolute; z-index: 1000; right: 20px; bottom: 20px; min-width: 14rem; padding: 0.5rem 0px; margin: 0.125rem 0px 0px; font-size: 1rem; color: rgb(33, 37, 41); text-align: left; list-style: none; background-color: rgb(255, 255, 255); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; box-shadow: 0 3px 10px #ccc; } ko-occurrence-table { width: 100%; height: 100%; margin: auto; } ko-occurrence-table .occurrenceList { border: solid; border-color: lightgrey; border-radius: 7px; width: 100%; height: calc(100vh - 158px); background-color: #e8e9f3; overflow-x: auto; align-content: flex-start; margin: auto; padding: 0px 0px 0px 10px; display: inline-flex; flex-direction: row; justify-content: flex-start; } ko-occurrence-table .occurrenceList .occurrence { border: solid; border-color: lightgrey; border-radius: 10px; border-left-width: 10px; border-left-color: darkgrey; background-color: white; cursor: pointer; flex: 0 0 auto; max-width: calc(100% / 4.15); height: fit-content; padding: 0; margin: 0.3% 0.3% 0 0.3%; } ko-occurrence-table .occurrenceList .statusflag { position: absolute; background-color: darkgrey; left: 0; -webkit-transform: rotate(-90deg); } ko-occurrence-table .occurrenceList .header { margin: auto; border-bottom: solid; border-bottom-color: lightgrey; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; border-bottom-width: 2px; font-size: 15px; padding: 0px 5px 0px 5px; } ko-occurrence-table .occurrenceList .header i { font-size: large; vertical-align: sub; color: darkgrey; } ko-occurrence-table .occurrenceList .header .identification { font-weight: bolder; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } ko-occurrence-table .occurrenceList .header .description { text-align: center; font-weight: 500; overflow: hidden; width: 100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } ko-occurrence-table .occurrenceList .content { font-size: 11px; margin: auto; background: #aeafc521; overflow: hidden; } ko-occurrence-table .occurrenceList .content i { font-size: 14px; vertical-align: sub; } ko-occurrence-table .occurrenceList .content .title { font-weight: 500; } ko-table .table th:first-of-type, ko-table .table td:first-of-type { padding-left: 40px; } ko-table .table th { border: none !important; font-size: 12px; color: rgba(0,0,0,0.5); padding: 5px; } ko-table .table td { border-top: none !important; border-bottom: 1px solid #dee2e6; padding: 5px; font-size: 14px; font-weight: bold; } .ko-qr-reader { width: 100%; height: 100%; margin: auto; } .ko-qr-reader .qr-container { text-align: center; margin: auto; width: calc(100% - 20px); border: none !important; } .ko-qr-reader .qr-container .qr-canvas { padding: 2px; margin: auto; width: calc(100% - 20px); max-width: 400px; border-color: lightgrey; border-radius: var(--dk-r-md); border: 1px solid var(--dk-line); } .ko-qr-reader button { height: 9vh; margin-top: 1vh; border-style: hidden; background: rgba(77, 189, 116, 1); box-shadow: 0 3px 5px 0px rgba(77, 189, 116, 0.6); display: inline-block; padding: 8px 16px; color: white; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 7px; transition: 0.4s; opacity: 1; } .ko-drawn-question .canvas-div { display: block; margin-left: auto; margin-right: auto; } .ko-input-question { position: relative; width: 100%; margin-bottom: 6px; font-family: arial, sans-serif; height: 50px; min-width: 120px; } .ko-input-question input { width: 100%; border: 1px solid #cfd8dc; border-radius: 25px; font-weight: 400; color: #546e7a; font-size: 18px; padding: 10px 15px; outline: none; height: 3.10rem; resize: none; } .ko-input-question input.invalid { transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; box-shadow: 0px 0px 5px 1px red; } .ko-input-question .error { position: absolute; display: inline-block; bottom: 17px; right: 0; color: #F86C6B; font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; margin-right: 5px; background: white; z-index: 2; } .ko-input-question .success { position: absolute; display: inline-block; bottom: 17px; right: 0; color: #4DBD74; font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; margin-right: 5px; background: white; z-index: 2; } .ko-input label { line-height: 62px; height: 46px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ko-input { position: relative; width: 100%; margin-bottom: 6px; font-family: arial, sans-serif; height: 50px; min-width: 120px; } .ko-input label, .ko-input input { position: absolute; left: 0; width: 100%; font-size: 12px; font-weight: 400; } .ko-input input { top: 12px; border: none; margin: 8px 0; background: none; width: 100%; z-index: 2; } .ko-input .search-input { padding-left: 25px; } .ko-input .search-icon { color: rgba(0,0,0,.3); position: relative; top: 20px; font-size: 22px; } .ko-input input.big { font-size: 22px; top: 5px; } .ko-input input:focus { outline: none; } .ko-input input:focus ~ label, .ko-input input:not(.placeholder-shown) ~ label { line-height: 18px !important; font-size: 11px !important; } .ko-input input:focus ~ label { color: #999; } .ko-input input:focus ~ label:after { visibility: visible; left: 0; width: 100%; } .ko-input input:focus ~ label ~ div { opacity: 0; } .ko-input input.invalid:not(:focus) ~ label { transition: all .2s 0s; -webkit-transition: all .2s 0s; -moz-transition: all .2s 0s; -ms-transition: all .2s 0s; -o-transition: all .2s 0s; color: #F86C6B; } .ko-input input.valid:not(:focus) ~ label { transition: all .2s 0s; -webkit-transition: all .2s 0s; -moz-transition: all .2s 0s; -ms-transition: all .2s 0s; -o-transition: all .2s 0s; color: #4DBD74; } .ko-input input.invalid:not(:focus) ~ label:after { visibility: visible; left: 0; width: 100%; background: #F86C6B; transition-delay: 0s; } .ko-input input.valid:not(:focus) ~ label:after { visibility: visible; left: 0; width: 100%; background: #4DBD74; transition-delay: 0s; } .ko-input label { color: #909090; transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -o-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0px -1.5px #BBB; z-index: 1; } .ko-input label:after { content: ''; visibility: hidden; position: absolute; left: calc(50% - 5px); bottom: 0; background-color: #999; width: 10px; height: 2px; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .ko-input .error { position: absolute; display: inline-block; bottom: 15px; right: 0; color: #F86C6B; font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; margin-right: 5px; background: white; z-index: 2; } .ko-input .success { position: absolute; display: inline-block; bottom: 15px; right: 0; color: #4DBD74; font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; margin-right: 5px; background: white; z-index: 2; } .ko-textarea { height: 70px; } .ko-textarea label { line-height: 100px; height: 65px; } .ko-textarea { position: relative; width: 100%; margin-bottom: 6px; overflow: hidden; font-family: arial, sans-serif; } .ko-textarea label, .ko-textarea textarea { position: absolute; left: 0; width: 100%; font-size: 12px; font-weight: 400; } .ko-textarea textarea { top: 12px; border: none; margin: 8px 0; background: none; width: 100%; z-index: 2; height: 40px; resize: none; } .ko-textarea textarea.big { font-size: 22px; top: 5px; } .ko-textarea textarea:focus { outline: none; border: none; } .ko-textarea textarea:focus + label, .ko-textarea textarea:not(.placeholder-shown) + label { line-height: 25px !important; font-size: 11px !important; } .ko-textarea textarea.placeholder-shown ~ .error, .ko-textarea textarea:not(.invalid) ~ .error { opacity: 0; } .ko-textarea textarea:focus + label { color: #999; } .ko-textarea textarea:focus + label:after { visibility: visible; left: 0; width: 100%; } .ko-textarea textarea:focus + label ~ div { opacity: 0; } .ko-textarea textarea.invalid:not(:focus) + label { transition: all .2s 0s; -webkit-transition: all .2s 0s; -moz-transition: all .2s 0s; -ms-transition: all .2s 0s; -o-transition: all .2s 0s; color: #F86C6B; } .ko-textarea textarea.valid:not(:focus) + label { transition: all .2s 0s; -webkit-transition: all .2s 0s; -moz-transition: all .2s 0s; -ms-transition: all .2s 0s; -o-transition: all .2s 0s; color: #4DBD74; } .ko-textarea textarea.invalid:not(:focus) + label:after { visibility: visible; left: 0; width: 100%; background: #F86C6B; transition-delay: 0s; } .ko-textarea textarea.valid:not(:focus) + label:after { visibility: visible; left: 0; width: 100%; background: #4DBD74; transition-delay: 0s; } .ko-textarea label { color: #909090; transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -ms-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); -o-transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0px -1.5px #BBB; z-index: 1; } .ko-textarea label:after { content: ''; visibility: hidden; position: absolute; left: calc(50% - 5px); bottom: 0; background-color: #999; width: 10px; height: 2px; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; } .ko-textarea .error { position: absolute; display: inline-block; bottom: 15px; right: 0; color: rgb(251,129,121); font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; } .ko-textarea .success { position: absolute; display: inline-block; bottom: 15px; right: 0; color: #4DBD74; font-size: 16px; opacity: 1; transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; height: 18px; width: 18px; text-align: center; } .ko-questionary-panel { border-color: lightgrey; border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); width: 100%; margin: 0 0 12px; overflow: hidden; background: var(--dk-surface); box-shadow: var(--dk-sh-1); } .ko-questionary-panel .alternatives { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; padding: 12px; gap: 8px; } .ko-questionary-panel .actions { display: flex; border-top: 1px solid var(--dk-line); background: var(--dk-surface-2); } .ko-questionary-panel .actions .action { border-style: solid; opacity: 1; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; border-color: lightgrey; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dk-ink-2); border: none; border-right: 1px solid var(--dk-line); border-radius: 0; cursor: pointer; transition: background .16s var(--dk-ease), color .16s var(--dk-ease); } .ko-questionary-panel .actions .action .answered { background-color: rgb(189, 214, 189); } .ko-questionary-panel .actions .action .notAnswered { background-color: rgb(214 189 189); } .ko-questionary-panel .actions .action i { position: relative; margin-right: 2px; font-size: 18px; top: 0; margin: 0; } /*Texte Area for questions*/ .ko-textarea-question { } .ko-textarea-question textarea { width: 100%; border: 1px solid #cfd8dc; border-radius: 25px; font-weight: 400; color: #546e7a; font-size: 18px; padding: 10px 15px; outline: none; height: 3.10rem; min-height: 3.10rem; resize: none; overflow-y: hidden; } .ko-textarea-question textarea:focus { } .ko-textarea-question textarea, textarea:focus { border: 1px solid #cfd8dc; } .ko-textarea-question textarea:disabled { cursor: default; background-color: rgba(239, 239, 239, 0.3); opacity: 1; } /*End of text area for questions*/ .ko-checkbox, .ko-radiobutton { padding-top: 15px; } .ko-checkbox *, .ko-radiobutton * { box-sizing: border-box; } .ko-checkbox.readonly, .ko-radiobutton.readonly { opacity: .5; } .ko-checkbox *:before, .ko-radiobutton *:before, .ko-checkbox *:after, .ko-radiobutton *:after { box-sizing: border-box; } .ko-checkbox input[type="checkbox"], .ko-radiobutton input[type="checkbox"], .ko-checkbox input[type="radio"], .ko-radiobutton input[type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ko-checkbox input[type="checkbox"]:hover + label:before, .ko-radiobutton input[type="checkbox"]:hover + label:before, .ko-checkbox input[type="radio"]:hover + label:before, .ko-radiobutton input[type="radio"]:hover + label:before { border-color: #f6551e; background-color: #f2f2f2; } .ko-checkbox input[type="checkbox"]:active + label:before, .ko-radiobutton input[type="checkbox"]:active + label:before, .ko-checkbox input[type="radio"]:active + label:before, .ko-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; } .ko-checkbox input[type="checkbox"] + label, .ko-radiobutton input[type="checkbox"] + label, .ko-checkbox input[type="radio"] + label, .ko-radiobutton input[type="radio"] + label { position: relative; padding: 5px 5px 5px 1.5em; vertical-align: middle; user-select: none; cursor: pointer; color: #909090; font-weight: 400; font-size: 14px; } .ko-checkbox input[type="checkbox"] + label:before, .ko-radiobutton input[type="checkbox"] + label:before, .ko-checkbox input[type="radio"] + label:before, .ko-radiobutton input[type="radio"] + label:before { box-sizing: content-box; content: ''; color: #f6551e; position: absolute; top: 55%; left: 0; width: 12px; height: 12px; margin-top: -9px; border: 2px solid #d1d3d1; text-align: center; transition: all 0.4s ease; border-radius: 5px; } .ko-checkbox input[type="checkbox"]:checked + label:before, .ko-radiobutton input[type="checkbox"]:checked + label:before, .ko-checkbox input[type="radio"]:checked + label:before, .ko-radiobutton input[type="radio"]:checked + label:before { border-color: #f6551e !important; } .ko-checkbox input[type="checkbox"] + label:after, .ko-radiobutton input[type="checkbox"] + label:after, .ko-checkbox input[type="radio"] + label:after, .ko-radiobutton input[type="radio"] + label:after { box-sizing: content-box; content: ''; background-color: #f6551e; position: absolute; top: 55%; left: 4px; width: 8px; height: 8px; margin-top: -5px; transform: scale(0); transform-origin: 50%; transition: transform 200ms ease-out; } .ko-checkbox input[type="checkbox"]:disabled + label:before, .ko-radiobutton input[type="checkbox"]:disabled + label:before, .ko-checkbox input[type="radio"]:disabled + label:before, .ko-radiobutton input[type="radio"]:disabled + label:before { border-color: #cccccc; } .ko-checkbox input[type="checkbox"] + label:after, .ko-radiobutton input[type="checkbox"] + label:after { background-color: transparent; top: 49%; left: 3px; width: 8px; height: 4px; margin-top: -4px; border-style: solid; border-color: #ffffff; border-width: 0 0 2px 2px; border-image: none; transform: rotate(-45deg) scale(0); } .ko-checkbox input[type="checkbox"]:checked + label:after, .ko-radiobutton input[type="checkbox"]:checked + label:after { content: ''; transform: rotate(-45deg) scale(1); transition: transform 200ms ease-out; } .ko-checkbox input[type="radio"]:checked + label:before, .ko-radiobutton input[type="radio"]:checked + label:before { animation: borderscale 300ms ease-in; background-color: white; } .ko-checkbox input[type="radio"]:checked + label:after, .ko-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); } .ko-checkbox input[type="radio"] + label:before, .ko-radiobutton input[type="radio"] + label:before, .ko-checkbox input[type="radio"] + label:after, .ko-radiobutton input[type="radio"] + label:after { border-radius: 50%; } .ko-checkbox input[type="checkbox"]:checked + label:before, .ko-radiobutton input[type="checkbox"]:checked + label:before { animation: borderscale 200ms ease-in; background: #f6551e; } .ko-checkbox input[type="checkbox"]:checked + label:after, .ko-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); } .ko-checkbox.ko-checkbox-inline, .ko-radiobutton.ko-checkbox-inline, .ko-checkbox.ko-radiobutton-inline, .ko-radiobutton.ko-radiobutton-inline { display: inline-block; } @keyframes borderscale { 50% { box-shadow: 0 0 0 2px #f6551e; } } .ko-button-group { position: relative; display: inline-flex; vertical-align: middle; } .ko-button-group ko-button:not(:first-of-type) .ko-button { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .ko-button-group ko-button:not(:last-of-type) .ko-button { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .ko-button-group ko-button:not(:last-of-type):not(:first-of-type) .ko-button { border-radius: 0px; } .ko-button { display: inline-block; padding: 8px 16px; color: white; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 7px; transition: 0.4s; opacity: 1; } .ko-button .img-icon { width: 18px; position: relative; top: 3px; padding-bottom: 4px; } .ko-button.muted { background: white; box-shadow: none; color: #777; } .ko-button:hover { opacity: 0.9; } .ko-button:active { opacity: 0.6; } .ko-button.disabled { background: #555; opacity: 0.5; box-shadow: none; cursor: not-allowed; } ko-button.disabled:hover { opacity: 1.0; } ko-button.disabled:active { opacity: 1.0; } .ko-button.info { background: rgb(115,170,224); box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.6); } .ko-button.success { background: rgba(77, 189, 116, 1); box-shadow: 0 3px 5px 0px rgba(77, 189, 116, 0.6); } .ko-button.warning { background: rgba(248, 203, 0, 1); box-shadow: 0 3px 5px 0px rgba(248, 203, 0, 0.6); } .ko-button.danger { background: rgba(248, 108, 107, 1); box-shadow: 0 3px 5px 0px rgba(248, 108, 107, 0.6); } .ko-button.orange { background: rgba(244, 133, 51, 1); box-shadow: 0 3px 5px 0px rgba(244, 133, 51, 0.6); } .ko-button.light { background: white; box-shadow: 0 3px 5px 0px rgba(150, 150, 150, 0.4); color: #888; } .ko-button span { position: relative; bottom: 1px; } .ko-button i { font-size: 18px; position: relative; top: 3px; /* margin-right: 2px; */ } .ko-switch-button { /*display: inline-block;*/ border-style: solid; padding: 8px 16px; color: #2b2b2b; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 7px; transition: 0.4s; opacity: 1; box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.6); } .ko-switch-button .img-icon { width: 18px; position: relative; top: 3px; padding-bottom: 4px; } .ko-switch-button.muted { background: white; box-shadow: none; color: #777; } .ko-switch-button:hover { opacity: 0.9; } .ko-switch-button:active { opacity: 0.6; } .ko-switch-button.disabled { background: #555; opacity: 0.5; box-shadow: none; cursor: not-allowed; } ko-switch-button.disabled:hover { opacity: 1.0; } ko-switch-button.disabled:active { opacity: 1.0; } .ko-switch-button span { position: relative; bottom: 1px; } .ko-switch-button i { font-size: 18px; position: relative; top: 3px; /* margin-right: 2px; */ } .popover { border-radius: 10px !important; box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.1); border-color: #DDD; max-width: 350px; min-width: 180px; margin-right: 15px; z-index: 10001; } .popover-body { padding: 0; } .navbar .dropdown-menu { position: absolute; z-index: 10001; } .tooltip { opacity: 1 !important; z-index: 10001; } .tooltip > .tooltip-inner { background-color: white; color: black; box-shadow: 0 0 20px rgba(0,0,0,.4); max-width: 400px; border-radius: 10px; padding: 15px; } .tooltip > .arrow:before { border-bottom-color: white !important; border-top-color: white !important; } .ko-select { text-decoration: none !important; outline: none; color: #555; cursor: pointer; } .ko-select-content { max-height: 300px; overflow-y: auto; margin: 5px 0px; padding: 4px; } .ko-select i { color: #bbb; float: right; } .ko-select span { color: rgba(0,0,0,.4); max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } .ko-select-item { cursor: pointer; opacity: 1; border-bottom: none; border-radius: var(--dk-r-sm); padding: 9px 12px; transition: background .14s var(--dk-ease); } .ko-select-item:last-of-type { border-bottom: none; } .ko-select-item:hover { opacity: 1; background: var(--dk-surface-2); } .ko-select-item-title { font-weight: 600; color: var(--dk-ink); } .ko-select-item-subtitle { font-size: 12px; color: var(--dk-ink-3); } .ko-datepicker input { outline: none; text-align: center; border-radius: 15px; font-size: 12px; border: 1px solid #BBB; padding: 3px 0; } .ko-input-filter { position: relative; } .ko-input-filter input { outline: none; text-align: center; border-radius: 15px; font-size: 12px; border: 1px solid #BBB; padding: 3px 0; width: 100%; } .icone-box { position: relative; width: 140px; height: 140px; margin: 0 auto 10px; } .icone-box > svg { position: absolute; cursor: pointer; } svg.icon-user-01, svg.icon-user-02, svg.icon-user-03, svg.icon-user-04, svg.icon-user-05, svg.icon-user-06 { max-width: 70px; opacity: 1; transform: scale(1); -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); width: 70px; height: 70px; } svg.icon-user-01:hover, svg.icon-user-02:hover, svg.icon-user-03:hover, svg.icon-user-04:hover, svg.icon-user-05:hover, svg.icon-user-06:hover { opacity: .7; -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); } svg.icon-user-01.active, svg.icon-user-02.active, svg.icon-user-03.active, svg.icon-user-04.active, svg.icon-user-05.active, svg.icon-user-06.active { opacity: .4; -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); } svg.icon-user-01 { top: 1px; left: 3px; right: 0; margin: 0 auto; stroke: white; stroke-width: 1px; } svg.icon-user-02 { -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); stroke-width: 0; top: 19px; right: 6px; stroke: white; stroke-width: 1px; } svg.icon-user-03 { -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); stroke-width: 0; top: 52px; right: 8px; stroke: white; stroke-width: 1px; } svg.icon-user-04 { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); stroke-width: 0; top: 67px; right: 37px; stroke: white; stroke-width: 1px; } svg.icon-user-05 { -ms-transform: rotate(240deg); -webkit-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); stroke-width: 0; top: 49px; right: 65px; stroke: white; stroke-width: 1px; } svg.icon-user-06 { -ms-transform: rotate(300deg); -webkit-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); stroke-width: 0; top: 16px; right: 63px; stroke: white; stroke-width: 1px; } svg.icon-user-01:hover:not(.svg-disable) { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); top: -7px; left: 4px; } svg.icon-user-02:hover:not(.svg-disable) { -ms-transform: rotate(60deg) scale(1.1); -webkit-transform: rotate(60deg) scale(1.1); -o-transform: rotate(60deg) scale(1.1); transform: rotate(60deg) scale(1.1); top: 15px; right: -2px; } svg.icon-user-03:hover:not(.svg-disable) { -ms-transform: rotate(120deg) scale(1.1); -webkit-transform: rotate(120deg) scale(1.1); -o-transform: rotate(120deg) scale(1.1); transform: rotate(120deg) scale(1.1); top: 57px; right: 0px; } svg.icon-user-04:hover:not(.svg-disable) { -ms-transform: rotate(180deg) scale(1.1); -webkit-transform: rotate(180deg) scale(1.1); -o-transform: rotate(180deg) scale(1.1); transform: rotate(180deg) scale(1.1); top: 75px; right: 38px; } svg.icon-user-05:hover:not(.svg-disable) { -ms-transform: rotate(240deg) scale(1.1); -webkit-transform: rotate(240deg) scale(1.1); -o-transform: rotate(240deg) scale(1.1); transform: rotate(240deg) scale(1.1); top: 53px; right: 72px; } svg.icon-user-06:hover:not(.svg-disable) { -ms-transform: rotate(301deg) scale(1.1); -webkit-transform: rotate(301deg) scale(1.1); -o-transform: rotate(301deg) scale(1.1); transform: rotate(301deg) scale(1.1); top: 12px; right: 71px; } /* ICONS COLOR OPTIONS */ .icone-box .svg-danger { fill: #f86c6b; } .icone-box .svg-warning { fill: #f8cb00; } .icone-box .svg-success { fill: #4dbd74; } .icone-box .svg-info { fill: #63c2de; } .icone-box .svg-disable { fill: #999999; } .icone-box .svg-danger:hover { filter: drop-shadow( 0px -4px 6px #f86c6bbb); stroke: transparent; } .icone-box .svg-warning:hover { filter: drop-shadow( 0px -4px 6px #f8cb00bb); stroke: transparent; } .icone-box .svg-success:hover { filter: drop-shadow( 0px -4px 6px #4dbd74bb); stroke: transparent; } .icone-box .svg-info:hover { filter: drop-shadow( 0px -4px 6px #63c2debb); stroke: transparent; } .icone-box .border { stroke: #888888; stroke-width: 1px; } .icone-base { width: 105px; height: 105px; position: absolute; border-radius: 50%; z-index: 2; box-shadow: 0px 0px 0px 10px white; left: 0; right: 0; margin: 0 auto; top: 49%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icone-base img { width: 98px; height: 98px; border-radius: 50%; margin-top: -0.5px; margin-left: -0.5px; } .base-icon-border { border: 4px solid transparent; border-radius: 50%; } .border-success { border-color: #4dbd74 !important; } .border-warning { border-color: #f8cb00 !important; } .border-disable { border-color: #999999 !important; } .border-regular { border-color: #d6d4d4 !important; } .border-alert, .border-danger { border-color: #f86c6b !important; } a.item-sidebar, a.item-sidebar:hover, a.item-sidebar:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 5px 15px; background: #fff !important; border: none; border-radius: 0; margin-bottom: 10px; box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1); position: relative; z-index: 10001; } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .wrapper { display: flex; align-items: stretch; } #sidebar { width: 230px; background: #1b305d; color: #fff; transition: all 0.3s; position: relative; z-index: 10001; } #sidebar.active { width: 80px; text-align: center; } #sidebar .copyright { font-size: 10px; position: absolute; width: 200px; bottom: 10px; text-align: center; } #sidebar.active .copyright { width: 75px; } #sidebar .sidebar-header { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 15px; } #sidebar .sidebar-header .logo { display: inline-block; position: relative; } #sidebar .sidebar-header .logo img { width: 150px; margin-top: 15px; } #sidebar .sidebar-header .logo-min { display: none; position: relative; } #sidebar .sidebar-header .logo-min img { width: 45px; margin-top: 15px; } #sidebar.active .sidebar-header .logo { display: none; } #sidebar.active .sidebar-header .logo-min { display: inline-block; } #sidebar .sidebar-header .logo .loading-external { background: url(../../Content/Assets/loading-1.png) no-repeat center center; background-size: contain; height: 34px; width: 34px; position: absolute; top: 13px; left: -2px; } #sidebar .sidebar-header .logo .loading-internal { background: url(../../Content/Assets/loading-2.png) no-repeat center center; background-size: contain; height: 34px; width: 34px; position: absolute; top: 13px; left: -2px; } #sidebar .sidebar-header .logo-min .loading-external { background: url(../../Content/Assets/loading-1.png) no-repeat center center; background-size: contain; height: 42px; width: 42px; position: absolute; top: 12px; } #sidebar .sidebar-header .logo-min .loading-internal { background: url(../../Content/Assets/loading-2.png) no-repeat center center; background-size: contain; height: 42px; width: 42px; position: absolute; top: 12px; } #content { width: 100%; min-height: 100vh; transition: all 0.3s; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { width: 80px; text-align: center; margin-left: -80px !important; } #sidebar.active { margin-left: 0 !important; } #sidebar .sidebar-header .logo { display: none !important; } } #sidebar .menu-list-item i { position: relative; top: 7px; font-size: 22px; margin-right: 10px; margin-left: 10px; } #sidebar .menu-list-item { font-size: 10px; font-weight: bold; color: rgba(255,255,255,0.7); padding: 10px 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: 0.4s; background: rgba(255,255,255,0); } #sidebar .menu-list-item:hover { background: rgba(255,255,255,0.1); } #sidebar.active .menu-list-item { padding-left: 0px; } #sidebar.active .menu-list-item span { display: none; } #sidebar .menu-list-item.active { color: white; border-bottom: 2px solid rgba(255,255,255,0.2); } #sidebar .menu-list-item.active:after { content: ''; height: 2px; width: 100%; background: #f6551e; display: block; position: relative; top: 22px; } .btn-expand-menu, .btn-expand-menu:hover, .btn-expand-menu:active { text-decoration: none; color: #888; position: relative; top: 7px; } .admin-menu { font-size: 10px; font-weight: 900; padding-bottom: 10px; transition: 0.4s; color: rgba(0,0,0,.6) !important; } .admin-menu:hover, .admin-menu:active { color: rgba(0,0,0,.4) !important; } .admin-menu i { position: relative; top: 3px; color: white; font-size: 16px; -webkit-text-stroke: 1.5px rgba(0,0,0,0.7); } .admin-menu span { position: relative; bottom: 1px; } .nav-user-photo { height: 35px; width: 35px; background-repeat: no-repeat; border-radius: 50%; background-position: center; background-size: cover; cursor: pointer; transition: 0.4s; opacity: 1; } .nav-user-photo:hover { opacity: 0.8; } .nav-user-photo img { height: 35px; width: 35px; border-radius: 50%; } .nav-icon { color: rgba(0,0,0,0.6) !important; transition: 0.4s; opacity: 1; position: relative; top: 8px; margin: 10px; } .nav-icon:hover { opacity: 0.8; } .nav-icon i { font-size: 18px; } .nav-icon-badge { position: absolute; background: #f6551e; font-size: 8px; height: 14px; width: 14px; text-align: center; color: white; border-radius: 50%; font-weight: bold; border: 1px solid white; margin-left: 19px; margin-top: 3px; z-index: 1; cursor: pointer; user-select: none; pointer-events: none; } .popover-notifications-header { font-size: 11px; font-weight: 900; color: rgba(0,0,0,0.4); width: 350px; padding: 12px 17px; border-bottom: 1px solid rgba(0,0,0,0.2); } .popover-notifications-body { max-height: 70vh; overflow-y: auto; } .popover-notifications-footer { font-size: 11px; text-align: center; font-weight: 800; color: #f6551e; width: 350px; padding: 15px; } .popover-notifications-user-photo { height: 45px; width: 45px; display: inline-block; background-repeat: no-repeat; border-radius: 50%; background-position: center; background-size: cover; } .popover-notifications-user-photo img { height: 45px; width: 45px; border-radius: 50%; } .popover-notifications-item { border-bottom: 1px solid rgba(0,0,0,0.1); border-left: 4px solid white; padding: 10px 0; cursor: pointer; transition: 0.4s; background: white; } .popover-notifications-item:hover { background: rgba(238,247,254,.6); opacity: 0.8; border-left-color: transparent; } .popover-notifications-item.active { border-left-color: rgb(84,178,247); background: rgb(238,247,254); } .popover-notifications-item-username { font-weight: 600; } .popover-notifications-item-description { line-height: 15px; font-size: 12px; font-weight: 600; color: rgba(0,0,0,0.7); } .popover-notifications-item-date { font-size: 11px; margin-top: 5px; font-weight: 600; color: rgba(0,0,0,0.5); } .popover-notifications-item-bullet { height: 8px; width: 8px; border: 2px solid rgba(0,0,0,0.3); border-radius: 50%; float: right; margin-top: -12px; } .popover-notifications-item.active .popover-notifications-item-bullet { background: rgba(0,0,0,0.3); border-color: transparent; } .ko-progress-bar { width: 100%; height: 6px; border-radius: 3px; border: 1px solid #CCC; overflow: hidden; background: rgba(0,0,0,.1); } .ko-progress-bar-fraction { height: 100%; float: left; } .popover-progress-header { width: 350px; text-align: center; font-weight: 900; color: rgba(0,0,0,0.3); font-size: 10px; padding: 10px; } .popover-progress-close { float: right; display: inline-block; position: relative; right: 10px; bottom: 33px; font-size: 18px; color: rgba(0,0,0,.4); cursor: pointer; } .propover-password-change { padding: 0 20px; } .popover-progress-info { padding: 0 20px; } .popover-progress-info .task-number { font-size: 32px; font-weight: 100; margin: 0; line-height: 32px; } .popover-progress-info .task-number-subtitle { font-size: 12px; font-weight: 600; color: rgba(0,0,0,0.4); margin-bottom: 4px; } .popover-progress-info .list-title { width: 350px; font-weight: 900; color: rgba(0,0,0,0.3); font-size: 9px; margin-top: 30px; } .popover-progress-info .list { margin-bottom: 40px; } .popover-progress-info .list-item { padding: 15px 0 10px 0; height: 45px; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.2); } .popover-progress-info .list-item .ball { border: 1px solid rgba(0,0,0,0.2); float: left; border-radius: 50%; height: 8px; width: 8px; margin: 7px; } .popover-progress-info .list-item .text { float: left; width: 240px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; } .popover-progress-info .list-item .number { font-size: 20px; float: right; font-weight: 500; margin-top: -8px; } .ko-modal { min-width: 50vw; max-width: calc(100vw - 240px); height: calc(100vh - 85px); background: white; position: fixed; right: 20px; top: 65px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.3); z-index: 1001; } @media screen and (max-width: 1500px) { .ko-modal { min-width: 60vw; } } @media screen and (max-width: 1200px) { .ko-modal { min-width: 80vw; } } @media screen and (max-width: 768px) { .ko-modal { min-width: 92vw; } } .ko-modal-overlay { background: rgba(0,0,0,0.3); height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; } .ko-modal-body { overflow-y: auto; height: 100%; padding-bottom: 25px; } .ko-float-menu { min-width: 15vw; max-width: 70vw; left: 0; right: 0; margin: auto; background: white; position: fixed; transition: left .5s ease-in, top .5s ease-in; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.3); z-index: 10000; } .ko-float-menu-overlay { background: rgba(0,0,0,0.3); height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; } .ko-float-menu-body { height: 100%; padding-bottom: 5px; } ko-schedule-commitments { width: 80vw; display: block; } .ko-schedule-commitments * { user-select: none; } .ko-schedule-commitments { white-space: nowrap; border: 1px solid rgba(0,0,0,.125); border-radius: 10px; background-color: white; box-shadow: 0 10px 15px #CCC; overflow: hidden; } .ko-schedule-commitments .commitments-header-hour { display: inline-block; width: 60px; text-align: center; font-size: 12px; margin-right: -4.5px; font-weight: 600; } .ko-schedule-commitments .commitments-header-hour .circle { width: 30px; height: 30px; border-radius: 50%; line-height: 30px; margin: 10px 0 10px -15px; } .ko-schedule-commitments .commitments-header-hour .circle.active { background: white; font-weight: bold; color: #fa8730; box-shadow: 0 7px 7px rgba(0,0,0,.2); } .ko-schedule-commitments .commitments-body { position: relative; } .ko-schedule-commitments .commitments-body .time-marker { background: rgba(0,0,0,.3); position: absolute; height: 100%; width: 1px; z-index: 0; margin-left: 160px; } .ko-schedule-commitments .commitments-body .time-marker.now { background: #a6a8ac; box-shadow: 0 0 3px #a6a8ac; z-index: 10; } .ko-schedule-commitments .commitments-header { background-color: rgba(222, 224, 234, 1); cursor: -webkit-grab; } .ko-schedule-commitments .commitments-header.active { cursor: grabbing; cursor: -webkit-grabbing; } .ko-schedule-commitments .commitments-body .commitment:nth-child(odd) { position: relative; background-color: rgba(222, 224, 234, 0.6); } .ko-schedule-commitments .commitments-body .commitment:nth-child(even) { position: relative; background-color: rgba(222, 224, 229, 0.05); } .ko-schedule-commitments .commitments-body .commitment .commitment-user { position: absolute; z-index: 30; border-radius: 20px; border: 2px solid #e9eaec; height: 30px; margin-left: 8px; margin-top: 6px; width: 140px; background: #e9eaec; } .ko-schedule-commitments .commitments-body .commitment .commitment-user.session-user { border-color: #e3e4e6; background: #e3e4e6; } .ko-schedule-commitments .commitments-body .commitment .commitment-user i { display: inline-block; font-size: 20px; color: rgba(33, 37, 41, 0.7); position: relative; bottom: 25px; left: -10px; cursor: pointer; } .ko-schedule-commitments .commitments-body .commitment .commitment-user img { display: inline-block; height: 26px; width: 26px; border-radius: 50%; background-size: cover; float: left; } .ko-schedule-commitments .commitments-body .commitment .commitment-user .name { display: inline-block; font-size: 12px; font-weight: 500; position: relative; bottom: 11px; line-height: 48px; margin-left: 5px; padding-right: 4px; width: 108px; text-overflow: ellipsis; overflow: hidden; } .ko-schedule-commitments .commitments-body .commitment .commitment-list { position: relative; left: 160px; height: 43px; } .ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item { position: absolute; border: 2px solid #5fc484; height: 30px; border-radius: 20px; line-height: 21px; text-align: center; margin-top: 6px; padding-top: 5px; padding-left: 0; padding-right: 0; background: rgba(255,255,255,1); z-index: 1; } .ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item.ui-draggable-dragging { background-color: rgba(200,200,200,0.6); z-index: 30; } .ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item .commitment-item-hour { display: inline-block; position: relative; font-size: 12px; bottom: 2px; margin-right: 1px; } .ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item .commitment-item-text { display: inline-block; position: relative; font-size: 12px; bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 90px); } .ko-schedule-commitments .commitments-body .commitment .commitment-list .commitment-item i { display: inline-block; font-size: 14px; position: relative; top: 2px; } .commitments-tooltip { text-align: left; } .commitments-tooltip h5 { display: inline-block; } .commitments-tooltip i { font-size: 16px; position: relative; top: 3px; } .commitments-tooltip span { font-size: 11px; } .commitments-tooltip .circle-chart { display: inline-block; margin-top: 6px; } .commitments-tooltip ul { font-size: 11px; padding-left: 30px; } .commitments-tooltip li { margin-bottom: -15px; } .title { display: inline-block; } .inline-block { display: inline-block; } .ko-schedule-commitments-calendar { width: 100%; } .ko-schedule-commitments-calendar .user-photo img { height: 65px; width: 65px; border-radius: 100%; } .ko-schedule-commitments-calendar ul, .ko-schedule-commitments-calendar li { list-style: none; } .ko-schedule-commitments-calendar { position: relative; } .ko-schedule-commitments-calendar .timeline { display: block; position: absolute; left: 0; height: 100%; width: 100%; padding-top: 60px; } .ko-schedule-commitments-calendar .timeline li { position: relative; height: 30px; } .ko-schedule-commitments-calendar .timeline li::after { content: ''; position: absolute; bottom: 0; height: 1px; background: #EAEAEA; width: calc(100% - 60px); left: 30px; } .ko-schedule-commitments-calendar .timeline li span { display: inline-block; font-size: 10px; transform: translateY(-100%); } .ko-schedule-commitments-calendar .commitments .commitments-group > ul { position: relative; padding: 0 5%; display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: scroll; } .ko-schedule-commitments-calendar .commitments .commitments-group:not(:first-of-type) { border-left-width: 0; } .ko-schedule-commitments-calendar .commitments .single-commitment { position: absolute; width: calc(100% + 2px); left: -1px; border-radius: 5px; background: #f6f7fb; border: 1px solid #4dbd74; padding: 5px 10px; min-height: 31px; } .ko-schedule-commitments-calendar .commitments .single-commitment .commitment-name { font-size: 11px; font-weight: bold; display: inline-block; width: calc(100% - 30px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ko-schedule-commitments-calendar .commitments .single-commitment .commitment-date { font-size: 10px; position: absolute; bottom: 5px; } .ko-schedule-commitments-calendar .commitments .single-commitment .commitment-user-photo { position: absolute; bottom: 5px; right: 5px; border-radius: 50%; height: 32px; width: 32px; background-size: cover; } .ko-schedule-commitments-calendar .commitments .single-commitment.small-commitment .commitment-date, .ko-schedule-commitments-calendar .commitments .single-commitment.small-commitment .commitment-user-photo { display: none; } .ko-schedule-commitments-calendar .commitments .single-commitment i { font-size: 14px; margin-top: 4px; } .ko-schedule-commitments-calendar .commitments { float: left; width: 100%; margin-left: 30px; position: relative; z-index: 1; } .ko-schedule-commitments-calendar .commitments .commitments-group { width: 14%; float: left; border: 1px solid #EAEAEA; margin-bottom: 0; } .ko-schedule-commitments-calendar .commitments .top-info { height: 60px; padding: 7px; border-bottom: 1px solid #eaeaea; } .ko-schedule-commitments-calendar .commitments .top-info > h6 { font-size: 28px; display: block; font-weight: 100; margin-bottom: 0; } .ko-schedule-commitments-calendar .commitments .top-info > span { font-size: 8px; font-weight: bold; display: block; color: rgba(0,0,0,.5); margin: 0; } .ko-schedule-commitments-calendar .commitments .commitments-group > ul { height: 718px; display: block; overflow: visible; padding: 0; } .ko-paginator { } .ko-paginator .page.active { background: rgb(115,170,224); box-shadow: 0 3px 5px 0px rgba(115,170,224, 0.7); color: white; font-weight: 600; } .ko-paginator .page { display: inline-block; font-weight: 100; font-size: 12px; line-height: 25px; width: 25px; height: 25px; border-radius: 50%; text-align: center; cursor: pointer; } .ko-paginator .prev, .ko-paginator .next { display: inline-block; cursor: pointer; } .ko-paginator .prev i, .ko-paginator .next i { color: rgba(0,0,0,0.5); font-size: 18px; position: relative; top: 4px; } .ko-chat-box { position: fixed; bottom: 0; right: 100px; z-index: 10; } .ko-chat-box .chat-box { width: 280px; box-shadow: 0 0 5px rgba(0,0,0,.3); border-top-left-radius: 8px; border-top-right-radius: 8px; } .ko-chat-box .chat-box .chat-header { background: rgb(244,244,244); height: 35px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .ko-chat-box .chat-box .chat-header img { height: 21px; width: 21px; border-radius: 50%; } .ko-chat-box .chat-box .chat-header .chat-user-name { display: inline-block; width: calc(100% - 50px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; font-size: 14px; padding: 7px 10px; } .ko-chat-box .chat-box .chat-header .chat-action { display: inline-block; font-size: 16px; color: rgba(0,0,0,0.3); position: relative; bottom: 10px; cursor: pointer; } .ko-chat-box .chat-box .chat-body { height: 250px; overflow-y: auto; background: white; padding-bottom: 10px; } .ko-chat-box .chat-box .chat-body .message-box { width: calc(100% - 70px); margin-top: 15px; } .ko-chat-box .chat-box .chat-body .message-box.me { margin-left: 70px; } .ko-chat-box .chat-box .chat-body .message-box .message-info { font-size: 10px; font-weight: bold; color: rgba(0,0,0,0.5); margin-left: 62px; } .ko-chat-box .chat-box .chat-body .message-box.me .message-info { margin-left: 2px; } .ko-chat-box .chat-box .chat-body .message-box .message-user-photo { width: 35px; height: 35px; display: inline-block; border-radius: 50%; margin-left: 15px; margin-right: 5px; margin-top: -1px; vertical-align: top; } .ko-chat-box .chat-box .chat-body .message-box .message-user-photo { width: 35px; height: 35px; border-radius: 50%; } .ko-chat-box .chat-box .chat-body .message-box .message-user-photo img { width: 35px; height: 35px; border-radius: 50%; } .ko-chat-box .chat-box .chat-body .message-box.me .message-user-photo { display: none; } .ko-chat-box .chat-box .chat-body .message-box .message-text { background: rgb(245,134,52); font-size: 12px; line-height: 14px; font-weight: 500; border-radius: 15px; padding: 8px 20px; color: white; display: inline-block; width: calc(100% - 60px); } .ko-chat-box .chat-box .chat-body .message-box.me .message-text { background: rgb(230,230,230); color: rgba(0,0,0,.7); width: calc(100% - 10px); word-break: break-word; } .ko-chat-box .chat-box .chat-footer { border-top: 1px solid rgb(225,225,225); height: 40px; } .ko-chat-box .chat-box .chat-footer .chat-message { width: 100%; resize: none; outline: none; height: 40px; font-size: 12px; padding: 10px; border: none; } .header-filters { min-height: 35px; } .ko-small-loading { } .ko-small-loading .loading-external { background: url(../../Content/Assets/loading-1.png) no-repeat center center; background-size: contain; height: 26.5px; width: 26.5px; position: absolute; -webkit-animation: spin 1s linear reverse infinite; -moz-animation: spin 1s linear reverse infinite; animation: spin 1s linear reverse infinite; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .ko-small-loading .loading-internal { background: url(../../Content/Assets/loading-2.png) no-repeat center center; background-size: contain; height: 26.5px; width: 26.5px; position: absolute; -webkit-animation: spin 1s linear reverse infinite; -moz-animation: spin 1s linear reverse infinite; animation: spin 1s linear reverse infinite; } .ko-full-loading { } .ko-full-loading .loading-external { background: url(../../Content/Assets/loading-1.png) no-repeat center center; background-size: contain; height: 106px; width: 106px; position: fixed; top: calc(50% - 53px); left: calc(50% - 53px); z-index: 10001; -webkit-animation: spin 1.4s linear infinite; -moz-animation: spin 1.4s linear infinite; animation: spin 1.4s linear infinite; } .ko-full-loading .loading-internal { background: url(../../Content/Assets/loading-2.png) no-repeat center center; background-size: contain; height: 106px; width: 106px; position: fixed; top: calc(50% - 53px); left: calc(50% - 53px); z-index: 10001; -webkit-animation: spin 1.6s linear infinite reverse; -moz-animation: spin 1.6s linear infinite reverse; animation: spin 1.6s linear infinite reverse; } .ko-full-loading .loading-base { background: url(../../Content/Assets/loading-simple.png) no-repeat center center; background-size: contain; height: 100px; width: 100px; position: fixed; top: calc(50% - 40px); left: calc(50% - 40px); z-index: 10001; } .ko-full-loading .loading-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; backdrop-filter: blur(3px); -moz-backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ko-reports-export { } .ko-reports-export .loading-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10001; backdrop-filter: blur(3px); -moz-backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ko-reports-export .export-frame { height: 300px; width: 300px; background: white; position: fixed; border-radius: 5px; top: calc(35% - 40px); left: calc(44% - 40px); z-index: 10002; } .ko-reports-export .export-frame .ko-modal-body { overflow-y: auto; height: 100%; padding-bottom: 25px; } .spinning { -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .spinning-reverse { -webkit-animation: spin 1s linear infinite reverse; -moz-animation: spin 1s linear infinite reverse; animation: spin 1s linear infinite reverse; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .ko-table.card { margin-bottom: 1em; } .ko-opened-chats { position: fixed; bottom: 0; right: 10px; } .ko-opened-chats .chat-item { position: relative; } .ko-opened-chats .chat-item.single { transition: 0.6s cubic-bezier(0.39, -0.04, 0.23, 1.24); } .ko-opened-chats.collapsed .chat-item.single { margin-bottom: -62px; } .ko-opened-chats .chat-item .badge { background: rgb(245,134,52); height: 17px; width: 17px; border-radius: 50%; font-size: 10px; line-height: 10px; position: absolute; color: white; left: 10px; cursor: pointer; } .ko-opened-chats .chat-item:hover .chat-close { opacity: 1; } .ko-opened-chats .chat-item .chat-close { background: rgba(50,50,50,0.8); height: 17px; width: 17px; border-radius: 50%; line-height: 15px; position: absolute; color: white; right: 10px; cursor: pointer; text-align: center; border: 1px solid rgba(255,255,255,0.2); opacity: 0; transition: 0.4s; } .ko-opened-chats .chat-item .chat-close i { font-size: 12px; } .ko-opened-chats .chat-item .user-photo { height: 55px; width: 55px; margin: 12px 15px; border-radius: 50%; box-shadow: 0 3px 5px rgba(0,0,0,.5); cursor: pointer; } .ko-opened-chats .chat-item .user-photo img { height: 55px; width: 55px; border-radius: 50%; } .ko-opened-chats .chat-item .orange-bg { height: 55px; width: 55px; margin: 15px; border-radius: 50%; background: rgba(99, 194, 222, 1); box-shadow: 0 3px 5px rgba(99, 194, 222, 0.7); cursor: pointer; } /* CONTEXT MENU */ @-webkit-keyframes contextspin { 0% { opacity: 0; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } 30% { opacity: 0; } } @keyframes contextspin { 0% { opacity: 0; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } 30% { opacity: 0; } } @-webkit-keyframes contextspinout { 0% { opacity: 1; } 70% { opacity: 0; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } } @keyframes contextspinout { 0% { opacity: 1; } 70% { opacity: 0; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } } .hide { -webkit-animation: 0.2s spinout linear !important; animation: 0.2s spinout linear !important; } .context-menu { position: relative; padding: 0; border-radius: 50%; list-style: none; -webkit-animation: 0.2s contextspin linear; animation: 0.2s contextspin linear; margin: 70px auto 0; position: absolute; display: none; z-index: 99999; } .context-menu > * { display: block; position: absolute; top: 50%; left: 50%; width: 35px; height: 35px; margin: -20px; } .context-menu > *:nth-of-type(1) { -webkit-transform: rotate(270deg) translate(80px) rotate(-270deg); transform: rotate(270deg) translate(80px) rotate(-270deg); } .context-menu > *:nth-of-type(2) { -webkit-transform: rotate(330deg) translate(80px) rotate(-330deg); transform: rotate(330deg) translate(80px) rotate(-330deg); } .context-menu > *:nth-of-type(3) { -webkit-transform: rotate(30deg) translate(80px) rotate(-30deg); transform: rotate(30deg) translate(80px) rotate(-30deg); } .context-menu > *:nth-of-type(4) { -webkit-transform: rotate(90deg) translate(80px) rotate(-90deg); transform: rotate(90deg) translate(80px) rotate(-90deg); } .context-menu > *:nth-of-type(5) { -webkit-transform: rotate(150deg) translate(80px) rotate(-150deg); transform: rotate(150deg) translate(80px) rotate(-150deg); } .context-menu > *:nth-of-type(6) { -webkit-transform: rotate(210deg) translate(80px) rotate(-210deg); transform: rotate(210deg) translate(80px) rotate(-210deg); } .context-menu li i { display: inline-block; color: white; font-size: 24px; padding: 6px; text-align: center; } .context-menu li { background: #f6551e; border-radius: 18px; box-shadow: 0px 3px 6px #333; overflow: hidden; cursor: pointer; } .context-menu li:hover { width: max-content; } .context-menu li span { font-size: 12px; position: relative; bottom: 7px; color: white; margin-right: 10px; clear: both; width: 100%; } .user-indicators-card { box-shadow: 0 0 20px #DDD; position: relative; } .user-indicators-card .user-name { font-size: 14px; } .user-indicators-card .icons i { font-size: 16px; cursor: pointer; color: #999; margin: 4px; position: relative; } .user-indicators-card .icons i.active { color: #111; } .user-indicators-card .icons i.active:after { content: ''; height: 5px; width: 5px; background: #FA8730; border-radius: 50%; position: absolute; } .user-indicators-card .back { position: absolute; top: 10px; left: 10px; cursor: pointer; } .user-indicators-card .back i { color: #AAA; font-size: 16px; position: relative; top: 4px; } .user-indicators-card .back span { font-size: 11px; font-weight: 700; color: #AAA; } .ko-timeline { position: relative; } .ko-timeline-title { font-size: 10px; margin-left: 25px; font-weight: bold; color: #AAA; margin-top: 2px; } .ko-timeline-content { margin-left: 60px; border-left: 1px dashed #CCC; margin-top: -14px; } .ko-timeline-commitment { margin: 30px 0; } .ko-timeline-commitment-time { font-size: 9px; font-weight: bold; position: absolute; left: 25px; margin-top: 8px; } .ko-timeline-commitment-bullet { height: 12px; width: 12px; display: inline-block; border-radius: 50%; position: relative; right: 7px; top: 8px; box-shadow: 0 0 0px 5px white; vertical-align: top; border: 1px solid; cursor: pointer; } .ko-timeline-commitment-description { display: inline-block; margin-left: 5px; cursor: pointer; width: calc(100% - 30px); font-size: 14px; } .sidebar-right { position: fixed; z-index: 10; bottom: 0; right: -320px; height: calc(100vh - 49px); background: white; padding: 5px; padding-top: 15px; padding-bottom: 20px; box-sizing: border-box; width: 320px; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); z-index: 10000; box-shadow: 0 2px 5px rgba(0,0,0,.3); overflow-y: auto; } .sidebar-right .content { opacity: 0; visibility: hidden; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); transition-delay: .3s; } .sidebar-right.active { right: 0; } .sidebar-right.active .content { opacity: 1; visibility: visible; transition-delay: .3s; } .sidebar-right .filter-item { padding: 5px; border-bottom: 1px solid #CCC; } .filter-item-title { font-size: 11px; font-weight: 900; color: rgba(0,0,0,.6); } .medium-sidebar-right { position: fixed; z-index: 10; bottom: 0; right: -700px; height: calc(100vh - 49px); background: white; padding: 5px; padding-top: 15px; padding-bottom: 20px; box-sizing: border-box; width: 700px; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); z-index: 10000; box-shadow: 0 2px 5px rgba(0,0,0,.3); overflow-y: auto; } .medium-sidebar-right .content { opacity: 0; visibility: hidden; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); transition-delay: .3s; } .medium-sidebar-right.active { right: 0; } .medium-sidebar-right.active .content { opacity: 1; visibility: visible; transition-delay: .3s; } .medium-sidebar-right .filter-item { padding: 5px; border-bottom: 1px solid #CCC; } .shortcuts-sidebar { padding: 10px; } .shortcuts-sidebar-back { position: absolute; color: rgba(0,0,0,0.5); cursor: pointer; } .shortcuts-sidebar-title { font-size: 14px; font-weight: 900; color: rgba(0,0,0,.6); text-align: center; padding-bottom: 10px; } .shortcuts-sidebar .command { padding-top: 12px; padding-bottom: 17px; font-size: 14px; font-weight: 500; text-align: center; border-bottom: 1px solid #DDD; border-top: 1px solid #DDD; margin-top: -1px; line-height: 24px; } .shortcuts-sidebar .command .key { border-radius: 5px; background: #4C4B4B; color: white; font-weight: 900; font-size: 11px; padding: 5px 10px; } .filter-user-photo img { width: 48px; border-radius: 100%; } .map-tooltip { border-radius: 10%; } .map-container { width: 100%; height: calc(100vh - 48px); position: relative; top: 0vh; transition: 0.4s ease-out 1s; } .map-container.active { width: calc(100% - 320px); transition: 0.4s ease-out; } .timeline-container { width: 0%; transition: 0.4s ease-out 1s; overflow: hidden; overflow-y: auto; height: calc(100vh - 50px); } .timeline-container.active { width: 320px; transition: 0.4s ease-out; } .timeline-container .card { opacity: 0; transition: 1s; transition-delay: 0.4s; } .timeline-container.active .card { opacity: 1; } .ko-slider .labels { padding: 15px 10px; } .ko-slider .labels .min { float: left; font-size: 12px; font-weight: bold; } .ko-slider .labels .max { float: right; font-size: 12px; font-weight: bold; } .ui-slider-handle.ui-corner-all.ui-state-default { border-radius: 50%; outline: none; background: #f6551e; border-color: #f6551e; box-shadow: 0 0 5px rgba(0,0,0,0.3); cursor: pointer; } .ui-slider-handle.ui-corner-all.ui-state-active { background: #f6551e; } .ui-slider-range.ui-corner-all.ui-widget-header { background: rgba(250,135,48,0.5); } .ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content { border-radius: 8px; } .ko-monthly-calendar table { table-layout: fixed; width: 100%; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid #DDD; border-radius: 10px; box-shadow: 0 10px 15px #CCC; margin-bottom: 10px; } .ko-monthly-calendar table thead th { border: 1px solid #DDD; font-size: 12px; background: #eeeff4; padding: 4px 8px; } .ko-monthly-calendar table thead th:first-child { border-top-left-radius: 9px; } .ko-monthly-calendar table thead th:last-child { border-top-right-radius: 9px; } .ko-monthly-calendar table tbody tr { height: 150px; } .ko-monthly-calendar table tbody td { height: 30px; border: 1px solid #DDD; vertical-align: top; padding: 2px; padding-top: 0px; background: #FDFDFE; } .ko-monthly-calendar table tbody tr:last-child td:first-child { border-bottom-left-radius: 9px; } .ko-monthly-calendar table tbody tr:last-child td:last-child { border-bottom-right-radius: 9px; } .ko-monthly-calendar table tbody td.today { background: #CFD8DC; border-color: #BBBBBB; } .ko-monthly-calendar table tbody td.past { /*background: #F5F6F9;*/ } .ko-monthly-calendar table tbody td.dropping { background: rgba(115, 170, 224, 0.2); } .ko-monthly-calendar table tbody td.today .day, .ko-monthly-calendar table tbody td.active .day { font-weight: bold; } .ko-monthly-calendar table tbody td.active { border-width: 3px; } .ko-monthly-calendar table tbody td .day { font-size: 12px; margin-left: 4px; font-weight: 600; } .ko-monthly-calendar table tbody td .commitment-item { border: 2px solid #5fc484; height: 30px; border-radius: 20px; line-height: 30px; text-align: center; margin-bottom: 3px; background: rgba(255,255,255,1); z-index: 1; } .ko-monthly-calendar table tbody td .commitment-item .commitment-item-hour { display: inline-block; position: relative; font-size: 12px; bottom: 2px; margin-right: 1px; vertical-align: top; } .ko-monthly-calendar table tbody td .commitment-item .commitment-item-text { display: inline-block; position: relative; font-size: 12px; bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 60px); vertical-align: top; } .ko-form-modal { position: fixed; left: 0; right: 0; top: 50px; bottom: 5px; margin: auto; z-index: 1002; max-width: 560px; max-height: calc(100vh - 96px); background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-r-xl); box-shadow: var(--dk-sh-3); overflow: hidden; /* garante que o header/footer respeitem o raio */ display: flex; flex-direction: column; font-feature-settings: "cv02","cv03","cv04"; -webkit-font-smoothing: antialiased; animation: dk-modal-in .22s var(--dk-ease) both; } .ko-form-modal .mandatory { color: var(--dk-danger) !important; } .ko-form-modal .grid-form { max-width: 700px; } .ko-form-modal .sections-menu { top: 0px; left: 0; position: absolute; inset: 0 auto 0 0; height: 100%; width: min(86%, 340px); background: var(--dk-surface); border: none; border-right: 1px solid var(--dk-line); border-radius: 0; box-shadow: 24px 0 48px -24px rgba(16, 24, 40, .35); z-index: 1003; animation: dk-drawer-in .22s var(--dk-ease) both; } .ko-form-modal .sections-menu .sections-container { border-right: 0px solid #F5F5F5; overflow-y: auto; height: 100%; display: flex; flex-direction: column; margin: 0; overflow: hidden; border: none; } .ko-form-modal .sections-menu .sections-container .menu-header { flex-direction: row; flex-wrap: nowrap; font-size: 16px; font-weight: bold; border-top-left-radius: 15px; border-top-right-radius: 15px; margin-top: 3px; align-content: stretch; display: flex; align-items: center; gap: 8px; padding: 14px 10px 14px 18px; margin: 0; width: 100%; background: var(--dk-surface-2); border: none; border-bottom: 1px solid var(--dk-line); border-radius: 0; } .ko-form-modal .sections-menu .sections-container .menu-header i { font-size: 22px; } .ko-form-modal .sections-menu .sections-container .menu-header .menu-header-title { width: -webkit-fill-available; flex: 1 1 auto; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--dk-ink-3) !important; } .ko-form-modal .sections-menu .sections-container .menu-header .menu-header-close { cursor: pointer; padding-top: 0; } .ko-form-modal .sections-menu .sections-container .menu-body { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; } .ko-form-modal .sections-menu .sections-container .menu-body .section { padding-left: 5px; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; border-bottom: 3px solid #cccccc5c; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--dk-r-md); color: var(--dk-ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .16s var(--dk-ease), color .16s var(--dk-ease), border-color .16s var(--dk-ease); } .ko-form-modal .sections-menu .sections-container .menu-body .section i { vertical-align: middle; margin-right: 3px; margin-top: 3px; font-size: 20px; margin: 0; color: var(--dk-ink-3); flex: 0 0 auto; } .ko-form-modal .sections-menu .sections-container .menu-body .section.active { background: var(--dk-orange-soft); border-color: var(--dk-orange-ring); color: var(--dk-orange-600); } .ko-form-modal-overlay { height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 1002; background: rgba(19, 26, 39, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ko-form-modal-body { height: 100%; display: flex; flex-direction: column; min-height: 0; } .ko-form-modal-body task-body { display: flex; flex-direction: row; min-height: 0; } .ko-form-modal-body .question-warning { flex-direction: row; margin-bottom: 10px; max-height: fit-content; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--dk-orange-ring); background: var(--dk-orange-soft); border-radius: var(--dk-r-md); color: var(--dk-orange-600); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left !important; } .ko-form-modal-body .grid-form-header { flex-direction: row; flex-wrap: nowrap; position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--dk-line); background: linear-gradient(180deg, var(--dk-surface-2), var(--dk-surface)); color: var(--dk-ink-2); flex: 0 0 auto; } .ko-form-modal-body .grid-form-header .show-menu { flex-wrap: nowrap; align-content: space-around; position: static; flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 44px; height: 40px; border-radius: var(--dk-r-md); border: 1px solid transparent; cursor: pointer; transition: background .18s var(--dk-ease), border-color .18s var(--dk-ease), color .18s var(--dk-ease); } .ko-form-modal-body .grid-form-header .show-menu i { vertical-align: middle; font-size: 22px; margin-top: 0; } .ko-form-modal-body .grid-form-header .show-menu span { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 0; } .ko-form-modal-body .grid-form-header .current-section-info { width: -webkit-fill-available; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--dk-ink); font-size: 16px; font-weight: 650; line-height: 1.25; } .ko-form-modal-body .sections { width: 45%; border-right: 2px solid #F5F5F5; margin: 30px 0; overflow-y: auto; } .ko-form-modal-body .sections .section i { vertical-align: middle; } .subtitleLine { color: #546e7a; line-height: 55px; font-size: 20px; cursor: pointer; font-weight: 600; padding-left: 30px; display: flex !important; align-items: center; } .subtitleLine.active { background: #F5F5F5; } .ko-form-modal-body .sections .section { color: #546e7a; line-height: 35px; font-size: 18px; cursor: pointer; font-weight: 600; padding-left: 30px; } .ko-form-modal-body .sections .section.active { background: #F5F5F5; } .ko-form-modal-body .lines { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; width: 100%; margin-top: 0; } .ko-form-modal-body .task-lines { position: relative; margin: 30px 0; display: flex; flex-direction: column; height: 100%; width: 100%; margin: 30px 0; } .ko-form-modal-body .title { position: absolute; background: #f7f4f4; border-bottom: solid; border-radius: 7px; border-color: lightgray; width: 100%; height: 35px; display: inline-block; color: #504f4f; font-weight: bold; text-align: center; } .ko-form-modal-body .closeWindow { position: absolute; width: 100%; color: #504f4f; padding: 5px; text-align: end; cursor: pointer; } .ko-form-modal-body .title i { vertical-align: bottom; margin-top: 5px; } .ko-form-modal-body .header { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--dk-line); background: linear-gradient(180deg, var(--dk-surface-2), var(--dk-surface)); flex: 0 0 auto; } .ko-form-modal-body .header .text { font-size: 16px; font-weight: 500; } .ko-form-modal-body .header .progress { margin-top: 5px; height: 10px; background: #ffe7d4; } .ko-form-modal-body .header .progress .completed { background: #FA8730; transition: 1s; } .ko-form-modal-body .form { max-width: 100%; position: relative; flex: 1 1 auto; min-height: 0; height: auto !important; padding: 18px 20px 20px; overflow-y: auto; overflow-x: hidden; background: var(--dk-surface); scroll-behavior: smooth; overscroll-behavior: contain; display: flex; flex-direction: column; } .ko-form-modal .form .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: auto !important; } .form-external-body { height: calc(100% - 40px) !important; } .ko-form-modal.grid-form .ko-form-modal-body .form { overflow-y: auto; overflow-x: hidden; height: auto !important; padding: 14px; gap: 0; } .ko-form-modal-body .form .question { flex-direction: row; align-content: space-between; margin-top: 5px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 18px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--dk-ink); text-align: center; } .ko-form-modal-body .form .sample-layout { margin: 0 0 14px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); background: var(--dk-surface); box-shadow: var(--dk-sh-1); overflow: hidden; } .ko-form-modal-body .form .sample-layout .sample-title { flex-direction: row; flex-wrap: nowrap; line-height: unset; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 9px 14px; margin: 0; background: var(--dk-navy-soft); border: none; border-bottom: 1px solid var(--dk-line); color: var(--dk-navy); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ko-form-modal-body .form .sample-layout .sample-title .sp-title-content { display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center; justify-content: flex-start; } .ko-form-modal-body .form .question .material-icons { font-weight: bolder; font-size: 22px; color: var(--dk-info); opacity: .75; margin-left: 2px; cursor: pointer; transition: opacity .18s var(--dk-ease); } .titleLine { color: #546e7a; text-align: center; line-height: 35px; font-size: 24px; font-weight: 600; background: #F5F5F5; left: -20px; margin-top: 18px; display: flex !important; justify-content: center; align-items: center; } .ko-form-modal-body .form .section-line { flex-direction: row; flex-wrap: nowrap; margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; margin: 18px 0 10px; padding: 10px 16px; background: var(--dk-navy-soft); border: none; border-left: 3px solid var(--dk-navy); border-radius: var(--dk-r-sm); color: var(--dk-navy); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; text-align: center; } .ko-form-modal-body .form .question-title { flex-direction: row; flex-wrap: nowrap; display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px; position: relative; margin: 18px 0 10px; padding: 10px 16px; background: var(--dk-navy-soft); border: none; border-left: 3px solid var(--dk-orange); border-radius: var(--dk-r-sm); color: var(--dk-navy); font-size: 13px; font-weight: 700; letter-spacing: .06em; /*text-transform: uppercase;*/ line-height: 1.3; text-align: left; } .ko-form-modal-body .form .question-line { margin: 0 0 12px; border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); background: var(--dk-surface); box-shadow: var(--dk-sh-1); /*overflow: hidden;*/ transition: box-shadow .2s var(--dk-ease), border-color .2s var(--dk-ease); } .ko-form-modal.grid-form .ko-form-modal-body .form .question-body { padding: 14px; } .ko-form-modal.grid-form .ko-form-modal-body .form .question-body .currency-symbol { padding-right: 0 !important; padding-left: 15px; display: flex; align-items: center; color: var(--dk-ink-3); font-weight: 700; font-size: 16px; margin: auto !important; padding: 0 0 0 12px; flex: 0 0 auto; width: auto; max-width: none; } .ko-form-modal.grid-form .ko-form-modal-body .form .mobile-focus { min-height: 45vh; } .selection-list { border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); margin-top: 12px; overflow: hidden; background: var(--dk-surface); } .selection-list .list-header { display: flex; flex-wrap: wrap; color: var(--dk-ink-3); background: var(--dk-surface-2); border-bottom: 1px solid var(--dk-line); padding: 7px 4px; margin: auto !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .selection-list .list-topic { font-weight: 700; padding: 0 10px; } .selection-list .list-body { padding: 6px 12px; } .selection-list .list-item { margin-bottom: 5px; align-items: center; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--dk-line); color: var(--dk-ink); font-size: 14px; } .selection-list .list-item .action { display: flex; flex-direction: row; justify-content: space-around; } .ko-form-modal-body .form canvas { color: white !important; display: block; margin: auto; border: 1px dashed var(--dk-line-strong); border-radius: var(--dk-r-md); cursor: crosshair; background: var(--dk-surface) !important; } .ko-form-modal.grid-form .ko-form-modal-body .form .question { flex-direction: row; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; padding: 10px 14px; background: var(--dk-surface-2); border: none; border-bottom: 1px solid var(--dk-line); color: var(--dk-ink); font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; } .ko-form-modal .grid-form .ko-form-modal-body .form .question .mandatory { color: rgb(255,0,0); } .ko-form-modal-body .form .option { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; margin-bottom: 10px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-md); background: var(--dk-surface); color: var(--dk-ink-2); font-size: 15px; font-weight: 500; line-height: 1.35; cursor: pointer; user-select: none; transition: border-color .16s var(--dk-ease), background .16s var(--dk-ease), color .16s var(--dk-ease), box-shadow .16s var(--dk-ease), transform .12s var(--dk-ease); } .ko-form-modal-body .form .option.active { background: var(--dk-orange); border-color: var(--dk-orange); color: #fff; box-shadow: 0 6px 16px -8px var(--dk-orange); } .ko-form-modal-body .form .option.create { background: var(--dk-navy); border-color: var(--dk-navy); color: #fff; } .ko-form-modal-body .form .option.create:before { margin-right: 10px; font-family: 'Material Icons'; content: 'add'; font-size: 16px; line-height: 1; background: rgba(255, 255, 255, .22); border-radius: 50%; padding: 4px; position: static; margin: 0; top: auto; right: auto; flex: 0 0 auto; } .ko-form-modal-body .form .option.active:before { margin-right: 10px; font-family: 'Material Icons'; content: 'check'; font-size: 16px; line-height: 1; background: rgba(255, 255, 255, .22); color: #fff; border-radius: 50%; padding: 4px; position: static; margin: 0; top: auto; right: auto; flex: 0 0 auto; } .ko-form-modal-body .form .input { width: 100%; border: 1px solid #cfd8dc; border-radius: 25px; font-weight: 400; color: #546e7a; font-size: 18px; padding: 10px 15px; outline: none; } .ko-form-modal-body .form .form-datepicker .bootstrap-datetimepicker-widget { width: 400px !important; } .ko-form-modal-body .form .clear-canvas { color: #FA8730; text-align: center; font-size: 14px; cursor: pointer; transition: 0.4s; font-weight: 600; display: block; width: 80px; margin: auto; } .ko-form-modal-body .form .thumbnail { width: 100%; text-align: center; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; background: var(--dk-surface-2); background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px dashed var(--dk-line-strong); border-radius: var(--dk-r-md); overflow: hidden; transition: border-color .16s var(--dk-ease), background .16s var(--dk-ease); } .ko-form-modal-body .form .thumbnail .material-icons { vertical-align: middle; color: var(--dk-ink-3); font-size: 56px; } .ko-form-modal-body .form .thumbnail .search-icon { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); pointer-events: none; color: #88888894; } .ko-form-modal-body .footer { position: relative; display: flex; align-items: center; gap: 8px; height: auto; width: 100%; padding: 12px 14px; background: var(--dk-surface); border-top: 1px solid var(--dk-line); border-radius: 0; flex: 0 0 auto; box-shadow: 0 -8px 20px -18px rgba(16, 24, 40, .45); } /* Mobile Rules */ @media only screen and (hover: none) and (pointer: coarse) { .ko-form-modal { top: 0px; bottom: 0px; max-width: 100%; max-height: 100%; } .popover { margin-right: 15px; border-radius: var(--dk-r-md) !important; box-shadow: var(--dk-sh-2); border-color: var(--dk-line); min-width: 92vw; max-height: 50vh; z-index: 10001; } .ko-select-content { height: auto; overflow-y: auto; margin: 5px 0px; min-width: 92vw; max-height: 38vh; } .ko-form-modal.grid-form .ko-form-modal-body .form { overflow-y: auto; overflow-x: hidden; } } @media only screen and (hover: none) and (pointer: coarse) and (max-height: 500px) { .ko-form-modal-body .footer { display: none; height: 0; padding: 0; } .ko-form-modal.grid-form .ko-form-modal-body .form { overflow-y: auto; overflow-x: hidden; } } /* End of Mobile Rules */ .ko-form-modal-body .footer .prev, .ko-form-modal-body .footer .next, .ko-form-modal-body .footer .cancel, .ko-form-modal-body .footer .save { vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 42px; padding: 0 14px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-md); background: var(--dk-surface); color: var(--dk-ink-2); font-size: 14.5px; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer; user-select: none; transition: background .16s var(--dk-ease), color .16s var(--dk-ease), border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease), opacity .2s var(--dk-ease); } .footerButtons { height: 40px; width: 100%; background: white; border-radius: 20px; } .footerButtons .prev, .footerButtons .next, .footerButtons .save { width: 50%; color: #FA8730; text-align: center; line-height: 40px; font-size: 25px; border: 2px solid #cccccc5c; cursor: pointer; transition: 0.4s; font-weight: 600; user-select: none; } .footerButtons .next { border-bottom-right-radius: 15px; right: 0; } .ko-form-modal-body .footer .next { right: 0; background: var(--dk-orange); border-color: var(--dk-orange); color: #fff; box-shadow: 0 8px 18px -10px var(--dk-orange); border-bottom-right-radius: var(--dk-r-md); } .ko-form-modal-body .footer .prev.disabled, .ko-form-modal-body .footer .next.disabled, .ko-form-modal-body .footer .cancel.disabled, .ko-form-modal-body .footer .save.disabled { opacity: .35; pointer-events: none; box-shadow: none; } .ko-form-modal-body .footer .prev:hover, .ko-form-modal-body .footer .next:hover, .ko-form.modal-body .footer .save:hover { /*opacity: 0.9;*/ } ko-custom-report-panel { width: 100%; overflow: hidden; } ko-custom-report-panel #panel-header { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; max-height: 313px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 0 !important; margin-top: 0 !important; padding: 0px 10px 0px 10px; display: flex; flex-direction: column; -ms-flex-wrap: wrap; display: -ms-flexbox; flex-wrap: wrap; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); } ko-custom-report-panel #division-bar { height: 10px; cursor: pointer; margin-top: 1px !important; margin-bottom: 1px !important; padding: 0 !important; } ko-custom-report-panel #panel-body { overflow-x: hidden !important; width: 100%; height: 100%; } ko-custom-report-panel .hide-element { overflow: hidden; height: 0px; transition: 0.4s cubic-bezier(0.77, 0, 0.18, 1); } ko-custom-report-panel .ko-checkbox, ko-custom-report-panel .ko-radiobutton { padding-top: 0px; } ko-custom-report-panel .ko-checkbox label, ko-custom-report-panel .ko-radiobutton label { margin-bottom: 0px; font-weight: 500 !important; } ko-custom-report-panel .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem; flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: space-evenly; align-items: center; } ko-custom-report-panel .card .list { max-height: -webkit-fill-available; overflow-x: hidden; overflow-y: scroll; } ko-custom-report-panel .card .card-header { width: 100%; padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); font-size: 12px; font-weight: 500; } ko-custom-report-panel .card .card-header label { margin-bottom: 0px !important; } ko-custom-report-panel .nav-tabs { font-size: 10px; font-weight: 500; } .report-card { background: white; border-radius: 15px; box-shadow: 0 5px 10px #CCC; padding: 20px; margin: 0 8px; height: calc(100% - 15px); } .report-card-header { display: flex; justify-content: space-between; overflow: hidden; } .report-card-header-title { font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-card-header-subtitle { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; } .report-card-header-buttons { white-space: nowrap; max-width: 0; transition-delay: .3s; } .report-card-header-button { background: rgb(240, 240, 240); padding: 0 15px; font-size: 12px; border-radius: 30px; line-height: 30px; height: 30px; font-weight: 500; letter-spacing: 2px; color: #616161; cursor: pointer; transition: .4s; display: inline-block; white-space: nowrap; max-width: 30px; padding-right: 6px; overflow: hidden; direction: rtl; opacity: 0; } .report-card-header-buttons-static { position: absolute; top: 20px; right: 40px; white-space: nowrap; max-width: 0; transition-delay: .3s; } .report-card-header-button-static { background: rgb(240, 240, 240); font-size: 12px; border-radius: 30px; line-height: 23px; height: fit-content; font-weight: 500; color: #616161; cursor: pointer; transition: .4s; display: inline-block; white-space: nowrap; overflow: hidden; opacity: 0; } .report-card:hover .report-card-header-button-static { opacity: 1; } .report-card:hover .report-card-header-buttons-static { transition-delay: 0s; } .report-card:hover .report-card-header-button { opacity: 1; } .report-card:hover .report-card-header-buttons { max-width: 500px; transition-delay: 0s; } .report-card-header-button:hover { padding-right: 15px; max-width: 200px; opacity: .8; } .report-card-content { overflow-y: auto; margin: 10px; height: calc(100% - 40px); padding-right: 1px; } .content-card-header { font-size: small; font-weight: 500; background: #d3d3d366; border-top-left-radius: 9px; border-top-right-radius: 9px; padding: 0px 12px 0px 20px; } .content-card-header .card-header-column { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; user-select: none; } .content-card-header .card-header-column i { font-size: 18px; margin-left: 5px; margin-top: 3px; cursor: pointer; } .report-card-frame { border: solid; border-color: lightgrey; border-radius: 9px; overflow-x: auto; margin: 10px; height: calc(100% - 40px); text-align: center; } .report-card-frame .draft-title { background: #e5e5e5; } .report-card-frame .draft-title label { margin: 0px; vertical-align: text-bottom; font-weight: 500; font-size: 15px; color: #848484; } .report-card-frame .draft-content { } .report-card-frame .draft-content label { font-size: smaller !important; margin: 0px !important; } .report-card-frame .draft-content .field-description { font-weight: bold; } .report-card-frame .draft-content .field-value { overflow: hidden; width: 100%; padding: 0px; max-height: 25px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .report-card-frame .row { border-bottom: 1px solid rgba(0,0,0,0.2); } .report-card-frame .title { background-color: lightgray; font-weight: 500 } .report-card-frame .content { overflow: hidden; width: 100%; padding: 5px 0px 0px 0px; max-height: 25px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ko-dashboard { width: calc(100% - 10px); } .ko-dashboard.grid-stack > .grid-stack-item > .grid-stack-item-content { top: 0; left: 0; right: 0; bottom: 0; } .ko-dashboard.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content { box-shadow: none; } .ko-dashboard.grid-stack > .grid-stack-item > .ui-resizable-handle { bottom: 15px; opacity: 0; } .table-clean tr th { background: rgb(237,240,245); font-size: 11px; text-transform: uppercase; color: #888; white-space: nowrap; border-bottom: none; border-top: none; padding: 10px; } .table-clean .sticky-header { position: sticky; top: 0; z-index: 10; } .table-clean .sticky-header.isFiltering { z-index: 11; } .table-clean tr th:first-child { border-top-left-radius: 8px; } .table-clean tr th:last-child { border-top-right-radius: 8px; } .table-clean tr th.Filtering .table-title { color: #30c335e0; } .table-clean tr th.Filtering .btn-order { color: #30c335e0; } .table-clean tr th.Filtering .btn-filter { color: #30c335e0 !important; } .table-clean tr th.Ascendente .table-title, .table-clean tr th.Descendente .table-title { color: #2196f3 !important; } .table-clean tr th.Ascendente .btn-order, .table-clean tr th.Descendente .btn-order { color: #2196f3 !important; } .table-clean tr th .btn-order.order-desc { display: none; } .table-clean tr th.Ascendente .btn-order.order-desc, .table-clean tr th.Descendente .btn-order.order-asc { display: none; } .table-clean tr th.Ascendente .btn-order.order-asc, .table-clean tr th.Descendente .btn-order.order-desc { display: inline-block; } .table-clean tr th .btn-filter { /*opacity: 0; Altered by Phill Request*/ opacity: 1; transition: 0.4s; } .table-clean tr th:hover .btn-filter { opacity: 1; } .table-clean tr th .table-title { display: inline-block; cursor: pointer; } .table-clean tr th .icons { display: inline-block; vertical-align: middle; padding-left: 5px; position: relative; } ko-filter-propover .filter-popover { top: 24px; left: 24px; padding: 0px; min-width: 220px; } ko-filter-propover .title { background-color: #d3d3d380; margin: auto; padding: 5px; font-weight: 500; font-size: 14px; color: #636363; display: flex; align-items: center; justify-content: center; } ko-occurrence-filter .statusOverview .title i { font-size: 21px; } ko-occurrence-filter .action-menu { display: flex; flex-direction: row; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; border-top: #d3d3d380; border-top-style: outset; height: 30px; background: #d3d3d380; } ko-occurrence-filter .action-menu .action-button { display: flex; width: fit-content; margin: auto; margin-top: 3px; font-size: 14px; font-weight: 500; align-items: stretch; cursor: pointer; color: #9b9494; user-select: none; } ko-occurrence-filter .action-menu .action-button i { font-size: 20px; color: #ef5206; } ko-filter-propover .content { padding: 1px 10px 10px 10px; } .filter-popover { top: 24px; left: 3px; padding: 10px; min-width: 180px; z-index: 9999; } .table-clean tr th.Ascendente .popover.filter-popover, .table-clean tr th.Ascendente .popover.filter-popover { left: 24px; } .table-clean tr th.Descendente .popover.filter-popover, .table-clean tr th.th.Descendente .popover.filter-popover { left: 24px; } .filter-popover:before { content: ''; display: inline-block; position: absolute; left: 6px; right: auto; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); top: -7px; } .filter-popover:after { content: ''; display: inline-block; position: absolute; left: 7px; right: auto; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; top: -6px; } .filter-popover .ko-checkbox { padding-top: 0; } .filter-popover .ko-checkbox input[type="checkbox"] + label { padding-bottom: 0; padding-top: 0; } .filter-popover .filter-popover-header { text-align: center; } .filter-popover .filter-popover-list { max-height: 150px; max-width: 300px; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; scrollbar-gutter: stable; margin-top: 10px; } .filter-popover .filter-popover-footer { text-align: center; padding-top: 10px; } .table-clean tr th:last-child .filter-popover { left: auto; right: -18px; } .table-clean tr th:last-child .filter-popover:before { right: 6px; left: auto; } .table-clean tr th:last-child .filter-popover:after { right: 7px; left: auto; } .table-clean tr th .icons i { font-size: 20px; cursor: pointer; } .table-clean tr td { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 600px; border-top: none; padding: 10px; } .table-clean tbody tr:nth-of-type(even) { background-color: rgb(249, 250, 251); } .report-selected-combo { /*width: 350px; margin-left: 10px; display: inline-block; vertical-align: middle;*/ } .report-selected-combo .ko-input input { font-size: 17px; top: 10px; /*font-size: 20px; top: 5px;*/ } .report-config-buttons { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } .report-config-button { height: 150px; width: 130px; background: #eceff1; box-shadow: 0 3px 5px rgba(0,0,0,0.2); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 10px; cursor: pointer; transition: 0.4s; } .report-config-button:hover { opacity: .6; } .report-config-button i { font-size: 40px; margin-top: 45px; } .report-config-button span { font-weight: 500; font-size: 14px; height: 40px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; display: flex; align-items: center; } .workflowAutofill { font-size: 14px; } .workflowAutofill:hover { background-color: #ddd; } .flow-card { border: solid; border-color: #c6d4e38a; border-radius: 8px; background: #c6d4e38a; margin: auto; font-size: small; } .flow-card .title { font-weight: 500; margin-bottom: 1px; } .flow-card .content { overflow: hidden; width: 100px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .solution-card { border: solid; border-color: lightgrey; border-radius: 3px; margin: auto; font-size: small; padding: 0px !important; } .solution-card .user-info { padding: 5px; margin: auto; background: #3f6a8126; border-bottom-style: solid; border-color: lightgrey; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: center; align-items: center; flex-direction: row; } .solution-card .actions { border-top-style: solid; border-color: lightgrey; border-top-right-radius: 3px; border-top-left-radius: 3px; } .solution-card .title { background-color: #d3d3d380; margin: auto; text-align: center; font-weight: 500; font-size: 14px; color: #636363; display: flow-root; } .solution-card .title i { vertical-align: middle; font-size: 21px; } .solution-card .action-text { margin: auto; font-weight: 700; cursor: pointer; color: #eb7f1f; } .description-area { border-style: solid; border-radius: 5px; border-color: whitesmoke; font-weight: 500; font-style: oblique; background-color: whitesmoke; padding: 10px; overflow-wrap: break-word; width: 100%; white-space: pre-wrap; color: black; font-size: 12px; text-align: left; } .default-frame { border: solid; border-color: lightgrey; border-radius: 15px; } .default-frame .title { background-color: #d3d3d380; margin: auto; border-top-right-radius: 10px; border-top-left-radius: 10px; } .frame-title-centered { background-color: #d3d3d380; margin: auto; border-top-right-radius: 10px; border-top-left-radius: 10px; text-align: center; } .frame-title-text { font-size: 13px; font-weight: 900; color: rgba(0,0,0,.3); display: block; } .vertical-frame { overflow-y: auto; margin: 10px; max-height: calc(100% - 40px); border: solid; border-color: lightgrey; border-radius: 15px; } .horizontal-frame { overflow-x: auto; margin: 10px; border: solid; border-color: lightgrey; border-radius: 15px; } ko-image-container { padding: 0px; overflow-x: auto; } ko-image-container .container { display: flex; align-items: center; padding: 0px; } ko-image-container .container-image { min-width: 150px; max-width: 200px; min-height: fit-content; max-height: 400px; padding-top: 10px; padding-bottom: 10px; border: 2px rgba(0,0,0,0.5) dashed; text-align: center; line-height: 10px; cursor: pointer !important; border-radius: 5px; user-select: none; display: flex; flex-direction: column; align-items: center; } ko-image-container .container-image .file-icon { font-size: 30px; color: rgba(0,0,0,0.6); } ko-image-container .container-image .file-name { font-size: 10px; margin-top: 9px; color: rgba(0,0,0,0.6); overflow-wrap: break-word; flex: 0 0 100%; max-width: 100%; } ko-image-container .container-image .remove-file { font-size: 12px; display: inline-block; background: white; border-radius: 50%; padding: 7px; text-shadow: none; transition: .4s; color: rgba(0,0,0,0.5); user-select: none; position: absolute; float: right; position: absolute; top: -12px; right: -10px; font-size: 12px; opacity: 1; } ko-image-container .container-image img { max-height: -webkit-fill-available; max-width: -webkit-fill-available; } ko-image-container .add-file { min-width: 85px; padding-top: 1.1rem; padding-bottom: 1.1rem; border: 2px rgba(0,0,0,0.5) dashed; text-align: center; line-height: 10px; cursor: pointer; border-radius: 5px; user-select: none; display: flex; flex-direction: column; align-items: center; } ko-image-container .add-file i { font-size: 30px; color: rgba(0,0,0,0.6); } ko-image-container .add-file .display-name { min-height: 30px; } ko-image-container .add-file .display-name span { font-size: 9px; word-break: break-word; } .text-area-display { border-style: solid; border-radius: 5px; border-color: whitesmoke; font-weight: 400; background-color: whitesmoke; overflow-wrap: break-word; width: 100%; white-space: pre-wrap; color: black; font-size: 20px; text-align: left; max-height: 30vh; overflow-y: scroll; padding-left: 0.25rem; padding-right: 0.25rem; } /* External Download */ .flex-container { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .external-small-logo { background: url(../../Content/Assets/logo.jpg) no-repeat; width: 100px; height: 30px; background-size: contain; background-position-x: left; margin-top: -3px; } .card-download { width: 400px; max-width: 90vw; background: white; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 5px 5px 25px rgba(0,0,0,0.15); overflow: hidden; } .card-download .header { color: #546e7a; text-align: center; line-height: 35px; font-size: 15px; font-weight: 600; background: #F5F5F5; display: flex !important; justify-content: center; align-items: center; } .card-download .body { padding: 10px 10px 10px 10px; } .card-download .body .title { font-weight: bold; } .card-download .body .download { color: blue; cursor: pointer; text-align: center; } .card-download h6 { font-size: 11px; color: #CCC; font-weight: bold; } .dkro-download-header { display: flex; flex-wrap: wrap; max-width: 100%; margin: auto; text-align: left; font-weight: 700; font-size: 20px; font-family: sans-serif; } .dkro-download-header a { color: blue; cursor: pointer; } .dkro-external-footer { position: fixed; bottom: 10px; left: 0; right: 0; color: rgba(0,0,0,.3); margin: 0 auto; text-align: center; font-weight: 900; font-size: 10px; font-style: italic; } .hide-important { visibility: hidden !important; } .display-text-box { border-style: solid; border-radius: 5px; border-color: whitesmoke; font-weight: 400; background-color: whitesmoke; overflow-wrap: break-word; width: 100%; white-space: pre-wrap; color: black; font-size: 13px; text-align: left; min-height: 25px; max-height: 30vh; overflow-y: scroll; padding-left: 0.25rem; padding-right: 0.25rem; } .gutter { background-color: #eee; background-repeat: no-repeat; background-position: 50%; } .gutter.gutter-vertical { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); cursor: row-resize; } .gutter.gutter-horizontal { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); cursor: col-resize; } .ko-photo { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 10002; } .ko-photo .video, .capturedImage { display: none; width: 100%; border-radius: 10px; object-fit: contain; } .ko-photo .freezeButton, .sendButton, .newImageButton, .torchButton, .facingButton, .abortButton { display: none; z-index: 10003; background-color: #ffffff47; color: #3498db; width: 75px; height: 75px; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; transition: background-color 0.3s, transform 0.2s; margin: 10px } .ko-photo .freezeButton:hover, .sendButton:hover, .newImageButton:hover, .abortButton:hover { background-color: #f0f0f0; transform: scale(1.05); } .ko-photo .freezeButton { background-color: rgb(228, 228, 228); } .ko-photo .overlay-content { display: flex; position: absolute; top: 50%; left: 50%; width: 98%; max-height: 100%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0); border-radius: 5px; } .ko-photo .top-buttons-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; align-items: center; width: 100%; height: 25%; padding: 10px; } .ko-photo .button-container { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 100%; padding: 10px; } .ko-photo .error { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; color: white; } /* ============================================================================= DKRO • Redesign dos formulários (ko-flow-form / ko-grid-form + componentes) Regras NOVAS adicionadas ao style.css. Regras que já existiam foram atualizadas no lugar original (acima), preservando o restante do arquivo. ============================================================================= */ :root { --dk-orange: #f6551e; --dk-orange-600: #e04a16; --dk-orange-soft: rgba(246, 85, 30, .10); --dk-orange-ring: rgba(246, 85, 30, .22); --dk-navy: #1b305d; --dk-navy-soft: rgba(27, 48, 93, .06); --dk-ink: #22303f; --dk-ink-2: #546e7a; --dk-ink-3: #8a99a6; --dk-surface: #ffffff; --dk-surface-2: #f6f7fb; --dk-surface-3: #eef1f7; --dk-line: #e3e8f0; --dk-line-strong: #cfd8e3; --dk-danger: #e5372f; --dk-success: #23a26d; --dk-info: #2165a9; --dk-r-sm: 10px; --dk-r-md: 14px; --dk-r-lg: 18px; --dk-r-xl: 24px; --dk-r-pill: 999px; --dk-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --dk-sh-2: 0 8px 24px rgba(16, 24, 40, .10); --dk-sh-3: 0 24px 64px -12px rgba(16, 24, 40, .32); --dk-ease: cubic-bezier(.22, .61, .36, 1); } .ko-form-modal.grid-form { max-width: 720px; } @keyframes dk-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } ; } .ko-form-modal-body .header .flow-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ko-form-modal-body .header .flow-title .eyebrow { font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 700; color: var(--dk-ink-3); } .ko-form-modal-body .header .flow-title .step { font-size: 15px; font-weight: 600; color: var(--dk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ko-form-modal-body .header .icon-btn { position: static !important; } .ko-form-modal .icon-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--dk-r-md); color: var(--dk-ink-2); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background .18s var(--dk-ease), color .18s var(--dk-ease), border-color .18s var(--dk-ease); user-select: none; } .ko-form-modal .icon-btn:hover { background: var(--dk-surface-3); border-color: var(--dk-line); color: var(--dk-ink); } .ko-form-modal .icon-btn:active { transform: scale(.96); } .ko-form-modal .icon-btn i { font-size: 22px; } .ko-form-modal .flow-progress { height: 3px; width: 100%; background: var(--dk-surface-3); flex: 0 0 auto; } .ko-form-modal .flow-progress .bar { height: 100%; background: linear-gradient(90deg, var(--dk-orange), #ff8a3d); border-radius: 0 var(--dk-r-pill) var(--dk-r-pill) 0; transition: width .45s var(--dk-ease); } .ko-form-modal-body .grid-form-header .show-menu:hover { background: var(--dk-surface-3); border-color: var(--dk-line); color: var(--dk-ink); } .ko-form-modal-body .grid-form-header .show-menu.mandatory { color: var(--dk-danger); position: relative; } .ko-form-modal-body .grid-form-header .show-menu.mandatory::after { content: ""; position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--dk-danger); box-shadow: 0 0 0 2px var(--dk-surface); } .ko-form-modal-body .grid-form-header .current-section-info i { color: var(--dk-ink-3); } @keyframes dk-drawer-in { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } ; } .ko-form-modal .sections-menu .sections-container .menu-body .section:hover { background: var(--dk-surface-2); border-color: var(--dk-line); } .ko-form-modal .sections-menu .sections-container .menu-body .section.active i { color: var(--dk-orange); } .ko-form-modal-body .form::-webkit-scrollbar { width: 10px; } .ko-form-modal-body .form::-webkit-scrollbar-track { background: transparent; } .ko-form-modal-body .form::-webkit-scrollbar-thumb { background: var(--dk-line-strong); border: 3px solid var(--dk-surface); border-radius: var(--dk-r-pill); } .ko-form-modal-body .form::-webkit-scrollbar-thumb:hover { background: var(--dk-ink-3); } .ko-form-modal-body .form .question .material-icons:hover { opacity: 1; } .ko-form-modal-body .question-warning .material-icons { font-size: 20px; flex: 0 0 auto; } .ko-form-modal-body .form .sample-layout .sample-title i { font-size: 18px; } .ko-form-modal-body .form .sample-layout .text-area-display { color: var(--dk-ink-2); line-height: 1.5; overflow-y: auto; } .ko-form-modal-body .form .section-line:first-child { margin-top: 2px; } .ko-form-modal-body .form .question-line:focus-within { border-color: var(--dk-orange-ring); box-shadow: 0 0 0 3px var(--dk-orange-soft); } .ko-form-modal.grid-form .ko-form-modal-body .form .question > .col:first-child { flex: 0 0 auto; width: auto; min-width: 30px; padding: 0 !important; color: var(--dk-ink-3); font-size: 12px; font-weight: 700; text-align: left; } .ko-form-modal.grid-form .ko-form-modal-body .form .question > .col-10 { flex: 1 1 auto; max-width: none; text-align: left; } .ko-form-modal.grid-form .ko-form-modal-body .form .question > .col:last-child { display: none; } .ko-form-modal.grid-form .ko-form-modal-body .form .question.mandatory { background: rgba(229, 55, 47, .07); box-shadow: inset 3px 0 0 var(--dk-danger); color: var(--dk-danger); } .ko-form-modal-body .form .option:hover { border-color: var(--dk-orange-ring); background: var(--dk-orange-soft); color: var(--dk-ink); } .ko-form-modal-body .form .option:active { transform: scale(.995); } .ko-form-modal-body .form .option + .input { margin-top: 0; } .ko-form-modal-body .form .input, .ko-input-question input, .ko-textarea-question textarea { width: 100%; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-md); background: var(--dk-surface); color: var(--dk-ink); font-size: 15px; font-weight: 500; line-height: 1.4; padding: 11px 14px; outline: none; transition: border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease), background .16s var(--dk-ease); } .ko-input-question input[inputmode="search"] { padding: 11px 14px 11px 40px !important; } .ko-input-question .menu-icon { color: var(--dk-ink-3) !important; cursor: pointer; pointer-events: none; } .ko-input-question input, .ko-textarea-question textarea { height: auto; min-height: 46px; } .ko-form-modal-body .form .input::placeholder, .ko-input-question input::placeholder, .ko-textarea-question textarea::placeholder { color: var(--dk-ink-3); font-weight: 400; } .ko-form-modal-body .form .input:hover, .ko-input-question input:hover, .ko-textarea-question textarea:hover { border-color: var(--dk-ink-3); } .ko-form-modal-body .form .input:focus, .ko-input-question input:focus, .ko-textarea-question textarea:focus { border-color: var(--dk-orange); box-shadow: 0 0 0 3px var(--dk-orange-soft); } .ko-form-modal-body .form .input:disabled, .ko-input-question input:disabled, .ko-textarea-question textarea:disabled { background: var(--dk-surface-2); color: var(--dk-ink-3); cursor: not-allowed; border-style: dashed; } .ko-input-question input.invalid, .ko-form-modal-body .form .input.invalid { border-color: var(--dk-danger); box-shadow: 0 0 0 3px rgba(229, 55, 47, .12); } .ko-input-question .error, .ko-input-question .success { bottom: auto; top: 13px; right: 12px; margin-right: 0; background: transparent; } .ko-form-modal-body .form .datetimepicker-input { cursor: pointer; } .bootstrap-datetimepicker-widget.dropdown-menu { border-radius: var(--dk-r-md) !important; border: 1px solid var(--dk-line); box-shadow: var(--dk-sh-2); } .ko-form-modal-body .form .ko-input, .ko-form-modal-body .form .ko-input-question { height: auto; margin-bottom: 0; } .ko-form-modal-body .form .ko-input { padding: 4px 12px 2px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-md); background: var(--dk-surface); transition: border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease); } .ko-form-modal-body .form .ko-input:focus-within { border-color: var(--dk-orange); box-shadow: 0 0 0 3px var(--dk-orange-soft); } .ko-form-modal-body .form .ko-input input { font-size: 15px; color: var(--dk-ink); } .ko-form-modal-body .form .ko-input label { color: var(--dk-ink-3); } .ko-form-modal-body .form .ko-input label:after { background: var(--dk-orange); } .ko-form-modal-body .form .ko-input .search-icon { color: var(--dk-ink-3); } .ko-form-modal .ko-checkbox { padding-top: 8px; } .ko-form-modal .ko-checkbox label { color: var(--dk-ink-2); font-size: 14.5px; cursor: pointer; } .selection-list .list-item:last-child { border-bottom: none; } .selection-list .list-item .action i { color: var(--dk-ink-3); font-size: 20px; cursor: pointer; border-radius: var(--dk-r-sm); padding: 2px; transition: color .16s var(--dk-ease), background .16s var(--dk-ease); } .selection-list .list-item .action i:hover { color: var(--dk-danger); background: rgba(229, 55, 47, .08); } .ko-form-modal-body .form .thumbnail:hover { border-color: var(--dk-orange); background: var(--dk-orange-soft); } .ko-form-modal-body .form .thumbnail img.thumbnail { min-height: 0; border: none; background: transparent; border-radius: var(--dk-r-sm); } .ko-form-modal-body .form .clear-canvas, .ko-drawn-question .clear-canvas, .ko-qr-reader .clear-canvas, .ko-photo-question .clear-canvas { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 96px; margin: 10px auto 0; padding: 7px 14px; border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-pill); color: var(--dk-ink-2); background: var(--dk-surface); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .16s var(--dk-ease), border-color .16s var(--dk-ease), background .16s var(--dk-ease); } .ko-form-modal-body .form .clear-canvas:hover, .ko-drawn-question .clear-canvas:hover, .ko-qr-reader .clear-canvas:hover, .ko-photo-question .clear-canvas:hover { color: var(--dk-orange-600); border-color: var(--dk-orange-ring); background: var(--dk-orange-soft); } .ko-questionary-panel .alternatives .row { margin: 0; } .ko-questionary-panel .actions > .row { width: 100%; margin: 0 !important; } .ko-questionary-panel .actions .action:last-child { border-right: none; } .ko-questionary-panel .actions .action:hover { background: var(--dk-surface-3); color: var(--dk-ink); } .ko-form-modal-body .footer .edge { flex: 0 0 auto; min-width: 46px; padding: 0 8px; } .ko-form-modal-body .footer .prev:hover, .ko-form-modal-body .footer .cancel:hover { background: var(--dk-surface-2); border-color: var(--dk-ink-3); color: var(--dk-ink); } .ko-form-modal-body .footer .save { border-color: var(--dk-orange-ring); color: var(--dk-orange-600); background: var(--dk-orange-soft); } .ko-form-modal-body .footer .save:hover { background: rgba(246, 85, 30, .16); border-color: var(--dk-orange); } .ko-form-modal-body .footer .next:hover { background: var(--dk-orange-600); border-color: var(--dk-orange-600); } .ko-form-modal-body .footer .next.edge { background: var(--dk-surface); color: var(--dk-orange-600); border-color: var(--dk-orange-ring); box-shadow: none; } .ko-form-modal-body .footer .prev:active, .ko-form-modal-body .footer .next:active, .ko-form-modal-body .footer .save:active { transform: translateY(1px); } .ko-form-modal .ko-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--dk-r-md); font-size: 12px; letter-spacing: .02em; box-shadow: var(--dk-sh-1); } .ko-form-modal .ko-button.muted { border: 1px solid var(--dk-line-strong); color: var(--dk-ink-2); } .ko-form-modal .ko-button i { top: 0; font-size: 18px; } @media only screen and (hover: none) and (pointer: coarse) { .ko-form-modal, .ko-form-modal.grid-form { top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; animation: dk-modal-in-mobile .2s var(--dk-ease) both; padding-bottom: env(safe-area-inset-bottom); } @keyframes dk-modal-in-mobile { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } ; } .ko-form-modal .sections-menu { width: 100%; border-right: none; } .ko-form-modal-body .header, .ko-form-modal-body .grid-form-header { padding-top: calc(12px + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 3; } .ko-form-modal-body .form { padding: 14px; -webkit-overflow-scrolling: touch; } .ko-form-modal-body .form .question { font-size: 18px; } .ko-form-modal-body .footer { position: sticky; bottom: 0; z-index: 3; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .ko-form-modal-body .footer .prev, .ko-form-modal-body .footer .next, .ko-form-modal-body .footer .cancel, .ko-form-modal-body .footer .save { min-height: 48px; font-size: 15px; } .ko-form-modal-body .form .option { padding: 14px 16px; font-size: 16px; } .ko-form-modal-body .form .input, .ko-input-question input, .ko-textarea-question textarea { font-size: 16px; /* evita zoom no iOS */ min-height: 48px; } } @media (prefers-reduced-motion: reduce) { .ko-form-modal, .ko-form-modal .sections-menu, .ko-form-modal * { animation: none !important; transition: none !important; } } .ko-form-modal .media-shell { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; background: var(--dk-surface-2); border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); } .ko-form-modal .media-shell .media-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .ko-form-modal .media-shell .thumbnail, .ko-form-modal .media-shell .canvas-div, .ko-form-modal .media-shell .qr-container { background: var(--dk-surface); border: 1px dashed var(--dk-line-strong); border-radius: var(--dk-r-md); /* overflow: hidden; */ margin: 0; box-shadow: none; min-height: 260px; } .ko-form-modal .media-shell .canvas-div { padding: 4px; } .ko-form-modal .media-shell .thumbnail > .material-icons { font-size: 44px; color: var(--dk-ink-3); margin: 28px auto; } .ko-form-modal .clear-canvas { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 36px; padding: 0 14px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1; color: var(--dk-ink-2); background: var(--dk-surface); border: 1px solid var(--dk-line-strong); border-radius: var(--dk-r-pill); box-shadow: var(--dk-sh-1); cursor: pointer; transition: color .18s var(--dk-ease), border-color .18s var(--dk-ease), background .18s var(--dk-ease); text-decoration: none; } .ko-form-modal .clear-canvas .material-icons { font-size: 17px; } .ko-form-modal .clear-canvas:hover { color: var(--dk-danger); border-color: rgba(229, 55, 47, .45); background: rgba(229, 55, 47, .06); } .ko-form-modal .ko-qr-reader .qr-container { min-height: 220px; } .ko-form-modal .ko-qr-reader .qr-hint { text-align: center; font-size: 12.5px; color: var(--dk-ink-3); } .ko-form-modal .ko-qr-reader .qr-result { display: flex; flex-direction: column; gap: 10px; } .ko-form-modal .ko-questionary-panel .alternatives { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; } .ko-form-modal .ko-questionary-panel .alternative-row { display: block; } .ko-form-modal .ko-questionary-panel .alternative-row .ko-switch-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 10px 16px; font-size: 14.5px; font-weight: 600; border-radius: var(--dk-r-md); border-width: 1.5px; box-shadow: var(--dk-sh-1); transition: transform .16s var(--dk-ease), box-shadow .16s var(--dk-ease), filter .16s var(--dk-ease); } .ko-form-modal .ko-questionary-panel .alternative-row .ko-switch-button:hover { transform: translateY(-1px); box-shadow: var(--dk-sh-2); } .ko-form-modal .ko-questionary-panel .alternative-row .ko-switch-button:active { transform: translateY(0); } .ko-form-modal .ko-questionary-panel .actions { padding-top: 10px; border-top: 1px dashed var(--dk-line); } .ko-form-modal .ko-questionary-panel .actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; grid-auto-flow: column; width: 100%; } .ko-form-modal .ko-questionary-panel .actions-grid .action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 10px 8px; font-size: 12.5px; font-weight: 600; text-align: center; color: var(--dk-ink); background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); box-shadow: var(--dk-sh-1); cursor: pointer; transition: transform .16s var(--dk-ease), box-shadow .16s var(--dk-ease), border-color .16s var(--dk-ease); min-width: max-content; } .ko-form-modal .ko-questionary-panel .actions-grid .action:hover { transform: translateY(-2px); border-color: var(--dk-line-strong); box-shadow: var(--dk-sh-2); } .ko-form-modal .ko-questionary-panel .actions-grid .action .material-icons { font-size: 22px; } .ko-form-modal .ko-email-question .selection-list { margin-top: 10px; background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); overflow: hidden; } .ko-form-modal .ko-email-question .selection-list .list-header { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; margin: 0; background: var(--dk-surface-2); border-bottom: 1px solid var(--dk-line); } .ko-form-modal .ko-email-question .selection-list .list-topic { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-ink-3); } .ko-form-modal .ko-email-question .selection-list .list-body { max-height: 190px; overflow-y: auto; } .ko-form-modal .ko-email-question .selection-list .list-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 12px; margin: 0; font-size: 14px; color: var(--dk-ink); border-bottom: 1px solid var(--dk-surface-3); } .ko-form-modal .ko-email-question .selection-list .list-item:last-child { border-bottom: 0; } .ko-form-modal .ko-email-question .selection-list .list-item:hover { background: var(--dk-surface-2); } .ko-form-modal .ko-email-question .selection-list .list-item .action .material-icons { font-size: 19px; color: var(--dk-ink-3); cursor: pointer; transition: color .16s var(--dk-ease); } .ko-form-modal .ko-email-question .selection-list .list-item .action .material-icons:hover { color: var(--dk-danger); } .ko-form-modal.grid-form .grid-form-header .show-menu span { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; } @media only screen and (max-width: 480px) { .ko-form-modal.grid-form .grid-form-header .show-menu span { display: none; } .ko-form-modal .media-shell { padding: 10px; border-radius: var(--dk-r-md); } }