/* Minification failed. Returning unminified contents.
(15,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,1): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,20): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(31,20): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(44,64): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(45,194): run-time error CSS1039: Token not allowed after unary operator: '-background'
(48,61): run-time error CSS1039: Token not allowed after unary operator: '-main-font'
(48,90): run-time error CSS1039: Token not allowed after unary operator: '-text'
(53,190): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(61,46): run-time error CSS1039: Token not allowed after unary operator: '-area'
(61,122): run-time error CSS1039: Token not allowed after unary operator: '-background'
(61,230): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(61,330): run-time error CSS1039: Token not allowed after unary operator: '-area'
(64,58): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(65,53): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(67,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(68,39): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(70,35): run-time error CSS1039: Token not allowed after unary operator: '-special-color'
(74,100): run-time error CSS1039: Token not allowed after unary operator: '-area'
(85,57): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(87,76): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(88,77): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(95,61): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(102,26): run-time error CSS1039: Token not allowed after unary operator: '-special-color'
(131,166): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(131,253): run-time error CSS1039: Token not allowed after unary operator: '-background'
(137,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(138,36): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(172,51): run-time error CSS1039: Token not allowed after unary operator: '-area'
(174,34): run-time error CSS1039: Token not allowed after unary operator: '-radius-small'
(176,41): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(176,123): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(180,45): run-time error CSS1039: Token not allowed after unary operator: '-area'
(228,30): run-time error CSS1039: Token not allowed after unary operator: '-new-color'
(234,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(262,17): run-time error CSS1039: Token not allowed after unary operator: '-area'
(263,18): run-time error CSS1039: Token not allowed after unary operator: '-area'
(266,47): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(274,17): run-time error CSS1039: Token not allowed after unary operator: '-area'
(284,146): run-time error CSS1039: Token not allowed after unary operator: '-background'
(284,189): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(296,44): run-time error CSS1039: Token not allowed after unary operator: '-area'
(298,61): run-time error CSS1039: Token not allowed after unary operator: '-area'
(298,193): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(298,276): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(300,51): run-time error CSS1039: Token not allowed after unary operator: '-area'
(305,46): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(308,134): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(311,154): run-time error CSS1039: Token not allowed after unary operator: '-area'
(335,45): run-time error CSS1039: Token not allowed after unary operator: '-area'
(338,44): run-time error CSS1039: Token not allowed after unary operator: '-area'
(339,46): run-time error CSS1039: Token not allowed after unary operator: '-area'
(352,50): run-time error CSS1039: Token not allowed after unary operator: '-elevation_3'
(369,38): run-time error CSS1039: Token not allowed after unary operator: '-area'
(369,59): run-time error CSS1039: Token not allowed after unary operator: '-area'
(377,50): run-time error CSS1039: Token not allowed after unary operator: '-area'
(383,46): run-time error CSS1039: Token not allowed after unary operator: '-area'
(393,25): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(395,22): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(403,25): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(404,22): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(409,17): run-time error CSS1039: Token not allowed after unary operator: '-area'
(414,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(421,18): run-time error CSS1039: Token not allowed after unary operator: '-area'
(426,46): run-time error CSS1039: Token not allowed after unary operator: '-area'
(443,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(447,259): run-time error CSS1039: Token not allowed after unary operator: '-dim'
(456,55): run-time error CSS1039: Token not allowed after unary operator: '-radius-small'
(456,243): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(457,66): run-time error CSS1039: Token not allowed after unary operator: '-elevation_2'
(459,63): run-time error CSS1039: Token not allowed after unary operator: '-area'
(459,86): run-time error CSS1039: Token not allowed after unary operator: '-area'
(459,204): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(459,235): run-time error CSS1039: Token not allowed after unary operator: '-background'
(461,67): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(495,126): run-time error CSS1039: Token not allowed after unary operator: '-background'
(498,92): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(556,30): run-time error CSS1039: Token not allowed after unary operator: '-context'
(561,51): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(585,41): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(589,18): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(601,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(605,21): run-time error CSS1039: Token not allowed after unary operator: '-background'
(610,133): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(630,101): run-time error CSS1039: Token not allowed after unary operator: '-background'
(630,130): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(632,67): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(635,22): run-time error CSS1039: Token not allowed after unary operator: '-background'
(636,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(684,71): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(722,38): run-time error CSS1039: Token not allowed after unary operator: '-area'
(722,120): run-time error CSS1039: Token not allowed after unary operator: '-area'
(722,180): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(722,218): run-time error CSS1039: Token not allowed after unary operator: '-background'
(724,97): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(741,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(742,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(743,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(744,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(745,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(746,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(747,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(748,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(749,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(750,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(751,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(752,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(753,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(754,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(755,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(756,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(757,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(758,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(759,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(760,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(825,23): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(846,39): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(912,17): run-time error CSS1039: Token not allowed after unary operator: '-input-padding'
(968,19): run-time error CSS1039: Token not allowed after unary operator: '-input-padding'
(991,102): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1001,67): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1008,65): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(1008,230): run-time error CSS1039: Token not allowed after unary operator: '-text'
(1009,17): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1012,40): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1014,41): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(1016,39): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1050,35): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1052,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(1066,42): run-time error CSS1039: Token not allowed after unary operator: '-special-color'
(1067,44): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(1068,51): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1071,41): run-time error CSS1039: Token not allowed after unary operator: '-orange-color'
(1074,66): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1087,34): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(1106,187): run-time error CSS1039: Token not allowed after unary operator: '-text'
(1195,38): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(1204,83): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1210,69): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1250,126): run-time error CSS1039: Token not allowed after unary operator: '-background'
(1250,157): run-time error CSS1039: Token not allowed after unary operator: '-background'
(1257,102): run-time error CSS1039: Token not allowed after unary operator: '-background'
(1268,179): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1270,43): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1288,15): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1294,82): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1327,56): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1347,100): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1348,92): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1362,119): run-time error CSS1039: Token not allowed after unary operator: '-background'
(1369,28): run-time error CSS1030: Expected identifier, found ':'
(1369,36): run-time error CSS1031: Expected selector, found ')'
(1369,36): run-time error CSS1025: Expected comma or open brace, found ')'
(1370,28): run-time error CSS1030: Expected identifier, found ':'
(1370,36): run-time error CSS1031: Expected selector, found ')'
(1370,36): run-time error CSS1025: Expected comma or open brace, found ')'
(1372,149): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1387,130): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1387,148): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1388,128): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1388,142): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1399,21): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1406,23): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1406,41): run-time error CSS1039: Token not allowed after unary operator: '-radius'
(1415,49): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1428,60): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1448,63): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(1479,23): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1495,84): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(1532,50): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(1538,28): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1541,28): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(1559,198): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(1561,98): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1563,55): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1565,56): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(1618,28): run-time error CSS1039: Token not allowed after unary operator: '-input-radius'
(1618,49): run-time error CSS1039: Token not allowed after unary operator: '-input-radius'
(1656,61): run-time error CSS1039: Token not allowed after unary operator: '-input-radius'
(1656,85): run-time error CSS1039: Token not allowed after unary operator: '-input-radius'
(1704,32): run-time error CSS1039: Token not allowed after unary operator: '-text'
(1712,162): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1712,256): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(1734,93): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1740,94): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1757,152): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1757,246): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(1772,145): run-time error CSS1039: Token not allowed after unary operator: '-context'
(1772,173): run-time error CSS1039: Token not allowed after unary operator: '-elevation_2'
(1791,70): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(1791,126): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1793,39): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(1804,46): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(1806,49): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1808,50): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(1812,67): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1861,23): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1863,34): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(1865,36): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(1867,32): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(1869,38): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(1872,57): run-time error CSS1039: Token not allowed after unary operator: '-area'
(1872,71): run-time error CSS1039: Token not allowed after unary operator: '-fab'
(1885,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1885,91): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(1887,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1887,79): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(1888,36): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1889,35): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1893,54): run-time error CSS1039: Token not allowed after unary operator: '-gap'
(1926,35): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1928,61): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1931,63): run-time error CSS1039: Token not allowed after unary operator: '-main-color-light'
(1934,117): run-time error CSS1039: Token not allowed after unary operator: '-overlay'
(1936,37): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(1938,63): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(1957,22): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(1992,61): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(2050,37): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2063,66): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2080,79): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2107,55): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2112,49): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2114,45): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(2114,87): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2114,122): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2114,158): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2116,72): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2208,71): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(2229,39): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2270,22): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(2271,32): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2272,26): run-time error CSS1039: Token not allowed after unary operator: '-input-radius'
(2297,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color-light'
(2297,71): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2336,111): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(2351,17): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(2373,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2374,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2379,83): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(2387,43): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2420,110): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2421,38): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2433,74): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2435,49): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2449,174): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2464,179): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2631,24): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(2632,26): run-time error CSS1039: Token not allowed after unary operator: '-private-color'
(2633,39): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2643,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2689,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(2705,35): run-time error CSS1039: Token not allowed after unary operator: '-background'
(2705,75): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2712,77): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(2714,49): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(2717,92): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(2719,53): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2754,48): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2754,117): run-time error CSS1039: Token not allowed after unary operator: '-context'
(2781,28): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(2787,44): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(2787,83): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2787,121): run-time error CSS1039: Token not allowed after unary operator: '-background'
(2812,43): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2813,74): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(2818,53): run-time error CSS1039: Token not allowed after unary operator: '-main-color-dark'
(2923,1): run-time error CSS1019: Unexpected token, found '}'
(2953,74): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(2954,76): run-time error CSS1039: Token not allowed after unary operator: '-new-color'
(2965,41): run-time error CSS1039: Token not allowed after unary operator: '-private-color'
(2966,38): run-time error CSS1039: Token not allowed after unary operator: '-new-color'
(2967,39): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(2996,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2996,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2996,64): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3043,61): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3053,261): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3061,87): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3072,147): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3112,47): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(3140,80): run-time error CSS1039: Token not allowed after unary operator: '-context'
(3140,237): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(3159,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3160,10): run-time error CSS1035: Expected colon, found '{'
(3163,67): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3164,30): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3176,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3176,82): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3188,136): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3191,159): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(3204,57): run-time error CSS1039: Token not allowed after unary operator: '-special-color'
(3209,47): run-time error CSS1039: Token not allowed after unary operator: '-elevation_4'
(3209,79): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3212,79): run-time error CSS1039: Token not allowed after unary operator: '-context'
(3212,107): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(3213,73): run-time error CSS1039: Token not allowed after unary operator: '-context'
(3213,101): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(3214,63): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3215,49): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3231,48): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3240,95): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3242,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3254,58): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3283,51): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3318,85): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3324,54): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3350,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3351,10): run-time error CSS1035: Expected colon, found '{'
(3402,46): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3452,44): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3479,97): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3482,41): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3493,78): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3509,60): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3515,95): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3519,75): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3520,126): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(3521,94): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3526,86): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3527,118): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3527,144): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3529,62): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3529,88): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3529,219): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3530,60): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(3532,82): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3542,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3543,10): run-time error CSS1035: Expected colon, found '{'
(3550,72): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3553,64): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3560,65): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3560,91): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(3569,97): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3569,138): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3570,84): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3574,48): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3574,74): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3574,205): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3575,46): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(3579,68): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3601,94): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3601,127): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(3602,57): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3608,83): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3617,44): run-time error CSS1039: Token not allowed after unary operator: '-area'
(3624,118): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3624,159): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3629,81): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3641,83): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3646,43): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3733,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3734,10): run-time error CSS1035: Expected colon, found '{'
(3748,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,54): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,80): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,106): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,132): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,158): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3748,183): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3750,28): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(3751,26): run-time error CSS1039: Token not allowed after unary operator: '-new-color'
(3752,30): run-time error CSS1039: Token not allowed after unary operator: '-private-color'
(3769,43): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(3771,39): run-time error CSS1039: Token not allowed after unary operator: '-new-color'
(3772,43): run-time error CSS1039: Token not allowed after unary operator: '-private-color'
(3773,42): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3774,49): run-time error CSS1039: Token not allowed after unary operator: '-missing-color'
(3775,49): run-time error CSS1039: Token not allowed after unary operator: '-process-color'
(3776,63): run-time error CSS1039: Token not allowed after unary operator: '-private-color'
(3776,89): run-time error CSS1039: Token not allowed after unary operator: '-error-color'
(3779,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3780,10): run-time error CSS1035: Expected colon, found '{'
(3831,116): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3883,32): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(3941,38): run-time error CSS1039: Token not allowed after unary operator: '-background'
(3942,50): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3979,136): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3985,144): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(3991,136): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3999,133): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(3999,206): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4000,55): run-time error CSS1039: Token not allowed after unary operator: '-position'
(4001,64): run-time error CSS1039: Token not allowed after unary operator: '-position'
(4002,58): run-time error CSS1039: Token not allowed after unary operator: '-position'
(4003,60): run-time error CSS1039: Token not allowed after unary operator: '-position'
(4006,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4007,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4037,59): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4054,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4054,74): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4054,106): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4054,140): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,76): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,99): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,119): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,144): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,236): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,327): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,358): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,380): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4067,403): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4069,14): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4088,51): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4089,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4090,35): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4097,34): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(4125,130): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4177,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4177,34): run-time error CSS1035: Expected colon, found '{'
(4178,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4178,33): run-time error CSS1035: Expected colon, found '{'
(4211,754): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4418,72): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4436,35): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4476,106): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4477,115): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4505,85): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4525,196): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(4553,88): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4642,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4643,10): run-time error CSS1035: Expected colon, found '{'
(4671,48): run-time error CSS1039: Token not allowed after unary operator: '-context'
(4671,76): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(4700,64): run-time error CSS1039: Token not allowed after unary operator: '-context'
(4700,92): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(4705,163): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4709,62): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4711,44): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(4719,92): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4723,65): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4727,73): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4734,46): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4735,51): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4737,47): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(4742,131): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(4742,183): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4742,214): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4844,43): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4856,51): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4859,48): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(4874,110): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(4881,63): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(4902,41): run-time error CSS1039: Token not allowed after unary operator: '-background'
(4904,31): run-time error CSS1039: Token not allowed after unary operator: '-main-font'
(4904,60): run-time error CSS1039: Token not allowed after unary operator: '-text'
(4931,134): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4935,105): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(4944,108): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4944,174): run-time error CSS1039: Token not allowed after unary operator: '-background'
(4954,80): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(4956,22): run-time error CSS1039: Token not allowed after unary operator: '-elevation'
(4962,32): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(4964,22): run-time error CSS1039: Token not allowed after unary operator: '-background'
(5005,51): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5028,44): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(5032,31): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(5034,21): run-time error CSS1039: Token not allowed after unary operator: '-context'
(5047,22): run-time error CSS1039: Token not allowed after unary operator: '-background'
(5050,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(5061,22): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(5064,36): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(5070,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color-light'
(5093,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5094,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5112,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5127,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5150,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5169,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5170,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%'
(5197,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5198,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5224,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '20%'
(5245,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5246,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5272,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5273,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5299,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5326,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5353,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5368,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5385,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5402,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5403,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5419,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5436,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5437,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5451,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5452,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5468,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5469,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5485,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5486,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5502,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5503,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5519,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5520,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5534,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5535,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5563,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5564,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5592,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5593,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5608,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5609,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5624,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5625,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5640,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5656,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5657,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5672,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5673,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5687,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5688,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5702,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5703,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5717,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5718,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5732,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5733,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5748,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5749,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5767,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5768,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5786,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5787,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5806,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5807,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%'
(5825,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5826,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '40%'
(5846,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5847,8): run-time error CSS1035: Expected colon, found '{'
(5858,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5859,8): run-time error CSS1035: Expected colon, found '{'
(5870,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5871,8): run-time error CSS1035: Expected colon, found '{'
(5882,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5883,8): run-time error CSS1035: Expected colon, found '{'
(5894,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5895,8): run-time error CSS1035: Expected colon, found '{'
(5905,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5906,8): run-time error CSS1035: Expected colon, found '{'
(5916,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5917,10): run-time error CSS1035: Expected colon, found '{'
(5926,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5927,8): run-time error CSS1035: Expected colon, found '{'
(5937,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5938,10): run-time error CSS1035: Expected colon, found '{'
(5947,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5948,8): run-time error CSS1035: Expected colon, found '{'
(5958,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5959,10): run-time error CSS1035: Expected colon, found '{'
(5968,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5969,8): run-time error CSS1035: Expected colon, found '{'
(5979,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5980,10): run-time error CSS1035: Expected colon, found '{'
(5989,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(5990,8): run-time error CSS1035: Expected colon, found '{'
(6000,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6001,10): run-time error CSS1035: Expected colon, found '{'
(6011,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6012,8): run-time error CSS1035: Expected colon, found '{'
(6023,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6024,10): run-time error CSS1035: Expected colon, found '{'
(6034,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6035,8): run-time error CSS1035: Expected colon, found '{'
(6046,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6047,10): run-time error CSS1035: Expected colon, found '{'
(6057,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6058,8): run-time error CSS1035: Expected colon, found '{'
(6069,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6070,10): run-time error CSS1035: Expected colon, found '{'
(6080,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6081,8): run-time error CSS1035: Expected colon, found '{'
(6092,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6093,10): run-time error CSS1035: Expected colon, found '{'
(6103,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6104,8): run-time error CSS1035: Expected colon, found '{'
(6115,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6116,10): run-time error CSS1035: Expected colon, found '{'
(6126,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6127,8): run-time error CSS1035: Expected colon, found '{'
(6138,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6139,10): run-time error CSS1035: Expected colon, found '{'
(6149,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6150,8): run-time error CSS1035: Expected colon, found '{'
(6161,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6162,10): run-time error CSS1035: Expected colon, found '{'
(6172,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(6173,8): run-time error CSS1035: Expected colon, found '{'
(6239,78): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(6302,47): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6302,79): run-time error CSS1039: Token not allowed after unary operator: '-background'
(6304,57): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6304,102): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6307,49): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6342,25): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(6361,50): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6404,45): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(6404,181): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6406,82): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6415,68): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6416,60): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6417,71): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6428,32): run-time error CSS1039: Token not allowed after unary operator: '-background'
(6429,39): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6473,25): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(6475,111): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(6475,142): run-time error CSS1039: Token not allowed after unary operator: '-background'
(7864,143): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(7872,132): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(7873,88): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(7876,64): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(7879,102): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(7885,86): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(7891,89): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(7893,72): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(7897,76): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(7945,63): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(7946,64): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(7954,36): run-time error CSS1039: Token not allowed after unary operator: '-text'
(7957,235): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(7967,71): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(7971,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(7975,24): run-time error CSS1039: Token not allowed after unary operator: '-press-color'
(7980,82): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(7984,121): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(7984,184): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(8000,64): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8000,105): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8009,49): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8009,302): run-time error CSS1039: Token not allowed after unary operator: '-outline-dark'
(8011,54): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(8050,37): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8051,37): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8053,37): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(8055,41): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8055,146): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8088,38): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8097,38): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8140,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(8149,38): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8150,71): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8160,194): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(8160,242): run-time error CSS1039: Token not allowed after unary operator: '-area'
(8160,262): run-time error CSS1039: Token not allowed after unary operator: '-area'
(8168,79): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8176,56): run-time error CSS1039: Token not allowed after unary operator: '-hover'
(8183,52): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8236,34): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8244,63): run-time error CSS1039: Token not allowed after unary operator: '-input-color'
(8245,25): run-time error CSS1039: Token not allowed after unary operator: '-button-radius'
(8248,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(8248,37): run-time error CSS1035: Expected colon, found '{'
(8249,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(8249,29): run-time error CSS1035: Expected colon, found '{'
(8274,89): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8274,116): run-time error CSS1039: Token not allowed after unary operator: '-highlight'
(8277,85): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8278,72): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8278,188): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8283,75): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(8285,74): run-time error CSS1039: Token not allowed after unary operator: '-over-color'
(8292,66): run-time error CSS1039: Token not allowed after unary operator: '-background'
(8292,138): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8294,131): run-time error CSS1039: Token not allowed after unary operator: '-outline'
(8308,70): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(8324,63): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
 */
/*
 * Ogma UI framework
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */


/* user agent reset */


:root {

--background: #fff;
--border-color: #e4e4e4;
--highlight: #f9f9f9;
--main-font: 'Roboto', sans-serif; 
--text: 13px;
--radius-small: 12px;

}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: var(--main-color);
}

::selection {
  color: #fff;
  background: var(--main-color);
}

* { padding: 0; margin: 0; box-sizing: border-box; outline: none; border: none; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent tap highlight color / shadow */ user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ }

* { /* box-shadow:0 0 0 1px red!important;*/ }


li { list-style: none; }
a { color: inherit; /*text-decoration:none;*/ }

/* ----- */

html { -webkit-tap-highlight-color: rgba(0,0,0,0); color: var(--text-color) }
html, body { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; box-sizing: border-box; position: relative; cursor: default; -webkit-overflow-scrolling: none; background: var(--background) }
body { overflow: hidden; -webkit-user-select: none; display: flex; }

html, body, input, button, textarea, li { font-family: var(--main-font); font-size: var(--text); }

/* layout */

application { height: 100%; width: 100%; position: relative; box-sizing: border-box; min-width: 320px; display: flex; flex-direction: column; }
wrapper { height: 100%; position: relative; overflow: hidden; margin: 0 auto; transform: scale(1); display: flex; flex-direction: column; width: 100%; background: #f9f9f9; background: var(--highlight); padding: 0 10px 10px }
wrapper[single] { padding: 10px; }
wrapper[nospace] { padding: 0; }

/* ----- */

/* toolbar */

toolbar { min-height: 60px; min-height: var(--area); width: 100%; position: relative; background: #fff; background: var(--background); display: flex; align-items: center; box-shadow: 0 0 0 1px #e4e4e4; box-shadow: 0 0 0 1px var(--border-color); box-sizing: border-box; user-select: none; display: flex;     padding: 0 calc((var(--area) - 40px) / 2); z-index: 99 }

toolbar[border="no"]{box-shadow:none}
toolbar[data-background="darker"]{background-image: var(--press-color);}
toolbar[border="bottom"]{box-shadow: 0 1px 0 0 var(--border-color);}

toolbar[accent] { background: var(--main-color); color: #fff; box-shadow: none; padding: 0 10px }
toolbar[highlight] { background: var(--highlight) }
toolbar[center] { justify-content: center; }
toolbar[error] { background: var(--special-color); color: #fff }

toolbar[right] { justify-content: flex-end }
toolbar[scroll] { padding: 0 }
toolbar > wrap { display: flex; position: relative; align-items: center;     padding: 0 calc((var(--area) - 40px) / 2); flex-shrink: 0 }
toolbar[scroll] > wrap { min-width: 100%; }



toolbar nav[launcher] { flex: 1; display: flex; overflow: hidden; }
toolbar nav[launcher] ul { display: flex; max-width: 100%; }
toolbar nav[launcher] ul li a { display: flex; height: 30px; padding: 0 15px; align-items: center; text-decoration: none; overflow: hidden; width: 100%; }
toolbar nav[launcher] ul li[child] a { padding-right:5px; }
toolbar nav[launcher] ul li a { }
toolbar nav[launcher] ul li { display: flex; cursor: pointer; border-radius: 30px; white-space: nowrap; position: relative; max-width: 100%; overflow: hidden; }
toolbar nav[launcher] ul li.selected { background: var(--main-color); color: #fff; cursor: default; font-weight: 700; margin: 0 5px; }
toolbar nav[launcher] ul li.highlight { cursor: default; font-weight: 700; box-shadow: inset 0 0 0 1.52px }
toolbar nav[launcher] ul li:not(.highlight):hover { background-image: var(--over-color); }
toolbar nav[launcher] ul li:not(.highlight):active { background-image: var(--press-color) }
toolbar nav[launcher] ul li.separator { box-shadow: inset 1px 0 0 0px; opacity: .15; height: 30px; min-width: 1px; width: 1px; margin: 0 10px; position: relative; z-index: 2; }
toolbar nav[launcher] ul li:not(.highlight):active text { transform: translateY(1px); }
toolbar nav[launcher] ul li text { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[launcher] [child] ul { display: none }

toolbar.main_header { background: #f9f9f9; background: var(--highlight); z-index: 1; box-shadow: none }

    toolbar.main_header wrap[notification] tip {
        position: absolute;
        top: 0px;
        right: 10px;
        pointer-events: none;
        background: var(--special-color);
        color: #fff;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
        height: 19px;
        padding: 0 5px;
    }

        toolbar.main_header wrap[notification] tip:empty {
            display: none;
        }

@media (max-width: 800px) {
    toolbar nav[launcher] ul li { display: none }
    toolbar nav[launcher] ul li.selected { display: flex; }
}

/* ----- */
/* ----- */

container { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; }
/*container[fixed]
{    min-width: 600px;
    min-height: 400px;}*/


view, [data-type="view"] { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; box-shadow: 0 0 0 1px #e4e4e4; box-shadow: 0 0 0 1px var(--border-color); flex-direction: column; z-index: 1; background: #fff; background: var(--background); }

view[auto] { width: auto }

view[vertical] { flex-direction: row; }
view[horizontal] { flex-direction: column; }
view[accent] { background: var(--main-color); color: #fff; }
view[highlight] { background: var(--highlight) }

view > form { display: flex; overflow: hidden; flex-direction: column; width: 100%; height: 100%; }

view[player][ratio]{height:0}
view[player][ratio] player{position:absolute;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
view[player][ratio="16:9"]{padding-top:56.25%}

view[player_wrap] { background: rgb(25, 25, 25); margin: auto; align-items: center; justify-content: center }
view[player_wrap] > view[player] { box-shadow: none }
view[player_wrap] > view[player] player[single] { margin: auto; }
view[scroll] { overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; /*padding-bottom: 150px;*/ }
view[scroll] scroller { flex: 1 }

view[mini] { max-width: 340px; /*max-width: 100%; flex-shrink: 0*/ }
view[small] { max-width: 500px; /*max-width: 100%; flex-shrink: 0*/ }
view[medium] { max-width: 640px; /*max-width: 100%; flex-shrink: 0*/ }

view.hide { display:none; }

view[border="none"]{box-shadow:none}
view[background="none"]{background:none}

.k-detail-cell > view { margin: 20px 20px 20px 0px; height: auto; width: auto; border-radius: 10px; }

.k-detail-cell > view [list] .k-grid.k-widget { margin: -1px }

/****/

view[intro] { overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; }
view[intro] > wrap { align-items: center; text-align: center; margin: auto; display: flex; flex-direction: column; flex-shrink: 0; word-break:break-word; }
view[intro] panel { display: flex; margin: 30px 0 0 0; }
view[intro] panel[vertical]{flex-direction:column;flex-direction: column;align-items: center;}
view[intro][lock] { overflow: hidden; height:auto; flex-shrink:0 }
view[intro][gap]  > wrap{width:100%; padding:var(--area);line-height:1.5;}

view[main] { border-radius: var(--radius-small) }

spliter { width: 10px; background: var(--highlight); height: 100%; flex-shrink: 0; z-index: 9; box-shadow: 0 0 0 1px var(--border-color) }
spliter[horizontal] { width: 100%; height: 10px }

view[promo]{min-width: 50vw;} 
view[promo] > wrap{width:100%; padding:var(--area);line-height:1.5;}

view.no_data { display:none; }

view[wrap] > view[intro] { display: none; }
view[wrap].empty > view[data] { display: none; }
view[wrap].empty > view[intro] { display: flex; }

@media (max-width: 900px) {
    view [promo] {
        min-width: calc(100vw - 40px);
    }
}
/**/


/*view[single] player{min-height:360px;min-width:640px; }*/

view[hide] { display: none }


/*@media (max-width: 800px)
 {
view[single] player{min-width:100vw; min-height:56.25vw }
}*/

/**/

/*view[player] {  align-items:center; justify-content:center;}
view[player] player{max-width:100%; max-height:100%; height:100%; width:100%;}*/







/**/

info { display: flex; flex-direction: column; position: relative; flex-shrink: 0 }



/*view[single]  info[bar]{max-width:640px;}*/


[intro] info { /*margin:10px;*/ align-items: center; line-height:1.5 }
[intro] info text { text-align: center; opacity: .5; white-space: pre-line; }
[intro] info a { color: var(--new-color); font-weight: 700; }

info text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 0 }

info text[title] { opacity: 1; margin-bottom: 15px; }
info text[subtitle] { opacity: 1; margin-bottom: 5px; }
info text[accent] { color: var(--main-color); opacity: 1; }


[intro] info separator { width: 100%; margin-top: 40px; }


[player] info[bar]:hover,
player[hover][desktop] + info[bar],
player[state="pause"][desktop] + info[bar] { transform: translateY(0px); transition-delay: 0s; opacity: 1; }



[player] info[bar] {z-index:2; position: absolute; color: #fff; top: 0; left: 0; background: linear-gradient(to bottom, rgb(25, 25, 25) 0%,rgba(0,0,0,0) 100%); width: 100%; transition-delay: .225s; transition-duration: .175s; transform: translateY(-100%); opacity: 0; }


info[bar] { padding: 30px; }
info[bar] text { margin-bottom: 5px; }
info[bar] text:last-child { margin: 0 }


/*view[resize]{flex-shrink: 0;resize: horizontal; width:50%; min-width:300px; max-width:calc(100% - 300px);padding-bottom:10px}*/ /* experiment */



/* switch*/

gap { width: 0; height: 0; flex-shrink: 0; transition: .225s; display: none }
switchable[dynamic].hide.drop ~ gap[dynamic] {
    width: var(--area);
    height: var(--area);
    display: flex;
}
switchable[dynamic].hide.drop{box-shadow:var(--elevation); position: absolute;
    right: 0;
    z-index: 9;}



switchable[dynamic].hide.drop.close{
    
    width: var(--area);
    flex-shrink: 0;
    position: absolute;
    right: 0;
    z-index: 9;

}

switchable[dynamic].hide toolbar{display:none}

switchable { display: flex; flex-direction: column; width: 100%; height: 100%; bottom: 0; position: relative; overflow: hidden; background: var(--background);   box-shadow: 0 0 0 1px var(--border-color); z-index: 2; transition: .125s; transition-property: width, height, flex-shrink; }
switchable[compact] { width: 60%; }
switchable[mini] { width: 340px; max-width: 100%; flex-shrink: 0 }

switchable[short] { flex-shrink: 0; height: 350px; }
switchable[short2] { flex-shrink: 0;height: 410px;}


switchable[mini="280"], switchable[micro] { width: 280px; max-width: 100%; flex-shrink: 0 }

switchable[middle] switchable[large] { width: 400px; max-width: 100%; flex-shrink: 0 }
switchable[large] { width: 800px; max-width: 100%; flex-shrink: 0 }
switchable.hide { width: 60px; width: var(--area); flex-shrink: 0; flex-direction: row; }

switchable switch { width: 100%; height: 60px; height: var(--area); display: flex; cursor: pointer; overflow: hidden; position: relative; flex-shrink: 0; background: #f9f9f9; background: var(--highlight); z-index: 2; box-shadow: 0 0 0 1px #e4e4e4; box-shadow: 0 0 0 1px var(--border-color); /*padding: 0 15px*/ transition:.225s; transition-property: width, height}

switchable.hide switch { width: 60px; width: var(--area); height: 100%; flex-direction: column;/* align-items: center;*/ /*padding: 15px 0*/ }

switchable switch:active wrap,
switchable switch:active icon
{ transform: translateY(1px) }
switchable switch[accent] { background: var(--main-color); color: #fff; }

switchable switch wrap { height: 100%; cursor: pointer; width: 100%; position: relative; }
switchable switch:hover { background-image: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%); background-image: var(--over-color); }


switchable switch text { font-weight: 700; pointer-events: none; white-space: nowrap; text-overflow: ellipsis; display: flex; height: 60px; height: var(--area); align-items: center;/* padding: 0 10px;*/ overflow: hidden; position: absolute; transform-origin: 0 0; }
switchable.hide switch text { transform: rotate(-90deg) translateX(-100%); /*padding: 0 20px;*/ }


.k-ie11 switchable.hide switch text { width: 400px; justify-content: flex-end }
.k-ie11 switchable.hide switch tip, switchable.hide switch tip span { order: 0; }

switchable switch tip { font-weight: 400; opacity: .0; transition-delay: .5s; transition-duration: .2s; transition-property: opacity; position: relative; display: flex; }




switchable.hide switch tip, switchable.hide switch tip span { order: initial }

switchable switch tip,
switchable switch tip span,
switchable[horizontal] switch tip,
switchable[horizontal] switch tip span { order: 2 }


switchable switch:hover tip { opacity: .5; transition-delay: .125s; }

switchable switch tip b { padding: 0 10px; }

switchable switch icon { margin: calc((var(--area) - 30px) / 2); }

switchable[horizontal] { flex-direction: column }
switchable[horizontal].hide { height: var(--area); width: 100%; flex-shrink: 0 }
switchable[horizontal] switch { height: var(--area); width: 100%; flex-direction: row; /*padding: 0 15px;*/ }
switchable[horizontal] switch text { transform: rotate(0deg); }
switchable[right] { right: 0 }

switchable.hide.drop { width: 360px; }



switchable[full] { position: absolute; }

switchable[full] + gap { display: flex; width: 60px; height: 60px; }


switchable[elevation]:not(.hide){box-shadow:var(--elevation_3)}

/*switchable.hide:not(.drop) > view {
  
    visibility: hidden;
    transform: translateY(10px);
    transform-origin:center top;
    transition-delay: 0s;
}

switchable:not(.drop) > view {
    transition: .125s .275s;
  
}*/


@media(max-width:800px) {
    gap { display: flex; width: var(--area); height: var(--area); }

    switchable[overlay] { position: absolute; z-index: 10 }
    switchable[compact] { width: 100% }

    view[adaptive],
    switchable[adaptive] { flex-direction: column; }

    switchable[adaptive] > switch { height: var(--area); width: 100%; flex-direction: row;/* padding: 0 15px;*/ }

    switchable[adaptive] > switch text { transform: rotate(0deg); }
    switchable[adaptive] > switch text tip,
    switchable[adaptive] > switch text tip span { order: 2 }

    switchable[adaptive].hide { height: var(--area); width: 100%; flex-shrink: 0 }
    switchable[adaptive].hide.drop { height: 50% }
    switchable[adaptive].hide.drop.enter { height: 100% }


    /* mobile ui imporment */
    switchable[overlay] {

    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    border-radius: var(--button-radius);
    margin:15px;
    box-shadow: var(--elevation);
}

    switchable[adaptive].hide.drop {

    margin: 15px;
    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    border-radius: var(--button-radius);
    box-shadow: var(--elevation);
}

    switchable.hide {
    width: 60px;
    width: var(--area);
    flex-shrink: 0;
    margin:0;
    height:100%;
    border-radius:0;
    box-shadow: 0 0 0 1px var(--border-color);
    max-width:initial;
    max-height: initial;
}

    switchable[adaptive][dynamic].hide.drop.close{
    
    height: var(--area);
    width:100%;

}

    switchable[adaptive].drag { height: var(--area) }

    spliter[adaptive] { width: 100%; height: 10px; }

    
}

@media (max-width: 700px)
{
    view[main] {border-radius: 0;}
    wrapper{padding:0}
}
/* windows */


:root{

    --dim:rgba(47, 47, 47, 0.8);
}
.window_container{height:100%; width:100%;    left: 0; position:absolute; display:none}
.window_container.open{display:flex}
.window_container > div {height:100%;width:100%;position:absolute;z-index:9998;overflow:hidden;padding:20px;opacity:0;visibility:hidden;display:flex;align-items:center; flex-direction:column; justify-content:center;overflow:hidden;    background-color: var(--dim);}
.window_container > div.no_overlay{background:none;pointer-events:none}
.window_container > div.no_overlay > div{pointer-events:all}
.window_container > div.open{opacity:1;visibility:visible;}
.window_container > div.moved{align-items:flex-start; justify-content:flex-start;}




.window_container > div > div{    border-radius: var(--radius-small); box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;display:flex;flex-direction:column;max-height:100%;max-width:100%;box-shadow: 0 0 0 1px var(--outline) }
      .window_container > div.no_overlay > div { box-shadow:var(--elevation_2)}

.window_container > div > div > header{width:100%;height:var(--area);min-height:var(--area);user-select:none;-webkit-user-select:none;cursor:default;position:relative;z-index:2;box-shadow:0 1px 0 0 var(--border-color);background:var(--background);display:flex;align-items:center;padding:0 10px }
.window_container > div[simple] > div > header { box-shadow: none; }
.window_container > div[accent] > div > header { background: var(--main-color); color: #fff; box-shadow: none; padding-left: 15px; }
.window_container > div > div > header > wrap{display: flex;
    align-items: center;
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0 10px;}

.window_container > div > div > header p{text-align:left;box-sizing:border-box;margin:0;padding:0 0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;    align-items: center;font-weight:700}
.window_container > div > div > header .button.close{margin-left:auto;}
.window_container > div > div > div{display:flex;flex-direction:column;max-height:100%;overflow:hidden;z-index:1}

.window_container > div > div > header group{flex-shrink:0}

/*.window_container > div.fullscreen{height: calc(100% - var(--area));
    bottom: 0;
    background: none;
    padding-top: 10px;
    --radius-small: 5px;}

*/



/*.window_container > div.fullscreen > div:not(.fullscreen) > div{display:none} 


*/

/*.window_container.fullscreen > div:not(.fullscreen) > div{display:none}*/ 

.window_container > div.fullscreen > div,.window_container > div.fullscreen > div > div, .window_container > div.fullscreen .window_cont{height:100%;width:100%;}

.window_cont{position:relative;display:flex;flex-direction:column;max-height:100%;width:100%;overflow:hidden;background:var(--background);}
.window_cont .form_container{padding:15px;white-space:normal;position:relative;max-height:100%; min-width: 260px;min-height: 120px;}
.window_cont form{display:flex;flex-direction:column;max-height:100%; min-height:100%; overflow:hidden;}
.window_cont .commandPanel{min-height:60px;box-sizing:border-box;box-shadow:0 0 0 1px var(--outline);z-index:1;display:flex;align-items:center;padding:0 15px;}


.window_cont[fixed='large']{width:900px; height:650px;}
.window_cont[fixed='medium']{width:700px; height:650px;}
.window_cont[fixed='medium_width']{width:700px; }
.window_cont[fixed='small']{width:450px; }



@media(max-width:490px)
{


    .window_cont[fixed='small'] {
      width: calc(100vw - 40px);
    }


}


@media(max-width:740px)
{

    .window_cont[fixed='medium'] {
      width: calc(100vw - 40px);
    }


}

@media(max-width:940px) {

    .window_cont[fixed='large'] {
       width: calc(100vw - 40px);
    }
}

/*.window_container.fullscreen{ height:calc(100% - var(--area)); bottom:0; --radius-small: 5px;}
*/

/*.window_container.fullscreen > .open:not(.fullscreen)

{    max-width: calc(100% - 20px);
    border-radius: var(--radius-small);
    left: 10px;
    height: calc(100% - 10px);}*/

/* ----- */


/* message_container */





.message_box{background:var(--context);display:flex;flex-direction:column;padding: 40px;}
.message_container{padding: 5px;display:flex;/* align-items:center; */flex-direction:column;margin-bottom: 35px; max-width: 50vw; overflow: hidden;line-height:1.5}
.message_container > icon{/* opacity:.2; *//* margin: 0 0 20px; */ display:none}

.message_container p{    font-size: 16px;    text-align: center; white-space:pre-line;}
.message_container h3{ font-size:16px; color:var(--main-color)}

.message_box panel .button{min-width: 170px;}
.message_box panel {/* min-height:60px; */width:100%;position:relative;display:flex;align-items:center;box-sizing:border-box;user-select:none;display:flex;/* padding:0 15px; */z-index:99;/* justify-content:center; *//* flex-direction: column; *//*  */flex-wrap: wrap;gap: 5px;}
.message_box panel[center] { justify-content:center; }
.message_box panel .button + .button {/* margin-left: 10px; */}

/* ----- */


/* form_container */

.form_container{height:100%;overflow:auto;overflow:overlay;-ms-overflow-style:-ms-autohiding-scrollbar;display:block;-moz-overflow-y:scroll;flex:1;-webkit-overflow-scrolling: touch; position:relative;z-index:1}

/*.k-ff.k-desktop *{    scrollbar-color: rgba(136, 136, 136, 0.25) transparent;

    scrollbar-width: thin;}*/

.k-ff.k-desktop .form_container{
    scrollbar-color: rgba(136, 136, 136, 0.25) transparent;
    overflow: scroll;
    scrollbar-width: thin;
}

.form_container[accent]{background:var(--main-color)}
.form_container[fab]{padding-bottom:110px;}

.form_container[highlight]
{background:var(--highlight)}

.form_container .section_group{width:100%;position:relative;display: flex;flex-wrap: wrap;flex: 1 1 100%;}
.form_container .section_group .sections{position:relative;padding:10px;/* flex-basis: 340px; */ width:370px;}
.form_container .section_group .sections.wide{
    /*flex: 2;*/
    /* max-width: 680px; */
    /* flex-basis: 580px; */
width:680px;

}
.form_container .outline_box
{box-shadow: inset 0 0 0 1px var(--border-color);
    margin: 10px;
    border-radius: 10px;
    overflow:hidden;
    background:var(--background)


}

.form_container .grouped_box {/* display:flex;*/ flex-direction:column; overflow:hidden;     columns: 5 400px; column-rule:1px var(--border-color) solid;    column-gap: 20px; }
.form_container .grouped_box > wrap{ display:inline-flex; flex-direction:column; width:100%;float: left;
    break-inside: avoid;}

.form_container .section_group .sections.extra{width:100%;}

.form_container .section_group .sections.medium{width:520px;}

@media screen and (max-width: 750px) /* mobile */
{
.form_container .section_group .sections{width:100%;flex-basis: 100%;}
/*.window_container > div, .window_container > div.fullscreen{padding:0}
.window_container > div > div{border-radius:0}
*/
.message_container {max-width:100%}
.message_box panel .button{width:100%}
}


.form_container .section_group.highlight{padding:10px;}
.form_container .section_group.highlight .sections.special{  border-radius: 10px;  background: var(--background); color: #4E342E;--background: #ffecb3;}

.dark .form_container .section_group.highlight .sections.special{ --outline: rgb(78 52 46 / 20%);}
.form_container .section_group.highlight .sections.rounded{border-radius: 10px;}
.form_container .section_group.highlight .sections {
    background: var(--background);
    box-shadow:  0 0 0 1px var(--border-color);}

/* ----- */


/* section_group */

.section_group{max-width:100%;}
.section_group .sections{max-width:100%;}


/* ----- */


/* form_fields */

.form_fields{box-sizing:border-box;display:block;position:relative;padding:5px;width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap;flex:1;}
.form_fields.large{flex:2;overflow:hidden}
.form_fields.mini{flex:.5}
.form_fields.micro{flex:.25}
.form_fields.auto{flex-grow:initial; float:left; width:auto}
.form_fields .data_label{ cursor:default;flex:1 100%;font-weight:700;margin:0 5px 5px;    overflow: hidden;text-overflow: ellipsis;}
.form_fields .data_label.complex { display:flex; align-items:center; }
.form_fields .data_help{cursor:default;flex:1 100%;    padding: 0 5px 5px; opacity:.7;    overflow: hidden;text-overflow: ellipsis; line-height:1.5}
.form_fields .data_info{cursor: default;flex: 1 100%;padding: 5px 5px 0 5px;overflow: hidden;text-overflow: ellipsis;}

.form_fields .section_title{display: flex; align-items: center; padding: 0 5px;  } 
.form_fields .section_title > text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity: .5;}
.form_fields .section_title > text[highlight]{opacity:1}
.form_fields .section_title > [classic] input + text{padding-left:0}
.form_fields .section_title > [classic] separator + text {padding-right:0}
.form_fields .data_label text { overflow: hidden; text-overflow: ellipsis; padding-right: 10px;}
.form_fields .data_label span{font-weight:400;opacity:.5;float:right;}
.form_fields .data_label tip{font-weight:400;opacity:.5; padding:0 10px}
.form_fields .data_label hint { margin-left: auto; }
.form_fields .data_label .button { float:right; }
.form_fields .data_label span.hint { position: absolute; right: 10px; top: -5px; opacity: 1; }
.form_fields > span.hint { margin-left: auto; margin-right: 5px;}

.field_group .form_fields .data_label span.hint { right: 5px; }

.form_fields .data_label em { margin-right: 5px; }

.form_fields options{display:flex;flex-direction:column;flex:1;align-items:flex-start;}

wrap[group].form_fields {flex-wrap:nowrap}
wrap[group].form_fields text{margin-left:5px}

.form_fields .form_separator{height:1px;box-shadow:inset 0 -1px  var(--outline);flex:1;margin:15px 5px}

.form_fields > input,
.form_fields .input_cont,
.form_fields .k-widget,
.form_fields .data_read,
.form_fields textarea,
.form_fields .Tokenize,
.form_fields .option_bar,
.form_fields .option_column,
.form_fields > .tab_strip

{ margin:5px;flex-grow:1;}


.form_fields [small]{flex-grow:0}

.form_fields .k-slider.k-widget
{margin-top:10px}


.form_fields > [checkbox],
.form_fields > [radio],
.form_fields > [classic] {
    margin: 0 5px;
}

.field_group{padding:5px;display:flex;flex-wrap: wrap;    align-items: center;}
.field_group .form_fields{padding:0}
.field_group[autosize] .form_fields{width:unset; flex-grow:unset}
.field_group .form_fields .data_label span.hint { right: 5px; }

/* ----- */




.alert_contianer {display: flex; width: 100%; flex-shrink:0;flex-wrap: wrap; }
.alert_contianer alert {height: var(--area); display: flex; flex-shrink: 0; align-items: center; padding: 0 calc((var(--area) - 40px) / 2);width: 100%; box-shadow: 0 0 0 1px var(--outline); z-index:1; background:var(--background) }
.alert_contianer alert action {margin-left: auto; display: flex; align-items: center; }
.alert_contianer alert[warning] {background: #FFECB3; color: #4E342E;box-shadow: 0 0 0 1px var(--outline-dark); }
.alert_contianer icon {margin: 5px; }
.alert_contianer alert > text {font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; }


.alert_contianer.multi alert{ height:auto; padding:15px}
.alert_contianer.multi alert > text{white-space:pre-line}
/*
 * Ogma UI framework // Controls
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */


:root {
    --button-radius: 5px;
    --input-color: rgba(136, 136, 136, 0.1);
    --input-padding:7px;
    --input-radius:5px;
    --elevation: 0 0 50px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,.05);
    --elevation_2: 0 50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--border-color);
    --elevation_3: 0 50px 110px -20px rgba(0,0,0,.3),0 -50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--border-color);
    --elevation_4: 0 50px 110px -20px rgba(0,0,0,.3), 0 0 0 1px var(--outline);
    --outline: rgba(0,0,0,.1);
    --outline-dark: rgba(0,0,0,.1);
    --fab: 50px;
    --hover: rgba(136, 136, 136, 0.1);
    --tip: #424242;
    --context: #fff;
    --over-color: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);
    --press-color: linear-gradient(to top, rgba(0,0,0,.07) 0%,rgba(0,0,0,.07) 100%);
    --overlay: rgba(234, 234, 234, 0.65);
    --area: 60px;
    --dark-color: #eae8e8;
    --text-color: #000;
}


@supports (backdrop-filter: blur(10px)) {

   .context_container{backdrop-filter:blur(10px); --context: rgba(255,255,255,.85);}
   .dark .context_container{--context: rgba(35,35,35,.9);}
}



/*@media (min-resolution: 192dpi) {

:root
{
    --text:15px;
}

}*/

/*::selection {background: var(--main-color);color:#fff;}*/

/* icon */

@font-face { font-family: icon; src: url(/Content/Font/icon.ttf?v=4.9.25_250820);font-display:block; }

icon { 
     font-family: icon; 
        font-feature-settings: "liga", "dlig";
       font-variant-ligatures: common-ligatures;
      
    text-rendering: optimizeLegibility;
    width: 30px; 
       height: 30px;
       flex-shrink: 0; 
       display: flex;
       align-items: center;
       justify-content: center; 
       font-size: 30px;
       font-weight: 400;
       font-style: normal; 
       user-select: none;
       text-transform: lowercase;
       position: relative;
       z-index: 9; 
       overflow: hidden; 
       text-decoration: none;
       pointer-events: none; }

icon[large] { width: 90px; height: 90px; font-size: 90px; }
icon[extra_large] { width:130px; height: 130px; font-size: 130px; margin:30px; }


icon[middle] { width: 60px; height: 60px; font-size: 50px; }
icon[mini] { width: 15px; height: 15px; font-size: 24px; }
icon[micro] { width: 15px; height: 15px; font-size: 15px; }



icon[light] { opacity: .15 }


icon_color { width: 30px; height: 30px; flex-shrink: 0; display: flex; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; user-select: none; position: relative; z-index: 9; overflow: hidden; }

svg[loader]{fill:var(--text-color)}
svg[loader][hidden]{opacity:0; transform:scale(0); transition:.225s}

svg[loader][hidden].show{opacity:1; transform:none}


icon[data-type="material"] {   font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 200, 'opsz' 20; font-family: "Material Symbols Rounded"; font-size:24px;}

icon[data-type="material"][large] { font-size: 70px; }
icon[data-type="material"][extra_large] { font-size: 130px; }
icon[data-type="material"][middle] { font-size: 35px; }
icon[data-type="material"][micro] { font-size: 15px; }


icon[data-type="material"][data-icon-weight="100"]{font-variation-settings: 'wght' 100;}
icon[data-type="material"][data-icon-weight="200"]{font-variation-settings: 'wght' 200;}
icon[data-type="material"][data-icon-weight="300"]{font-variation-settings: 'wght' 300;}
icon[data-type="material"][data-icon-weight="500"]{font-variation-settings: 'wght' 500;}
icon[data-type="material"][data-icon-weight="600"]{font-variation-settings: 'wght' 600;}
icon[data-type="material"][data-icon-weight="700"]{font-variation-settings: 'wght' 700;}

icon[data-color="primary"]{color:var(--main-color)}

icon[data-color="red"] {color:#f44336;}
icon[data-color="pink"] {color:#e91e63;}
icon[data-color="purple"] {color:#9c27b0;}
icon[data-color="deep-purple"] {color:#673ab7;}
icon[data-color="indigo"] {color:#3f51b5;}
icon[data-color="blue"] {color:#2196f3;}
icon[data-color="light-blue"] {color:#03a9f4;}
icon[data-color="cyan"] {color:#00bcd4;}
icon[data-color="teal"] {color:#009688;}
icon[data-color="green"] {color:#4caf50;}
icon[data-color="light-green"] {color:#8bc34a;}
icon[data-color="lime"] {color:#cddc39;}
icon[data-color="yellow"] {color:#ffeb3b;}
icon[data-color="amber"] {color:#ffc107;}
icon[data-color="orange"] {color:#ff9800;}
icon[data-color="deep-orange"] {color:#ff5722;}
icon[data-color="brown"] {color:#795548;}
icon[data-color="grey"] {color:#9e9e9e;}
icon[data-color="blue-grey"] {color:#607d8b;} 






icon[data-fill][data-type="material"]
{ font-variation-settings: "FILL" 1;}

/* ----- */


/* input */

input::-ms-reveal,
input::-ms-clear {
    display: none;
}




input,
button {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    border: none;
    color: inherit;
}

    input[type=text], 
    input[type=password], 
    input[type=url], 
    input[type=number], 
    .k-widget .k-input 

    {
        float: left;
        display: flex;
        height: 30px;
/*        line-height: 30px;
*/       
align-items:center;
padding: 0 var(--input-padding);

        transition: none;
        -webkit-transition: none;
        flex: 1;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: inherit;
    }


       input[type=text][light]{opacity:.5}
input[type=checkbox] { }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }


input[type=number] { -moz-appearance: textfield; }


input, textarea { user-select: text }




toolbar .title {
    display: flex;
    width: 100%;
    margin:0 5px
}

.title .input_cont input:focus ~ *:not(i) {
    display: none;
}






input[disabled] ~ box,
input[disabled] ~ text { opacity: .5; cursor: default }

input.hidden_input {
    display: none;
}

textarea {
    min-height: 30px;
    resize: none;
    height: 100px;
    display: block;
    color: inherit;
    padding: var(--input-padding);
    overflow: auto;
    flex: 1;
}

textarea[compact] { height: 30px; resize: vertical; }



textarea[resize] { resize: vertical }

textarea[note][compact] { height: 90px; resize: none }






/* ----- */


/* data_read */

.data_read { padding: 7px 0; min-height: 30px; overflow: hidden; flex: 1; box-shadow: 0 1px 0 0 var(--outline); cursor: text; }

.data_read text { position: absolute; opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; user-select: text; }

.data_read.multiline { white-space: normal; }

.data_read:empty { cursor: default; pointer-events: none; }

.data_read:empty::after { content: "No Data"; }

.data_tip { padding: 7px; float: left; box-shadow: 0 0 0 1px var(--outline); background: #ffeda5; user-select: all; min-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: normal; float: left; flex: 1; background: red }

/* ----- */


/* button */

.button { height: 30px; text-align: center; border-radius: var(--button-radius); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 15px; user-select: none; font-weight: 700; font-size: var(--text); white-space: nowrap; position: relative; background: transparent; /*flex-shrink: 0;*/ overflow: hidden; line-height: 30px; text-decoration: none }
.button.rounded{--button-radius:30px;}
.button * { pointer-events: none }

.button:hover { background-image: var(--over-color); }

.button:active { background-image: var(--press-color); }

.button.open { background-image: var(--over-color); }

.button:active text,
.button:active icon,
.button:active badge,
.button:active tip,
.button:active dot
{ transform: translateY(1px) }

.button text { width: 100%; overflow: hidden; text-overflow: ellipsis; }

a.button:not([outline="none"]) text { text-decoration: underline }

.button icon { margin: 0 0 0 -10px }

.button text ~ icon { margin: 0 -10px 0 0 }

.button.mini icon, .button.extra icon, .button.micro icon { margin: auto; }

.button.mini { width: 40px;/* height: 40px;*/ padding-left: 0; padding-right: 0; flex-shrink: 0; }
.button.mini.rounded{height:40px}

.button.micro { width: 30px; height: 30px; padding-left: 0; padding-right: 0; flex-shrink: 0; }


.button.accent,
.button.outline { box-shadow: inset 0 0 0 1.52px; margin: 0 5px; }

.button.extra { padding: 0; height: 100%; width: 100%; border-radius: 0; margin: 0; }

.button.fab { width: 60px; height: 60px; padding: 0; border-radius: 60px; }

.button.fab icon { margin: auto; }

.primary { background-color: var(--main-color); color: #fff; }

.primary.dark { background-color: var(--main-color-dark); }

.button.preview { margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 60px; height: 60px; padding: 0; position: absolute; z-index: 5 }

.button.preview icon { margin: 0 }

.primary:not(.fab), .button.orange, .button.highlight, .button.special {
    margin: 0 5px;
}

.form_fields > .button{margin:5px;}

/*.primary.mini { margin: 0 }
*/
.button.special { background-color: var(--special-color); color: #fff; }
.button.highlight { background-color: var(--hover); }
.button.outline {box-shadow: inset 0 0 0 1px var(--outline);height: 30px;}


.button.orange { background-color: var(--orange-color); color: #fff; }

.button.accent:hover,
.button.accent:active { box-shadow: none; background-color: var(--main-color); color: #fff }

.button.large { min-height: 40px; height: 40px; padding:0 20px  }




.button[disabled] { opacity: .5; cursor: default; pointer-events: none }

button::-moz-focus-inner { border: none; }

.button.adaptive icon { display: none; margin: auto; }

.button.error { background: var(--error-color); color: #fff; }

.button tip { font-weight: 500 }

.button.multitext {
    height: 40px;
}
    .button.multitext > group {
        text-align: left;
        justify-content: center;
        font-weight: initial;
        flex-shrink: 0;
        width: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 5px;
        line-height: initial
    }

.caption { height: 30px; text-align: center; border-radius: 30px; display: flex; align-items: center; justify-content: center; padding: 0 15px 0 10px; user-select: none; font-size: var(--text); white-space: nowrap; position: relative; background: transparent; flex-shrink: 0; overflow: hidden; text-decoration: none; max-width: 100%; }

.caption text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.caption dot { padding: 0 10px; }








@media(max-width:900px) {
    .button.adaptive icon { display: flex }

    .button.adaptive text,
    
    .button.adaptive group,

    .option_bar label[separate] > wrap icon + text,
    .option_bar.dynamic label > wrap icon + text
    { display: none }

    .button.adaptive { min-width: 40px; width: 40px; /*min-height: 40px; height: 40px;*/ padding-left: 0; padding-right: 0; }
    .button.adaptive.compact {/* min-width: 30px; width: 30px;*/ min-height: 30px; height: 30px;  }

}


.button[hide="false"],
separator[vertical][hide="false"],
wrap[hide="false"]

{

    overflow:hidden

}

.button[hide="false"],wrap[hide="false"]
{min-width: 40px;/* min-height:30px; */}

.button[hide="true"],
.button.adaptive.compact[hide="true"],
separator[vertical][hide="true"],
wrap[hide="true"]

{width: 0px;min-width:0px;/* min-height:0px; *//* height:0px; */margin: 0;/* opacity:0; */padding:0;pointer-events:none;/* transform: scaleX(0); */}

.button[hide],
separator[hide],
wrap[hide]
{transition: ease-in-out .175s;will-change: min-width;}

.mini_switch.button {
    position: absolute;
    right: 10px;
    top: -5px;
}







/* [checkbox] */

[checkbox],
[radio],
[classic] { display: flex; align-items: center; min-height: 30px; white-space: nowrap; position: relative; /*overflow: hidden;*/ cursor: pointer;align-self: flex-start; }

[checkbox]:active,
[radio]:active,
[classic]:active { transform: translateY(1px) }

[checkbox] input,
[radio] input,
[classic] input { display: none; }

[checkbox] box { height: 20px; width: 36px; display: flex; position: relative; border-radius: 10px; flex-shrink: 0; cursor: pointer; box-shadow: inset 0 0 0 2px; }

[checkbox] text,
[radio] text,
[classic] text { padding: 0 10px; white-space: nowrap; width: 100%; overflow: hidden; position: relative; text-overflow: ellipsis; }


box ink {width:50px; height:50px; position:absolute; top:-16px; left:-16px; border-radius:25px; overflow:hidden; z-index:1}
box ink:hover{background-color: var(--hover);}


[checkbox] name,
[radio] name { padding: 0 10px 0 0; }

[checkbox] check { height: 10px; width: 10px; top: 5px; left: 5px; transition: .25s; background: white; border-radius: 20px; position: absolute; }

[checkbox]:not([reverse]) box,
[checkbox][reverse] input:checked ~ box { box-shadow: inset 0 0 0 2px; color:var(--text-color) }

[checkbox]:not([reverse]) check,
[checkbox][reverse] input:checked ~ box check { transform: none; box-shadow: inset 0 0 0 7px; }

[checkbox]:not([reverse]) input:checked ~ box,
[checkbox][reverse] box { box-shadow: inset 0 0 0 20px; color: var(--main-color); }

[checkbox]:not([reverse]) input:checked ~ box check,
[checkbox][reverse] box check { transform: translateX(16px); box-shadow: inset 0 0 0 0px; }





[checkbox][simple]:not([reverse]) text:after,
[checkbox][simple][reverse] input:checked ~ text:after{ content: "No" }

[checkbox][simple]:not([reverse]) input:checked ~ text:after,
[checkbox][simple][reverse] text:after { content: "Yes" }

[checkbox] tip { opacity: .5; padding: 0 10px; }


[checkbox]:not([minimal]):not([reverse]):active box check {
    width: 15px;
}
[checkbox]:not([minimal]):not([reverse]):active input:checked ~ box check {
    left: 0px;
}

[checkbox][reverse]:not([minimal]):active box check {
    left: 0px;
    width: 15px;
}

[checkbox][reverse]:not([minimal]):active input:checked ~ box check {
    left: 5px;
}

[checkbox][simple] tip:after { content: "Off" }

[checkbox][simple] input:checked ~ tip:after { content: "On" }

[checkbox][minimal] box { height: 2px; width: 28px; }

[checkbox][minimal] check { height: 16px; width: 16px; display: flex; top: -7px; box-shadow: inset 0 0 0 2px, 0 0 0 3px var(--background); background: var(--background); left: 0 }

[checkbox][minimal]:not([reverse]) input:checked ~ box { }

[checkbox][minimal]:not([reverse]) input:checked ~ box check,
[checkbox][minimal][reverse] check { transform: translateX(12px); box-shadow: inset 0 0 0 10px }

[checkbox][minimal][reverse] input:checked ~ box check { box-shadow: inset 0 0 0 2px, 0 0 0 3px var(--background); }

/* ----- */


/* radio */

[radio] box { display: flex; position: relative; border-radius: 10px; flex-shrink: 0; box-shadow: inset 0 0 0 2px; }

[radio] box { height: 18px; width: 18px; }

[radio] check { height: 8px; width: 8px; transition: .25s; background: white; border-radius: 20px; position: absolute; top: 5px; left: 5px; transform: scale(0); background: var(--main-color) }

[radio] input:checked ~ box { color: var(--main-color); }

[radio] input:checked ~ box check { transform: scale(1) }

/* ----- */

[classic] box { display: flex; position: relative; flex-shrink: 0; box-shadow: inset 0 0 0 2px; transition:.125s; }

[classic] box { height: 18px; width: 18px; border-radius: 3px; pointer-events: none; }

[classic] check,
[classic][reverse]  input:checked ~  box check

{ transform: scale(0); height: 18px; width: 18px; transition: .125s; background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgPHBhdGggIGQ9Ik0xMy45OTEsNy40NTZMOC40LDEzLDUuMDEsOS42MzcsNi40NzQsOC4xODMsOC40LDEwLjA5MywxMi41MjYsNloiLz4KPC9zdmc+); }

[classic]:not([reverse]) input:checked ~ box,
[classic][reverse] box

{ color: var(--main-color); box-shadow: inset 0 0 0 10px; }

[classic] input:checked ~ box check,
[classic][reverse] box check
{ transform: none; }

[classic][reverse] input:checked ~ box { box-shadow: inset 0 0 0 2px; color:var(--text-color)}

[classic] separator + box { margin-left: 10px; }

[classic] box + separator { margin-left: 20px; }
/*[classic] box {margin-left:10px;}*/
/**/


/* option_bar */


/*filter options*/

.options { max-width: 100%; display: flex; flex-wrap: wrap; }

.options label input { display: none }

.options label wrap:hover,
.filter_block .data_cell .input_cont:hover,
.filter_result .filtered_item span:hover,
.filter_block .Tokenize:hover
{ background: rgba(136, 136, 136, 0.35); }


.options label wrap:active text,
.options label wrap:active icon,
.filter_result .filtered_item span:active text { transform: translateY(1px) }

.options label wrap text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.options label wrap icon { margin: 0 0 0 -10px; }

.options label input:checked ~ wrap { background: var(--main-color); color: #fff; }

.options label { max-width: 100%; margin: 3px; float: left; position: relative; overflow: hidden; border-radius: 30px; }

.options label > wrap { padding: 0 15px; cursor: pointer; height: 30px; line-height: 30px; display: flex; align-items: center; float: left; background: rgba(136, 136, 136, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }


.option_bar label text[marquee] {
    min-width: 100%;
    text-align: center;
}



/**/





.option_bar { display: flex; height: 30px; position: relative; overflow: hidden; min-width: 150px; --radius:5px }
.option_bar.fixed {min-width:120px; width:120px;flex-grow:initial;     border-radius: var(--radius);
 }

.option_bar line{ flex:1}
.option_bar line text{}

.option_bar div[title] { flex: 2; align-items: center; display: flex; position: relative; overflow: hidden; }

.option_bar div[title] text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }





.option_bar label { display: flex; flex: 1; position: relative; overflow: hidden; margin-right:-1px; background: var(--background); }
.option_bar label:last-of-type, .option_bar label:only-of-type,.option_bar.single:not(.list) label {margin:0}

.option_bar label:hover{z-index:1}
.option_bar label.selected{z-index:2}
.option_bar label.selected:hover{z-index:3}

.option_bar label:has(input:checked){z-index:2}
.option_bar label:has(input:checked):hover{z-index:3}

.option_bar label:after{position:absolute; content:""; pointer-events:none; top:0; left:0; height:100%; width:100%;box-shadow: inset 0 0 0 1px var(--outline) }

.option_bar.compact {min-width:unset}
.option_bar.compact label{ flex:initial}

.option_bar label wrap { display: flex; flex: 1;   position: relative; overflow: hidden; cursor: pointer; justify-content: center; align-items: center; padding: 0 5px;/* box-shadow: inset 0 1px var(--outline),inset 0 -1px var(--outline),inset 1px 0 var(--outline);*/ }


.option_bar label wrap[gap="none"]{padding:0}

.option_bar label wrap[gap="none"] text[marquee] span {padding:0 10px; line-height:30px; }


.option_bar label:last-child wrap { /*box-shadow: inset 0 0 0 1px var(--outline) */}

.option_bar label:first-of-type,.option_bar label:first-of-type wrap,.option_bar label:first-of-type:after { border-radius: var(--radius) 0 0 var(--radius) }
.option_bar label:last-of-type,.option_bar label:last-of-type wrap,.option_bar label:last-of-type:after { border-radius:0 var(--radius) var(--radius) 0 }


.option_bar label:only-of-type,
.option_bar label:only-of-type wrap,
.option_bar label:only-of-type:after,

.option_bar.single label:not([select_view]),
.option_bar.single label:not([select_view]):after,
.option_bar.single label:not([select_view]).selected wrap

{border-radius:var(--radius);}


 .option_bar.single.list action label:not([select_view]),
 .option_bar.single.list action label:not([select_view]):after,
 .option_bar.single.list action label:not([select_view]) wrap

 {border-radius: var(--radius) 0 0 var(--radius)}


.option_bar.autosize{min-width:initial}
.option_bar.autosize label { flex:auto;}
.option_bar.autosize label wrap{padding:0 15px}



.option_bar wrap:hover { background-image: var(--over-color); }

.option_bar wrap:active text,
.option_bar wrap:active icon,
.option_complex wrap:active icon { transform: translateY(1px) }


.option_bar label text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position:relative}

.option_bar label input,
.option_complex label input { display: none }

.option_bar label input:checked ~ wrap,
.option_bar label.selected > wrap { background-color: var(--main-color); color: #fff; }

.option_bar.dynamic label input:checked ~ wrap text,
.option_bar.dynamic label.selected > wrap text,
.option_bar label[separate] > wrap text

{
    max-width: 100px;
    opacity: 1;
    margin-right:5px;
}
.option_bar.dynamic label text {
    transition-duration: .225s;
    transition-property: max-width, opacity;
    max-width: 0px;
    opacity: 0;
}

.option_bar label input:checked:disabled ~ wrap,
.option_complex label input:checked:disabled ~ wrap,
.options label input:disabled ~ wrap { background-color: var(--input-color); color: inherit; }

.option_bar .label_group { display: flex }

.option_bar .label_group label { width: 85px; }

/*.option_complex {    display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); overflow:hidden;     margin: 5px; flex: 1;     grid-gap: 1px;padding:1px}
.option_complex label{ box-shadow: 0 0 0 1px var(--border-color);}*/
/*.option_complex label wrap{display:flex;flex:1;position:relative;overflow:hidden;cursor:pointer;justify-content: center;align-items:center;   }*/
/*.option_complex wrap:hover{background: var(--hover);}*/


.option_bar label input:disabled ~ wrap icon,
.option_bar label input:disabled ~ wrap text,
.option_complex label input:disabled ~ wrap icon,
.options label input:disabled ~ wrap text { opacity: .3 }

.option_bar label input:disabled ~ wrap,
.option_complex label input:disabled ~ wrap,
.options label input:disabled ~ wrap { cursor: default; pointer-events: none }


.option_bar.mini { min-width: initial; overflow: initial; }

.option_bar.mini label wrap { padding: 0; /*box-shadow: none*/ }

toolbar .option_bar{margin:0 5px;}


.option_bar.animate label wrap:before {
    position: absolute;
     background: var(--main-color);
    height: 100%;
    content: "";
    width: 100%;
    transform: translateX(-100%);
    transition: transform .125s;
    pointer-events: none;
}

.option_bar.animate label wrap,
.option_bar.animate label input:checked ~ wrap,
.option_bar.animate label.selected > wrap
{background-color:initial}

.option_bar.animate label:first-of-type wrap:before { transform: translateX(100%)}
.option_bar.animate label input:checked ~ wrap:before, .option_bar.animate label.selected wrap:before {transform: none;   }
.option_bar.animate label input:disabled ~ wrap:before {    background-color: var(--input-color);}

.option_bar.fixed.animate
{min-width:121px}

/* ----- */







/* option_bar */

.option_column { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; align-items: flex-start; }

.option_column separator[horizontal]{margin: 15px 0 10px 0;width: 100%;}

.option_column label { max-width: 100%; margin-top: 5px; }

.option_group { display: flex; flex-direction: column; flex: 1; width: 100%; }

.option_group[space="top"]{margin-top:10px}


.option_column.grid_view{

    position: relative;
    flex-wrap: wrap;
    align-content: flex-start;
    gap:5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

}

.option_column.grid_view label {background: var(--highlight);
    padding: 10px;
    border-radius: 5px;
    margin: 0;}

.option_column.grid_view label:hover {
    background-image: var(--over-color);
}
.option_column.grid_view label:active {
    background-image: var(--press-color);
}



/* ----- */


/* toggle bar */

.toggle_bar { display: flex; align-items: center; }

.toggle_bar label { display: flex; position: relative; }

.toggle_bar label input { display: none }

.toggle_bar label:active icon { transform: translateY(1px) }

.toggle_bar label wrap { display: flex; flex: 1; position: relative; overflow: hidden; cursor: pointer; justify-content: center; align-items: center; height: 40px; width: 40px; border-radius: var(--button-radius); flex-shrink: 0 }

.toggle_bar label.selected wrap, .toggle_bar label input:checked ~ wrap { background-color: var(--main-color); color: #fff; }

.toggle_bar label:hover wrap { background-image: var(--over-color); }

.toggle_bar label:active wrap { background-image: var(--press-color); }

.toggle_bar label[separate][text] wrap { width: auto; padding: 0 15px 0 5px; }

/* ----- */


/* input_cont */

input:-webkit-autofill {


    transition-delay:5000s;
    transition-property: background-color;
    transition-duration:5000s
}

    .dark   input:-webkit-autofill{filter: invert(1);}

.input_cont { flex: 1; display: flex; align-items: center; position: relative; z-index: 1; /*overflow:hidden;box-shadow:0 0 0 1px var(--outline);*/ }

.input_cont.large { flex: 1 100% }

.input_cont.large.space
{margin: 10px 0;
    height: 40px;
    padding: 5px;}

.input_cont.disabled { pointer-events: none }

.input_cont.pick { width: 150px; }

.input_cont.pick text[value] { width: 100%; overflow: hidden; text-overflow: ellipsis; }

.input_cont input[type=text],
.input_cont input[type=url],
.input_cont input[type=password],
.input_cont textarea,
.input_cont .data_read,
.input_cont .k-widget { box-shadow: none; background: transparent; position: relative; z-index: 99; margin: 0; overflow: hidden; }

.input_cont:not(.space) separator[vertical] { margin: 0 }

.input_cont i { position: absolute; height: 100%; width: 100%;  left: 0; top: 0; pointer-events: none;  }

    .input_cont .data_read ~ i {
        background: none;
/*        box-shadow: 0 1px 0 0 var(--outline);
        border-radius: 0;*/
    }

.input_cont .button { z-index: 3; border-radius: 0; margin: 0 }
.input_cont .button:last-of-type {
    border-radius: 0 var( --input-radius) var( --input-radius) 0;
}

.input_cont .button[position="right"] { margin-left: auto }

/*.input_cont .button.mini { margin: -5px; }
*/
.input_cont actions { display: flex; }

.input_cont text ~ .data_read { margin-left: 10px; }

.input_cont text[default] { width: 100%; overflow: hidden; text-overflow:ellipsis; transition: .125s; transform: translateY(10px); opacity: .5; position: absolute; padding: 0 7px; pointer-events: none; }
.input_cont input ~ text[default] { padding: 0 10px; }
.input_cont .k-numerictextbox input ~ text[default] { padding: 7px 7px; }
.input_cont .k-numerictextbox:not(.k-state-focused) input.k-input:placeholder-shown ~ text[default] { opacity: 0; }
.input_cont .k-numerictextbox.k-state-focused input[field_type]:placeholder-shown ~ text[default] { opacity: 0; }

.input_cont > input:placeholder-shown ~ text[default] { transform: translateY(0); opacity: 0; }

.input_cont.adaptive input:placeholder-shown { transform: translateY(0) }

.input_cont.adaptive input { transform: translateY(-5px); font-weight: 700 }

.input_cont.adaptive input::placeholder { font-weight: 400 }

.input_cont.adaptive { min-height: 45px; }

.input_cont > text { position: relative; z-index: 1; padding-left: 7px; line-height: 30px; cursor: text; white-space: nowrap; cursor: default; }

.input_cont > input ~ text { padding: 0 7px 0 0; }
.input_cont > text[space]{padding:0 10px;}

/*.input_cont input:-webkit-autofill ~ i { background-color: rgb(232, 240, 254); }
*/
.input_cont icon ~ input { padding-left: 0 }

/*.input_cont input:-webkit-autofill ~ * { color: #000 }
*/
thumbnail { height: 30px; width: 30px;  border-radius: var(--input-radius) 0 0 var(--input-radius);  flex-shrink: 0; position: relative; overflow: hidden; }

thumbnail picture { height: 100%; width: 100%; display: flex; background-size: cover; position: absolute; top: 0; left: 0; z-index: 9 }



[position="right"] { margin-left: auto; }

action[right] { margin-left: auto; }

action[space] { padding: 0 10px; }
action[space_right] { padding-right: 10px; }

action[fit]{flex:1}

action { display: flex; align-items: center; }

action > wrap { display: flex; align-items: center; }

action .input_cont { margin:0 5px;/* padding: 0 3px;*/ flex: auto; flex-shrink: 0; min-width: 150px; }

/*action .input_cont i { border-radius: 30px; }*/

action .input_cont .k-widget, .message_container .input_cont .k-widget { width: 100%; }

action .input_cont.micro { min-width: 100px; }
action .input_cont.mini { width: 150px; }
action .input_cont.medium { width: 200px; }
action .input_cont.large { width: 250px; }
action .input_cont .k-datepicker .k-select { display: none }


.input_cont [checkbox] { flex-shrink: 0; padding-left: 7px }


.input_cont[right] .k-widget.k-numerictextbox input { text-align: right }

/* ----- */




/* tokenize */

.TokenizeMeasure, .Tokenize ul.TokensContainer li.TokenSearch input { margin: 0 10px; }

.Tokenize { position: relative; display: flex; flex: 1; min-height: 30px; width: 100%; overflow: hidden; }

.Tokenize ul { font-size: var(--text);  cursor: text; flex-wrap: wrap; display: flex; flex: 1; align-items: center; overflow: hidden; }

.Tokenize ul li { white-space: nowrap; }

.Tokenize ul li span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.Tokenize ul.TokensContainer { }

.Tokenize ul.TokensContainer li.Token { display: flex; height: 30px; align-items: center; padding-left: 10px; cursor: default; max-width: 100%; background: var(--main-color); color: #fff; overflow: hidden; position: relative; box-shadow: -1px -1px 0 var(--outline-dark); }

.Tokenize ul.TokensContainer li.Token .button { border-radius: 0; }

.Tokenize ul.TokensContainer li.Token.PendingDelete { opacity: 0.5; }

.Tokenize ul.TokensContainer li.Token, .Tokenize ul.TokensContainer li.TokenSearch { float: left; }

.Tokenize ul.TokensContainer li.TokenSearch { flex: 1; min-width: 100px; }

.Tokenize ul.TokensContainer li.TokenSearch input { background-color: transparent; width: 100%; box-shadow: none; padding: 0 7px; height: 30px; margin: 0 }

.Tokenize ul.TokensContainer li.Placeholder {  position: absolute; line-height: 30px; padding: 0 7px; display: none; pointer-events: none; }
.Tokenize ul.TokensContainer li.Placeholder.visible{display: list-item;}

.Tokenize.k-state-disabled { opacity: .7; }

.Tokenize.k-state-disabled ul.TokensContainer li.Token { padding-right: 10px; }

.Tokenize.k-state-disabled ul.TokensContainer li .button { display: none; }


.Tokenize:not(.k-state-disabled) ul.TokensContainer li.Token:hover { background-image: var(--over-color); }

.Tokenize ul.Dropdown { box-sizing: border-box; display: none; max-height: 180px; width: 200px; padding: 0; margin: -10px 0 0 0; background-color: white; overflow-y: auto; box-shadow: 0 5px 10px -3px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05); box-sizing: border-box; border-radius: 2px; z-index: 10020; position: absolute; left: 10px; top: 100%; }

.Tokenize ul.Dropdown li { padding: 0 10px; overflow: hidden; cursor: pointer; box-sizing: border-box; height: 30px; line-height: 30px; text-overflow: ellipsis; font-weight: 400; }

.Tokenize ul.Dropdown li.Hover { color: white; text-decoration: none; background-color: var(--main-color); }

textarea.copy { max-height: 100px; }





/* ----- */


/*stack*/

.stack { margin: 5px; flex: 1; overflow: hidden; }

.stack ul { flex-wrap: wrap; display: flex; flex: 1; align-items: center; overflow: hidden; }

.stack li { white-space: nowrap; display: flex; height: 30px; align-items: center; padding: 0 10px; cursor: default; max-width: 100%; background: var(--main-color); color: #fff; overflow: hidden; position: relative; box-shadow: -1px -1px 0 var(--outline-dark); }

.stack li text { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/**/



/* context_menu */

.context_menu { transition-delay: .125s; max-width: calc(100vw - 20px); max-height: calc(100% - 20px); visibility: hidden; opacity: 0; /*transition-property:transform, opacity, visibility;transition-duration:.2s,.125s,.125s;*/ position: absolute; z-index: 9999; cursor: default; top: 0; /*left:0;*/ display: flex; }
.context_menu.hover {z-index: 10000;}
.context_menu.open { visibility: visible; opacity: 1; transition-delay: 0s; }

.context_wrap { max-height: inherit; max-width: inherit; width: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; padding: 10px; }

.context_container { overflow-y: auto; overflow-y: overlay;border-radius: 10px;overflow-x: hidden; width: 100%; display: flex; background: var(--context); box-shadow: var(--elevation_2); -webkit-overflow-scrolling: touch; transform: translateY(-10px); opacity: 0; transition: .125s; }

.open .context_container { transform: translateY(0); opacity: 1; }

.context_container > loader { min-width: 200px; min-height: 60px; }

.context_menu .close_window { display: none; }

.context_wrap footer { background: #ffffff; padding: 15px; box-shadow: 0 5px 12px -2px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05); position: relative; z-index: 100; }





/*list template*/
.list_menu { height: 100%; width:100%; }

.list_menu ul { height: 100%; width:100%; display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; overflow: auto; overflow:overlay; min-width: 240px; margin: 0; padding: 10px; box-sizing: border-box; font-weight: initial }

.list_menu li {  max-width:360px; flex-shrink: 0; border-radius:var(--button-radius); padding: 0px 45px 0px 5px; color: var(--text-color); line-height: 40px; position: relative; white-space: nowrap; overflow: hidden; box-sizing: border-box; text-align: left; text-overflow: ellipsis; width: 100%; cursor: pointer; user-select: none; display: flex; align-items: center; }

.list_menu li.search{background: var(--input-color);}

.list_menu ul > wrap { display: flex; flex-direction: column; overflow: hidden; }

.list_menu ul wrap[scroll] { display: flex; flex-direction: column; overflow: auto; overflow:overlay; flex: 1; }

.list_menu li icon.child { position: absolute; right: 0px; margin: 0px; display: none; }
.list_menu li.parent icon.child { display: flex; }

.list_menu li icon { margin: 5px; }

.list_menu li:hover { background-image: var(--over-color); }

.list_menu li.selected { background-color: var(--main-color); color: #fff; }

.list_menu ul li:active { background-image: var(--press-color); }

.list_menu ul li:active text, .list_menu ul li:active icon { transform: translateY(1px); }

.list_menu li.separator { height: 1px; box-shadow: 0 1px 0 0 var(--outline); margin: 10px 0; pointer-events: none; }

.list_menu li a text { flex: 1; min-width: 0; overflow: hidden; position: relative; text-overflow: ellipsis; }

.list_menu li > text{ overflow: hidden; position: relative; text-overflow: ellipsis; max-width:100%;}

.list_menu li.highlight { font-weight: 700 }

.list_menu li.title { opacity: .5; pointer-events: none; }

.list_menu li.disabled { opacity: .5; cursor: default; }

.list_menu li.hidden { display: none; }

.list_menu li[bottom] { margin-top: auto }

.list_menu li.search input { padding: 0; box-shadow: none; height: 40px; background: none; }


.list_menu li > a, .list_menu li > label { text-decoration: none; display: flex; align-items: center; width: 100%; cursor: pointer; }

.context_menu.open .list_menu li badge { margin: 15px; }

.list_menu li [advanced] { display: flex; align-items: center; }

@keyframes list_item {
    from { transform: translateY(-10px); opacity: 0 }
}

.context_menu.open .list_menu li { animation: list_item .125s .125s backwards; }

.context_menu.open .list_menu li:nth-last-child(1) { animation-delay: .2s }

.context_menu.open .list_menu li:nth-last-child(2) { animation-delay: .175s }

.context_menu.open .list_menu li:nth-last-child(3) { animation-delay: .15s }

.compact.list_menu ul{ align-items: flex-start;}

.compact.list_menu li { height:30px; padding:5px 10px; max-width:initial; cursor:initial}
.compact.list_menu li:hover{background:initial}
.compact.list_menu li:active text{transform:none}

/* ----- */


/* fab */

.fab_container { position: absolute; z-index: 7; }
.fab_container.mini { --fab: 15px; }

.fab_container.left { left: var(--fab); }

.fab_container.right { right: var(--fab); }

.fab_container.top { top: var(--fab); }

.fab_container.bottom { bottom: var(--fab); }

.k-pager-wrap + .fab_container.bottom,
toolbar + .fab_container.bottom {     bottom: calc(var(--area) + var(--fab)); }



/* ----- */


/* separator */



separator { box-shadow: inset 0 0 0 1px; flex-shrink: 0; opacity: .1 }

separator[vertical] {--gap:10px; height: 30px; min-width: 1px; width: 1px; margin: 0 var(--gap); position: relative; z-index: 2; display: flex; }

separator[horizontal] {--gap:20px; min-height: 1px; height: 1px; margin: var(--gap) 0; position: relative; z-index: 2; display: flex; flex: 1 1 100%; max-height: 1px }
separator[horizontal][gap="small"]{--gap:10px}
separator[horizontal][gap="none"]{--gap:0px}

separator[bottom] { margin-top: auto }

.option_bar separator[vertical]{ margin: 0 calc(var(--gap) + 5px);}

/* ----- */





/* material ink effect */

.material_ink { height: 100%; width: 100%; position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity .225s; }

.material_ink circle { animation: ink_anim .35s; animation-timing-function: cubic-bezier(0.25, 0.1, 0.5, 1); opacity: 0; opacity: .7;  }

.primary circle, .accent circle, .special circle { fill: rgba(255,255,255,.5); }

.material_ink.ready.hide { opacity: 0 }

@keyframes ink_anim {
    from { transform: scale(0); }

    to { }
}

.drag_item .material_ink {display:none}

/* ----- */


/* loader */

.spinner { position: relative; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; }

.spinner > div { background: var(--outline); width: 150px; height: 2px; position: relative; overflow: hidden; }

.spinner > div > div { position: absolute; background: var(--main-color); height: 100%; width: 100%; animation: loader .95s infinite; }


.window_container[accent] .preloader { background-color: var(--main-color-light);}


.preloader { height: 100%; width: 100%; z-index: 99999; position: absolute; top: 0; left: 0; background-color: var(--overlay); display: flex; align-items: center; justify-content: center; }

.preloader > div { background: var(--outline); width: 150px; height: 2px; position: relative; overflow: hidden; }

.preloader > div > div { position: absolute; background: var(--main-color); height: 100%; width: 100%; animation: loader 1.5s infinite; }

@keyframes loader {
    from { transform: translateX(-100%) }

    50% { transform: translateX(100%) }

    to { transform: translateX(-100%) }
}

body[preloader] .preloader[partial] { display: none; }

/* ----- */


/* tooltip */

.tooltip {
    background: #424242;
    background: var(--tip);
    color: #fff;
    top: 0;
    left: 0;
    position: fixed;
    border-radius: 30px;
    pointer-events: none;
    padding: 6px 15px;
    z-index: 10001;
    transition-property: opacity,visibility;
    transition-duration: .225s;
    white-space: pre-line;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100vw - 20px);
    visibility: hidden;
    opacity: 0;
    transition-delay: 0s;
}

.tooltip.open { transition-delay: .5s; visibility: visible; opacity: 1; }
.tooltip.open[no_delay] { transition-delay: unset; }

.tooltip.error { background: rgba(240,80,80,1); }

/* ----- */





/* toast */

.toast_container { position: absolute; bottom: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; align-items: center; z-index: 99999; overflow: hidden; margin: 20px 0; pointer-events: none; white-space: pre-line; }

.toast_container > div { min-height: 30px; background: var(--tip); color: #fff; display: flex; align-items: center; border-radius: 30px; margin: 0px 0 10px 0; padding: 6px 15px; animation: toast_anim .2s forwards }

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

.toast_container > div.toast_close { animation: toast_gone .2s both }

@keyframes toast_anim {
    from { transform: translateY(20px); opacity: 0 }
}

@keyframes toast_gone {
    to { transform: translateY(-10px); opacity: 0 }
}

/* ----- */


/* *** toast notifications *** */
.toast_cont { position: absolute; width: 100%; bottom: 0; box-sizing: border-box; z-index: 98; padding-left: 200px; left: 0; }

.toast { background-color: #3c3c3c; color: #fff; position: relative; overflow: hidden; padding: 0 20px; height: 50px; line-height: 50px; border-radius: 7px; overflow: hidden; margin: 5px; animation: notification 5s; animation-timing-function: ease-in-out; animation-fill-mode: both; }

.toast_action { font-weight: bold; position: absolute; right: 20px; text-transform: uppercase }

.toast_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; float: left; }

.toast_text a { display: block; color: #fff; font-weight: 400; }

@keyframes notification {
    from { opacity: 0; transform: translateY(20px) }

    10% { transform: translateY(0px) }

    20% { opacity: 1; }

    80% { opacity: 1; transform: translateY(0px) }

    90% { }

    to { opacity: 0; transform: translateY(20px); }
}
/* *** notifications **** */



/**/

@keyframes fillup {
    from { stroke-dasharray: 0 100; }
}


pie { position: relative; overflow: hidden; margin: auto }

pie svg { width: 170px; height: 170px; transform: rotate(90deg); border-radius: 50%; }

pie circle { fill: transparent; stroke-width: 7; }

pie circle[progress] { stroke: var(--main-color); stroke-dasharray: 0 100; animation: fillup 1s ease-out forwards; }

pie circle[placeholder] { stroke: #e6e6e6 /*var(--input-color)*/; stroke-dasharray: 120 100; }


/**/



/**/

.progress_bar { width: 80px; display: flex; flex-shrink: 0; height: 20px; align-items: center; padding: 0 10px; }

.progress_bar > div { height: 4px; width: 100%; background: var(--outline); border-radius: 30px; overflow: hidden; position: relative; }

.progress_bar > div > div { width: 100%; background: #4CAF50; height: 4px; right: 100%; position: absolute; border-radius: 5px; }

/**/

/*infobar*/

infobar { display: flex; flex-direction: column; width: 100%; }

infobar table { border-spacing: 0; }

infobar wrap { padding: 20px; width: 100%; flex-shrink: 0 }

infobar wrap[scroll] { display: flex; flex-direction: column; overflow: auto; flex: 1; }

infobar space { display: flex; margin: 0 0 50px; }
infobar separator { display: flex; height: 1px; box-shadow: inset 0 -1px var(--outline); opacity: 1; margin: 15px 0px }

infobar row[headline] {display:flex;align-items:center;margin-top:20px; margin-bottom:10px;}
infobar row[headline]:first-child {margin-top:0px;}
infobar row[headline] separator{flex:1;}
infobar row[headline] text {font-weight:700; padding-right:15px;}

infobar row { display: flex; align-items: flex-start; width: 100%; overflow: hidden; flex-shrink: 0 }

line { display: flex; align-items: center; min-height: 30px; }

infobar row line[titles] { width: 150px; }
infobar[log] row line[titles] { width: 110px; }

infobar row line[info] { max-width: 600px; width: calc(100% - 150px); }
infobar[log] row line[info] { max-width: 560px; width: calc(100% - 110px); }

line[info] text { white-space: pre-line; }

line[titles] text { opacity: 0.5; white-space: pre-line; word-break:break-word; }
line[titles] span { height: 1px; opacity: 0.5; margin: 0 10px; flex-grow: 1; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCA0IDEiPiAgPHJlY3QgeD0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjwvc3ZnPg==); }

.dark  line[titles] span { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIHZpZXdCb3g9IjAgMCA0IDEiPiAgPHJlY3QgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) }

infobar row table tr td[info] { padding-right: 30px; }


infobar[border] tr { box-shadow: inset 0 1px 0 0 var(--border-color); }

infobar[border] tr:first-child { box-shadow: none }

infobar[border] td,
infobar[border] th { box-shadow: 1px 0 0 0 var(--border-color); padding: 2px 7px }

infobar[border] tr:hover { background: var(--hover); box-shadow: inset 0 1px 0 0 var(--border-color), inset 1px 0 0 var(--border-color), inset -1px 0 0 var(--border-color); }

infobar[border] tr:last-child:hover { box-shadow: inset 0 0 0 1px var(--border-color); }


/*form_fields*/
.form_fields.simple { margin: 0; }

.form_fields.simple .data_read { box-shadow: none; padding: 0; margin: 0; }

.form_fields.simple input, .form_fields.simple textarea { background: none; box-shadow: none; }

.form_fields.simple textarea { height: 30px }

.form_fields.simple .input_cont.mini { width: 160px }

/* scrollbars */

/*.k-webkit.k-desktop .filter_content::-webkit-scrollbar-track{display:none}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar{width:10px;height:10px;background-color:transparent;}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-thumb{background-color:transparent;background-clip:padding-box;height:40px;width:40px;}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-thumb:vertical{border-left:6px solid transparent;}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-thumb:horizontal{border-top:6px solid transparent;}
.k-webkit.k-desktop .filter_content:hover::-webkit-scrollbar-thumb{background-color:rgba(136, 136, 136, 0.25);}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-thumb:hover{border:none;}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-button{display:none}
.k-webkit.k-desktop .filter_content::-webkit-scrollbar-corner,
.k-webkit.k-desktop .filter_content::-webkit-resizer
 {background-color:transparent;}*/




.k-webkit.k-desktop ::-webkit-scrollbar-track { display: none }

.k-webkit.k-desktop ::-webkit-scrollbar { width: 10px; height: 10px; background-color: transparent; }

.k-webkit.k-desktop ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.3); background-clip: padding-box; height: 40px; width: 40px;  }
/*.k-webkit.k-desktop ::-webkit-scrollbar-thumb:vertical{border-left:6px solid transparent;}
.k-webkit.k-desktop ::-webkit-scrollbar-thumb:horizontal{border-top:6px solid transparent;}*/
.k-webkit.k-desktop :hover::-webkit-scrollbar-thumb { }

.k-webkit.k-desktop ::-webkit-scrollbar-thumb:hover { border: none; }

.k-webkit.k-desktop ::-webkit-scrollbar-button { display: none }

.k-webkit.k-desktop ::-webkit-scrollbar-corner,
.k-webkit.k-desktop ::-webkit-resizer { background-color: transparent; }



.k-ff.k-desktop .filter_content { scrollbar-color: rgba(136, 136, 136, 0.25) transparent; /*scrollbar-width: thin;*/ }

/* ----- */

/* adaptive elements */

.mobile,
div.mobile,
li.mobile,
separator.mobile { display: none }

@media(max-width:900px) {

    .mobile,
    div.mobile,
    li.mobile,
    separator.mobile { display: flex }


    .desk,
    li.desk,
    div.desk,
    separator.desk { display: none }
}










/* Path Picker */
.picker-container {
    height: 100%;
    overflow: auto;
    padding: 30px;
    line-height: 22px;
    font-family: monospace;
}

.path-picker li { position: relative; padding-left: 15px; color: var(--text-color); }

.path-picker li.collapsed ul { display:none; }

    .path-picker li .icon {
        margin-left: -30px;
        position: absolute;
        cursor: pointer;
        height: 20px;
        width: 20px;
        border: 1px dotted;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }

.path-picker li.has-children.collapsed > .icon:after { content: '+'; }

.path-picker li.has-children.expanded > .icon:after { content: '-'; }

.path-picker .child-tag { color: var(--main-color); cursor: pointer; }

.path-picker .child-node:hover .child-tag,
.path-picker .attr:hover {/* background-color: lightgray; */}

.path-picker span.selected {color: #000;border: 1px dotted;background: #FFECB3;padding: 3px 6px;border-radius: 5px;}

.path-picker span.key-selected {background: #ffab91;color: #000;border: 1px dotted;padding: 3px 6px;border-radius: 5px;}

.path-picker .attr { color: rgb(153, 69, 0); cursor: pointer; }
/* End Path Picker */





/*visuals*/

.form_fields > .k-widget {
    overflow: hidden;
    max-width: 100%;
}

.form_fields > .input_cont,
.filter_block .data_cell .input_cont {
    max-width: calc(100% - 10px);
}


.form_fields > .k-widget,
textarea,
input[type=text],
input[type=password],
input[type=url],
input[type=number],
.input_cont i,
.Tokenize,
.simple.srch i,
.form_fields > .tab_strip

{
    background: var(--input-color);
    box-shadow: 0 0 0 1px var(--outline);
    border-radius: var( --input-radius);

}




    .form_fields > .k-widget:hover,
    input:hover,
    textarea:hover,
    .input_cont:hover i,
    .Tokenize:hover,
    .simple.srch:hover i {
    }



    .form_fields > .k-widget.k-state-focused,
    input:focus,
    textarea:focus,
    .input_cont input:focus ~ i,
    .input_cont .k-state-focused ~ i,
    .Tokenize.Focused,
    .simple.srch input:focus ~ i {
        background: none;
        box-shadow: 0 0 0 3px var(--main-color-light), 0 0 0 1px var(--outline)
    }


    .form_fields > .k-widget.input-validation-error,
    input.input-validation-error,
    input.input-validation-error ~ i,
    .input_cont .input-validation-error ~ i,
    textarea.input-validation-error,
    .input_cont.input-validation-error > i,
    .StripeElement--invalid 
    
    {
        box-shadow: 0 0 0 2px rgba(240, 80, 80, 0.3);
    }


    .form_fields > .k-widget.k-state-disabled,
    input:disabled,
    textarea:disabled,
    .input_cont input:disabled ~ i {
        opacity: .7
    }


    textarea[note] { resize: vertical; height: 120px; background: #FFECB3; color:#000  }

/**/



/* input_wrap */

.input_wrap { position: relative; display: flex; overflow: hidden; height: 50px; border-radius: 25px; align-items: center; overflow: hidden; width: 280px }

.input_wrap input { border: none; height: 50px; width: 100%; padding: 0 20px; background: none; min-width: 0; box-shadow: none; }

.input_wrap:not(:first-child) { margin-top: 10px }

.input_wrap i { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background: var(--input-color); border-radius: 25px; pointer-events: none; }

.input_wrap .input-validation-error ~ i { box-shadow: inset 0 0 0 2px rgba(240, 80, 80, 0.3); }

/*.input_wrap input:-webkit-autofill ~ i { background: #ffeeba }*/
/*
.input_wrap input:-webkit-autofill ~ * { color: #000 }*/

.input_wrap .button { margin-right: 10px; }


.input_wrap_group { padding: 30px; }

[validator_placeholder] .error_icon {
    display: none;
    color: var(--error-color);
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
}

[validator_placeholder].input-validation-error .error_icon {
    display: flex;
}

@keyframes autofill {
    to { background: transparent; }
}

.input_wrap input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; }


/* ----- */


@media screen and (max-width: 1280px), screen and (max-height: 700px) {

    :root { --area: 50px; }
    separator[vertical]{--gap:5px}
    .button{padding:0 10px}

}

color{width:16px; height:16px; border-radius:2px; box-shadow:inset 0 0 0 1px var(--outline)}



.grouped{display:flex;overflow:hidden}
.grouped.hide{display:none;}

.grouped.horizontal{padding:10px; align-items:center}
.grouped.horizontal:hover{background:var(--over-color)}

.grouped.vertical{flex-direction:column;}
.grouped.gap{width:100%;justify-content:center; padding:0 5px}
.grouped > text {text-overflow:ellipsis; overflow:hidden;}

.list_view_wrapper{height:100%; width:100%;  display:flex; flex-direction:column;overflow: hidden;  justify-content: space-between;     position:relative;  flex:1;}

.list_view_wrapper.empty .k-pager-wrap { box-shadow:none; }


list.hide,
.hide.k-widget,
.empty list,
.empty .k-grid

{display:none}


list{position: relative; z-index: 0; padding: 10px;  overflow-y: auto; /*overflow-y: overlay;*/ -webkit-overflow-scrolling: touch; width:100%; overflow-x:hidden  }
list > wrap{padding-bottom:150px;width:100%; position:relative;    /*align-items: start;*/}
  .reset list > wrap{padding-bottom:0}

list[horizontal]{overflow-y:hidden;overflow-x:auto;height: 100%; }
list[horizontal] > wrap{width:auto;height: 100%;display: flex;    padding: 0; padding-right:20px }
list > wrap[no_shadow] block{box-shadow:none}

    [multy] list > wrap {
        padding-bottom: 0
    }

@keyframes drop_anim{to{transform:scale(.9)}}

drop[helper]{display:none;  position:absolute; z-index:9; height:100%; width:100%; top:0; left:0; color:var(--main-color); align-items:center; justify-content:center;}
drop[helper] overlay{background:var(--main-color); position:absolute;height:100%; width:100%; opacity:.8}
drop[helper] circle{position:absolute;  height:320px; width:320px;  background:#fff; display:flex; border-radius:50%; animation: drop_anim .425s infinite alternate}

.drop > drop[helper],
.dragover > drop[helper]

{display:flex;  }

.drop.enter:not(.empty) > drop[helper]{display:none;  }


.k-grid-content tr.indicator td, .table_view  tr.indicator td {  box-shadow:none }
.k-grid-content tr.indicator, .table_view tr.indicator { background:var(--main-color);}
indicator {border:1px dotted;z-index: 1; border-radius: 10px;}
indicator[accent]{ margin:10px; background:var(--main-color); border:none; border-radius:3px;}

/*.drop.enter.list_view_wrapper:after{content:''; position:absolute; height:100%; width:100%; background:red; opacity:.5}*/

block{float: left; padding: 10px; box-sizing: border-box; position: relative;  width: 180px; position:relative;overflow:hidden;z-index:1} 

block[adaptive] section{flex-wrap:wrap}
block[adaptive] section[round]{border-radius:15px}
block[adaptive] section wrap{display:flex;align-items:center;}
block[adaptive] section wrap[adaptive]{padding:15px 0}
block[adaptive] section separator[horizontal]{display:none;}
/*block[adaptive] section wrap{flex:1 1 100%;}*//*block[adaptive] section wrap{flex:1 1 100%;}*/
block item {position: relative; /*display:flex; flex-direction:column;*/ width:100%;  /*overflow:hidden;*/  z-index:1}

block:not([list]):not([horizontal]):not([widget_thumb]):not([highlight]):not(.notification) item{display:flex; flex-direction:column; height:100%;box-shadow: 0 0 0 1px var(--border-color);border-radius: 3px; overflow:hidden; z-index:1}

block item thumb{position:relative;width:100%;height:0;display:flex;overflow:hidden;/* border-radius:5px; *//*color:#fff;*/}

block item thumb[media]{color:#fff;}

block item thumb:active{transform:translateY(1px)}
block item wrap[picture]{/*cursor:pointer;*/width:100%;position:relative;display:flex;flex-direction:column;}
/*block item wrap[picture] thumb{cursor:default}*/
block item wrap[picture] thumb:active{transform:none;}

block item group[media] thumb:active{transform:none}
/*block item group[media] thumb {cursor:default}*/
/*block:hover item thumb[content] wrap picture {opacity:0.7}*/

block item thumb wrap {position: absolute;width: 100%;height: 100%; overflow: hidden;background:linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);background: var(--over-color);}
block item thumb wrap picture{position:absolute; width:100%; height:100%; overflow:hidden; background-size:cover;background-position: center center;background-repeat: no-repeat; }
block item thumb[content] wrap picture{opacity:0.85;}
block item thumb[media] wrap{background:#000}

block item thumb[round] wrap{border-radius:25px;}

card { background:#2c2c2c;
border-radius:10px;
display:flex;
padding:20px;
color:#fff;


margin:5px;

}


card:active wrap{transform:translateY(1px)}

    card wrap{display:flex; flex-direction:column; width:100%; height:0px; padding-bottom:56.25%; position:relative}
        card wrap detail{display:flex; flex-direction:column; width:100%; height:100%; position:absolute; top:0; left:0}
        card wrap panel {
            display: flex;
            align-items: center;
        }
card wrap panel .button.right{ margin-left:auto }
card wrap text[code]{letter-spacing:5px; margin-top:auto}

card[brand="master"]{background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
    card[brand="visa"] {
        background-image: radial-gradient( circle 590px at 8.2% 13.8%, rgba(18,35,60,1) 0%, #bbb 90% );
    }
    card[brand="amex"] {
        background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(102,116,236,1) 0%, rgba(50,231,219,1) 90% );
    }





    /*block item thumb wrap action{position:absolute; width:100%; height:100%; display:flex; flex-direction:column;}

block item thumb wrap action panel{ display:flex;  width:100%; height: 40px;align-items: center; }

block item thumb wrap action panel .hide{ opacity:0; transform:translateY(-10px); transition:.125s; transition-property:transform, opacity;}
block item thumb wrap action panel .hide:nth-child(2){transition-delay:.05s}
block item thumb wrap action panel .hide:nth-child(3){transition-delay:.1s}
block item thumb wrap action panel .hide:nth-child(4){transition-delay:.15s}

block:hover item thumb wrap action panel .hide,
block.k-state-selected item thumb wrap action panel .hide
{opacity:1; transform:translateX(0)}*/
    /*block:hover item thumb[media] action{ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)}*/
    /*block item thumb wrap action panel[bottom]{margin-top:auto;}
block item thumb wrap action panel[bottom] text{margin:0 10px;}*/
    /*action group*/
    block item action[group] {
        position: absolute;
        width: 100%;
        height: 100%;
        flex-direction: column;
        z-index:2;
    }

block item action[group] panel{ display:flex; width:100%;align-items: center;height: 40px; z-index:1 }
block item action[group] panel[extra]{height:100%;}
block item action[group] panel > div.group{ display:flex;align-items: center;padding:0 7px }

block item action[group] panel[center]{height:100%;justify-content:center;}
block:hover item action panel[center], block.k-state-selected item action panel[center]{background:rgba(0,0,0, 0.5)}



block item action[group] panel[bottom]{margin-top:auto;}
block item action[group] panel/*[bottom]*/ text{margin:0 10px;}

block item action[group]  .hide{ opacity:0; transform:translateY(3px); transition:.175s; transition-property:transform, opacity;}
block item action[group]  .hide:nth-child(2){transition-delay:.05s}
block item action[group]  .hide:nth-child(3){transition-delay:.1s}
block item action[group]  .hide:nth-child(4){transition-delay:.15s}

block:hover item /*thumb wrap*/ action[group]  .hide,
block.k-state-selected item /*thumb wrap*/ action[group]  .hide
{opacity:1; transform:translateX(0)}


/*block:hover item thumb[media] action{ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)}*/



block:hover item thumb wrap[accent][hide] > icon{display:none}
block.k-state-selected item thumb wrap[accent][hide] > icon {display:none}

block item action[group] panel group{margin:0 0 0 5px;}
block item action[group] group[right]{margin: 0 5px 0 auto;}
block item action[group] .right{margin-left:auto;}

block[list] item media thumb,
block[list] item .media_cont
{border-radius:5px; overflow:hidden}




block[list]:hover .media_cont.round,
block[list].k-state-selected .media_cont.round,
block[list] item thumb[round],
block[list] item .round thumb

{border-radius:25px;}




block item thumb[ratio='16:9']{padding-bottom:56.25%;}
block item thumb[ratio='9:16']{padding-bottom:177.77%;} /* portrait */
block item thumb[ratio='1:1']{padding-bottom:100%;} /* square */
block item thumb[ratio='4:3']{padding-bottom:75%;}
block item thumb[ratio='3:4']{padding-bottom:133.33%;}
block item thumb[ratio='1:2']{padding-bottom:50%;}
block item thumb[ratio='3:1'] {padding-bottom: 33.33%;}


block item org {width:30px;height:30px;min-width:30px;display:flex;}
block item org wrap {width:100%; display:flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;font-weight:bold}
block:nth-of-type(1n) item org wrap {background:#4285f4}
block:nth-of-type(2n) item org wrap {background:#00c19a}
block:nth-of-type(3n) item org wrap {background:#0e4297}
block:nth-of-type(4n) item org wrap {background:#00c19a}
block:nth-of-type(5n) item org wrap {background:#149b80}

block item detail{padding: 10px 5px 5px; /*padding:10px;*/ display:flex; flex-direction:column; flex-wrap:wrap; overflow:hidden}
block item detail text{white-space:nowrap; /*overflow:hidden; width:100%;*/ text-overflow:ellipsis; line-height:1.3; position:relative;}
block item detail[horizontal]{flex-direction:row; flex-wrap:nowrap; align-items:center;}
block item detail[horizontal] > wrap{display:flex; overflow:hidden; flex-direction:column; /*align-items:center;*/}



text{white-space:nowrap}

[data-size="medium"] {font-size:16px;}
[data-size="large"] {font-size:18px;}
[data-size="larger"] {font-size:20px;}
[data-size="x-large"] {font-size:24px;}
[data-size="xx-large"] {font-size:32px;}
[data-size="xxx-large"] {font-size:48px;}

[data-weight="100"] {font-weight:100}
[data-weight="300"] {font-weight:300}
[data-weight="500"] {font-weight:500}
[data-weight="700"] {font-weight:700}

text[contenteditable="true"]{cursor:text}

text[wrap]{white-space:normal}
text[wrap-line]{white-space:pre-line}
text[nowrap]{white-space:nowrap}
text[middle]{font-size:15px;}
text[medium]{font-size:17px;}
text[large]{font-size:24px;}
text[light]{opacity:.5}
text[info]{line-height:1.5}
text[digit]{letter-spacing: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
text[error]{color:var(--error-color);}
text[private]{color:var(--private-color);}
text[accent]{color:#4e87de;color:var(--main-color)}
[data-shrink="no"]{flex-shrink:0}
[data-shrink="yes"]{flex-shrink:initial}
text[highlight]{opacity:1}

    text[amplifiercount] {
        position: absolute;
        bottom: -5px;
        right: -10px;
        pointer-events: none;
        background: var(--main-color);
        color: #fff;
        border-radius: 0 20px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        z-index: 9;
        min-width: 19px;
        height: 19px;
        padding: 0 6px;
    }

text[marquee]{max-width: 100%;overflow: hidden;text-overflow: ellipsis;}
text[marquee].start{display:flex}

text[marquee] span{position:relative; white-space: nowrap;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both; }
.k-ie11 text[marquee] span{display:inline-block }
text[marquee].start span{animation-name:marquee; padding-right:20px; }
/*text[marquee]:hover span{float:left; }*/


.k-grid td > wrap text[gradient]{display:flex;}
text[gradient]{display:flex; -webkit-mask-image: linear-gradient(to right,#000 calc(100% - 20px),rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right,#000 calc(100% - 20px),rgba(0,0,0,0) 100%);}
text.start[gradient]{-webkit-mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%, #000 20px,#000 calc(100% - 20px),rgba(0,0,0,0) 100%); mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%, #000 20px,#000 calc(100% - 20px),rgba(0,0,0,0) 100%);}

@keyframes marquee{to{transform:translateX(-100%)}}

text[preview],text[navigate]{cursor:pointer;}
text[preview]:hover,text[navigate]:hover{text-decoration:underline}
text[preview]:active,text[navigate]:active{transform:translateY(1px)}

block:hover thumb[content] picture, block:hover item playlist{opacity:.4; /*filter:blur(3px)*/}
block/*:not([accent])*/:not([highlight]).k-state-selected,
block.drop { border: 1px dotted;padding: 9px;/* background: var(--main-color-light);*/ border-radius:10px; box-shadow:none; z-index:2}

    block:not([accent]):not([highlight]).k-state-selected + block:not(:hover) {
        box-shadow: none
    }



block[highlight] {}
block[highlight]:hover item thumb[media] wrap,
block[highlight].k-state-selected item thumb[media] wrap
 {
    background: var(--main-color-dark);

}

block[highlight] .extra{position:absolute;z-index:1}

block[highlight]:hover item > thumb[media] wrap picture,
block[highlight].k-state-selected item > thumb[media] wrap picture,
block[highlight]:hover item .media_cont > picture[media]
{

    -webkit-mask-image: linear-gradient(to bottom,#000 50%,rgba(0,0,0,0) 100%);
}

block[highlight]:hover item .media_cont > picture[media]{opacity:0.5}

block[highlight]{ background:var(--background);box-shadow: 0 0 0 1px var(--border-color);margin:5px; border-radius:10px; padding:5px; }
block[highlight] item{display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;}
block[highlight]:hover,block[highlight].k-state-selected  { background:var(--main-color-dark); color:#fff}
block[highlight][space]{padding:0}
block[accent].k-state-selected{ background:var(--main-color-dark) }

block[highlight]:hover item section,block[highlight].k-state-selected item section {background:none;box-shadow:none;}
block[highlight]:hover toolbar, block[highlight].k-state-selected toolbar {background:var(--main-color-dark);box-shadow:none}

block[list]{width: 100%;box-shadow: 0 -1px 0 0 var(--border-color);}
block[list]:first-child{box-shadow:none}

block[list] item{display:flex;}
block[list] item media{width:50px; flex-shrink:0}
block[list] item media[wide]{width:70px}
block[list] item detail{padding:0 0 0 10px;justify-content:center}
block[list] item detail[space]{padding:0 10px}
block[list] item  action .hide{opacity:0;}



block[list]:hover item  action separator.hide,
block[list].k-state-selected item  action separator.hide

{opacity: .15;}

block[list] item action .hide {opacity: 0;transform: translateX(5px);transition: .125s;transition-property: transform, opacity;}
block[list] item thumb action .hide,
block[list] item .media_cont action .hide
{transform: translateX(-5px);}


block[list]:hover item  action .hide,
block[list].k-state-selected item  action .hide

{opacity:1; transform: translateY(0);}



block[list] item  action .hide:nth-last-child(2) {transition-delay: .05s;}
block[list] item  action .hide:nth-last-child(3) {transition-delay: .1s;} 
block[list] item  action .hide:nth-last-child(4) {transition-delay: .15s;} 


block item section { box-shadow:0 0 0 1px var(--border-color); display:flex; flex-direction:column; background:var(--context); padding:10px; height:100%;    width: 100%;}
block item section[round]{border-radius:15px}
block item section > text{margin:0 0 5px}
block item section space{display:flex;margin:0 0 10px}
 space{display:flex;}
 space[small]{margin:0 0 10px}
 space[large]{margin:0 0 20px}
 space[x-large]{margin:0 0 40px}
block item section[vertical] space{margin:0 0 20px;}
block item segment { }
block item section .form_fields{padding:0; margin:5px 0}
block item section .form_fields .section_title {padding:0 10px 0 0}
block item section group:empty:after{content:"- Unset -";    padding: 5px 0;margin: 0 3px 3px 0;}


block item section wrap[grow]{display:flex;flex-grow:1}

block item section[horizontal]{flex-direction:row;position:relative;align-items:center;}
block item section[horizontal] detail[grow] text{ padding:0}
block item section[vertical]{padding:25px}
block item section[fit]{height:100%}
block item section[group]{padding:15px}
block item section[group] detail{padding:0}


block:hover {
    background-color: rgba(136,136,136,0.1);
    background-color: var(--hover);
    border-radius: 10px;
}



block[list]:hover  {background-image: var(--over-color);box-shadow:0 0 0 1px var(--border-color);background-color: var(--background);border-radius: 10px;}
block[list]:hover + block {  box-shadow: none; }


list[horizontal] block{width:200px;}
list[template='middle'][horizontal] block{width:315px}
block[widget_thumb]{border-radius:20px; align-items:center;width:235px; min-height:210px;border-radius: 20px;}
block[widget_thumb] item{display:flex; z-index:1; height:100%}
block[widget_thumb] section{align-items:center;justify-content:center;text-align:center;    border-radius: 10px;}



/*block_horizontal*/


block[horizontal] item section{padding:0;}
block[horizontal] item wrap{padding:0 10px;display:flex;align-items:center;overflow:hidden;width:100%}
block[horizontal] item thumb[select]{min-width:60px;width:60px;height:60px;color:#fff; border-radius:0;display:flex;justify-content:center;align-items:center;}
block[horizontal] item detail {padding:0 10px}
block[horizontal] item detail[grow]{flex-direction:initial;flex-wrap:initial;align-items:center}
block[horizontal] item detail[grow] b{margin-right:10px;}

block[adaptive] item detail {padding:0 10px}


block item thumb[select] {background:var(--main-color);}
block item thumb[select] wrap[accent]{background:#4e87de;background:var(--main-color);}

block item thumb[select] wrap > icon{position:absolute;width:100%; height:100%;margin:auto}


block[highlight] item thumb[select]{background:var(--main-color-dark)}
/**/


/**/

.k-ie11 block item .media_cont picture[media] {display:flex; flex-wrap:wrap;}
.k-ie11 block item cover {width:23px; min-width:23px;}



block item .media_cont{position:relative;width:100%;} /* to do */
block item .media_cont.simple:active{transform:translateY(1px)}
block item .media_cont.simple{width:50px; flex-shrink:0} 

block item .media_cont thumb wrap{}
block item .media_cont cover{margin:0}
block item .media_cont picture[media]{display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 2px;
    position: relative; z-index:1}
block item .media_cont picture[media][group] cover picture:after{content:"";position:absolute;width:100%;height:100%;background:#000;opacity:0.35}
block item .media_cont picture[horizontal]{  grid-template-columns: repeat(3, minmax(0, 1fr));}
block item .media_cont picture[horizontal="1"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

block item cover{float:left;margin:1px;box-sizing:border-box;position:relative;width:auto;position:relative;}
block item cover thumb:active{transform:translateY(0)}
block item cover thumb wrap {background: rgba(136, 136, 136, 0.25);}

block item playlist{position:relative;display:flex;flex-direction:column;width:100%;padding:0 10px;}
block item playlist decor div{width:100%;height:8px;display:flex;position:relative;background-size:cover;background-position:bottom;}
block item playlist decor{/* border-bottom-left-radius:3px; *//* border-bottom-right-radius:3px; */overflow:hidden;opacity:0.8;}
block item playlist decor[small]{margin:0 10px}
block item playlist decor[small]{opacity: 0.4;}






block item [data-type="portrait"] playlist{position:relative;display:flex;flex-direction: row;width: 16px;padding:10px 0;}
block item [data-type="portrait"] playlist decor div{width:8px;height:100%;display:flex;position:relative;background-size:cover;background-position:bottom;}
block item [data-type="portrait"] playlist decor{/* border-bottom-left-radius:3px; *//* border-bottom-right-radius:3px; */overflow:hidden;opacity:0.8; width:16px;}
block item [data-type="portrait"] playlist decor[small]{margin:10px 0}
block item [data-type="portrait"] playlist decor[small]{opacity: 0.4;}


block item wrap[picture][data-type="portrait"] { flex-direction:row; justify-content:center }

block item wrap[picture][data-type="portrait"] thumb {max-width: 35%;
    aspect-ratio: 9 / 16;
    height: auto;}




block item wrap[group]{display:flex;align-items:center;overflow:hidden} 
block item wrap[group] text{white-space:nowrap;/*width:auto;overflow:inherit*/}
block item wrap[group] text[ellipsis]{overflow:hidden}

block action .hover-show{opacity:0; transform:translateX(10px); transition:.125s }
block:hover action .hover-show{opacity:1; transform:none; }



dot{padding:0 10px; font-weight:700}
dot[space="none"]{padding:0;}
dot::after{content:"\00b7";}
icon + dot{padding-left:5px}

@supports(display:grid) {
[view="block"] list > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));grid-auto-rows: 1fr; }

[view="list"] list > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));grid-auto-rows: 1fr; }

[view="grid"] list[template='large'] > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));grid-auto-rows: 1fr; }
[view="grid"] list[template='common'] > wrap{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

[view="block"] list[template='portrait'] > wrap{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
[view="block"] list[template='common'] > wrap{grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
[view="block"] list[template='large'] > wrap{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
[view="block"] list[template='extra'] > wrap{grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); }

[view="block"] list[template='small'] > wrap{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/*list[space] > wrap {grid-gap:10px;}*/

[view="block"] list[template='line'] > wrap{display: grid;grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));grid-auto-rows: 1fr; }

[view="mini"] list > wrap {display: grid;grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));grid-auto-rows: 1fr;}

/*[view="view"] test > wrap{ display: grid;grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));grid-auto-rows: 1fr;}*/

block{width: auto;} 


@media  (max-width: 600px){ 

    [view="block"] list[template='extra'] > wrap{grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }


}}

}

/*temp*/



/*block item thumb picture{ background-image:url(/Content/images/demo_thumb/Layer_1.jpg?v=4.9.25_250820)}*/

/*block:nth-child(1) item thumb picture{ background-image:url(/Content/images/demo_thumb/Layer_0.jpg?v=4.9.25_250820)}
block:nth-child(1) item thumb:after{ content:"";  position:absolute; width:100%;height:100%; background-image:url(/Content/images/demo_thumb/live_thumb_0.jpg?v=4.9.25_250820);background-size:cover;background-position: center top; }

block:nth-child(1) item:hover thumb:after{ animation: thumb_animation steps(9, end) .925s infinite  }
@keyframes thumb_animation{to{background-position:center bottom}}*/


/*block:nth-child(2n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_2.jpg?v=4.9.25_250820)}
block:nth-child(3n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_3.jpg?v=4.9.25_250820)}
block:nth-child(4n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_4.jpg?v=4.9.25_250820)}
block:nth-child(5n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_5.jpg?v=4.9.25_250820)}
block:nth-child(6n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_6.jpg?v=4.9.25_250820)}
block:nth-child(7n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_7.jpg?v=4.9.25_250820)}
block:nth-child(8n) item thumb picture{background-image:url(/Content/images/demo_thumb/Layer_8.jpg?v=4.9.25_250820)}*/

/*block[disabled]{ }
block[disabled] item thumb picture{background-image:none}

block[disabled] item thumb wrap{background:var(--over-color)}*/

/**/

block.notification.error item thumb[select] wrap[accent]{background:var(--error-color)}
block.notification.success item thumb[select] wrap[accent]{background:var(--new-color)}
.notification.read item{opacity:0.6}

block.notification.read:hover  item{opacity:1}


block indicate{position:absolute;left:0; top:0; /*box-shadow:0 0 0 3px var(--background);*/ width:10px;height:10px;border-radius:50px; z-index:5 }

block indicate + media
{-webkit-mask-image: radial-gradient(circle at 5px 5px, transparent 9px, black 10px);mask-image: radial-gradient(circle at 5px 5px, transparent 9px, black 10px);}

block.success indicate {background:var(--private-color)}
block.new  indicate {background:var(--new-color)}
block.error indicate {background:var(--error-color)}




@media screen and (max-width:1400px) {
    block[adaptive] section[horizontal]{padding:20px}
    block[adaptive] section wrap {flex:1 1 100%}
    block[adaptive] section wrap .input_cont > text {padding-left:0}
    block[adaptive] section wrap separator[hide] {display:none}
    block[adaptive] section separator[horizontal]{display:flex}

    }
















:root { --color: 0, 150, 136; --main-color: rgb(var(--color)); --main-color-light: rgba(var(--color),.25) }


demo { display: flex; align-items: center; flex-direction: column; height: 100%; justify-content: center; }

preview { display: flex; padding: 20px; flex-wrap: wrap; }
preview icon { margin: 10px; }

preview[dark] { color: #fff; background: #1c1c1c }







/****   temporary  **/

/*.sections.wide .textarea{width: calc(100% - 280px);}*/

/*/*/



textarea.hidden { opacity: 0; position: absolute; height: 0px; width: 0px; }
/**/




.option_grid { }
.option_grid > div { float: left; width: 99px; }
.option_grid > div > div { height: 30px; float: left; clear: both; margin: 3px 0 }
.option_grid > div.option_grid_label { width: 140px; }
.option_grid > div.option_grid_label div { width: 100%; height: 30px; line-height: 30px; text-align: right; padding: 0 10px 0 0; }


/**/




/**/

.wrapper { width: 100%; height: 100%; display: -ms-flexbox; -ms-flex-direction: column; flex-direction: column; overflow: hidden; -ms-flex-negative: 1; display: flex; }
.wrap { height: 100%; width: 100%; position: relative; overflow: hidden; display: -ms-flexbox; box-shadow: 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; -ms-flex-negative: 1; display: flex; transform: scale(1); flex: 1; }
.wrapper.upload { background: #e2ecf5 }
.container { width: 100%; /*height:100%;*/ background: var(--background); position: relative; -ms-flex-negative: 1; overflow: hidden; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.content { width: 100%; height: 100%; position: relative; overflow: hidden; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; flex: 1; -ms-flex: 1 1 auto; }


/****/

switchable[filter]:not(.hide) switch action { padding-right: 10px; }
switchable[filter].hide switch action { margin: auto; padding: 0 0 10px 0; }

/*.filter_container {width: 280px;min-width: 280px;background:var(--background);transition: transform .2s;display: flex;-ms-flex-direction:column;flex-direction: column;position:relative;z-index:100;will-change:transform;}*/
.filter_content { width: 100%; /*height: 100%;*/ position: relative; display:flex; flex-direction: column; overflow: auto; /*overflow:overlay;*/ -webkit-overflow-scrolling: touch; overflow-x: hidden; flex: 1 1 auto; padding: 0 20px; box-shadow: 0 0 0 1px var(--outline); }
.filter_container.advanced { flex: 1; -ms-flex: 1 1 auto; }
.filter_container.medium { width: 280px }

/*.k-desktop .filter_container.static .filter_content{    width: -webkit-calc(100% + 20px);}*/



.filter_block { float: left; width: 100%; display: block; box-shadow: 0 -1px 0 0 var(--outline); padding: 20px 0; order: 1000; }

/*.filter_block:last-child { box-shadow: none; }*/

.filter_block.footer { padding: 15px; box-shadow: inset 0 1px 0 0 #3c4e5d, 0 -1px 0 0 #273745; background: rgba(255,255,255,.03); }

.filter_block.search_hide, .filter_block.hidden, .filter_block wrap[block].search_hide, .filter_block wrap[block].hidden { display: none; }
.filter_block.invisible, .filter_block wrap[block].invisible { display: none; order: 1000; }
    

.filter_block .title { margin-top: -20px; display: flex; height: 60px; align-items: center; }
.filter_block .title span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 15px; color: var(--main-color); margin: 0 3px }
.filter_block .title hint { display: flex; }
.filter_block .title .button { display: none }
.filtered .title .button { display: flex; }

.filter_block .button.reset { height: 60px; width: 100%; color: #fff; font-weight: 300; font-size: 16px; text-align: left; padding: 0 20px; }
.filter_block .button.reset:hover { box-shadow: none; background: rgba(255,255,255,.05) }

.filter_block .data_cell { float: left; width: 100%; display: flex; flex-wrap: wrap; }
.filter_block .data_cell > wrap { max-width: 100%; }
.filter_block .data_cell > wrap:only-child { display: flex; flex: 1;  }

.filter_block .data_cell > wrap[wrap] { flex-wrap: wrap }
.filter_block .data_cell > wrap[wrap] .options { flex: 1 1 100% }

.filter_block .data_cell .k-widget { width: 100%; }
.filter_block .data_cell .k-widget.k-slider { padding: 0; min-width: 230px; }


.filter_block .k-widget.k-multiselect { padding: 0 }
.filter_block .k-multiselect-wrap { display: flex; }
.filter_block .k-multiselect .k-button { margin: 3px; box-shadow: none; padding: 0 5px 0 15px }
.filter_block .k-multiselect .k-input { order: 1; margin: 3px; min-height: 30px; width: auto !important; background: rgba(136, 136, 136, 0.15); margin: 3px; padding: 0 15px; box-shadow: none; border-radius: 30px; }
.filter_block .k-multiselect-wrap ul { order: 2; display: flex; flex-wrap: wrap }

.filter_block .data_cell .k-widget.k-datepicker .k-select { display: none }
.filter_block .data_cell .input_cont { padding: 0 5px; background: rgba(136, 136, 136, 0.15); margin: 3px; padding: 0 8px; box-shadow: none; }
.filter_block .Tokenize { order: 1; margin: 3px; min-height: 30px; width: auto !important; background: rgba(136, 136, 136, 0.15); margin: 3px; box-shadow: none; border-radius: 30px; }

.filter_block .Tokenize ul.TokensContainer li.Placeholder,
.filter_block .Tokenize ul.TokensContainer li.TokenSearch input { padding: 0 15px }

.filter_block .data_cell.treeview { padding: 0 0 20px 0; }


.filter_block .data_cell .input_cont,
.filter_block .k-multiselect .k-input,
.filter_block .k-multiselect .k-input,
.filter_block .k-multiselect .k-button,
.filter_block .options label,
.filter_block .Tokenize { border-radius: var(--button-radius) }



/**/





.filter_container.static.right { background: red }
















.main_nav.open { transform: translateX(0); opacity: 1; }
.main_nav { min-width: 300px; position: absolute; opacity: 0; background: var(--context); right: 0px; transform: translateX(100%); transition: transform .225s, opacity .225s; overflow: auto; height: 100%; z-index: 999; box-shadow: var(--elevation); will-change: transform, opacity; }
.main_nav li { line-height: 50px; padding: 0 }
.main_nav li icon { margin: 10px 15px }









/*header*/

.context_menu > .header { display: none }




@keyframes hidden_appear_anim {
    from { opacity: 0; transform: translateX(20px) }
}

.srch { flex: 1; display: flex; align-items: center; height: var(--area); position: relative; }
.srch.mini { min-height:var(--area); margin:0 20px; flex:initial; }
.srch i { display: none }
.srch icon[decoration] { order: -1; transition: .125s; }
.srch input { box-shadow: none; background-color: transparent; height: 100%; width: 100%; }
.srch input:focus { box-shadow: none; }

/*.srch input:focus + icon[decoration] {opacity:.15}
*/ .srch input[pattern]:valid ~ icon[decoration] { width: 0px }
.srch .hidden { display: none; animation: hidden_appear_anim .125s }
.srch .hidden:nth-last-of-type(1) { animation-duration: .25s }
input[pattern]:valid ~ .hidden { display: flex; }

.srch.simple { --button-radius: 5px; padding-left: 5px; height: 40px; margin: 0; --input-radius: 10px }
.srch space { flex-shrink: 0; width: 10px; }

.srch.simple i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; pointer-events: none }



/*.srch.simple:hover{background-image:var(--over-color)}
*/
.filter_result { display: none }
.filter_result.filtered { display: flex; }
.filter_result.filtered.hide { display: none }
.filter_result .filtered_item { min-height: 30px; line-height: 30px; padding-right: 10px; margin-right: 10px; box-shadow: 1px 0 0 var(--outline); display: flex }
.filter_result .filtered_item:only-child, .filter_result .filtered_item:last-child { box-shadow: none; padding: 0; margin: 0 }
.filter_result .filtered_item label { float: left; margin-right: 5px; white-space: nowrap }
.filter_result .filtered_item span { margin: 0 0 0 3px; white-space: nowrap; height: 30px; line-height: 30px; display: flex; float: left; border-radius: var(--button-radius); padding: 0 15px; background: rgba(136, 136, 136, 0.25); position: relative; cursor: pointer; }

.filter_result .filtered_item span icon { margin: 0 -10px }
/* blocks*/

.drag_enabled [data-uid] { cursor: grab; }

.drag_item:after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 9 }


.drag_item { cursor: grabbing; position: absolute; }
.drag_item block { width: 100%; pointer-events: none; }

.drag_item count { position: absolute; background: var(--special-color); display: block; color: #fff; height: 40px; width: 40px; font-weight: 700; line-height: 40px; text-align: center; right: -15px; top: -15px; border-radius: 20px; z-index: 2; }

.drag_item > item,
.drag_item > block,
.drag_item > block[list],
.drag_item > item[dwidget] { box-shadow: var(--elevation_4); background: var(--background) }


.table_view.drag_item { border-spacing: 0; font-weight: 700; background: var(--context); box-shadow: var(--elevation); }
table.drag_item { border-spacing: 0; font-weight: 700; background: var(--context); box-shadow: var(--elevation); }
table.drag_item td { height: 40px; box-shadow: 1px 0 0 0 var(--border-color); }
table.drag_item tr { box-shadow: 0 1px 0 0 var(--border-color); }
table.drag_item td wrap { padding: 0 10px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; display: block; }

table.drag_item tr td { pointer-events: none; }

table.drag_item .k-hierarchy-cell { pointer-events: none; width: 40px; }

.drag_hide { display: none; }



.item_block { float: left; padding: 10px; box-sizing: border-box; position: relative; min-width: 180px; width: 180px; }


.drag_item .item_block, .drag_item .list_item { pointer-events: none; padding: 0; z-index: 2; }
.drag_item .list_item { }
.drag_item .list_item .item { background: var(--background); width: calc(100vw - 360px); align-items: flex-start }
.drag_item block[highlight] { margin: 0 }

block.drag { cursor: grab; }
block.drag.drag_item { cursor: grabbing; }
block.freeze { opacity: 0.6; cursor: not-allowed; }



.item_block .item { width: 100%; box-sizing: border-box; position: relative; background: var(--background); /*height: 100%;*/ box-shadow: 0 0 0 1px rgba(0,0,0, .05), 0 10px 25px 0px rgba(0,0,0,.1); overflow: hidden }
.item_block .item .details div span { font-weight: 700; }
.notification .highlight { color: var(--main-color); }



.item i { height: 2px; width: 2px; box-shadow: inset 0 0 5px; display: inline-block; margin: 3px 7px; border-radius: 10px; }

.item_block .item .details { padding: 10px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; line-height: 20px }
.item_block .item .details div p { font-size: 13px; white-space: nowrap; user-select: all; }
.item_block .item .details div { display: -ms-flexbox; display: flex; align-items: center; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.item_block .item .details div.partner { font-weight: 700 }


.item_block .item .options { box-shadow: 0 -1px 0 0 var(--outline); display: -ms-flexbox; display: flex; align-items: center; -ms-flex-align: center; padding: 5px; }
.options .button { }
.options .button:active { }
.item .options .menu_settings { margin-left: auto; }


.item_block .item .img { background-size: cover; background-color: rgba(0,0,0,.07); opacity: .8; background-position: center center; padding-bottom: 56.25%; width: 100%; position: relative; height: 0; overflow: hidden; cursor: pointer; color: #fff; }
.notification_list .notification .thumb:active { opacity: 0.5 }
.item_block .item_block.disabled .item .img:active { opacity: 1 }


.item_block .item .img icon { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; opacity: 0; transition: .125s; transform: translateY(5px) }

.item_block:hover .item .img icon { opacity: 1; transform: translateY(0) }
.item_block:hover .item .img { opacity: 1 }


.item_block:hover, .k-state-selected.item_block { background: rgba(0,0,0,.05); }
.item_block:hover .item .img:after, .k-state-selected.item_block .img:after { background: linear-gradient(to top,#2f4150 0%, rgba(47, 65, 80, .5) 100%); }
.item_block:hover .item .img:before, .k-state-selected.item_block .img:before, .list_item:hover .img:before, .list_item.k-state-selected .img:before, .notification.play:hover .thumb:before { opacity: 1; visibility: visible; transform: translateY(0) }
/*.item_block:hover .item .options, .k-state-selected.item_block .item .options {box-shadow: 0 -1px 0 0 rgba(255,255,255, .05); }*/





.disabled .item .img:before { display: none }
.disabled .item .img { cursor: default; }

.list_item.disabled .item .img { background: var(--outline); cursor: default; pointer-events: none; }



.item .label { text-transform: uppercase; border-radius: 30px; padding: 5px 10px; margin: 10px 10px 0; z-index: 2; position: relative; text-align: center; box-shadow: inset 0 0 0 1.52px; font-weight: bold; float: left; }
td .label { vertical-align: middle; display: inline-block; position: relative; margin: 0; min-width: 0; max-width: 100%; color: #fff; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; margin: 0 5px 0 0 }

.label.error { color: #e16b4f; }
.label.process { color: #FFCC80; }
.label.new { color: #66aebb; }
.label.private { color: #7fb95e; }






/** list vew**/

.list_item { width: 100%; overflow: hidden; box-shadow: 0 1px 0 0 rgba(0,0,0,.07); padding: 5px; position: relative; }
.list_item .item { display: -ms-flexbox; display: flex; -ms-flex-align: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; align-items: center; margin: 0; overflow: hidden; -ms-flex-direction: row; }

.top_align .list_item .item { -ms-flex-align: start; align-items: flex-start; }

.list_item .item.no_wrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

.list_item .item.no_wrap span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; display: block; }


.list_item.drop { padding: 10px; }

.list_item:last-child { box-shadow: none }

.drop_zone .prevent_drop { opacity: .5 }

.list_item:hover, .list_item.drop { background: #eaeff3; box-shadow: 0 0 0 1px var(--outline); z-index: 5; }
.k-state-selected.list_item { background-color: #2f4150; box-shadow: 0 0 0 1px #2f4150; color: #fff; z-index: 6; }


.list_item .item > div { margin: 5px; float: left; overflow: hidden }
.list_item .item > div p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; float: left }
.media_info { width: 320px; box-shadow: 1px 0 0 var(--outline); padding-right: 20px; }
.k-state-selected .media_info { box-shadow: 1px 0 0 rgba(255,255,255,.1) }
.media_info > div { margin: 2px; display: block; float: left; clear: both; }
.media_info > div > div { float: left }
.outputs_cont .info_output { float: left; clear: both; }
.outputs_cont label { font-weight: 700; float: left; margin: 2px; padding: 4px; min-width: 90px; text-align: right; }


@media (max-width: 1280px) {

    .media_info { width: auto; box-shadow: none; padding-right: 0; }
    .k-state-selected .media_info { box-shadow: none; }
    .outputs_cont { flex: 1 1 100% }
    .outputs_cont label { text-align: left; }
}


/*.list_item .name{     -ms-flex:1}*/
.list_item .options { right: 0; height: 100%; background: #2f4150; -ms-flex-align: center; align-items: center; display: none; top: 0; margin: 10px 0 0 0; -ms-flex: 1 100%; flex: 1 100% }
.list_item .options.right { flex: 0 0 auto; -ms-flex: 0 0 auto; margin: 0 0 0 auto; }
.list_item .options .button { animation-name: option_anim; animation-fill-mode: backwards; animation-duration: .15s; }

.list_item .options .button:nth-child(2) { animation-duration: .2s }
.list_item .options .button:nth-child(3) { animation-duration: .25s }
.list_item .options .button:nth-child(4) { animation-duration: .3s }

@keyframes option_anim {
    from { transform: translateY(20px) }
}




.list_item .roleType span { /* margin-top:10px */ }
.list_item .roleType span,
.list_item .privacy span,
.badge_cont span,
.info_privacy span { padding: 3px 8px; box-shadow: inset 0 0 0 1.3px; border-radius: 50px; display: block; margin: 2px; float: left; text-transform: uppercase; font-weight: 700; }


.list_item .email { opacity: .5 }

.list_item .item .img { width: 160px; height: 90px; background-size: cover; background-position: center center; position: relative; cursor: pointer; display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center; display: flex; align-items: center; justify-content: center; }
.list_item .item .list_img { min-width: 70px; width: 70px; height: 40px; background-size: cover; background-position: center center; position: relative; border-radius: 4px; cursor: pointer; }
.list_item .item .img:active { transform: translateY(1px) }
.item .img:hover .label { display: none; }


.badge_cont { float: left; max-width: 240px; }



.outputs_cont span { margin: 2px; float: left; padding: 4px; position: relative; box-shadow: inset 0 0 0 1px; border-radius: 2px; min-width: 0; max-width: 100%; }




/**/
.k-ie .context_container { max-height: calc(100vh - 20px); }
/**/

@media (max-height: 720px) and (max-width: 420px) {

    .context_menu > .header { display: -ms-flexbox; display: flex; }
    .k-ie .header ~ .context_container { max-height: calc(100vh - 80px); }
}


.history block detail { display: none; }
.history block.detail_open detail { display: block; }





.list_manage_container { display: -ms-flexbox; overflow: hidden; display: flex; -ms-flex-direction: column; flex-direction: column; position: relative; flex: 1; -ms-flex: 1 1 auto; }
.list_manage { padding: 10px 0; box-shadow: 0 1px 0 0 rgba(0,0,0,.05); max-width: 240px; }
.list_manage > span { display: block; position: relative; }
.list_manage > span:hover { background: var(--main-color); color: #fff }





.list_manage.list_wrap { overflow: auto; -ms-flex: 1 1 auto; }

.option_box { cursor: pointer; display: block; align-items: center; text-transform: none; font-weight: 400; padding: 0 20px 0 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 40px; height: 40px; }
.option_box input[type=checkbox] { display: none; }
.option_box .icon { position: absolute; top: 5px; left: 5px; }

.option_box:hover input:checked ~ .icon { background-position: -30px -0px; }
.option_box input:checked ~ .icon { background-position: -30px -30px; }
.option_box:active { transform: translateY(1px) }








.k-state-disabled .k-icon { opacity: 05; }





.top .k-multiselect-wrap { flex-direction: column; }
.top .k-multiselect-wrap .k-icon.k-loading { bottom: 0; top: auto; }


.size_list { background: red; width: 300px; position: relative; }
.size_list li { }
.size_box { background: green }


.thumb_picker { width: 240px; position: relative; float: left; margin-bottom: 5px; }
.thumb_picker div { width: 100%; background-size: cover; padding-bottom: 56.25% }
.thumb_picker .button { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 50px; width: 50px; border-radius: 50px; opacity: 0; transform: translateY(10px); transition: .2s }
.thumb_picker:hover .button { opacity: 1; transform: none }


.data_cont { width: 100%; }



.picker { width: 100%; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.picker .thumb { position: relative; overflow: hidden; margin: 1px; float: left; cursor: pointer }
.picker .thumb.selected { background: var(--main-color) }

.picker .thumb.selected div { opacity: .3 }
.picker .thumb:hover { opacity: .85 }

.picker .thumb:active div { transform: translateY(1px) }


.picker .thumb div { padding-bottom: 56.25%; width: 100%; background-size: cover; background-position: center center }








/*info*/


.window_cont .toolbar { box-shadow: none; margin: 0; padding: 20px; background: #f9f9f9 }

.toolbar { padding: 20px 0; height: 70px; min-height: 70px; margin: 0 20px; box-shadow: 0 1px 0 0 rgba(47, 65, 80, 0.1); position: relative; z-index: 9; }
.toolbar .button { min-width: 70px; margin-right: 10px; }
.toolbar .action_cont.right { float: right }


.form_group { box-shadow: inset 0 0 0 1px rgba(0,0,0, .1); border-radius: 5px; background: var(--background); margin-bottom: 10px; overflow: hidden; }
.form_item { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 10px; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.form_item { box-shadow: 0 1px 0 0 var(--outline) }
.form_item .options.group { width: auto; background-color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); border-radius: 2px; margin: 5px; -ms-flex: 1; flex: 1; min-width: 180px; }

.form_item .ch_cont { margin: 5px; }

.form_item .options label input:checked ~ span { color: #fff; }
.form_item .options.group label span { color: #828282; }
.help_tip { min-height: 60px; width: 100%; background: #f7e28e; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 0 20px; position: relative; z-index: 99; }



.embed_preview { position: relative; padding: 0 0 56.25% 0; background: var(--main-color); }
.embed_preview span { position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: center; justify-content: center; display: -ms-flex; -ms-flex-align: center; -ms-flex-pack: center; font-size: 30px; font-weight: 700; color: #fff; }

/*windows*/






.actions_cont { padding: 15px; background: red; }





.sections .list_view_wrapper .list_view { background: var(--background); box-shadow: 0px 8px 0 -4px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.05), 0 15px 20px -10px rgba(0,0,0,.3); padding: 0; margin: 5px; }



.tab_strip { display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100%; }
.tab_strip.accent li dot { padding: 0 }
.tab_strip.accent > wrap > ul > li.selected { box-shadow: none; color: #fff; background: var(--main-color) }


.tab_strip.round { }
.tab_strip.round > wrap > ul { align-items: center; padding: 0 calc((var(--area) - 40px) / 2); }
.tab_strip.round > wrap > ul > li { height: 30px; line-height: 30px; border-radius: 30px; font-weight: 500; background: var(--over-color); margin: 0 5px }
.tab_strip.round > wrap > ul > li.selected { box-shadow: none; color: #fff; background: var(--main-color) }
.tab_strip.round > wrap > ul > li[zone].selected { opacity: 1; box-shadow: none; }
.tab_strip.round > wrap > ul > li > text { padding: 0 5px; }


.tab_strip > wrap { display: flex; flex-shrink: 0; box-shadow: inset 0 -1px 0 0 var(--outline); }
.tab_strip > wrap > ul { display: flex; flex-shrink: 0; overflow: hidden; float: left; min-width: 100%; height: var(--area); line-height: var(--area); }

.tab_strip > wrap > ul > li { list-style: none; height: var(--area); line-height: var(--area); overflow: hidden; padding: 0 10px; cursor: pointer; position: relative; overflow: hidden; box-shadow: inset 0 0px 0 0 var(--main-color); font-weight: 700; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0 }
.tab_strip > wrap > ul > li:hover { background-color: var(--hover) }
.tab_strip > wrap > ul > li:active text, .tab_strip > wrap > ul > li:active icon { transform: translateY(1px) }
.tab_strip > wrap > ul > li.selected { box-shadow: inset 0 -2px 0 0; color: var(--main-color); }


.tab_strip > wrap > ul > li.hidden { display: none }
.tab_strip > wrap > ul > li.disabled { cursor: default; opacity: .5; transform: none; }
.tab_strip > wrap > ul > li text { padding: 0 10px; }

.tab_strip > div { position: relative; display: -ms-flexbox; display: flex; clear: both; overflow: hidden; height: 100%; flex: 1; }
.tab_strip > div > div { display: none; position: relative; flex: 1; flex-direction: column; overflow: hidden; -ms-flex: 1 1 auto; height: 100%; width: 100%; }

@keyframes tab_anim {
    from { opacity: 0; transform: translateY(-10px) }
    to { }
}

.tab_strip > div > div.selected { display: flex; animation: tab_anim .225s backwards }


.form_fields > .tab_strip > div > div { padding: 5px; background: var(--background); }

.tab_strip.classic { }
.tab_strip.classic > wrap { box-shadow: none; background: var(--main-color); color: #fff; justify-content: flex-end; }
.tab_strip.classic > wrap > ul { padding: 0 10px; height: initial; line-height: initial; align-items: flex-end; gap: 2px }
.tab_strip.classic > wrap > ul > li { height: 36px; line-height: 36px; border-radius: 5px 5px 0 0; font-weight: 500; box-shadow: none; margin: 0; overflow: initial }

.tab_strip.classic > wrap > ul > li .material_ink { border-radius: 5px 5px 0 0; display: none }

.tab_strip.classic > wrap > ul > li:hover { background: #ffffff21; }
.tab_strip.classic > wrap > ul > li.selected { background: var(--background); color: var(--text-color); height: 40px; z-index: 1; }


.tab_strip.classic > wrap > ul > li:after, .tab_strip.classic > wrap > ul > li:before { content: ""; position: absolute; height: 5px; width: 5px; background: inherit; bottom: 0; }
.tab_strip.classic > wrap > ul > li:after { right: -5px; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIHZpZXdCb3g9IjAgMCA1IDUiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9InJpZ2h0IiBjbGFzcz0iY2xzLTEiIGQ9Ik0zMjMsMjM1aC01di01QTUsNSwwLDAsMCwzMjMsMjM1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMxOCAtMjMwKSIvPgo8L3N2Zz4K) }
.tab_strip.classic > wrap > ul > li:before { left: -5px; -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIHZpZXdCb3g9IjAgMCA1IDUiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggaWQ9ImxlZnQiIGNsYXNzPSJjbHMtMSIgZD0iTTMyMywyMzVoNXYtNUE1LDUsMCwwLDEsMzIzLDIzNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjMgLTIzMCkiLz4KPC9zdmc+Cg==) }


/**/
.nav_strip { display: flex; flex-direction: column; overflow: hidden; width: 100%; height: var(--area); flex-shrink: 0; background: var(--background); z-index: 2; position: relative }
.nav_strip wrap { display: flex; flex-shrink: 0; box-shadow: inset 0 -1px 0 0 var(--border-color); }
.nav_strip ul { display: flex; flex-shrink: 0; overflow: hidden; float: left; min-width: 100%; }


.nav_strip li { list-style: none; height: var(--area); line-height: var(--area); overflow: hidden; padding: 0 10px; cursor: pointer; position: relative; overflow: hidden; box-shadow: inset 0 0px 0 0 var(--main-color); font-weight: 700; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0 }
.nav_strip li:hover { background-color: var(--hover) }
.nav_strip li:active text,
.nav_strip li:active icon { transform: translateY(1px) }

.nav_strip li.selected { box-shadow: inset 0 -2px 0 0; color: var(--main-color); }
.nav_strip li.hidden { display: none }
.nav_strip li.disabled { cursor: default; opacity: .5; transform: none; }
.nav_strip li text { padding: 0 10px; }

.nav_strip wrap[border="no"] {box-shadow:none}

/**/

/*  dashboard  */


view.drop dashboard > [intro] { display: none }

dashboard [intro] + wrap { display: none }
.drop dashboard [intro] + wrap { display: grid }


canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

dashboard { display: flex; height: 100%; width: 100%; flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch }

dashboard[mini] { height: auto; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border-color); background: var(--highlight) }
dashboard[mini] item:hover { box-shadow: 0 0 0 1px var(--border-color); }

dashboard > separator[horizontal] { margin: 0 30px; }
/*dashboard:after { content: ""; height: 25%; display: flex; flex-shrink: 0 }*/
dashboard header { display: flex; width: 100%; height: 60px; display: flex; align-items: center; padding: 0 15px; }
dashboard header text { padding: 0 15px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
dashboard > wrap { display: grid; width: 100%; flex-shrink: 0; padding: calc(var(--area) / 2); flex-wrap: wrap; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

dashboard > wrap[template="large"] { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
dashboard > wrap > item[double] { grid-column: span 2; }

@media(max-width:700px) {

    dashboard > wrap { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }

    [drag_start] [autohide] { height: var(--area) }
}



dashboard > wrap indicator { height: 440px; width: 100%; border-radius: 20px; }

item[dwidget] { z-index: 1; transition: box-shadow .125s; position: relative; padding: 10px 10px 0; background: var(--background); box-shadow: 0 0 0 1px var(--border-color); overflow: hidden; display: flex; flex-direction: column; justify-content: center; height: 440px; width: 100%; border-radius: 20px; /*flex: 1 1 320px;*/ }

item[dwidget] text[caption] { overflow: hidden; text-overflow: ellipsis }


item[dwidget]:hover { box-shadow: 0 4px 10px 0px rgba(0,0,0,.3), 0 0 0 1px var(--border-color); z-index: 2; }
/*
item[dwidget] list {
        mask-image: linear-gradient(to top, transparent 10%, black 60%);
        -webkit-mask-image: linear-gradient(to top, transparent 10%, black 60%);
    }

    item[dwidget]:hover list {
        mask-image: none;
        -webkit-mask-image:none
    }*/

item[dwidget] > wrap { display: flex; width: 100%; height: 100%; background: var(--background); overflow: hidden; align-items: center; position: relative; }
item[dwidget] > info { padding: 20px 20px 0 20px }

.drag_item item[widget] { height: 340px; position: relative; overflow: hidden; display: flex; flex-direction: column; }

dashboard item[accent] { background: var(--main-color); color: #fff; }
dashboard item count { font-size: 50px; font-weight: 700; font-family: Roboto }
dashboard item > text { margin-top: 10px; }



dashboard wrap item[large] { height: auto; width: 100%; flex: 1 }
dashboard wrap item[extra] { height: auto; width: 100%; flex: 1 1 100% }

[dashboard_search] { padding: 20px 20px 0; height: auto; min-height: initial; }


@media (max-width: 800px) {
    [dashboard_search] { order: 2; padding: 0 20px 20px 20px; }
}

.button.slider { position: absolute; z-index: 9; top: 50%; transform: translateX(0) translateY(-50%); transition: .125s; transform-origin: center center; }
.button.slider[hidden] { opacity: 0; transform: translateX(-50%) translateY(-50%); visibility: hidden; }
.button.slider.prev { left: 10px }
.button.slider.next { right: 10px }

.k-webkit.k-desktop dashboard item toolbar { margin: 0 20px; padding: 0; width: auto }




/* compact scrollbar*/


.k-webkit.k-desktop dashboard item list::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container ::-webkit-scrollbar-thumb,
cont textarea::-webkit-scrollbar-thumb { border-radius: 20px; display: none }


.k-webkit.k-desktop dashboard item list::-webkit-scrollbar-thumb:vertical,
.k-webkit.k-desktop .context_container::-webkit-scrollbar-thumb:vertical,
.k-webkit.k-desktop .context_container ::-webkit-scrollbar-thumb:vertical,
cont textarea::-webkit-scrollbar-thumb:vertical { border: 3px solid transparent; }


.k-webkit.k-desktop dashboard item list::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container ::-webkit-scrollbar-thumb,
cont textarea::-webkit-scrollbar-thumb { border: 3px solid transparent }


.k-webkit.k-desktop dashboard item list:hover::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container:hover::-webkit-scrollbar-thumb,
.k-webkit.k-desktop .context_container:hover ::-webkit-scrollbar-thumb,
cont textarea:hover::-webkit-scrollbar-thumb { display: block }

/**/





.k-ff.k-desktop dashboard item list,
.k-ff.k-desktop .k-list-scroller,
.k-ff.k-desktop .list_menu ul wrap[scroll],
.k-ff.k-desktop .list_menu ul,
.k-ff.k-desktop infobar wrap[scroll],
.k-ff.k-desktop .context_container,
.k-ff.k-desktop cont textarea { scrollbar-color: rgba(136, 136, 136, 0.25) transparent; scrollbar-width: thin; }

.k-ff.k-desktop .k-list-scroller { scrollbar-gutter: stable; }




@media screen and (max-width: 900px) {
    dashboard wrap item,
    dashboard wrap item[large] { width: 100%; flex: 1 1 100% }
}

/* ----- */

group { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; padding: 3px 0 0; min-height: 30px; }

group[center][space] { margin: 0 20px 30px; justify-content: center; flex-shrink: 0 }

group badge { margin: 0 3px 3px 0 }

badge.button { cursor: initial }
.input_cont badge.button { animation: appear_from_right .125s backwards; }

@keyframes appear_from_right {
    from { width: 0px; padding: 0; }
    to { }
}

badge { white-space: nowrap; border-radius: 20px; padding: 5px 10px; z-index: 2; line-height: 1; position: relative; text-align: center; box-shadow: inset 0 0 0 1.22px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0 }

group[line] { flex-wrap: nowrap; }

group[right] { margin: 0 5px 0 auto; }

.k-list .k-item group,
.k-input group { flex-shrink: 0 }


:root { --error-color: tomato; --new-color: #4e87de; --success-color: #1ca9bb; --private-color: #76a45d; --missing-color: #c7c4c4; --special-color: #ef5350; --orange-color: #ff7043; --process-color: #fbcb00 }

badge[error] { color: var(--error-color) }
badge[new] { color: var(--new-color) }
badge[private] { color: var(--private-color) }
badge[accent] { }

badge[floating] { position: absolute; top: 0; left: 0; max-width: none; overflow: inherit; padding: 0 15px; height: 30px; line-height: 30px; border-radius: 0 0 10px 0; box-shadow: 0 2px 0 0 rgba(0,0,0,.1); }
badge[floating][static] { position: relative; top: 0; left: -30px; }

badge[filled] { box-shadow: none; color: #fff; background: #000 }
badge[round] { border-radius: 30px; font-weight: 400 }

badge[count] { box-shadow: none; background: rgba(136, 136, 136, 0.25); font-weight: 700; margin-left: 10px }
badge[highlight] { box-shadow: none; margin-left: 10px; padding: 2px 10px; }

badge[space] { margin-left: 10px; }

/*badge[filled][yellow]{background: #FFE082;color: #000;}*/

badge[filled][error],
badge[filled][offline] { background: var(--error-color) }
badge[filled][watch] { background: #fbd189; }
badge[filled][new] { background: var(--new-color) }
badge[filled][private] { background: var(--private-color); color: #fff }
badge[filled][accent] { background: var(--main-color) }
badge[filled][missing] { background-color: var(--missing-color) }
badge[filled][process] { background-color: var(--process-color); color: #000; }
badge[filled][semi] { background: linear-gradient(90deg, var(--private-color) 51%, var(--error-color) 51% ); }


@keyframes attention {
    from { }
    to { transform: scale(3); opacity: 0 }
}

.attention badge[medium] { overflow: visible }

.attention badge[filled]::after { box-shadow: none }
.attention badge::after { content: ""; box-shadow: inset 0 0 0 1px; border-radius: 50%; position: absolute; width: 100%; height: 100%; background: inherit; left: 0; top: 0; animation: attention .725s infinite; }


/*badge[filled][published]{background: #11998e;background: linear-gradient(to right, #11998e, #38ef7d);}
*/


/******/

badge[micro] { padding: 0; width: 7px; height: 7px; margin-left: auto; margin-right: auto; border-radius: 7px }
badge[mini] { padding: 0; width: 10px; height: 10px; margin-left: auto; margin-right: auto; border-radius: 10px }
badge[medium] { padding: 0; width: 12px; height: 12px; margin-left: auto; margin-right: auto; border-radius: 15px }
badge[large] { padding: 0; width: 18px; height: 18px; margin-left: auto; margin-right: auto; border-radius: 20px }

badge[circle] { padding: 0; width: 30px; height: 30px; border-radius: 15px }
badge[circle="small"] { transform: scale(.7) }

.form_fields .data_label badge { display: inline-block; margin: 0 10px 0 0; }

/*tip_container*/

.tip_container table { border-collapse: collapse; overflow: hidden; font-size: 13px; width: 100%; }
.tip_container .notes { max-width: 440px; padding: 15px; background: #f7e28e; box-shadow: inset 0 1px 0 0 rgba(0,0,0,.05), inset 0 3px 0 0 rgba(0,0,0,.03); word-break: break-all; word-break: break-word; }
.tip_container .notes span { width: 100%; font-weight: 700; float: left; margin: 0 0 10px; }


.tip_container td > span, .tip_container th > span { display: block; padding: 7px; min-height: 30px; max-width: 300px; overflow: hidden; word-break: break-all; }
.tip_container tr { box-shadow: 0 1px 0 0 rgba(0,0,0,.05); }
.tip_container td, .tip_container th { box-shadow: 1px 0 0 0 rgba(0,0,0,.05); font-weight: 400; text-align: left; position: relative }

.tip_container th:first-child { width: 140px; }


.tip_container tr td:first-child { text-align: right; font-weight: 700; width: 140px; vertical-align: top; }

.tip_container th span { font-weight: 700; text-transform: uppercase; }
.tip_container tr:hover td { background-color: #2f4150; color: #fff }
.tip_container td:last-child, .tip_container th:last-child, .tip_container tr:last-child { box-shadow: none; }

.more_info { background: rgba(0,0,0,.05); }

td > .info_category,
td > .info_language { float: left; margin: 5px 0px; }

.info_category span, .locations span, .screens span, .info_group span { margin: 2px; float: left; background: var(--main-color); color: #2f4150; padding: 3px 6px; position: relative; border-radius: 2px; min-width: 0; max-width: 100%; }

.info_group span.caption { font-weight: 700; background: none; color: inherit }


.info_language span { margin: 2px; float: left; padding: 3px 6px; position: relative; box-shadow: inset 0 0 0 1px; border-radius: 2px; min-width: 0; max-width: 100%; }
.web_content span { margin: 2px; float: left; padding: 3px 6px; position: relative; box-shadow: inset 0 0 0 1px; border-radius: 2px; min-width: 0; max-width: 100%; }




.fix_scroll { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; -ms-flex: 1; flex: 1; overflow: hidden; }








.notification_container { width: 420px; }

.notification_container .empty view[intro] > wrap { padding: 50px 0 }



/*.open_details .notification_head .hide{display:flex}
*/


.notification_list .empty { padding: 30px 0; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }

wrap[fieldset] + block[list]:not(:hover) { box-shadow: none; }



.open_details toolbar[hide] { opacity: 0; min-height: 0px; height: 0px; visibility: hidden; }







.Tokenize ul.Dropdown li.Hover { color: white; text-decoration: none; background-color: #f26363; }

input.copy { user-select: text; cursor: text }


/**/


view[color] { background: var(--highlight) }

view[notification_wrapper] { width: 200%; transition: .275s; will-change: transform; }

.open_details view[notification_wrapper] { transform: translateX(-50%) }



view[notification_wrapper] view[list] { transition: ease-in-out .275s; /* margin-top:0 */ max-height: 100vh; will-change: height,max-height; }

view[notification_wrapper] view[detail] { transition: ease-in-out .275s; max-height: 0px; will-change: height,max-height; }
.open_details view[notification_wrapper] view[detail] { max-height: 100vh; }

.open_details view[notification_wrapper] view[list] { /* margin-top:-100%; */ max-height: 0px; }

.notification_details .notification { padding: 20px; border-radius: 0px }


view[notification_wrapper] list > wrap { padding: 0 }

.open_details list > wrap { /* height:0 */ }


/*player*/




.window_container > div.player > div { box-shadow: none }

.info_bar { width: 100%; display: flex; flex-direction: column; overflow: hidden; }

.info_bar text { overflow: hidden; text-overflow: ellipsis; margin: 0 0 10px }
.info_bar text:last-child { margin: 0 }

.info_bar h1 { font-size: 20px; font-weight: 300; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 30px; height: 30px; position: relative; }
.info_bar div { font-weight: 700; height: 20px; }
.info_bar div span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 20px; height: 20px; display: block; }

.video_cont { width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative; transform: scale(1); box-shadow: 0px 8px 0 -4px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.05), 0 15px 20px -10px rgba(0,0,0,.3); }


.player.embed { padding: 0; justify-content: flex-start; -ms-flex-pack: start; align-items: flex-start }
.player.embed .info_bar { padding: 10px 25px 30px; text-shadow: 0 1px 0px rgba(0, 0, 0, 0.2); order: 2; -ms-flex-order: 2; transition-duration: .25s; opacity: 0; transform: translateY(-20px); }
.player.embed .player_toolbar { padding: 10px; margin: 10px; box-shadow: 0 1px 0 0 rgba(255,255,255,.1); -ms-flex-order: 1; order: 1; height: auto; width: auto; }
.player.embed .video_detail { position: absolute; transition-duration: .125s; transition-delay: .35s; opacity: 0; transform: translateY(-20px); background: linear-gradient(to top, rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.player.embed .player_cont:hover .video_detail, .player.embed .player_cont:hover .info_bar { transform: translateY(0); opacity: 1; transition-delay: 0s; }

.window_container > div.player { background: rgba(255,255,255,.9) }

.player_wrap { display: -ms-flexbox; -ms-flex-direction: row; display: flex; flex-direction: row; max-height: 100%; overflow: hidden; -ms-flex-negative: 1; align-items: flex-end; -ms-flex-align: end; max-width: 900px; }
.player_cont { flex: 1; width: 100%; width: 100vw; }
.player_cont panel { display: flex; align-items: center; padding: 15px 0; }
.player_cont media { background: red; width: 100%; float: left; position: relative; }
.player_cont media[ratio='16:9'] { padding-bottom: 56.25%; }
.player_cont media > wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.player_cont media > wrap player { width: 100%; height: 100%; }
.player_cont panel [right] { margin-left: auto; }
.player_list_cont { background: var(--background); width: 400px; position: relative; height: 100%; transition: .2s; position: absolute; left: 0; top: 0; z-index: 9999; }
.player_list_cont .mbl_switch { background: var(--main-color) }

@media (max-width: 900px) {


    .player_list_cont .mbl_switch { display: block; transform: translateX(0) }
    .ovrl_wnd_cont > div.player.playlist { padding-left: 70px; }
    .ovrl_wnd_cont > div.player.playlist.embed { padding-left: 50px; }
    .player_list_cont { width: 300px; max-width: calc(100% - 50px); transform: translateX(-100%); }

    .player_list_cont.open { transform: translateX(0); }
    .player_toolbar .button.white { margin-right: 10px; font-size: 0; }
}




/*form_fileds line*/
.form_fields.line { flex-wrap: nowrap; align-items: center; flex: auto }
.form_fields.line .data_label { margin: 0 5px; flex: initial }
/*.form_fields.line input{border-radius:30px;padding:0 10px}
*/ .form_fields.line.large { width: 200px }
/*.form_fields.line.large .k-widget {padding: 0 3px}
*/ .form_fields.line.small { width: initial; }
.form_fields.line.small .data_label { margin: 0; }
.form_fields.line.small input { width: 60px; min-width: 60px }

.form_fields.line > .k-widget { /*border-radius:30px; */ margin: 0; }
/*.form_fields.line .k-widget.k-numerictextbox .k-input{padding:0 10px}
*/
/*.form_fields.line .input_cont.small {min-width:50px;max-width:50px}*/



/*overlay*/

overlay .zone > controls, .qr_code controls { position: absolute; width: 100%; top: 0; bottom: 0; /* padding: 5px; */ display: flex; left: 0; }
overlay .zone > controls > div, .qr_code controls > div { /*filter: invert(50%);-webkit-filter: invert(50%);*/ border: 1px dashed var(--border-color); width: 100%; height: 100%; }

overlay .zone.table > controls > div { width: calc(100% + 10px); height: calc(100% + 10px); left: -5px; flex-shrink: 0; position: absolute; top: -5px; }
overlay .zone.complex > controls > div { width: calc(100% + 20px); height: calc(100% + 20px); left: -10px; flex-shrink: 0; position: absolute; top: -10px; }


overlay .zone.selected > controls circle, overlay .zone.cropper > controls circle, .qr_code controls circle { display: block; background: var(--main-color); }

overlay .zone > controls > .tooltip, .qr_code controls > .tooltip { position: absolute; top: 5px; left: 5px; white-space: nowrap; display: none; }

overlay .zone.outer.selected > controls [rotate] { display: flex; }
overlay .button[rotate] { position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px; cursor: move; display: none; z-index: 100; margin: 0 }
overlay controls decoration, .qr_code controls decoration { position: absolute; height: 30px; width: 1px; border-left: 1px dashed var(--border-color); bottom: -30px; left: 50%; display: none }
overlay .zone.outer.selected > controls decoration { display: flex }
overlay .zone.outer.selected.cropImage > controls [rotate],
overlay .zone.outer.selected.cropImage > controls decoration,
overlay .zone.outer.selected.cropper > controls [rotate],
overlay .zone.outer.selected.cropper > controls decoration { display: none; }


overlay circle, .qr_code circle { position: absolute; width: 10px; height: 10px; background: #fff; box-shadow: inset 0 0 0 2px var(--outline); /* border-radius:50px; */ display: none; border-radius: 10px; --position: -5px }
overlay circle[top], .qr_code circle[top] { top: var(--position); }
overlay circle[bottom], .qr_code circle[bottom] { bottom: var(--position); }
overlay circle[left], .qr_code circle[left] { left: var(--position); }
overlay circle[right], .qr_code circle[right]{ right: var(--position); }


overlay .zone.table > controls > circle { --position: -10px; }
overlay .zone.complex > controls > circle { --position: -15px; }
overlay .zone.complex > controls > decoration { bottom: -40px; }

canvas.magneticCanvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.selection-area { background: rgba(46, 115, 252, 0.11); border-radius: 0.1em; border: 2px solid rgba(98, 155, 255, 0.81); }

/**/

.head_title { height: 60px; min-height: 60px; width: 100%; background: #2f4150; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; text-align: center; padding: 0 20px; position: relative; z-index: 99; color: #fff }








agreement { white-space: pre-line; font-size: 16px; padding: 50px; line-height: 24px; overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; }
agreement text { max-width: 600px; white-space: pre-line; display: flex; flex-direction: column; }





.k-chart-cont { padding: 30px; box-shadow: 0 0 0 1px var(--outline); }
.k-chart { height: 300px; }



/*html:not(.dark)  switchable[filter]

{
  color:#fff;
--background:#2f4150;
--highlight:#283642;
--outline:rgba(255,255,255,.08);
--border-color:#283642;


}*/

html:not(.dark) switchable[filter] { color: #fff; --background: #152738; --highlight: var(--background); --outline: rgba(255,255,255,.08); --border-color: var(--background); }


/*Dark mode*/

.dark .material_ink circle { fill: rgba(255,255,255,.5); }







.dark { color: #fff; --text-color: #fff; --outline: rgba(255,255,255,.08); --background: #191919; --context: #232323; --border-color: #2b2b2b; --over-color: linear-gradient(to top, rgba(255,255,255,.04) 0%,rgba(255,255,255,.04) 100%); --press-color: linear-gradient(to top, rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%); --overlay: rgba(6, 6, 6, 0.9); --highlight: #212121; --dark-color: #2b2b2b; --dim: rgba(6, 6, 6, 0.9); }

:root.dark { --main-color-dark: #2f2f2f; }


map { color: #000; }


/**/


@font-face { font-family: logo; src: url(/Content/Font/logo.ttf?v=4.9.25_250820); }
a[logo] { text-decoration: none; padding: 0 10px; display: flex; height: 30px; min-width: 30px; }

a[logo]:active logo { transform: translateY(1px) }
a[logo]:hover logo { opacity: .9 }

logo { flex-shrink: 0; text-decoration: none; display: flex; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; font-family: logo; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; font-size: 20px; font-weight: 400; font-style: normal; user-select: none; /* cursor: default; */ /*text-transform:lowercase;*/ position: relative; z-index: 9; overflow: hidden; text-decoration: none; pointer-events: none; }
logo[space] { margin: 20px 0; }

.dark logo path { fill: #fff; }
logo path.svg_manager { fill: #4e87de; fill: var(--main-color); }
logo path.svg_content { fill: var(--main-color) }
logo path.svg_stream { fill: var(--main-color) }


.export { width: 1000px; background: gray; }



view[overlay] { background: var(--highlight); }
view[overlay][editable] > view{overflow:auto;overflow:overlay }

view[edit] { width: 640px; height: 360px; margin: auto; overflow:visible }
view[edit][portrait] { width: 360px; height: 640px; margin: auto; }
view[edit] overlay{overflow:visible;  }


    action .option_bar {
        margin: 0 5px;
        flex-shrink: 0;
    }
action[start] { align-items: flex-start }

/*overlay*/



overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
overlay[preview] { pointer-events: none; z-index: 1 }
/*overlay[preview] > div{overflow: hidden;}*/
overlay .zone { box-sizing: border-box; position: absolute; z-index: 1; /* margin: 5px; */ }
overlay .zone.selected, overlay .zone.active { z-index: 100; }
overlay .zone.group.interaction { z-index: 103; }
overlay .zone.hide { display: none; }
overlay .zone.invisible, overlay .zone.schedule.sch_hide { visibility: hidden; }

overlay .zone.cropper.selected { z-index:101; }
overlay .zone.cropper > controls > circle { width: 30px; height: 30px; border-radius: unset; background: none; box-shadow: none; --position: -4px; }

overlay .zone > span, zone[type='text'] > span { display: flex; height: 100%; width: 100%; overflow: hidden; /* padding:10px; */ align-items: flex-start; }
overlay .zone.lock > span { position: absolute; }

.zone.outer.group { padding: 10px; box-sizing: initial; margin: -10px; }

overlay > crop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); z-index: 101; pointer-events: none; }

overlay .zone text, zone[type='text'] text { display: flex; /*flex-shrink: 0;*/ word-wrap: break-word; white-space: normal; overflow: hidden; /*flex:1*/ }

overlay .zone.groupItem { z-index: 101; }
overlay .zone.groupItem.selected, overlay .zone.groupItem.active { z-index: 102; }

overlay .zone > .button { position: absolute; z-index: 99; bottom: 0; margin: 15px; opacity: 0; transform: translateY(-10px); transition: .125s }

overlay .zone.selected > .button,
overlay .zone:hover > .button { opacity: 1; transform: translate(0); }

overlay .zone span > p { /* display:flex;*/ display: inline-block; }
overlay .zone span > p > text { display: inline; white-space: pre-line; word-break: break-word; }

overlay .zone span > p[type='text'] { display: block; width: 100%; height: 100%; }

overlay .zone span > p[type='text'] > span { display: flex; height: 100%; width: 100%; overflow: hidden; align-items: flex-start; }

zone[type='text'][text_align='center'] > span text { margin: auto; text-align: center; }
zone[type='text'][text_align='right'] > span text { margin-left: auto }
zone[type='text'][text_align='left'] > span text { margin-right: auto }

[roll-type="animator"] { 
    overflow: hidden; 
}
    [roll-type="animator"][animation="slideUp"] {
        word-break: break-word;
    }
    [roll-type="animator"][animation="scroll"] {
        white-space: normal;
    }
    [roll-type="animator"][animation="scroll"] > * {
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

overlay .zone span[roll-type="animator"][animation="scroll"] {
    justify-content: left;
    text-align: left;
}
overlay .zone span[roll-type="animator"][animation="scroll"] text {
    float: none;
}

@keyframes slide_up_enter { from { transform:translateY(100%); opacity:0; } to {} }
@keyframes slide_up_exit { from {} to { transform:translateY(-100%); opacity:0; } }

.slide_up_enter { animation: slide_up_enter 1s backwards; }
.slide_up_exit { animation: slide_up_exit 1s forwards; }


overlay text.bold, overlay .zone.bold p[type='text'] > span text { font-weight: bold; }
overlay text.italic, overlay .zone.italic p[type='text'] > span text { font-style: italic; }
overlay text.underline, overlay .zone.underline p[type='text'] > span text { text-decoration: underline; }
overlay text.shadow, overlay .zone.shadow p[type='text'] > span text { text-shadow: 0px 2px 2px #000; }
overlay text.uppercase, overlay .zone.uppercase p[type='text'] > span text { text-transform: uppercase; }
overlay text.lowercase, overlay .zone.lowercase p[type='text'] > span text { text-transform: lowercase; }
overlay text.italic:before, overlay text.italic:after { content: "|"; visibility: hidden; }
overlay .rotate_left { transform: rotate(-90deg) translateX(-100%); transform-origin: 0 0; }
overlay .rotate_right { transform: rotate(90deg) translateY(-100%); transform-origin: 0 0; }

overlay span.rotate_left, overlay span.rotate_right { display: contents; }

overlay .zone text { z-index: 98; position: relative; white-space: pre-wrap; }
overlay .zone text.selected { }

/*    overlay .zone text.selected:after {
        content: "";
        filter: invert(50%);
        -webkit-filter: invert(50%);
        border: 1px dotted;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX0xvdE8iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0LjUiIGhlaWdodD0iNC41IiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX0xvdE8pIiBvcGFjaXR5PSIxIi8+PC9zdmc+);
        visibility: visible;
    }*/

overlay .zone text.selected { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX0xvdE8iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0LjUiIGhlaWdodD0iNC41IiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI0LjUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX0xvdE8pIiBvcGFjaXR5PSIxIi8+PC9zdmc+); outline: 1px solid var(--border-color) }

overlay .zone text[contenteditable] { background-image: none; font-size: inherit; min-width: 30px; }

overlay .zone text.align_left { margin-right: auto; text-align: left; }
overlay .zone text.align_center { margin-left: auto; margin-right: auto; text-align: center; }
overlay .zone text.align_right { margin-left: auto; text-align: right; }
overlay .zone text.align_top { margin-bottom: auto; }
overlay .zone text.align_middle, zone[type='text'] .align_middle text { margin-top: auto; margin-bottom: auto; }
overlay .zone text.align_bottom { margin-top: auto; }


.zone.align_left > span, .zone.align_left > span > p[type='text'] > span { justify-content: left; text-align: left; }
.zone.align_right > span, .zone.align_right > span > p[type='text'] > span { justify-content: right; text-align: right; }
.zone.align_center > span, .zone.align_center > span > p[type='text'] > span { justify-content: center; text-align: center; }
.zone.align_justify > span, .zone.align_justify > span > p[type='text'] > span { justify-content: center; text-align: justify; }

.zone > span > p[type='text'] > span[animation="scroll"] { justify-content: left; text-align: left; }

.zone.align_top > span, .zone.align_top > span > p[type='text'] > span { align-items: flex-start }
.zone.align_bottom > span, .zone.align_bottom > span > p[type='text'] > span { align-items: flex-end }
.zone.align_middle > span, .zone.align_middle > span > p[type='text'] > span { align-items: center }




overlay .zone span[animation='scroll'] text, zone[type='text'] span[animation='scroll'] text { overflow: visible; position: relative; white-space: nowrap; flex-shrink: 0; /*padding-right: 20px;*/ animation-timing-function: linear; animation-fill-mode: both; float: left; /*min-width: 100%;*/ max-height: 100%; }
overlay .zone span[animation='scroll'] text:hover { animation-play-state: paused; }
overlay .zone span[animation='scroll'] text > span, zone[type='text'] span[animation='scroll'] text span { margin-right: 30px; }
overlay .zone.circle > span { border-radius: 100%; }
overlay .zone picture { position: absolute; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; }

overlay .zone picture img { height: 100%; width: 100%; object-fit: contain; position: relative; }

overlay subzone { position: relative; width: 100%; top: 0; left: 0; display: flex; z-index: 2; }
overlay subzone:empty { display: none; }
/*view[edit] overlay subzone{padding: 10px; height:100%;}*/

/*view overlay .zone.table > span {padding:10px;}*/
/*view overlay .zone.table > span text{padding:5px}*/

view[edit] overlay .zone text { max-height: 100% }
view[edit] overlay .zone text:empty { width: 50px; height: 30px; }
view[edit] overlay .zone text > :not(textarea) { pointer-events: none; }
view overlay .zone span > p > text + text:before { content: "|"; visibility: hidden; }

overlay subzone .zone { position: relative; /* margin: 10px; */ width: 100%; overflow: hidden; }
overlay subzone[direction="column"] { flex-direction: column }
overlay subzone > wrap { display: flex; /*overflow: hidden;*/ flex-shrink: 0; box-sizing: border-box; }

overlay subzone > wrap[pseudo] { opacity: .7 }

wrap.money, wrap.money2 { display: inline-block; }
/*.underline wrap.money, .underline wrap.money2 { text-decoration: underline; }*/
subzone .zone.align_middle wrap.money, subzone .zone.align_middle wrap.money2 { margin-top: 5%; }

wrap > .sup { font-size: 60%; vertical-align: 55%; }

wrap.money2 > .indent { margin-left: -3.4%; white-space: nowrap; }
wrap.money2 .sup { font-size: 50%; vertical-align: 70%; }
wrap.money2 sign.sup { font-size: 55%; vertical-align: 55%; }

player zone[main] .qr {
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    background: url(/Content/images/resources/qr.png?v=4.9.25_250820) center / contain no-repeat;
    z-index: 2;
}

    player zone[main] .qr[position="top_left"] {
        top: 0;
        left: 0;
    }

    player zone[main] .qr[position="top_right"] {
        top: 0;
        right: 0;
    }

    player zone[main] .qr[position="bottom_left"] {
        bottom: 0;
        left: 0;
    }

    player zone[main] .qr[position="bottom_right"] {
        bottom: 0;
        right: 0;
    }

player content[code="7"] zone[main] .qr[position="bottom_left"],
player content[code="7"] zone[main] .qr[position="bottom_right"] {
    bottom: 20.37%;
}

player content[code="11"] zone[main] .qr[position="bottom_left"],
player content[code="11"] zone[main] .qr[position="bottom_right"] {
    bottom: 6.481%;
}

    view[edit] player content video {
        width: 100%;
        height: 100%
    }
view[edit][orientation="portrait"] player content img { width: 100% }
view[edit][orientation="landscape"] player content img { height: 100% }

overlay[orientation],
overlay[playlist] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

/*overlay[orientation="landscape"] {
    height: unset;
    aspect-ratio: 16 / 9;
}

overlay[orientation="portrait"] {
    width: unset;
    aspect-ratio: 9 / 16;
}*/





/* QR */
view[qr] {
    background-color: rgb(25, 25, 25);
    margin: auto;
}
    view[qr] > zone, view[qr] > overlay  { 
        position: absolute;
        display: flex;
        background-clip: padding-box;
        touch-action: none;
    }

.qr_code {
    position: absolute;
    display: flex;
}

    .qr_code[position="top"], .qr_code[position="bottom"] {
        flex-direction: column;
    }

    .qr_code .qr_image > img[icon] {
        position: absolute;
        display: none;
        max-width: 25%;
        max-height: 25%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

        .qr_code .qr_image > img[icon].show {
            display: block;
        }

    .qr_code .qr_image {
        position: relative;
        display: flex;
        aspect-ratio: 1;
    }

    .qr_code .qr_text {
        display: none;
        justify-content: center;
        white-space: pre-line;
        word-break: break-word;
        text-align: center;
        overflow: hidden;
    }

        .qr_code .qr_text > span {
            margin: auto;
        }

        .qr_code.has_text .qr_text {
            display: flex;
        }

player .qr_code {
    pointer-events: none;
    z-index: 1;
}

    player .qr_code[position="right"] .qr_text, player .qr_code[position="bottom"] .qr_text {
        order: 2;
    }


/*.circle span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAlIDEwMCUiPiAgPGNpcmNsZSBjeD0iMTAiIGN5PSI4NSUiIHI9IjYuNSIvPiAgPGNpcmNsZSBjeD0iODUlIiBjeT0iMTAiIHI9IjYuNSIvPiAgPGNpcmNsZSBjeD0iODUlIiBjeT0iODUlIiByPSI2LjUiLz4gIDxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjYuNSIvPjwvc3ZnPg==);
}*/

wrap[fieldset] { box-sizing: border-box; position: relative; padding: 5px; width: 100%; display: flex; flex: 1; align-items: center; }
wrap[fieldset] .separator { height: 1px; box-shadow: inset 0 -1px var(--outline); flex: 1; opacity: 1 }
wrap[fieldset] wrap { display: flex; align-items: center; padding: 0 15px; }
wrap[fieldset] wrap text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



wrap[column] { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; align-items: flex-start; flex-grow: 1; }
wrap[column] label { margin: 5px }


text[space] { padding: 0 10px; }
text[link] { cursor: pointer; text-decoration: underline; padding: 10px; }
text[link]:active { transform: translateY(1px) }
text[uppercase] { text-transform: uppercase; }
group + separator[vertical] { margin-left: 7px; }


.button.filled { background-color: #fff }
.button.filled text { color: var(--main-color) }

/* export*/

.export_page_wrapper { position: absolute; z-index: -1; left: -100000px; color: #000; }

.export_page { overflow: auto; width: 100%; height: 100%; position: relative }
.export_page .main_cont { width: 100%; display: flex; flex-direction: column; overflow: auto }

.export_page .main_cont header { min-height: 40px; padding: 0 5px; font-size: 15px }
.export_page .main_cont header > span { margin-right: 30px; }

.export_page .main_cont .k-grid-content tr td, .export_page .main_cont .k-grid-content tr, .export_page .main_cont .k-grid-header th { box-shadow: none !important }



.export_page table { border-spacing: 0; border-collapse: collapse; border: solid #000; border-width: 1px; }
.export_page .k-grid-content table { border-width: 0 1px 0 1px !important }
.export_page table th { border: 1px solid #000; border-right: 0; border-top: 0 }
.export_page table th wrap span { width: 100% }
.export_page table td { border: solid #000 !important; border-width: 0 1px 1px 0 !important; border-spacing: 0; }
.export_page .k-grid-header { padding-right: 0 !important }
.export_page .k-grid-content tr td .icon, .export_page .k-grid-content tr td .k-icon { display: none }

/*.export_page header span{display:block;padding:0 10px}*/
.export_page .k-grid-header { box-shadow: none; }
.export_page .k-grid table { width: 0 }

dashboard[export] item[dwidget] { border: 1px solid #e4e4e4; }

dashboard[export] item[dwidget] canvas { width: 100% !important; }

dashboard[export] toolbar[border="bottom"] { border-bottom: 1px solid #e4e4e4; }
dashboard[export] toolbar .button { display: none; }

dashboard[export] list block[list]:not(:last-of-type) { border-bottom: 1px solid #e4e4e4; }
/******/
div[inventory] .k-grid-header {
    height: 80px
}
div[inventory] .k-grid-header .k-grid-header-wrap table tr:last-child th { box-shadow: 1px -1px 0 0 var(--border-color) }
div[inventory] .k-grid-header .k-grid-header-wrap table tr:last-child th:first-child { box-shadow: 1px 0 0 0 var(--border-color) }


/*zone template*/
.option_complex { /*margin: 5px;*/ /* display: flex; */ /* flex-wrap: wrap; */ /* align-items: flex-start; */ align-items: start; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }
.option_complex label { display: flex; position: relative; overflow: hidden; width: 100%; }
.option_complex label[portrait] { grid-row-end: span 2; }



.option_complex label > wrap { padding: 5px; }
.option_complex label input:checked ~ wrap { border: 1px dotted; padding: 4px; }

.media.option_complex label > wrap { padding: 7px; }
.media.option_complex label input:checked ~ wrap { border: 1px dotted; padding: 6px; }




.option_complex label:active > wrap thumb,
.option_complex label:active > wrap layout { transform: translateY(1px) }

.option_complex label > wrap { display: flex; position: relative; overflow: hidden; cursor: pointer; width: 100%; border-radius: 5px; }


.option_complex label wrap:hover { background: rgba(136, 136, 136, 0.25); filter: brightness(1.1) }
.option_complex label wrap:hover zone { /* box-shadow:inset 0 0 0 1px var(--dark-color); */ }

.option_complex > wrap { display: flex; flex-wrap: wrap; box-shadow: 0 1px 0 0 var(--outline); padding: 10px 0 }

wrap[template] layout { width: 160px; height: 90px }

layout { display: flex; flex-direction: column; flex-shrink: 0; width: 100%; min-height: 50px; float: left; cursor: pointer; overflow: hidden; }



.filter_block.zone layout[portrait], layout[portrait] { height: 90px }
layout.size_width8, layout.size_width5 { align-items: center; }
layout.size_height8, layout.size_height5 { justify-content: center; }



.option_complex.media { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }



.option_complex label thumb { position: relative; width: 100%; height: 0; display: flex; overflow: hidden; /* color: #fff; */ cursor: pointer; }

.option_complex label thumb wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%); background: var(--over-color); }

.option_complex label thumb wrap picture { position: absolute; width: 100%; height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; }

.option_complex label thumb[ratio='16:9'] { padding-bottom: 56.25%; }

.option_complex label thumb[ratio='1:1'] { padding-bottom: 100%; }

.option_complex label wrap face { display: flex; position: absolute; width: 100%; height: 100%; background-size: contain }

.option_complex label wrap face.face_1 { background-image: url(/Content/images/clock_thumb/thumb/thumb_1.png?v=4.9.25_250820) }
.option_complex label wrap face.face_2 { background-image: url(/Content/images/clock_thumb/thumb/thumb_2.png?v=4.9.25_250820) }
.option_complex label wrap face.face_3 { background-image: url(/Content/images/clock_thumb/thumb/thumb_3.png?v=4.9.25_250820) }
.option_complex label wrap face.face_4 { background-image: url(/Content/images/clock_thumb/thumb/thumb_4.png?v=4.9.25_250820) }
.option_complex label wrap face.face_5 { background-image: url(/Content/images/clock_thumb/thumb/thumb_5.png?v=4.9.25_250820) }
.option_complex label wrap face.face_6 { background-image: url(/Content/images/clock_thumb/thumb/thumb_6.png?v=4.9.25_250820) }
.option_complex label wrap face.face_7 { background-image: url(/Content/images/clock_thumb/thumb/thumb_7.png?v=4.9.25_250820) }
.option_complex label wrap face.face_8 { background-image: url(/Content/images/clock_thumb/thumb/thumb_8.png?v=4.9.25_250820) }







.option_complex label wrap theme { display: flex; position: absolute; width: 100%; height: 100%; }
.option_complex label wrap theme section { width: 50%; height: 100%; display: flex; align-items: center; font-size: 36px; font-weight: 700; }
.option_complex label wrap theme section:first-child { justify-content: flex-end; }
.option_complex label wrap theme section:last-child { box-shadow: inset 0 0 0 1px var(--outline); }



/*themes*/

.option_complex label wrap theme.theme_1 section:first-child { background: tomato; color: #fff }
.option_complex label wrap theme.theme_1 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_2 section:first-child { background: #2d122b; color: #fff }
.option_complex label wrap theme.theme_2 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_3 section:first-child { background: #004446; color: #fff }
.option_complex label wrap theme.theme_3 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_4 section:first-child { background: #ee4442; color: #fff }
.option_complex label wrap theme.theme_4 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_5 section:first-child { background: #6db98d; color: #fff }
.option_complex label wrap theme.theme_5 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_6 section:first-child { background: #fedb03; color: #fff }
.option_complex label wrap theme.theme_6 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_7 section:first-child { background: #2f2f2f; color: #fff }
.option_complex label wrap theme.theme_7 section:last-child { background: #fff; color: #000 }

.option_complex label wrap theme.theme_8 section:first-child { background: #353535; color: #fff }
.option_complex label wrap theme.theme_8 section:last-child { background: #131313; color: #fff }



.option_complex label wrap theme.theme_light section:first-child { background: linear-gradient(45deg, #a1a1a1, #ffffff); color: #000 }
.option_complex label wrap theme.theme_light section:last-child { background: linear-gradient(45deg, #a1a1a1, #ffffff); color: #000 }


.option_complex label wrap theme.theme_dark section:first-child { background: linear-gradient(45deg, #272727, #050708); color: #fff }
.option_complex label wrap theme.theme_dark section:last-child { background: linear-gradient(45deg, #272727, #050708); color: #fff }


.option_complex label wrap theme.theme_dynamic section:first-child { background: linear-gradient(45deg, #f6d365, #fda085); color: #4e342e }
.option_complex label wrap theme.theme_dynamic section:last-child { background: linear-gradient(45deg, #4facfe, #00f2fe); color: #fff }




/**/





layout .group { display: flex }
layout .group { flex: 1 }
layout .group.right { flex-direction: row-reverse }

layout .group > .group { flex-direction: column; }
layout .group > .group.small { max-width: 15px; }
layout .group > .group.medium { max-width: 18px; }
layout .group > .group.large { max-width: 20px }
layout zone[under][small] { flex: none; height: 15px }

layout.size_width8 .group { width: 80%; }
layout.size_width5 .group { width: 50%; }
layout.size_height8 .group { flex: 0.8; }
layout.size_height5 .group { flex: 0.5; }

layout zone { display: flex; flex-shrink: 0; border: 2px transparent solid; flex: 1; background-clip: padding-box; }
layout zone[bottom] { height: 25%; flex: none }
layout zone[proportion='1'] { flex: 1; }
layout zone[proportion='2'] { flex: 2; }
layout zone[proportion='3'] { flex: 3; }
layout zone[proportion='4'] { flex: 4; }
layout zone[proportion='5'] { flex: 5; }



.tab_strip > wrap > ul > li[zone] { color: #fff; opacity: 0.4 }
.tab_strip > wrap > ul > li[zone]:hover { opacity: 0.6 }

.tab_strip.round > wrap > ul > li[zone=video], [zone=video] { background-color: #5c757d; }
.tab_strip.round > wrap > ul > li[zone=text], [zone=text] { background-color: #d97853; }
.tab_strip.round > wrap > ul > li[zone=image1], [zone=image1] { background-color: #86afb0 }
.tab_strip.round > wrap > ul > li[zone=image2], [zone=image2] { background-color: #87c5c6 }
.tab_strip.round > wrap > ul > li[zone=image3], [zone=image3] { background-color: #4e7b7b; }

.tab_strip.round > wrap > ul > li[zone=live], [zone=live] { background-color: #5c757d; /*animation: back_anim  1s linear infinite;*/ background-size: 300px 300px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX253QzdwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSI2IiBzdHJva2U9IiM3OTk4QTIiIHN0cm9rZS13aWR0aD0iNCIvPjwvcGF0dGVybj48L2RlZnM+IDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybl9ud0M3cCkiIG9wYWNpdHk9IjEiLz48L3N2Zz4=) }


@keyframes back_anim {
    from { background-position: -50px 0px }
    to { background-position: 0px 0px }
}

.filter_block.zone layout { width: 60px; height: 40px }
.filter_block.zone .title label { margin: 0 5px }

zone[badge] { width: 15px; height: 15px; min-width: 15px; border-radius: 50%; margin-top: 2px }
div[info] { display: flex; flex-direction: column; padding-left: 20px; max-width: 250px }
div[info] text[title] { margin-bottom: 5px }
/**pie */

/*pie[medium]{margin:auto;}
pie[medium] svg{width:170px;height:170px;}
pie[medium] circle{stroke-width:5px;}*/

group[status] { padding: 0 10px; width: 100%; justify-content: center }
group[status] text { padding: 0 7px; }
group[status] badge { margin: 0 }
group[status] badge[free] { background: #bdbbbb }

pie total { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold }


/**drop_down delete*/

toolbar nav[launcher] ul li[drop_down] { overflow: initial }
li[drop_down] .list_menu { position: absolute; left: 100px; top: 100%; left: 0; z-index: 9 }
li[drop_down] .list_menu ul { background: var(--context); box-shadow: var(--elevation); height: auto }



badge.marker { width: 30px; height: 30px; padding: 0; border-radius: 30px; justify-content: center; align-items: center; display: flex; position: absolute; cursor: pointer; }


badge.marker.group { box-shadow: 0 0 0 8px rgba(128, 128, 128, 0.45); }


view[tour] zone { height: 100%; width: 100%; position: relative; padding: 20px; }

view[tour] zone[portrait_left] div { transform: rotate(90deg) scale(0.5625); }
view[tour] zone[portrait_right] div { transform: rotate(-90deg) scale(0.5625); }

view[tour] zone div { }
view[tour] text[medium] { padding: 0 20px 20px 20px; text-align: center; white-space: pre-line }

#mapContainer > div { background: none !important }


log { padding: 20px; font-size: 14px; white-space: pre-line; word-break: break-word; overflow: auto; font-family: consolas; line-height: 1.5; user-select: text; cursor: text; }
log p { user-select: text; cursor: text; }

/* device  */

badge[off] { background: rgba(138,138,138,.5) }


td > device { max-width: 550px; margin: 20px; background: var(--context); box-shadow: var(--elevation); }

device { display: flex; flex-direction: column; width: 100% }
device wrap { display: flex; justify-content: center; align-items: center; width: 100% }
device wrap ul { display: flex; align-items: center; width: 100% }
device wrap ul li { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; height: 130px; padding: 15px; flex: 1; box-shadow: 1px 0 0 0 var(--outline); }

device wrap ul li:last-child { box-shadow: none; }

device wrap ul li[output] { box-shadow: inset 0 0 0 1px var(--border-color) }
device wrap ul li > text { margin-bottom: 20px }
device wrap ul li:hover { background: var(--hover) }
device wrap ul li resolution { display: flex; position: relative; height: 30px; margin-top: 30px; align-items: center; min-width: 10px; justify-content: center; }
device wrap ul li resolution text { transform: rotate(-90deg); position: absolute; font-weight: bold; white-space: nowrap; display: flex; width: 50px; justify-content: flex-end }


device[compact] { margin: 0; background: none; box-shadow: none; height: 100%; }
device[compact] wrap { height: 100%; }
device[compact] wrap ul { height: 100%; }
device[compact] wrap ul li { height: auto; flex-direction: row; box-shadow: 1px 0 0 0 var(--border-color); padding: 5px 10px; height: 100%; }
device[compact] wrap ul li > text { margin: 0 10px 0 0 }
device[compact] wrap ul li[tv] { min-width: 110px }

device wrap ul li[highlight] { box-shadow: inset 0 0 0 3px var(--main-color); }

.k-detail-cell view[intro] > wrap { padding: 50px 0 }

.table_view { display: flex; overflow: auto; box-shadow: 0 0 0 1px var(--border-color); }
.table_view table { border-spacing: 0; flex: 1; table-layout: fixed }
.table_view table tbody { overflow: auto; scrollbar-width: thin; }

.table_view[space] { margin: 0px 10px; } 

.table_view th,
.table_view td { box-shadow: -1px 0 0 0 var(--border-color); height: 40px; position:relative }
.table_view tr { box-shadow: inset 0 1px 0 0 var(--border-color); }
.table_view td > text { padding: 0 10px; height: 30px; line-height: 30px; }
.table_view tbody tr:hover { background: var(--over-color) }
.table_view th[action] { width: 40px; min-width: 40px; }
.table_view td[drag] { width: 40px; min-width: 40px; cursor: move; }
.table_view td[drag] icon { margin: auto; }
.table_view td.editable { min-width: 100px; }
.table_view th { padding: 0 10px; font-weight: 700; padding: 0 10px; font-weight: 700; position: sticky; top: 0; background: var(--highlight); z-index: 2; box-shadow: 0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color); }
.table_view input { height: 40px; box-shadow: none; background: transparent; padding: 0 10px; }
.table_view .input { height: 40px; }
.table_view input.input-validation-error { background: rgba(240, 80, 80, 0.3); border-radius: 0px;  }
.table_view td icon[data-type="material"] { z-index: 0; }
.table_view td icon[data-type="material"][middle] { width: 40px; height: 40px;}

.table_view th .button.extra { text-align: left; width: calc(100% + 20px); margin: 0 -10px; padding: 0 10px; }
.table_view th .button.extra[disabled] { opacity: 1; }

.table_view th text, .table_view td text { float: left }


.table_view td .button { z-index: 1; display: none }
.table_view td .button.visible, .table_view tr:hover .button { display: flex }
.table_view th[type=check] { width: 70px; }
.table_view th[type=text] { min-width: 150px; }
.table_view th[type=number] { width: 100px; }

.table_view td .input_cont.adaptive { overflow: hidden; }

.table_view td > wrap { padding: 0 10px; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; display: block; }
.table_view td > wrap > label { float: left; }

.table_view[fixed] table { width: fit-content; }
.table_view[fixed] table tbody td > text { width: 100%; overflow: hidden; text-overflow: ellipsis; }


    .table_view.timeline th[fixed] {
        width: auto;
    }

    .table_view.timeline th {
        width: 12%;
    }

        .table_view.timeline th.warning {
            background: #f7958336;
            /*color: tomato;*/
        }

        .table_view.timeline th.weekend {
            color: tomato;
        }

        .table_view.timeline th > text {
            text-align: center;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .table_view.timeline td > text {
        padding: 10px;
        height: initial;
        line-height: 1;
    }

        .table_view.timeline td > text[wrap-line] {
            word-wrap: break-word;
            word-break: break-word;
        }


    .table_view.timeline .day_cont {
        position: absolute; /*padding:5px;*/
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: nowrap
    }
.table_view.timeline .line
{  
    position: relative;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    z-index:1; 
}
    .table_view.timeline .line_location {
        position: absolute;
        height: 100%;
        width: 100%;
        flex-shrink: 0;
        z-index: 2;
        background-image: repeating-linear-gradient(45deg, #e1e1e1 0, #e1e1e1 1px, transparent 0, transparent 50%);
        background-size: 10px 10px;
        border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
        pointer-events: none;
    }

    .table_view.timeline tr:nth-child(1n) td .line { background:#4285f4 }
    .table_view.timeline tr:nth-child(2n) td .line { background:#0e4297 }
    .table_view.timeline tr:nth-child(3n) td .line { background:#00c19a }
    .table_view.timeline tr:nth-child(4n) td .line { background:#fbd189 }
    .table_view.timeline tr:nth-child(5n) td .line { background:#ff9c5b }
    .table_view.timeline tr:nth-child(6n) td .line { background:#f5634a }

    .table_view.diagnostics tr {
        box-shadow: inset 0 -1px 0 0 var(--border-color);
    }


@-moz-document url-prefix() {
    /*.form_container .table_view table { width: 100%; }*/
    .k-grid-content tr td.reset { height: auto; }
}



.grid_picker td { cursor: pointer }
.grid_picker td.selected { background-color: var(--main-color); color: #fff; cursor: default }
.grid_picker td.disabled { cursor: default; opacity: .5; pointer-events: none }

.grid_picker td:hover { background-image: var(--over-color); }
.grid_picker td:active wrap { transform: translateY(1px) }

.grid_picker .k-grid-content > table { padding-bottom: 0 }



div[card] { height: 30px; width: 100%; position: relative; padding: 0 7px; display: flex; align-items: center; justify-content: center }
div[card] div { width: 100%; position: relative; }





.graph_cont { position: relative; display: flex; flex-direction: column; padding: 20px; align-items: flex-start; width: 100%; overflow: hidden; flex-shrink: 0; }
.bar_graph { position: relative; width: 100%; box-shadow: inset 0 0 0 1.52px; height: 20px; background: var(--highlight); overflow: hidden; border-radius: 3px }
.bar_graph div { height: 100%; position: relative; opacity: .8; border-radius: 3px }



.graph_cont space { height: 20px; width: 20px }
.graph_cont group { display: flex; align-items: center; }
.graph_cont group badge { margin: 0 5px 0 0; background: var(--highlight) }




.bar_graph div[space],
.graph_cont group badge[space] { background: #009688 }

.bar_graph div[hours],
.graph_cont group badge[hours] { background: #3F51B5 }

.plan_cont { display: flex; padding: 10px 10px 0 10px; width: 100%; overflow: hidden; flex-shrink: 0; }
.plan_cont wrap { display: flex; width: 100%; flex-wrap: wrap; width: 100%; overflow: hidden; flex-shrink: 0; }
.plan_cont wrap[center] { align-items: center }
.plan_cont .plan_info { display: flex; flex-direction: column; align-items: flex-start; padding: 10px; max-width: 100%; overflow: hidden; flex-shrink: 0; }
.plan_cont space { height: 20px; width: 20px }
.plan_cont .plan_info .button { margin: 0 }

[checkbox] name[fixed], [radio] name[fixed] { min-width: 70px; }


[mapcontainer] > div { background: var(--background) !important }

.gm-style { font-family: var(--main-font); font-size: var(--text); font-weight: 500; }


/* spacers */

space[mini] { flex-shrink: 0; width: 10px; height: 10px; margin: 0; }

picture[size="contain"] { background-size: contain; }

picture[decor] { filter: blur(10px); width: 120%; height: 120%; left: -10%; top: -10%; opacity: 1; }

.autocomplete .button.micro,
.k-list .k-item .button.remove { margin-left: auto; margin-right: -10px; }
.k-list .k-item .button.remove.hide { display: none; }
.k-list .k-item:hover .button.remove.hide { display: flex; }
.k-list .k-item > icon { margin-right: 10px; }




/* layers */



.k-header.k-drag-clue layer{ min-width:200px;min-height: 30px}
.layers { /* background:red; */ margin: 0px; padding: 10px; }
.layers.k-treeview .k-group.k-treeview-lines { /* background:blue; */ /* left: 0; */ }
.layers.k-treeview .k-i-drag-and-drop { height: 30px; margin:2px; display: flex; width: 100%; flex-shrink: 0; border:1px dotted var(--border-color); border-radius:5px; }
.layers.k-treeview ul li { /* background: var(--background); */ /* margin: initial; */ /* box-shadow: 0 0 0 1px var(--border-color); */ }
.layers.k-treeview ul li > div {height: initial;position: relative;display: flex;align-items: center;padding: initial;margin: 1px; flex-direction:column; position: relative;}
.layers.k-treeview ul li .k-in {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;padding: initial;cursor: pointer;display: flex;width: 100%;/* flex-shrink: 0; */}
.layers.k-treeview ul li:not(.k-edit-item) > div > .k-in.k-state-selected layer item { background: var(--main-color); font-weight: bold; color: #fff; }
.layers.k-treeview ul li .k-in.k-state-focused { border: none }
.layers.k-treeview ul li .k-icon { cursor: pointer; }
.layers.k-treeview ul li .k-state-selected, .k-treeview ul li .k-state-focused { box-shadow: none }

.layers.k-treeview ul li layer { }
.layers.k-treeview ul li layer item { }

layer { display: flex; width: 100%; overflow: hidden; }
layer item { display: flex; width: 100%; overflow: hidden; align-items: center; box-shadow: 0 0 0 1px var(--border-color); margin: 2px; border-radius: 5px; background: var(--background) }
layer item text { padding: 0 10px; overflow: hidden; text-overflow: ellipsis }


.k-drag-clue { min-width:200px; }
.k-drag-clue.drag_item count {  height: 30px; width: 30px;  line-height: 30px; text-align: center; right: -15px; top: -15px; }




.fab_container[zoom] { /* opacity:.5; */  transition:.225s;   background: var(--highlight);
    border-radius: 5px;
    box-shadow: var(--elevation);
    overflow: hidden;}
.fab_container[zoom] [zoomvalue] {aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px var(--outline);
    width: 40px;
    background: var(--background);
    position: relative;
    transition:.175s;

    z-index: 99;}

.fab_container[zoom] .button{transition:.175s}


.fab_container[zoom] button[command="zoomIn"]{margin-top:-40px}
.fab_container[zoom] button[command="zoomOut"] {margin-top:-40px}

.fab_container[zoom]:hover {    margin-bottom: -40px; opacity:1;}

.fab_container[zoom]:hover button[command="zoomIn"],
.fab_container[zoom]:hover button[command="zoomOut"],
.fab_container[zoom]:hover [zoomvalue]
{margin:0}

.window_container > div[simple] view[promo] > wrap {
    padding-top: 0px;
}



/* filter preset */

.preset_container {background:rgba(0,0,0,.15)}

.preset_expanded .preset_content{height:auto; padding:0 15px 15px 15px}

.preset_content{display:flex;flex-direction:column; height:0px; overflow:hidden; }
.preset-filter{transition:.125s; height:0px; overflow:hidden }
.preset_expanded .preset-filter {height:auto}

.preset_expanded .filter_content{height:initial; overflow:initial; }
.filter_container.preset_expanded{overflow:auto}

.preset_expanded [data-name="auto-stick"] {position:sticky; top:0; }
[data-name="auto-stick"][data-stick-level="2"]{top:60px}

.srch-cont-simple{display:flex; flex-wrap:nowrap; --area:40px; z-index:2 }
.srch-cont-simple.outline .srch.mini {
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    color: #fff;
}
.srch-cont-simple .srch.mini {
    background: #fff;
    border-radius: 5px;
    width: 100%;
    margin: 15px;
    color: #000;
    padding: 0 10px;
}

[data-name="adapt-expand"] {transition:.125s}
.preset_expanded [data-name="adapt-expand"] {transform: rotate(90deg);}




/**/

.list_view_wrapper.history{background:var(--highlight)}
list > wrap.history_list {gap:10px; padding:15px; display:flex; flex-direction:column}

.history_item{
    box-shadow:0 0 0 1px var(--border-color);
    border-radius:10px; 
    background:var(--context);
    display:flex;
    flex-direction:column;
    padding:0;
}

.history_item wrap{
    display:flex;
 

}
.history_item wrap.history_item_title {
       align-items:center;
    background: var(--background);
    padding: 10px 15px;
    gap: 10px;
    box-shadow: 0 0 0 1px var(--border-color);}

.history_item  .history_item_content{
    padding:15px;
    flex-direction:column;  
    align-items: flex-start;
    gap: 10px;}

.history_change_wrap

{display: flex;
    background: var(--highlight);
    padding: 5px 10px;
    border-radius: 5px;
        box-shadow: 0 0 0 1px var(--border-color);
         font-weight:700;
            white-space:nowrap
}

.history_change_wrap.main {
    background: var(--main-color-light);
    box-shadow:none;

        
}

.horizontal_group {display:flex; gap:5px; align-items:center}
.horizontal_group.space{padding:10px}


.history_details label {display: flex;
    align-items: center;
    gap: 15px;
}

.history_details label name[fixed],
.history_details  [fixed] {width:80px}
.history_details  text[fixed] {min-height:15px}

/* Animation Library */
/* http://www.labs.later.com */

/* Pulse */
@keyframes pulse {
    0% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

.u--pulse {
    animation: pulse 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Flash */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.u--flash {
    animation: flash 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        transform: translate3d(0, -6vh, 0);
    }

    70% {
        transform: translate3d(0, -3vh, 0);
    }

    90% {
        transform: translate3d(0, -1vh, 0);
    }
}

.u--bounce {
    animation: bounce 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Shake */
@keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-1vw, 0, 0);
    }

    20%, 40%, 60%, 80% {
        transform: translate3d(1vw, 0, 0);
    }
}

.u--shake {
    animation: shake 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Swing */
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.u--swing {
    transform-origin: top center;
    animation: swing 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    40% {
        transform: scale(1.1);
        opacity: 0.9;
    }

    80% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.u--bounceIn {
    animation: bounceIn 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Bounce Out */
@keyframes bounceOut {
    20% {
        transform: scale(0.9);
    }

    50%, 65% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}

.u--bounceOut {
    animation: bounceOut 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* bounceInLeft */
@keyframes bounceInLeft {
    0% {
        transform: translate3d(-25%, 0, 0);
    }

    60% {
        transform: translate3d(3%, 0, 0);
    }

    75% {
        transform: translate3d(-1%, 0, 0);
    }

    90% {
        transform: translate3d(1%, 0, 0);
    }

    100% {
        transform: none;
    }
}

.u--bounceInLeft {
    animation: bounceInLeft 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* bounceInRight */
@keyframes bounceInRight {
    0% {
        transform: translate3d(25%, 0, 0);
    }

    60% {
        transform: translate3d(-3%, 0, 0);
    }

    75% {
        transform: translate3d(1%, 0, 0);
    }

    90% {
        transform: translate3d(-1%, 0, 0);
    }

    100% {
        transform: none;
    }
}

.u--bounceInRight {
    animation: bounceInRight 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* bounceInUp */
@keyframes bounceInUp {
    0% {
        transform: translate3d(0, 25%, 0);
    }

    60% {
        transform: translate3d(0, -3%, 0);
    }

    75% {
        transform: translate3d(0, 1%, 0);
    }

    90% {
        transform: translate3d(0, -1%, 0);
    }

    100% {
        transform: none;
    }
}

.u--bounceInUp {
    animation: bounceInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* bounceInDown */
@keyframes bounceInDown {
    0% {
        transform: translate3d(0, -25%, 0);
    }

    60% {
        transform: translate3d(0, 3%, 0);
    }

    75% {
        transform: translate3d(0, -1%, 0);
    }

    90% {
        transform: translate3d(0, 1%, 0);
    }

    100% {
        transform: none;
    }
}

.u--bounceInDown {
    animation: bounceInDown 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* fadeIn */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.u--fadeIn {
    animation: fadeIn 1s ease-in;
}

/* fadeInLeft */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.u--fadeInLeft {
    animation: fadeInLeft 1s ease-in;
}

/* fadeInRight */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.u--fadeInRight {
    animation: fadeInRight 1s ease-in;
}

/* fadeInUp */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.u--fadeInUp {
    animation: fadeInUp 1s ease-in;
}

/* fadeInDown */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -50%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.u--fadeInDown {
    animation: fadeInDown 1s ease-in;
}

/* fadeOut */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.u--fadeOut {
    animation: fadeOut 1s ease-out;
}

/* fadeOutLeft */
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

.u--fadeOutLeft {
    animation: fadeOutLeft 1s ease-out;
}

/* fadeOutRight */
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translate3d(50%, 0, 0);
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

.u--fadeOutRight {
    animation: fadeOutRight 1s ease-out;
}

/* fadeOutUp */
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translate3d(0, 50%, 0);
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

.u--fadeOutUp {
    animation: fadeOutUp 1s ease-out;
}

/* fadeOutDown */
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

.u--fadeOutDown {
    animation: fadeOutDown 1s ease-out;
}

/* flip */
@keyframes flip {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }

    100% {
        transform: rotate3d(0, 1, 0, -180deg);
    }
}

.u--flip {
    animation: flip 1s ease-out;
}

/* flipX */
@keyframes flipX {
    0% {
        transform: rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }

    40% {
        transform: rotate3d(1, 0, 0, -20deg);
    }

    60% {
        transform: rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: rotate3d(1, 0, 0, -5deg);
    }

    100% {
        transform: rotate3d(1, 0, 0, 0deg);
    }
}

.u--flipX {
    animation: flipX 1s ease-in;
}

/* flipY */
@keyframes flipY {
    0% {
        transform: rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }

    40% {
        transform: rotate3d(0, 1, 0, -20deg);
    }

    60% {
        transform: rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: rotate3d(0, 1, 0, -5deg);
    }

    100% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
}

.u--flipY {
    animation: flipY 1s ease-in;
}

/* rotate */
@keyframes rotate {
    0% {
        transform: rotate(-360deg);
    }

    100% {
        transform: none;
    }
}

.u--rotate {
    animation: rotate 1s;
    transform-origin: center;
}

/* rotateUpLeft */
@keyframes rotateUpLeft {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: none;
    }
}

.u--rotateUpLeft {
    animation: rotateUpLeft 1s;
    transform-origin: left bottom;
}

/* rotateUpRight */
@keyframes rotateUpRight {
    0% {
        transform: rotate(-45deg);
    }

    100% {
        transform: none;
    }
}

.u--rotateUpRight {
    animation: rotateUpRight 1s;
    transform-origin: right bottom;
}

/* rotateDownLeft */
@keyframes rotateDownLeft {
    0% {
        transform: rotate(-45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.u--rotateDownLeft {
    animation: rotateDownLeft 1s;
    transform-origin: top left;
}

/* rotateDownRight */
@keyframes rotateDownRight {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.u--rotateDownRight {
    animation: rotateDownRight 1s;
    transform-origin: top right;
}

/* slideUp */
@keyframes slideUp {
    0% {
        transform: translate3d(0, 100%, 0);
    }

    100% {
        transform: none;
    }
}

.u--slideUp {
    animation: slideUp 1s;
}

/* slideDown */
@keyframes slideDown {
    0% {
        transform: translate3d(0, -100%, 0);
    }

    100% {
        transform: none;
    }
}

.u--slideDown {
    animation: slideDown 1s;
}

/* slideLeft */
@keyframes slideLeft {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: none;
    }
}

.u--slideLeft {
    animation: slideLeft 1s;
}

/* slideRight */
@keyframes slideRight {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: none;
    }
}

.u--slideRight {
    animation: slideRight 1s;
}

/* zoomIn */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.u--zoomIn {
    animation: zoomIn 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* zoomInDown */
@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -90vh, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        opacity: 1;
        transform: scale3d(0.6, 0.6, 0.6) translate3d(0, 3vh, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.u--zoomInDown {
    animation: zoomInDown 1s;
}

/* zoomInUp */
@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 90vh, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.6, 0.6, 0.6) translate3d(0, -3vh, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.u--zoomInUp {
    animation: zoomInUp 1s;
}

/* zoomOut */
@keyframes zoomOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    100% {
        opacity: 0;
    }
}

.u--zoomOut {
    animation: zoomOut 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* zoomOutDown */
@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(0.6, 0.6, 0.6) translate3d(0, -3vh, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    100% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 90vh, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.u--zoomOutDown {
    animation: zoomOutDown 1s;
}

/* zoomOutUp */
@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(0.6, 0.6, 0.6) translate3d(0, 3vh, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    100% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -90vh, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.u--zoomOutUp {
    animation: zoomOutUp 1s;
}

/*----------------------------- Customizations -----------------------*/

/* rotateUpLeft */
@keyframes rotateUpLeftAfter {
    to {
        transform: rotate(-45deg);
    }
}

.u--rotateUpLeft.emphasis, .u--rotateUpLeft.exit {
    animation: rotateUpLeftAfter 1s;
    transform-origin: left bottom;
}

/* rotateUpRight */
@keyframes rotateUpRightAfter {
    to {
        transform: rotate(45deg);
    }
}

.u--rotateUpRight.emphasis, .u--rotateUpRight.exit {
    animation: rotateUpRightAfter 1s;
    transform-origin: right bottom;
}

/* rotateDownLeft */
@keyframes rotateDownLeftAfter {
    to {
        transform: rotate(45deg);
    }
}

.u--rotateDownLeft.emphasis, .u--rotateDownLeft.exit {
    animation: rotateDownLeftAfter 1s;
    transform-origin: top left;
}

/* rotateDownRight */
@keyframes rotateDownRightAfter {
    to {
        transform: rotate(-45deg);
    }
}

.u--rotateDownRight.emphasis, .u--rotateDownRight.exit {
    animation: rotateDownRightAfter 1s;
    transform-origin: top right;
}

/* zoomIn */
@keyframes zoomInEmphasis {
    to {
        transform: scale3d(1.3, 1.3, 1.3);
    }
}

.u--zoomIn.emphasis {
    animation: zoomInEmphasis 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* zoomOut */
@keyframes zoomOutEmphasis {
    to {
        transform: scale3d(0.7, 0.7, 0.7);
    }
}

.u--zoomOut.emphasis {
    animation: zoomOutEmphasis 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* slideUp */
@keyframes slideUpEntry {
    from {
        top: 100%;
    }
}

.u--slideUp.entry {
    animation: slideUpEntry 1s ease-out;
}

@keyframes slideUpExit {
    to {
        top: -100%;
    }
}

.u--slideUp.exit {
    animation: slideUpExit 1s ease-in;
}

/* slideDown */
@keyframes slideDownEntry {
    from {
        top: -100%;
    }
}

.u--slideDown.entry {
    animation: slideDownEntry 1s ease-out;
}

@keyframes slideDownExit {
    to {
        top: 100%;
    }
}

.u--slideDown.exit {
    animation: slideDownExit 1s ease-in;
}

/* slideLeft */
@keyframes slideLeftEntry {
    from {
        left: 100%;
    }
}

.u--slideLeft.entry {
    animation: slideLeftEntry 1s ease-out;
}

@keyframes slideLeftExit {
    to {
        left: -100%;
    }
}

.u--slideLeft.exit {
    animation: slideLeftExit 1s ease-in;
}

/* slideRight */
@keyframes slideRightEntry {
    from {
        left: -100%;
    }
}

.u--slideRight.entry {
    animation: slideRightEntry 1s ease-out;
}

@keyframes slideRightExit {
    to {
        left: 100%;
    }
}

.u--slideRight.exit {
    animation: slideRightExit 1s ease-in;
}

/* fadeInLeft */
@keyframes fadeInLeftEntry {
    from {
        opacity: 0;
        left: 100%;
    }
}

.u--fadeInLeft.entry {
    animation: fadeInLeftEntry 1s ease-out;
}

@keyframes fadeInLeftExit {
    to {
        opacity: 0;
        left: -100%;
    }
}

.u--fadeInLeft.exit {
    animation: fadeInLeftExit 1s ease-in;
}

/* fadeInRight */
@keyframes fadeInRightEntry {
    from {
        opacity: 0;
        left: -100%;
    }
}

.u--fadeInRight.entry {
    animation: fadeInRightEntry 1s ease-out;
}

@keyframes fadeInRightExit {
    to {
        opacity: 0;
        left: 100%;
    }
}

.u--fadeInRight.exit {
    animation: fadeInRightExit 1s ease-in;
}

/* fadeInUp */
@keyframes fadeInUpEntry {
    from {
        opacity: 0;
        top: 100%;
    }
}

.u--fadeInUp.entry {
    animation: fadeInUpEntry 1s ease-out;
}

@keyframes fadeInUpExit {
    to {
        opacity: 0;
        top: -100%;
    }
}

.u--fadeInUp.exit {
    animation: fadeInUpExit 1s ease-in;
}

/* fadeInDown */
@keyframes fadeInDownEntry {
    from {
        opacity: 0;
        top: -100%;
    }
}

.u--fadeInDown.entry {
    animation: fadeInDownEntry 1s ease-out;
}

@keyframes fadeInDownExit {
    to {
        opacity: 0;
        top: 100%;
    }
}

.u--fadeInDown.exit {
    animation: fadeInDownExit 1s ease-in;
}

/* fadeOutLeft */
@keyframes fadeOutLeftEntry {
    from {
        opacity: 0;
        left: 100%;
    }
}

.u--fadeOutLeft.entry {
    animation: fadeOutLeftEntry 1s ease-out;
}

@keyframes fadeOutLeftExit {
    to {
        opacity: 0;
        left: -100%;
    }
}

.u--fadeOutLeft.exit {
    animation: fadeOutLeftExit 1s ease-in;
}

/* fadeOutRight */
@keyframes fadeOutRightEntry {
    from {
        opacity: 0;
        left: -100%;
    }
}

.u--fadeOutRight.entry {
    animation: fadeOutRightEntry 1s ease-out;
}

@keyframes fadeOutRightExit {
    to {
        opacity: 0;
        left: 100%;
    }
}

.u--fadeOutRight.exit {
    animation: fadeOutRightExit 1s ease-in;
}

/* fadeOutUp */
@keyframes fadeOutUpEntry {
    from {
        opacity: 0;
        top: 100%;
    }
}

.u--fadeOutUp.entry {
    animation: fadeOutUpEntry 1s ease-out;
}

@keyframes fadeOutUpExit {
    to {
        opacity: 0;
        top: -100%;
    }
}

.u--fadeOutUp.exit {
    animation: fadeOutUpExit 1s ease-in;
}

/* fadeOutDown */
@keyframes fadeOutDownEntry {
    from {
        opacity: 0;
        top: -100%;
    }
}

.u--fadeOutDown.entry {
    animation: fadeOutDownEntry 1s ease-out;
}

@keyframes fadeOutDownExit {
    to {
        opacity: 0;
        top: 100%;
    }
}

.u--fadeOutDown.exit {
    animation: fadeOutDownExit 1s ease-in;
}

.zone.entry, .zone.emphasis, .zone.exit {
    animation-fill-mode: forwards;
}

overlay.pause .zone {
    animation-play-state: paused;
}

overlay.play .zone {
    animation-play-state: running;
}

/*.entry.hidden {
    visibility: hidden;
}*/



/* icons */


.k-icon { /*background-color:rgba(0,255,0,.2);*/height: 30px; width: 30px; display:flex; flex-shrink:0; text-decoration:none}
.k-icon:after{width:30px;height:30px; min-width:30px; display:flex;-moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; font-family: icon; display: flex;  display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; font-size: 30px; font-weight: 400; font-style: normal; user-select: none; /* cursor: default; */ text-transform: lowercase; position: relative; z-index: 9; overflow:hidden; }

.k-i-calendar:after{content:'calendar'}
.k-i-arrow-60-down:after, .k-i-expand:after,.k-i-sort-desc-sm::after{content:'down'}
.k-i-collapse:after,.k-i-sort-asc-sm::after{content:'up'}
.k-i-arrow-60-right:after{content:'right'}
.k-i-arrow-60-left:after{content:'left'}
.k-i-arrow-end-right::after{content:'full_right'}
.k-i-arrow-end-left::after{content:'full_left'}
.k-i-zoom:after{content:'search'}
.k-i-close:after{content:'close'}

.k-select .k-i-arrow-60-down:after, .k-select .k-i-clock:after { content:'more' }
.k-datetimepicker .k-select .k-i-clock:after { content: 'clock' }



/* ----- */




/* tree view */




.k-treeview{height:100%;position:relative;z-index:2;overflow:auto;width:100%;}
.k-treeview .k-item{  margin-left:10px; }
.k-treeview .k-group.k-treeview-lines{min-height:100%; width:100%; position:relative; left:-10px; }
.k-treeview ul li > div{height:40px;position:relative;display: flex;align-items: center;padding: 0 10px;}

.k-treeview ul li .k-in{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding: 5px 10px; cursor:pointer;}

.k-treeview ul li:not(.k-edit-item) > div >.k-in.k-state-selected{color:var(--main-color);font-weight:bold;}
.k-treeview ul li .k-in.k-state-focused {border: 1px dotted}


.k-treeview ul li .k-icon{ cursor:pointer;}
.k-treeview ul li .k-state-selected,.k-treeview ul li .k-state-focused{box-shadow:none}









/* grid */

.k-resize-handle {
    position: absolute;
    z-index: 999;
    cursor: col-resize;
}

.k-grid th > wrap[align_center] { height:auto; padding: 0px;}

.k-grid th > wrap{display:flex;padding-left:10px;width:100%; height:100%; overflow:hidden; white-space:nowrap; position:relative; align-items:center}
.k-grid td > wrap{padding:0 10px;width:100%;  overflow:hidden; white-space:nowrap;text-overflow:ellipsis;position:relative; display:block;}
.k-grid td > wrap[center]{text-align:center}
.k-grid td > wrap[center] icon{margin:auto}
.k-grid td > wrap[align_center], .k-grid th > wrap[align_center]{display: flex; justify-content: center;}
.k-grid td > wrap > label{float:left;}

.k-grid th > wrap.k-link:active span{transform:translateY(1px)}

td elastic{display:flex;align-items:center;white-space:nowrap;position:relative;width:100%;}
td wrap action {display:none;left:-10px;position:relative;}
td action[right]{left:10px}
td action[visible] {display:flex;}
td .button.extra{ /*box-shadow:1px 0 var(--border-color);*/ height:40px; width:40px;}
td elastic text {max-width:100%;  overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}



td elastic  badge { margin-right:10px; }
td elastic badge[circle="small"]{ margin-left: -4px; margin-right: 5px; }
.k-state-selected action,
.k-grid-edit-row action {
    display: flex;
}

.k-grid-edit-row [command="delete"]{display:none;}


.k-link{cursor:pointer;}

.k-grid th > wrap span {    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; white-space:normal; } 

.k-grid{overflow:hidden;position:relative;padding:0;border:none;clear:both;height:100%;background:none;display:flex;  flex-direction: column;z-index:1 }
.k-grid table{width:100%;border-spacing:0;empty-cells:show;table-layout:fixed;}

.k-safari .k-grid table{border-collapse:collapse}

.k-grid-content{position:relative; height:100%; width:100%;overflow:auto;overflow-x:auto;overflow-y:scroll; }
.k-grid-content tr{box-shadow: 0 0 0 1px var(--border-color);background: var(--background);}

.k-safari .k-grid-content tr{border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}

.k-grid-content tbody > tr:last-child{/* box-shadow:inset 0 1px 0 0 var(--border-color),inset 0 -1px 0 0 var(--border-color) ; */}
.k-grid-content tr td{box-shadow:1px 0 0 0 var(--border-color);height:40px;}

.k-grid-content > table, .k-grid-content > form > table{padding-bottom:160px;}
.reset .k-grid-content > table{padding-bottom:0}

.k-grid-content.k-auto-scrollable > form { overflow: initial; }

.k-grid-content tr td .icon,
.k-grid-content tr td .k-icon
{display:block;}
.k-grid-content tr td.center .icon{margin:0 auto}

.k-hierarchy-cell,
.k-grid-content tr td.k-detail-cell{/* padding:0; */}
.k-grid-content tr td.k-detail-cell:not(.reset) toolbar{background:none}

.k-hierarchy-cell .k-icon{opacity:0;margin:auto;}

tr:hover td.k-hierarchy-cell .k-icon,
.k-state-selected .k-hierarchy-cell .k-icon{opacity:1;}


.k-detail-row > .k-hierarchy-cell,
.k-grid-content tr td:last-child

{box-shadow:none}



.k-grid-header table colgroup col, .k-grid-content table colgroup col { min-width: 20px}

.k-grid-content tbody > tr:hover,
.k-grid-content tr.k-state-selected,
.k-grid-content tr.k-grid-edit-row,
.k-grid-content tr.drop
{background-image: var(--over-color);/* box-shadow:inset 0 1px 0 0 var(--border-color), inset  1px 0 0 var(--border-color), inset  -1px 0 0 var(--border-color); */}
.k-grid-content tbody > tr:not(.k-detail-row):hover > td action,
.k-grid-content tbody > tr:not(.k-detail-row) > td action.visible{display:flex}

.k-grid-content tbody > tr:not(.k-state-selected):last-child:hover,
.k-grid-content tbody > tr:last-child.k-state-selected{/* box-shadow:inset 0 0 0 1px var(--border-color) */}

.k-grid-content tr.k-state-selected{font-weight:700}

.k-grid-content tr.k-grid-edit-row {}

.k-treeview .k-edit-item wrap {
    width: 100%;
}

.k-grid-content tr.k-grid-edit-row td.auto_title .input_cont i,
.k-grid-content tr.k-grid-edit-row .k-widget,
.k-grid-content tr.k-grid-edit-row td.auto_title .k-widget,
.k-grid-content tr.k-grid-edit-row .k-textbox
{background:#fff;box-shadow:inset 0 0 0 1px var(--border-color)}
.k-grid-content tr.k-grid-edit-row .k-widget
{width:100%;}

.k-grid-content tr.manual td{ background: rgba(164, 182, 204, 0.25)}
.k-grid-content tr td.editable{/*background:var(--hover);*/ background:rgba(136, 136, 136, 0.06); cursor:text}


.k-grid-content tr td > input[type=text],
.k-grid-content tr td > .k-widget.k-combobox,
.k-grid-content tr td > .k-widget.k-datepicker,
.k-grid-content tr td .k-widget.k-numerictextbox,
.k-grid-content tr td > .k-widget.k-dropdown {
    width: 100%;
    min-width: 100%;
    height: 100%;
    margin: 0;
}
.k-grid-content tr.k-grid-edit-row .k-widget.k-colorpicker {
    background: none;
    width: auto;
    box-shadow: none;
}

.k-grid-content tr td .k-widget.input-validation-error .k-input,
.k-grid-content tr td .k-input.input-validation-error,
.k-grid-content tr td input.input-validation-error{background-color:rgba(239, 83, 80, 0.3);}

.k-grid-content tr td .k-picker-wrap .k-select{display:none;}
.k-grid-content tr.has_request{background-color:#FFECB3;}

.k-grid-content tr.has_request.k-state-selected,
.k-grid-content tr.pending.k-state-selected
{background-image:linear-gradient(to top, rgba(0,0,0,.1) 0%,rgba(0,0,0,.1) 100%);}

.k-grid-content tr.pending{background-color:#FFAB91;}

/*.k-grid-content .k-multiselect-wrap{display:flex;overflow:hidden; -webkit-mask-image: linear-gradient(to right,#000 90%,rgba(0,0,0,0) 100%);}
.k-grid-content .k-multiselect .k-button{flex-shrink:0}
.k-grid-content .k-widget .k-multiselect-wrap ul{display:flex;flex-wrap: nowrap;flex: 1;align-items: center;}
.k-grid-content .k-widget .k-multiselect-wrap li{flex-shrink:0}
.k-grid-content .k-widget .k-multiselect-wrap .k-input{display:none;}*/

.k-grid-header th {border: none;color: var(--main-color); background: none; border-bottom: none;font-weight: 400;vertical-align: middle;font-weight: 700;box-shadow: 1px 0 0 0 var(--border-color);white-space: nowrap;text-overflow: ellipsis;text-align: left;overflow: hidden;height: 40px;}
.k-grid-header th:last-child{box-shadow:none;}
.k-grid-header{height:40px;z-index:1;position:relative;box-shadow:0 1px 0 0 var(--border-color);    flex-shrink: 0;}

.k-grid-header .k-grid-header-wrap{height:100%;width:100%;overflow:hidden;}
.k-grid-header .k-grid-header-wrap table tr{height:40px;}


.k-grid-header th.k-header .k-icon{width:30px;}

.k-grid-header.group_thead{box-shadow:none }
.k-grid-header.group_thead tr:last-child{box-shadow:0 1px 0 0 var(--border-color)}
.k-grid-header.group_thead th{box-shadow:1px -1px 0 0 var(--border-color)}
.k-grid-header.group_thead th:last-child{box-shadow:1px -1px 0 0 var(--border-color)}

.k-grid-header.group_thead ~ .k-grid-content tr:first-child { box-shadow: none; }

    .k-grid-header .k-column-config {
        position: absolute;
        right: 0px;
        top: 0px;
        height: 100%;
        padding: 5px;
        z-index: 10;
        background-color: var(--background);
        box-shadow: -1px 1px 0 0 var(--border-color);
    }


.k-grid-content tr td:not(.reset) .button {
    opacity: 0
}

.k-grid-content tr:not(.k-detail-row):hover td:not(.reset) .button,
.k-grid-content tr.k-state-selected td:not(.reset) .button,
.k-grid-content tr.k-state-selected .button,
.k-grid-content tr.k-grid-edit-row .button {
    opacity: 1;
}

.k-grid-content tr td .button.visible{opacity:1}


/*.k-grid-content tr:hover .button.visible, .k-grid-content tr.k-state-selected .button.visible, .k-grid-content tr.k-grid-edit-row .button.visible{opacity:1}*/

.k-grid.k-widget.draggable {
    float: left;
    width: 100%;
    background: #fff;
    height: auto;
    padding: 0px;
    height: 40px;
    box-shadow: 0 5px 10px -3px rgba(0, 0, 0,.2), 0 0 0 1px rgba(0,0,0,.05), 0 0 0 4px rgba(0,0,0,.03);
    opacity: .95;
    cursor: move
}
                .k-grid.k-widget.draggable table{table-layout:fixed;height:40px;}
                .k-grid.k-widget.draggable table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
                .k-grid.k-widget.draggable .k-alt{background:#fff;}


.k-grid-content tr td{position:relative}
.k-grid-content tr td,
.k-grid-content tr td  span.template{white-space:nowrap;/* overflow:hidden; */text-overflow:ellipsis;}

.k-grid-content tr td  span.template{padding:0 10px; display:block;}

.k-grid .k-detail-row,
.k-grid .k-detail-row:hover
{background-image: var(--over-color);}

.k-grid .k-detail-cell > .k-widget.k-grid{height:auto;margin: 20px 20px 20px -20px;box-shadow: 0 0 0 1px var(--border-color);background:var(--background);width: 100%;border-radius:10px;}

.k-grid .k-detail-cell .k-grid-content{height:auto;overflow-x:auto;}

.k-grid .k-hierarchy-col{width:40px;}

.k-grid-content .k-grouping-row td{height:40px;line-height:40px;padding:0;}


.k-group-col{width:40px;}
.k-grouping-row .k-reset{display:flex;align-items: center;padding:0 5px; font-weight:700}


.k-grid.empty .k-grid-header, .k-grid.empty .k-grid-content { display:none; }


/* ----- */





/******/


/*.k-grid .k-group-col, .k-grid .k-hierarchy-col { width: 1px; }*/

/* spreadsheet */
.k-spreadsheet {
    width: 100%;
    height: 100%;
    position: relative;
    border-width: 1px;
    border-style: solid;
    cursor: default;
    border-color: #dedee0;
}

    .k-spreadsheet .k-spreadsheet-pane {
        padding-right: 1px;
        position: absolute;
        border-width: 1px;
        border-bottom-width: 0;
        border-right-width: 0;
        border-style: solid;
        box-sizing: border-box;
        overflow: hidden
    }

        .k-spreadsheet .k-spreadsheet-pane.k-top {
            border-top-width: 0
        }

        .k-spreadsheet .k-spreadsheet-pane.k-left {
            border-left-width: 0
        }

        .k-spreadsheet .k-spreadsheet-pane .k-spreadsheet-cell {
            position: absolute;
            white-space: pre;
            box-sizing: border-box;
            overflow: hidden;
            padding: 1px 3px;
            background-clip: padding-box
        }

            .k-spreadsheet .k-spreadsheet-pane .k-spreadsheet-cell.k-spreadsheet-has-comment::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                left: auto;
                border-width: 3px;
                border-style: solid
            }

        .k-spreadsheet .k-spreadsheet-pane .k-spreadsheet-cell-comment {
            position: absolute;
            white-space: pre-wrap;
            text-align: left;
            border-width: 1px;
            border-style: solid
        }

    .k-spreadsheet .k-spreadsheet-haxis, .k-spreadsheet .k-spreadsheet-vaxis {
        position: absolute;
        border-style: solid
    }

    .k-spreadsheet .k-spreadsheet-vaxis {
        top: 0;
        border-width: 0 0 0 1px
    }

    .k-spreadsheet .k-spreadsheet-haxis {
        left: 0;
        border-width: 1px 0 0
    }

    .k-spreadsheet .k-filter-range, .k-spreadsheet .k-spreadsheet-selection {
        border-width: 1px;
        border-style: solid;
        position: absolute;
        box-sizing: border-box
    }

    .k-spreadsheet .k-spreadsheet-active-cell {
        position: absolute;
        outline-color: transparent !important;
        box-sizing: border-box;
        z-index: 10
    }

    .k-spreadsheet .k-spreadsheet-action-bar {
        border-width: 0 0 1px;
        border-style: solid;
        position: relative;
        display: table;
        width: 100%
    }

        .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar, .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor {
            display: table-cell;
            vertical-align: middle
        }

        .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor {
            position: relative;
            vertical-align: top;
            border-width: 0 1px 0 0;
            border-style: solid
        }

            .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor .k-combobox {
                width: 9.5em;
                border-radius: 0;
                border-color: transparent
            }

                .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor .k-combobox .k-dropdown-wrap {
                    border-radius: 0;
                    border-color: transparent;
                    background-image: none;
                    box-shadow: none;
                    border-width: 0
                }

                    .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor .k-combobox .k-dropdown-wrap .k-input {
                        border-radius: 0
                    }

                    .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor .k-combobox .k-dropdown-wrap .k-select {
                        border-radius: 0
                    }

        .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar {
            width: 100%;
            padding-left: 31px
        }

            .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar::before {
                position: relative;
                display: inline-block;
                overflow: hidden;
                width: 1em;
                height: 1em;
                text-align: center;
                vertical-align: middle;
                background-image: none;
                font: 16px/1 WebComponentsIcons;
                speak: none;
                font-variant: normal;
                text-transform: none;
                text-indent: 0;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                content: "\e691";
                display: block;
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                border-width: 0 1px 0 0;
                border-style: solid;
                width: 24px;
                margin-left: -24px
            }

            .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar .k-spreadsheet-formula-input.k-spreadsheet-array-formula:before {
                content: "{";
                font-weight: 700
            }

            .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar .k-spreadsheet-formula-input.k-spreadsheet-array-formula:after {
                content: "}";
                font-weight: 700
            }

        .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-input {
            overflow: hidden;
            text-indent: .571em;
            border: 0;
            margin: 0
        }

        .k-spreadsheet .k-spreadsheet-action-bar .k-state-border-down {
            padding-bottom: 0
        }

    .k-spreadsheet .k-spreadsheet-formula-input {
        outline: 0;
        border-width: 0;
        height: 26px;
        line-height: 20px;
        width: 100%;
        box-sizing: border-box;
        white-space: pre;
        padding: 3px .5em
    }

    .k-spreadsheet .k-spreadsheet-cell-editor {
        position: absolute;
        display: none;
        padding: 0 3px;
        line-height: 20px;
        z-index: 2000;
        overflow: hidden
    }

    .k-spreadsheet > .k-spreadsheet-view {
        position: relative;
        height: 100%;
        font-size: 12px;
    }

        .k-spreadsheet > .k-spreadsheet-view .k-state-disabled {
            pointer-events: auto
        }

    .k-spreadsheet .k-tabstrip-wrapper {
        position: relative;
        line-height: 1.7em
    }

        .k-spreadsheet .k-tabstrip-wrapper .k-tabstrip-items {
            padding: .3em 0 0
        }

    .k-spreadsheet .k-spreadsheet-quick-access-toolbar {
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        padding: .3em .3em 0
    }

        .k-spreadsheet .k-spreadsheet-quick-access-toolbar .k-button {
            padding: .3em;
            line-height: 1.4em;
            height: auto
        }

    .k-spreadsheet .k-filter-wrapper, .k-spreadsheet .k-merged-cells-wrapper, .k-spreadsheet .k-selection-wrapper, .k-spreadsheet .k-spreadsheet-row-header {
        position: relative
    }

    .k-spreadsheet .k-spreadsheet-column-header {
        position: absolute
    }

    .k-spreadsheet .k-filter-wrapper {
        pointer-events: none;
        z-index: 50
    }

    .k-spreadsheet .k-spreadsheet-sheets-bar {
        border-width: 1px 0 0
    }

    .k-spreadsheet .k-vertical-align-center {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .k-spreadsheet .k-vertical-align-bottom {
        position: relative;
        top: 100%;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .k-spreadsheet .k-dirty {
        position: absolute;
        top: 0;
        left: 0;
        right: unset
    }

    .k-spreadsheet .k-single-selection {
        cursor: crosshair
    }

        .k-spreadsheet .k-single-selection::after {
            content: " ";
            height: 6px;
            width: 6px;
            position: absolute;
            display: block;
            bottom: 0;
            right: 0;
            border-radius: 50%;
            margin-bottom: -4px;
            margin-right: -4px;
            border-width: 1px;
            border-style: solid;
            z-index: 100
        }

    .k-spreadsheet .k-spreadsheet-edit-container .k-single-selection::after {
        display: none
    }

    .k-spreadsheet .k-auto-fill, .k-spreadsheet .k-auto-fill-bl-hint, .k-spreadsheet .k-auto-fill-br-hint, .k-spreadsheet .k-auto-fill-punch, .k-spreadsheet .k-auto-fill-tr-hint {
        position: absolute;
        box-sizing: border-box
    }

    .k-spreadsheet .k-auto-fill {
        border-width: 1px;
        border-style: solid;
        cursor: crosshair
    }

    .k-spreadsheet .k-auto-fill-wrapper {
        position: relative
    }

    .k-spreadsheet .k-spreadsheet-vborder {
        position: absolute;
        border-left-style: solid;
        border-left-width: 1px
    }

    .k-spreadsheet .k-spreadsheet-hborder {
        position: absolute;
        border-top-style: solid;
        border-top-width: 1px
    }

.k-spreadsheet-names-popup .k-item {
    position: relative
}

.k-spreadsheet-names-popup .k-icon {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: .7;
    cursor: pointer
}

    .k-spreadsheet-names-popup .k-icon:hover {
        opacity: 1
    }

.k-merged-cells-wrapper, .k-selection-wrapper, .k-spreadsheet-active-cell, .k-spreadsheet-data {
    cursor: cell
}

.k-horizontal-resize .k-merged-cells-wrapper, .k-horizontal-resize .k-selection-wrapper, .k-horizontal-resize .k-spreadsheet-active-cell, .k-horizontal-resize .k-spreadsheet-data {
    cursor: col-resize
}

.k-vertical-resize .k-merged-cells-wrapper, .k-vertical-resize .k-selection-wrapper, .k-vertical-resize .k-spreadsheet-active-cell, .k-vertical-resize .k-spreadsheet-data {
    cursor: row-resize
}

.k-spreadsheet .k-colorpicker .k-tool-icon {
    overflow: visible
}

.k-button.k-custom-color, .k-button.k-reset-color {
    display: block;
    width: 100%;
    border-radius: 0;
    border: none;
    text-align: left;
    line-height: 2em
}

.k-spreadsheet-colorpicker .k-colorpalette {
    border: 1px solid #dbdbdb;
    border-left: none;
    border-right: none;
    padding: .4em
}

.k-spreadsheet-filter {
    position: absolute;
    cursor: pointer;
    pointer-events: all
}

.k-spreadsheet-sample {
    float: right
}

.k-spreadsheet-clipboard, .k-spreadsheet-clipboard-paste {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    width: 1px;
    height: 1px;
    box-sizing: border-box
}

textarea.k-spreadsheet-clipboard {
    position: fixed
}

.k-spreadsheet-top-corner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    border-width: 0 1px 1px 0;
    border-style: solid
}

    .k-spreadsheet-top-corner:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        right: 0;
        border-width: 6px;
        border-style: solid
    }

.k-spreadsheet-scroller {
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    z-index: 1
}

.k-spreadsheet-fixed-container {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden
}

.k-spreadsheet-view-size {
    position: relative
}

.k-spreadsheet-column-header, .k-spreadsheet-row-header {
    text-align: center;
    z-index: 100
}

    .k-spreadsheet-column-header .k-spreadsheet-cell, .k-spreadsheet-row-header .k-spreadsheet-cell {
        border-style: solid;
        border-width: 0 1px 1px 0
    }

div.k-spreadsheet-window {
    padding: 1.167em .75em .75em
}

.k-spreadsheet-window .k-edit-form-container {
    width: 100%
}

.k-spreadsheet-window .k-root-tabs {
    border-width: 0;
    margin: -1em -1em 0;
    padding: .5em 1em 0
}

    .k-spreadsheet-window .k-root-tabs .k-loading {
        display: none
    }

.k-spreadsheet-window .k-list-wrapper {
    padding: .15em 0;
    height: 190px
}

.k-spreadsheet-window .k-list .k-item {
    border-radius: 0;
    padding: .5em .6em .4em .6em;
    cursor: pointer;
    line-height: 1.1em
}

.k-spreadsheet-window .k-format-filter {
    width: 100%
}

    .k-spreadsheet-window .k-format-filter + .k-group-header + .k-list-wrapper {
        margin-top: 1em
    }

.k-spreadsheet-window .k-action-buttons {
    top: 10px;
    padding: 10px;
    margin-bottom: calc(10px - 1em)
}

.k-spreadsheet-window .k-edit-label {
    width: 25%;
    margin: 0 0 0 .75em
}

.k-spreadsheet-window .k-edit-field {
    width: 67%;
    margin: 0 .917em 0 0
}

    .k-spreadsheet-window .k-edit-field > .k-radio-label {
        margin-right: 1.25em;
        vertical-align: baseline
    }

        .k-spreadsheet-window .k-edit-field > .k-radio-label:after, .k-spreadsheet-window .k-edit-field > .k-radio-label:before {
            margin-top: -1px
        }

.k-spreadsheet-window .k-edit-field, .k-spreadsheet-window .k-edit-label {
    padding: 0;
    line-height: 3em
}

    .k-spreadsheet-window .k-edit-field .k-dropdown, .k-spreadsheet-window .k-edit-field .k-textbox {
        width: 100%
    }

.k-spreadsheet-window .k-export-config .k-hr {
    margin-left: 15px;
    margin-right: 15px
}

.k-spreadsheet-window .k-export-config .k-edit-field {
    width: 40%;
    float: left;
    margin-left: 30px
}

.k-spreadsheet-window .k-edit-field > input[type=radio] {
    display: inline;
    opacity: 0;
    width: 0;
    margin: 0
}

.k-spreadsheet-window .k-page-orientation {
    position: absolute;
    right: 2em;
    top: 25%
}

    .k-spreadsheet-window .k-page-orientation .k-icon {
        font-size: 6em
    }

.k-spreadsheet-window .k-export-config:after, .k-spreadsheet-window > div:after {
    content: "";
    display: block;
    clear: both;
    height: 0
}

.k-spreadsheet-format-cells .k-spreadsheet-preview {
    font-weight: 700;
    text-align: center;
    font-size: 1.16em;
    line-height: 3.64em;
    margin: 0 -.863em .72em;
    border-style: solid;
    border-width: 1px 0
}

.k-spreadsheet-border-palette {
    width: 153px
}

    .k-spreadsheet-border-palette .k-spreadsheet-border-type-palette .k-button {
        box-sizing: border-box;
        width: 20%
    }

    .k-spreadsheet-border-palette .k-colorpalette {
        vertical-align: bottom
    }

.k-spreadsheet-popup .k-separator {
    width: 1px;
    height: 1.8em;
    vertical-align: middle;
    display: inline-block
}

.k-spreadsheet-popup .k-colorpalette {
    vertical-align: top
}

.k-spreadsheet-popup .k-button.k-button-icon {
    padding: .6em;
    border-width: 0;
    border-radius: 0
}

.k-spreadsheet-popup .k-button.k-button-icontext {
    display: block;
    text-align: left;
    text-transform: initial;
    padding: .3em 1.5em .3em .9em;
    border-width: 0;
    border-radius: 0
}

.k-spreadsheet-filter-menu {
    width: 280px
}

    .k-spreadsheet-filter-menu > .k-menu {
        border-width: 0
    }

        .k-spreadsheet-filter-menu > .k-menu .k-link {
            padding-left: 26px
        }

            .k-spreadsheet-filter-menu > .k-menu .k-link .k-icon {
                margin-left: -26px;
                width: 26px
            }

    .k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper {
        height: 200px;
        overflow-y: scroll;
        overflow-x: auto;
        border-width: 1px;
        border-style: solid
    }

        .k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper .k-treeview {
            overflow: visible;
            padding: 6px 7px
        }

    .k-spreadsheet-filter-menu .k-details {
        border-top-width: 1px;
        border-top-style: solid;
        padding: 4px 0
    }

    .k-spreadsheet-filter-menu .k-details-summary {
        cursor: pointer;
        line-height: 26px
    }

        .k-spreadsheet-filter-menu .k-details-summary .k-icon {
            margin: 0 5px
        }

    .k-spreadsheet-filter-menu .k-details-content {
        padding: 0 8px 0 26px
    }

        .k-spreadsheet-filter-menu .k-details-content > .k-textbox, .k-spreadsheet-filter-menu .k-details-content > .k-widget {
            width: 100%;
            margin-bottom: 3px
        }

        .k-spreadsheet-filter-menu .k-details-content .k-space-right {
            background-image: none
        }

        .k-spreadsheet-filter-menu .k-details-content .k-filter-and {
            width: 75px;
            margin: 8px 0
        }

    .k-spreadsheet-filter-menu .k-action-buttons {
        border-top-width: 0;
        margin: 8px;
        padding: 0;
        position: static
    }

.k-resize-handle, .k-resize-hint {
    position: absolute;
    z-index: 200
}

.k-resize-hint-handle {
    width: 100%;
    height: 20px
}

.k-resize-hint-marker {
    width: 2px;
    height: 100%;
    margin: 0 auto
}

.k-resize-hint-vertical .k-resize-hint-handle {
    height: 100%;
    width: 20px;
    float: left
}

.k-resize-hint-vertical .k-resize-hint-marker {
    height: 2px;
    width: 100%
}

.k-button.k-spreadsheet-sheets-bar-add, .k-spreadsheet-quick-access-toolbar .k-button {
    border-color: transparent;
    background-color: transparent;
    background-image: none
}

.k-spreadsheet-tabstrip {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0
}

    .k-spreadsheet-tabstrip > .k-content {
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 0;
        margin: 0;
        padding: 0
    }

    .k-spreadsheet-tabstrip .k-loading {
        display: none
    }

.k-spreadsheet-toolbar.k-toolbar {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0
}

    .k-spreadsheet-toolbar.k-toolbar .k-overflow-anchor + * {
        margin-left: .3em
    }

    .k-spreadsheet-toolbar.k-toolbar > .k-button-group {
        border-width: 0
    }

.k-spreadsheet-toolbar .k-button, .k-spreadsheet-toolbar > .k-button-group, .k-spreadsheet-toolbar > .k-widget, .k-spreadsheet-toolbar > .k-widget .k-state-default:not(.k-state-hover):not(.k-state-active) {
    margin: 0;
    border-color: transparent;
    background-color: transparent;
    background-image: none
}

    .k-spreadsheet-toolbar > .k-widget[data-property=fontSize] {
        width: 75px
    }

    .k-spreadsheet-toolbar > .k-widget[data-property=format] {
        width: 100px
    }

    .k-spreadsheet-toolbar > .k-widget[data-property=fontFamily] {
        width: 130px
    }

.k-spreadsheet-toolbar > .k-combobox .k-state-default:not(.k-state-hover):not(.k-state-active) .k-input {
    background-color: transparent;
    box-shadow: none
}

.k-spreadsheet-toolbar > .k-widget .k-state-default:not(.k-state-hover):not(.k-state-active) .k-select {
    border-color: transparent
}

.k-spreadsheet-toolbar [data-tool=alignment], .k-spreadsheet-toolbar [data-tool=backgroundColor], .k-spreadsheet-toolbar [data-tool=borders], .k-spreadsheet-toolbar [data-tool=freeze], .k-spreadsheet-toolbar [data-tool=merge], .k-spreadsheet-toolbar [data-tool=textColor] {
    width: auto
}

.k-spreadsheet-toolbar .k-separator {
    margin: 0 3px;
    width: 0;
    overflow: hidden;
    height: 1.8em;
    vertical-align: middle;
    display: inline-block
}

.k-spreadsheet-formula-input > .k-syntax-bool.k-syntax-at-point, .k-spreadsheet-formula-input > .k-syntax-func.k-syntax-at-point, .k-spreadsheet-formula-input > .k-syntax-num.k-syntax-at-point, .k-spreadsheet-formula-input > .k-syntax-ref.k-syntax-at-point, .k-spreadsheet-formula-input > .k-syntax-str.k-syntax-at-point {
    text-decoration: underline
}

.k-spreadsheet-formula-input > .k-series-a, .k-spreadsheet-formula-input > .k-series-b, .k-spreadsheet-formula-input > .k-series-c, .k-spreadsheet-formula-input > .k-series-d {
    background-color: transparent
}

.k-spreadsheet-selection-highlight {
    border-width: 1px;
    border-style: solid;
    position: absolute;
    box-sizing: border-box
}

.k-spreadsheet-formula-list {
    min-width: 100px
}

    .k-spreadsheet-formula-list .k-item {
        padding: 0 .3em;
        box-shadow: none
    }

.k-spreadsheet-sheets-bar {
    position: relative
}

.k-button.k-spreadsheet-sheets-bar-add {
    position: absolute;
    bottom: .2em;
    left: .4em;
    z-index: 1
}

.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove {
    padding: 0;
    margin: .5em .5em .5em -.5em;
    vertical-align: middle
}

    .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove .k-button-icon {
        padding: 2px;
        line-height: normal
    }

    .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove .k-icon {
        margin: 0
    }

.k-spreadsheet-sheets-items-hint {
    margin-top: .1em;
    background: 0 0 !important;
    border-width: 0 !important
}

.k-spreadsheet-editor-button {
    position: absolute;
    width: 20px;
    z-index: 10;
    margin-left: 2px;
    padding: 0 !important
}

    .k-spreadsheet-editor-button.k-spreadsheet-last-column {
        margin-left: -21px
    }

    .k-spreadsheet-editor-button span {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

.hint-wrapper {
    margin-top: 1em
}

.k-edit-form-container > div:after {
    display: block;
    content: "";
    clear: both
}

.k-spreadsheet-filter-menu .k-i-arrow-45-down-right {
    cursor: pointer
}

.k-spreadsheet-import-errors .k--header-message {
    font-weight: 700;
    padding-bottom: 5px;
    border-bottom: 1px solid #888;
    margin-bottom: 5px
}

.k-spreadsheet-import-errors .k--errors {
    max-height: 350px;
    overflow: auto
}

    .k-spreadsheet-import-errors .k--errors table {
        border-collapse: collapse;
        font-size: 90%
    }

        .k-spreadsheet-import-errors .k--errors table td, .k-spreadsheet-import-errors .k--errors table th {
            padding: 2px 4px;
            border-bottom: 1px solid #bbb
        }

        .k-spreadsheet-import-errors .k--errors table th {
            text-align: left;
            border-bottom: 1px solid #000
        }

.k-spreadsheet-insert-image-dialog {
    margin: 0 1em;
    border-style: dashed;
    border-width: 2px
}

    .k-spreadsheet-insert-image-dialog label {
        position: relative;
        display: block;
        width: 355px;
        height: 200px;
        padding: 10px;
        background-image: url(/Content/css/textures/image-default.png?v=4.9.25_250820);
        background-size: auto 70%;
        background-repeat: no-repeat;
        background-position: 50% 30%
    }

        .k-spreadsheet-insert-image-dialog label div {
            position: relative;
            top: 75%;
            padding: 10px;
            text-align: center;
            pointer-events: none
        }

        .k-spreadsheet-insert-image-dialog label input {
            display: none
        }

    .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image {
        background-size: auto 90%;
        background-position: 50% 50%
    }

        .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image.k-state-hovered div, .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image:hover div {
            opacity: 1;
            top: 50%
        }

        .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image div {
            opacity: 0
        }

.k-spreadsheet-drawing {
    position: absolute;
    box-sizing: border-box;
    z-index: 101
}

    .k-spreadsheet-drawing.k-spreadsheet-active-drawing {
        outline-style: solid;
        outline-width: 2px
    }

    .k-spreadsheet-drawing .k-spreadsheet-drawing-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: move
    }

    .k-spreadsheet-drawing .k-spreadsheet-drawing-handle {
        position: absolute;
        width: 6px;
        height: 6px;
        border-style: solid;
        border-width: 1px;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.N {
            left: 50%;
            top: 0;
            cursor: ns-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.NE {
            left: 100%;
            top: 0;
            cursor: nesw-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.E {
            left: 100%;
            top: 50%;
            cursor: ew-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.SE {
            left: 100%;
            top: 100%;
            cursor: nwse-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.S {
            left: 50%;
            top: 100%;
            cursor: ns-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.SW {
            left: 0;
            top: 100%;
            cursor: nesw-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.W {
            left: 0;
            top: 50%;
            cursor: ew-resize
        }

        .k-spreadsheet-drawing .k-spreadsheet-drawing-handle.NW {
            left: 0;
            top: 0;
            cursor: nwse-resize
        }



/* silver  */


.k-spreadsheet-selection {
    background-color: rgba(25,132,200,.2)
}

.k-spreadsheet-active-cell {
    box-shadow: inset 0 0 0 1px #1984c8;
    background-color: #fff
}

    .k-spreadsheet-active-cell.k-right {
        box-shadow: inset 0 0 0 1px #1984c8,inset -1px 0 0 1px #1984c8
    }

    .k-spreadsheet-active-cell.k-bottom {
        box-shadow: inset 0 0 0 1px #1984c8,inset 0 -1px 0 1px #1984c8
    }

        .k-spreadsheet-active-cell.k-bottom.k-right {
            box-shadow: inset 0 0 0 1px #1984c8,inset -1px -1px 0 1px #1984c8
        }

    .k-spreadsheet-active-cell.k-single {
        color: #515967;
        background-color: #fff
    }

.k-spreadsheet .k-spreadsheet-action-bar {
    background-color: #fff;
    border-color: #dedee0
}

    .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-name-editor {
        border-color: #bebec3
    }

    .k-spreadsheet .k-spreadsheet-action-bar .k-spreadsheet-formula-bar::before {
        border-color: #bebec3
    }

.k-spreadsheet .k-spreadsheet-formula-input {
    background-color: #fff;
    color: #515967
}

.k-spreadsheet .k-resize-handle, .k-spreadsheet .k-resize-hint-handle, .k-spreadsheet .k-resize-hint-marker {
    background-color: #1984c8
}

.k-spreadsheet .k-resize-hint-vertical .k-resize-hint-handle, .k-spreadsheet .k-resize-hint-vertical .k-resize-hint-marker {
    background-color: #1984c8
}

.k-spreadsheet .k-single-selection::after {
    background-color: #1984c8;
    border-color: #fff
}

.k-spreadsheet .k-auto-fill-punch {
    background-color: rgba(255,255,255,.5)
}

.k-spreadsheet .k-single-selection.k-dim-auto-fill-handle::after {
    background-color: rgba(25,132,200,.5)
}

.k-spreadsheet .k-spreadsheet-cell-comment {
    color: #535b6a;
    background-color: #f3f3f4;
    border-color: #ceced2
}

.k-spreadsheet .k-spreadsheet-has-comment:after {
    border-color: #1984c8 #1984c8 transparent transparent
}

.k-spreadsheet .k-dirty {
    border-color: #d92800 transparent transparent #d92800
}

.k-spreadsheet-format-cells .k-spreadsheet-preview {
    border-color: #dedee0
}

.k-spreadsheet-filter {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #d8d8dc
}

    .k-spreadsheet-filter.k-state-active {
        color: #fff;
        background-color: #1984c8
    }

    .k-spreadsheet-filter:hover {
        color: #263248;
        background: #b6bdca;
        border-color: #9ea8b9
    }

.k-action-window .k-action-buttons {
    border-color: #dedee0;
    background: #f3f3f4
}

.k-spreadsheet-sample {
    color: #9ea6b3
}

.k-state-selected .k-spreadsheet-sample {
    color: inherit
}

.k-spreadsheet-window .k-list {
    border-color: #dedee0;
    border-radius: 4px
}

.k-spreadsheet-toolbar.k-toolbar .k-button-group .k-button:not(.k-toggle-button) {
    border-radius: 4px
}

.k-spreadsheet-toolbar > .k-button, .k-spreadsheet-toolbar > .k-button-group, .k-spreadsheet-toolbar > .k-widget {
    border-radius: 4px
}

.k-spreadsheet-toolbar > .k-separator {
    border-color: #dedee0
}

.k-spreadsheet-toolbar .k-overflow-anchor {
    border-radius: 0
}

.k-spreadsheet-popup {
    border-radius: 4px
}

    .k-spreadsheet-popup .k-separator {
        background-color: #dedee0
    }

    .k-spreadsheet-popup .k-button {
        background-color: transparent
    }

        .k-spreadsheet-popup .k-button:hover {
            background-color: #b6bdca
        }

    .k-spreadsheet-popup .k-state-active {
        background-color: #1984c8;
        color: #000
    }

        .k-spreadsheet-popup .k-state-active:hover {
            background-color: #13669b
        }

.k-spreadsheet-filter-menu .k-details {
    border-color: #dedee0
}

.k-spreadsheet-filter-menu .k-details-content .k-space-right {
    background-color: #fff
}

.k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper {
    background-color: #fff;
    border-color: #dedee0;
    border-radius: 4px 0 0 4px
}


.k-spreadsheet-column-header, .k-spreadsheet-row-header {
    background-color: #fff
}

.k-spreadsheet-column-header, .k-spreadsheet-row-header, .k-spreadsheet-top-corner {
    background-color: #f3f3f4;
    background-image: none;
    color: #000;
    border-color: #bebec3
}

.k-spreadsheet-top-corner {
    border-color: #bebec3
}

    .k-spreadsheet-top-corner:after {
        border-color: transparent #bebec3 #bebec3 transparent
    }

.k-spreadsheet-pane {
    border-color: #bebec3
}

    .k-spreadsheet-pane .k-spreadsheet-haxis, .k-spreadsheet-pane .k-spreadsheet-vaxis {
        border-color: #d8d8dc
    }

    .k-spreadsheet-pane .k-spreadsheet-column-header, .k-spreadsheet-pane .k-spreadsheet-row-header {
        border-color: #bebec3
    }

    .k-spreadsheet-pane .k-spreadsheet-merged-cell {
        background-color: #fff
    }

    .k-spreadsheet-pane .k-selection-full, .k-spreadsheet-pane .k-selection-partial {
        border-color: rgba(25,132,200,.2);
        background-color: rgba(25,132,200,.2)
    }

    .k-spreadsheet-pane .k-filter-range {
        border-color: #1984c8
    }

    .k-spreadsheet-pane .k-spreadsheet-column-header .k-selection-full, .k-spreadsheet-pane .k-spreadsheet-column-header .k-selection-partial {
        border-bottom-color: #1984c8
    }

    .k-spreadsheet-pane .k-spreadsheet-row-header .k-selection-full, .k-spreadsheet-pane .k-spreadsheet-row-header .k-selection-partial {
        border-right-color: #1984c8
    }

.k-auto-fill, .k-spreadsheet-selection {
    border-color: #1984c8;
    box-shadow: inset 0 0 0 1px #1984c8
}

.k-spreadsheet-sheets-remove:hover .k-icon {
    color: #c22
}

.k-spreadsheet-formula-list .k-state-focused {
    background-color: #1984c8;
    color: #fff
}

.k-spreadsheet-insert-image-dialog {
    border-color: #dedee0;
    border-radius: 4px
}

    .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image.k-state-hovered, .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image:hover {
        box-shadow: inset 0 0 0 2000px rgba(0,0,0,.5);
        border-radius: 4px
    }

        .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image.k-state-hovered div, .k-spreadsheet-insert-image-dialog .k-spreadsheet-has-image:hover div {
            color: #fff
        }

.k-spreadsheet-drawing.k-spreadsheet-active-drawing {
    outline-color: #1984c8
}

.k-spreadsheet-drawing .k-spreadsheet-drawing-handle {
    border-color: #fff;
    background-color: #1984c8;
    border-radius: 50%
}

.k-spreadsheet-drawing-anchor-cell {
    background: rgba(25,132,200,.2)
}

.k-rtl .k-spreadsheet .k-spreadsheet-has-comment::after {
    border-color: #1984c8 transparent transparent #1984c8
}

.k-rtl .k-spreadsheet .k-dirty {
    border-color: #d92800 #d92800 transparent transparent
}

.k-spreadsheet .k-widget[data-property=fontSize] {
    width: 60px
}

.k-spreadsheet .k-widget[data-property=format] {
    width: 100px
}

.k-spreadsheet .k-widget[data-property=fontFamily] {
    width: 130px
}

.k-spreadsheet-toolbar .k-combobox .k-input {
    color: #515967
}

.k-spreadsheet-toolbar .k-combobox .k-state-active .k-input, .k-spreadsheet-toolbar .k-combobox .k-state-focused .k-input, .k-spreadsheet-toolbar .k-combobox .k-state-hover .k-input {
    color: #515967
}




/* rtl */



.k-rtl .k-spreadsheet .k-spreadsheet-cell .k-dirty {
    margin: 0
}

.k-rtl .k-spreadsheet .k-spreadsheet-cell.k-spreadsheet-has-comment::after {
    left: 0;
    right: auto
}


/* calendar picker */

.k-calendar{width: 300px;overflow:hidden;text-align:center;display: flex;flex-direction: column;padding: 10px;align-items: center; color:var(--text-color)}

.k-calendar .k-header{display: flex;     margin-bottom: 10px; }
.k-calendar .k-header .k-nav-prev,
.k-calendar .k-header .k-nav-next
{width: 40px; flex-shrink: 0}


.k-calendar th{height: 40px;padding:0;text-align:center;font-weight: 700;margin:0;border:none;box-shadow: inset 1px 0px 0 0px var(--outline)}
.k-calendar td{padding:0;width: 40px;height: 40px;box-shadow: inset 1px 1px 0 0px var(--outline);}


.k-calendar td:first-child{box-shadow:inset 0px 1px 0 0px var(--outline) }
.k-calendar th:first-child{box-shadow:none}

.k-calendar td.k-weekend, .k-calendar th[title="Sunday"],.k-calendar th[title="Saturday"]{color:var(--main-color);}

.k-link{ text-decoration:none}

.k-calendar .k-content{cursor: default;float:left;table-layout:fixed;text-align:center;width:280px;min-height: 260px;margin-bottom: 10px;}

.k-calendar .k-content .k-other-month .k-link{font-weight:400;opacity:.3; color:var(--text-color)}
.k-calendar .k-link.k-nav-fast{width:100%;}
.k-calendar .k-footer{height:40px;}
.k-calendar .k-link{display:flex;align-items:center;justify-content:center;min-height: 40px;height:100%;font-weight: 700;padding: 0 15px;}


.k-calendar .k-link:hover,.k-calendar .k-content .k-today .k-link{background-image:var(--over-color);}

.k-calendar .k-content .k-state-selected .k-link{background-color:var(--main-color);color:#fff}
.k-calendar .k-content .k-state-disabled .k-link{opacity:0.5; cursor:default;}
.k-calendar .k-content .k-state-disabled .k-link:hover{background-image:none;}

.k-calendar .k-link:active{transform:translateY(1px);background-image:var(--press-color);}






/* ----- */



/* kendo inputs */

.k-widget { position: relative; float: left; }



.k-widget.k-state-disabled .k-clear-value{display:none;}


.k-widget .k-clear-value{ cursor:pointer;}
.k-widget .k-clear-value:active::after{transform:translateY(1px)}

.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap

{
display:flex;
overflow:hidden;
width:100%;

}



.k-widget .k-input,.k-widget input {background:none; box-shadow:none; text-overflow:ellipsis;overflow:hidden; position:relative;}
.k-widget .k-input text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}
.k-widget .k-input icon + text{margin-left:7px;}

/*.input_cont .k-input text{position: absolute;    left: 0;
    padding: 0 7px;}*/ /*temp fix*/


.k-list-filter input{ }
.k-select{width:30px;height:30px;cursor:pointer; flex-shrink:0}
.k-select:active .k-icon{transform:translateY(1px)}
.k-widget.k-header .k-select{width:30px}
.k-widget.k-header .k-select:hover{    background-image: var(--over-color);}
.k-widget.k-header .k-select:active{    background-image: var(--press-color);}

.input_cont[simple] .k-widget.k-header .k-select{display:none}

.k-list-container{padding: 10px 0;display:flex;flex-direction:column;}
.k-list-scroller{height:100%;overflow-y: auto;overflow-y: overlay;overflow-x: hidden;-webkit-overflow-scrolling: touch;padding: 0 10px;}


.k-list{min-height:40px;color:var(--text);}
.k-list .k-item,
.k-list-optionlabel
{margin-bottom:2px;height:40px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;padding:0 15px;list-style:none;display:flex;align-items:center;flex-shrink:0;max-width: 100%;position:relative;border-radius:var(--button-radius);}

.k-list-optionlabel{/*border: 1px dotted;*/margin-left: 10px;margin-right: 10px;}


.k-list .k-item.k-state-focused:not(.k-state-selected) text {   border: 1px dotted  }
.k-list .k-item text{max-width:100%; overflow:hidden; text-overflow:ellipsis}

.k-list .k-item icon + text{margin-left:5px;}
.k-list .k-item text[child]{padding-left:20px;}
.k-list .k-item:hover,.k-list-optionlabel:hover{background-image:var(--over-color); }

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected
{font-weight:700;background-color:var(--main-color);color:#fff;}

.k-list .k-item:active,
.k-list-optionlabel:active
{background-image:var(--press-color);}

.k-list .k-item:active text,
.k-list-optionlabel:active text
{transform:translateY(1px)}
.k-list .k-item.k-state-selected + .k-state-selected{box-shadow: 0 -1px 0 0 var(--outline-dark);}



.k-list-filter{/* margin-bottom:2px; */height: 40px;display: flex;align-items:center;position: relative;background:var(--input-color);padding: 0 15px;flex-shrink:0;border-radius:var(--button-radius);overflow:hidden;margin: 0 10px 2px;}
.k-list-filter input{ height:40px; flex:1; background:none; box-shadow:none; width: 100%!important; }
.k-header-item{min-height: 40px;display: flex;position: relative;flex-shrink: 0;flex-direction:column;margin: 0 10px;}

.k-header-item .button{width:100%;margin:0}
.k-header-item .button separator[horizontal]{margin:25px 25px 10px}


.k-widget.k-numerictextbox {overflow: visible;}
.k-widget.k-numerictextbox .k-input{padding:0 7px}

/*tabstrip*/

.k-tabstrip-items { height: 40px; line-height: 40px; background-color: #fff; box-shadow: 0 1px 0 0 rgba(75, 92, 109, .1); position:relative; z-index:9;}
.k-tabstrip-items .k-item { display: inline-block;  }
.k-tabstrip-items .k-link { display: block; color: #000; font-weight: 700; text-decoration: none; text-align: center; padding: 0 20px; min-width: 70px; }
.k-tabstrip-items .k-item.k-state-active .k-link { color: var(--main-color); box-shadow: 0 3px 0 0 var(--main-color); }

.k-animation-container{margin:-5px 0}

/*multiselect*/

.k-multiselect{    position:relative; width:100%;  }


.k-multiselect .k-button {background-color:var(--main-color); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:#fff; font-weight:400; position:relative; float:left;height: 30px; display: flex; align-items: center; padding-left: 10px; box-shadow: -1px -1px 0 var(--outline-dark); }

.k-multiselect .k-button:hover{background-image:var(--over-color);}
.k-multiselect .k-button span {max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
.k-multiselect .k-button .k-select{position:relative; flex-shrink:0}
.k-widget.k-multiselect .k-i-close{ cursor:pointer; right:0}
.k-widget.k-multiselect .k-multiselect-wrap ul {     }
.k-multiselect-wrap{}

.k-multiselect.k-state-disabled .k-button {padding:0 10px; pointer-events:none}
.k-multiselect.k-state-disabled .k-button .k-select{display:none}

.k-multiselect .k-button-more{ float:left; padding:0 10px; }


/**/
.filter_block .k-widget.k-header .k-input,.filter_block .k-widget.k-multiselect{/* background: #283947; *//* color:#fff; *//* box-shadow:none */}

/* slider */


.k-slider.k-widget { display: block; margin: 0 5px 10px; width: 220px; background: none; box-shadow: none; overflow: visible; }
.k-slider-wrap{	position: relative;	width: 100%;}
.k-slider .k-slider-items{height: 15px;float:left;clear:both;margin:20px 0;}



.k-slider .k-tick:nth-child(2n+1):before{content:'';position:absolute;height: 10px;width:1px;box-shadow:inset 0 0 0 2px;left:50%;opacity:.3;}
.k-slider .k-tick.k-tick-large:before{height: 15px;}



.k-slider .k-first.k-tick:before{left:0}
.k-slider .k-last.k-tick:before{left:auto;right:0}
.k-slider .k-tick{	float: left;	height: 100%;	text-align: center;}
.k-slider .k-label{	position: absolute;	white-space: nowrap;}
.k-slider .k-label{		line-height: 1;   transform:translateX(-50%);    bottom:-25px}
.k-slider .k-first .k-label{	}
.k-slider .k-last .k-label{}
.k-slider .k-label{/* color:#fff */}
.k-slider .k-tick{list-style:none;position: relative;}
.k-slider-track{    background:var(--outline);position: absolute;}
.k-slider-selection{background:var(--main-color);position: absolute;}

.k-slider-tooltip{  background:var(--tip);color:#fff;top:0;left:0;position:absolute;border-radius:30px;pointer-events:none;padding:6px 15px; z-index:99999}

.k-slider .k-draghandle{background:var(--main-color);opacity: 1;height: 12px;top: -5px;width: 12px;border-radius:10px;box-shadow: 0 0 0 3px var(--background);position: absolute;overflow:hidden;color:transparent;cursor:pointer;}
.k-slider .k-draghandle:active,.k-slider .k-draghandle.k-state-selected {/* box-shadow:0 0 0 4px rgba(0,0,0,.2); */}

.k-slider .k-slider-track,.k-slider .k-slider-selection{height: 2px;	left: 0;top: 0;}


/*   */









/*color picker*/

.k-flatcolorpicker {  width: 260px; display:flex; flex-direction:column;    position: relative;
    overflow: hidden; }



.k-widget.k-colorpicker.k-header {   cursor: pointer; flex-grow:initial; }

.k-widget.k-colorpicker .k-select{display:none}

.k-picker-wrap .k-selected-color:active{transform:translateY(1px)}

.k-picker-wrap .k-selected-color {     display: flex;
    height: 20px;
    width: 20px;
    border-radius: 30px;
    box-shadow: inset 0 0 0 4px var(--outline);
    margin: 4px; }


[square] > .k-widget.k-colorpicker .k-picker-wrap .k-selected-color
{
    height: 22px;
    width: 22px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--outline);
    margin: 0 0 0 4px;
}



/*color picker*/

.k-hsv-rectangle { height: 260px; width: 260px; float: left; position: relative;  overflow:hidden;     background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%); }
/*.k-flatcolorpicker .k-hsv-gradient{ top:0; left:0;   background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%); position:absolute; height:100%; width:100%}*/
.k-flatcolorpicker .k-hue-slider .k-slider-track{    background: linear-gradient(to right,#f00 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%);}
.k-flatcolorpicker .k-slider-horizontal .k-slider-track{box-shadow:none;}

.k-slider-horizontal .k-slider-track, .k-slider-horizontal .k-slider-selection { height: 2px;  }

.k-flatcolorpicker .k-controls { float: left; width: 100%; padding: 10px 0; }
.k-flatcolorpicker .k-controls .k-button { float: right; min-width: 0; width: auto; padding: 0 10px; }


.k-flatcolorpicker .k-selected-color input.k-color-value {}
.k-flatcolorpicker .k-selected-color { height: 30px; margin:10px;  order:1; }
.k-selected-color-display{ height:30px;  float:left; width:100% ;}
.k-selected-color-display .k-color-value{ height:30px; line-height:30px;width:100%; padding:0 7px; }


.k-flatcolorpicker .k-hsv-rectangle .k-draghandle {    cursor: pointer;
    position: absolute;
    z-index: 10;

    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 15px;
    background: 0 0;
    box-shadow: 0 0 0 1.52px #fff;
    mix-blend-mode: difference; }


.k-hue-slider.k-slider  .k-slider-selection{display:none}

.k-flatcolorpicker .k-slider-horizontal {   padding: 15px;
    width: 260px;
    box-shadow: 0 1px 0 0 var(--border-color);


    height: 50px;
    margin: 0;
    display: flex;
    align-items: center;}


.k-flatcolorpicker {background: var(--background)}
.k-flatcolorpicker .k-selected-color .k-color-input {background: var(--background);display: flex;width: 100%;text-align: left;float: right}
.k-icon.k-i-reset-color:after{content:"close"}
.k-clear-color{margin-left:auto;cursor:pointer;color:inherit;position:relative;}





/* pager */

.k-pager-wrap{ z-index:2;/*max-width: calc(100% - 30px);background:none;*/display:flex;align-items:center; /*position: absolute; bottom: 15px;*/  /*left: 15px;*/     box-shadow: 0 0 0 1px var(--border-color); overflow:hidden;min-height:var(--area); height:var(--area); padding:0 15px}


.k-state-disabled.k-pager-nav{opacity:.2}
.k-pager-wrap .k-dropdown {float:left;}
.k-pager-numbers{display:flex}

.k-pager-numbers li {border-radius: 30px;height: 30px;width: 30px;  list-style:none; float:left;text-align:center; position:relative; overflow:hidden; /*box-shadow: 0 0 0 1px var(--border-color); background:var(--context);*/}
.k-pager-numbers .k-current-page{display:none; cursor:pointer;background:var(--main-color);color:#fff;}

.k-pager-numbers li span,
.k-grid .k-pager-numbers li a,
.k-pager-wrap .k-link
{ height: 100%;width: 100%;  display:flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none}


.k-pager-wrap .k-link:hover{    background-color: var(--hover);}


.k-pager-wrap .k-link:active text,
.k-pager-sizes .k-dropdown:active text
{ transform:translateY(1px)}

.k-pager-numbers li.selected{background-color:var(--main-color);color:#fff;}

.k-pager-info {/*margin-left: auto;*/padding:0 15px; display:flex; align-items:center;}

.k-pager-info text{width: 100%; overflow: hidden; text-overflow: ellipsis;}
.k-pager-sizes{width: auto;
    flex: initial;
    padding: 0;}
.k-pager-info{height: 30px; display: flex; white-space: nowrap; line-height: 30px; overflow: hidden;  margin-left:auto}


.k-pager-sizes .k-dropdown{ margin: 0;}

.k-pager-sizes .k-dropdown .k-input{padding: 0 10px;}
.k-pager-sizes .k-dropdown .k-select .k-i-arrow-60-down:after { content: 'down' }

/*.k-pager-sizes .k-widget.k-header .k-input { border-radius:30px;}*/

.k-pager-refresh.k-link{}

.k-pager-wrap .k-pager-nav{ width:30px; height:30px;}
.k-pager-wrap .k-pager-nav:active .k-icon{transform:translateY(1px)}

@media  (max-width: 800px)
{
.k-pager-numbers{}

.k-pager-numbers li,
.k-pager-numbers.k-state-expanded .selected/*,
.k-state-expanded ~ .k-pager-sizes,
.k-state-expanded ~ .k-pager-info,
.k-pager-sizes > text*/

{ display:none}


.k-pager-numbers .k-current-page{display:block;}
.k-state-expanded.k-pager-numbers li{display:block}


   
}

.k-hidden{display:none;}




.k-list .k-item.group_item::before {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    box-shadow: inset 0 1px var(--outline);
    top: 0;
    left: 0;
}
.k-list .k-item.group_item:hover::before{opacity:0}

.k-list .k-item.group_item .k-group {margin-left:auto;}

.k-popup.k-group .k-group-header{display:flex;background:var(--input-color);padding: 0 15px!important;
    border-radius: var(--button-radius);margin:0 10px;}
.k-popup.k-group .k-group-header text {margin-left:auto;animation:stick_anim .125s both;height: 40px;float: left;line-height: 40px;font-weight: 700;position: relative;}

@-webkit-keyframes stick_anim {from {-webkit-transform: translateY(10px)}}
@keyframes stick_anim {from {transform: translateY(10px) scale(1.05)}}



/*time picker fix - different kendo markup*/

.k-list-container.k-list-scroller .k-list {
    overflow: hidden!important;
    flex-shrink: 0;
}

.k-list-container.k-list-scroller {
    padding: 10px;
}




/*kendo editor*/

.k-editor-widget {border-spacing:0;table-layout: fixed;width: 100%;}
.k-editor-widget  .k-editable-area {padding:5px}
.k-editor-widget  .k-editable-area iframe {width:100%;}


.k-editor-toolbar{display:flex;gap:10px;    padding:10px;box-shadow: 0 1px 0px 0px var(--outline);background: var(--highlight);}
.k-editor-toolbar .k-tool-group{display:flex;}
.k-editor-toolbar .k-tool-group .form_fields {padding:0}
.k-editor-toolbar .k-tool-group .form_fields > .k-widget {margin:0;background: var(--background);}
.k-editor-toolbar .k-tool-group .k-tool{ display:flex;background: var(--background);  position:relative;   margin-left: -1px;   width: 30px;height: 30px; box-shadow: inset 0 0 0 1px var(--outline); cursor:pointer}

.k-editor-toolbar .k-tool-group .k-tool.k-group-start { border-radius:5px 0 0 5px}
.k-editor-toolbar .k-tool-group .k-tool.k-group-end {border-radius:0 5px 5px 0}

.k-editor-toolbar .k-tool-group .k-tool.k-state-selected {background:var(--main-color); color:#fff; z-index:1}
.k-editor-toolbar .k-tool-group .k-tool .k-tool-text {display:none}
.k-editor-toolbar .k-tool-group .k-tool:hover{    background-image: var(--over-color);}
.k-editor-toolbar .k-tool-group .k-tool:active .k-icon{transform:translateY(1px)}




.k-editor-toolbar .k-tool-group .k-widget.k-colorpicker {margin:initial}
.k-editor-toolbar .k-tool-group .k-picker-wrap {background: var(--background);     border-radius: 5px;  box-shadow: inset 0 0 0 1px var(--outline);}
.k-editor-toolbar .k-tool-group .k-widget.k-colorpicker .k-select {display:flex}
.k-editor-toolbar .k-tool-group .k-picker-wrap .k-selected-color {margin:auto; border-radius:3px;box-shadow: inset 0 0 0 1px var(--outline);}





.k-i-bold:after{content:'bold'}
.k-i-italic:after{content:'italic'}
.k-i-underline:after{content:'underline'}

.k-i-align-left:after{content:'align_left'}
.k-i-align-center:after{content:'center'}
.k-i-align-right:after{content:'align_right'}

.k-palette {display:flex;    padding: 5px;box-shadow: 0 0 0 1px var(--border-color);    flex-wrap: wrap;}



.k-palette {border-spacing:0}
.k-palette tbody {}

.k-palette tbody tr:first-child td:first-child{ border-radius:5px 0 0 0;}
.k-palette tbody tr:first-child td:last-child{border-radius:0 5px 0 0;}


.k-palette tbody tr:last-child td:first-child{border-radius:0 0 0 5px;}
.k-palette tbody tr:last-child td:last-child{border-radius:0 0 5px 0}


.k-palette td.k-item {width:24px; height:24px; cursor:pointer}
.k-palette td.k-item:hover  { box-shadow:inset 0 0 0 1px var(--border-color)}