cronapp-framework-mobile-js 2.9.6-SP.4 → 2.9.6-SP.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,16 +12,17 @@
12
12
  --textSmallSize: 10px;
13
13
  --textNormalSize: 12px;
14
14
  --textMediumSize: 16px;
15
- --textBigSize: 22px;
15
+ --textSmallTitle: 18px;
16
+ --textBigSize: 24px;
16
17
  --textExtraBigSize: 28px;
17
- --textFullSize: 34px;
18
+ --textFullSize: 36px;
18
19
 
19
20
  --textColor10: #fbfbfb;
20
21
  --textColor20: #f7f7f7;
21
22
  --textColor30: #f4f4f4;
22
23
  --textColor40: #f0f0f0;
23
24
  --textColor50: #d2d2d2;
24
- --textColor60: #5F5F5F;
25
+ --textColor60: #5f5f5f;
25
26
  --textColor70: #434343;
26
27
 
27
28
  /* Icon Size */
@@ -39,11 +40,11 @@
39
40
  --menuItemIconWidth: 25px;
40
41
 
41
42
  /* Background */
42
- --backgroundColor10: #CED0D2;
43
+ --backgroundColor10: #ced0d2;
43
44
  --backgroundColor20: #a3a3a3;
44
45
  --backgroundColor30: #546270;
45
46
  --backgroundColor40: #090f13;
46
- --backgroundColor50: #080d11;
47
+ --backgroundColor50: #3a434b;
47
48
  --backgroundColor60: #070b0e;
48
49
  --backgroundColor70: #05080a;
49
50
 
@@ -81,7 +82,7 @@
81
82
  --colorDefault20: #b0b1b1;
82
83
  --colorDefault30: #434343;
83
84
  --colorDefault40: #262c32;
84
- --colorDefault50: #252E36;
85
+ --colorDefault50: #252e36;
85
86
  --colorDefault60: #1c2025;
86
87
  --colorDefault70: #15181b;
87
88
  --textColorDefault10: #434343;
@@ -99,7 +100,7 @@
99
100
  --colorPrimary40: #197fdd;
100
101
  --colorPrimary50: #166fc2;
101
102
  --colorPrimary60: #125da2;
102
- --colorPrimary70: #09467F;
103
+ --colorPrimary70: #09467f;
103
104
  --textColorPrimary10: #838383;
104
105
  --textColorPrimary20: #b0b0b0;
105
106
  --textColorPrimary30: #d2d2d2;
@@ -115,7 +116,7 @@
115
116
  --colorSuccess40: #2ffc2b;
116
117
  --colorSuccess50: #29dd26;
117
118
  --colorSuccess60: #22b920;
118
- --colorSuccess70: #108D0D;
119
+ --colorSuccess70: #108d0d;
119
120
  --textColorSuccess10: #838383;
120
121
  --textColorSuccess20: #b0b0b0;
121
122
  --textColorSuccess30: #d2d2d2;
@@ -130,7 +131,7 @@
130
131
  --colorWarning30: #f7ae7c;
131
132
  --colorWarning40: #f58d11;
132
133
  --colorWarning50: #d77b0f;
133
- --colorWarning60: #B46406;
134
+ --colorWarning60: #b46406;
134
135
  --colorWarning70: #864d09;
135
136
  --textColorWarning10: #838383;
136
137
  --textColorWarning20: #b0b0b0;
@@ -146,7 +147,7 @@
146
147
  --colorDanger30: #f48585;
147
148
  --colorDanger40: #f03a3a;
148
149
  --colorDanger50: #d23333;
149
- --colorDanger60: #7E2121;
150
+ --colorDanger60: #7e2121;
150
151
  --colorDanger70: #832020;
151
152
  --textColorDanger10: #838383;
152
153
  --textColorDanger20: #b0b0b0;
@@ -159,11 +160,11 @@
159
160
  /* Color - Royal (mobile) */
160
161
  --colorRoyal10: #d5d7dc;
161
162
  --colorRoyal20: #5487bd;
162
- --colorRoyal30: #394C5E;
163
+ --colorRoyal30: #394c5e;
163
164
  --colorRoyal40: #0e3760;
164
165
  --colorRoyal50: #0c3054;
165
166
  --colorRoyal60: #0a2846;
166
- --colorRoyal70: #1A2E43;
167
+ --colorRoyal70: #1a2e43;
167
168
  --textColorRoyal10: #838383;
168
169
  --textColorRoyal20: #b0b0b0;
169
170
  --textColorRoyal30: #d2d2d2;
@@ -177,8 +178,8 @@
177
178
  --colorCalm20: #68f8f1;
178
179
  --colorCalm30: #4eebe3;
179
180
  --colorCalm40: #44e1d8;
180
- --colorCalm50: #00ABC2;
181
- --colorCalm60: #169F97;
181
+ --colorCalm50: #00abc2;
182
+ --colorCalm60: #169f97;
182
183
  --colorCalm70: #077988;
183
184
  --textColorCalm10: #838383;
184
185
  --textColorCalm20: #b0b0b0;
@@ -194,7 +195,7 @@
194
195
  --colorLight30: #aebbc7;
195
196
  --colorLight40: #8da0b2;
196
197
  --colorLight50: #7b8c9c;
197
- --colorLight60: #303B46;
198
+ --colorLight60: #303b46;
198
199
  --colorLight70: #4d5861;
199
200
  --textColorLight10: #838383;
200
201
  --textColorLight20: #677582;
@@ -203,12 +204,13 @@
203
204
  --textColorLight50: #f4f4f4;
204
205
  --textColorLight60: #f7f7f7;
205
206
  --textColorLight70: #fbfbfb;
207
+
206
208
  /* Color - Stable (mobile) */
207
209
  --colorStable10: #e1e1e1;
208
210
  --colorStable20: #c6c6c6;
209
211
  --colorStable30: #a7a7a7;
210
212
  --colorStable40: #818181;
211
- --colorStable50: #4D4D4D;
213
+ --colorStable50: #4d4d4d;
212
214
  --colorStable60: #5f5f5f;
213
215
  --colorStable70: #3e4042;
214
216
  --textColorStable10: #838383;
@@ -224,9 +226,9 @@
224
226
  --colorDark20: #999999;
225
227
  --colorDark30: #5e5e5e;
226
228
  --colorDark40: #000000;
227
- --colorDark50: #0A141E;
229
+ --colorDark50: #0a141e;
228
230
  --colorDark60: #000000;
229
- --colorDark70: #000000;
231
+ --colorDark70: #0f1e2e;
230
232
  --textColorDark10: #838383;
231
233
  --textColorDark20: #b0b0b0;
232
234
  --textColorDark30: #d2d2d2;
@@ -236,26 +238,26 @@
236
238
  --textColorDark70: #fbfbfb;
237
239
 
238
240
  /* Color - Neutral (web e mobile) */
239
- --colorNeutral00: #FFFFFF;
240
- --colorNeutral10: #F1F1F1;
241
- --colorNeutral20: #E3E3E3;
242
- --colorNeutral30: #D5D5D5;
243
- --colorNeutral40: #C7C7C7;
244
- --colorNeutral50: #B9B9B9;
245
- --colorNeutral60: #ACACAC;
246
- --colorNeutral70: #9E9E9E;
241
+ --colorNeutral00: #ffffff;
242
+ --colorNeutral10: #f1f1f1;
243
+ --colorNeutral20: #e3e3e3;
244
+ --colorNeutral30: #d5d5d5;
245
+ --colorNeutral40: #c7c7c7;
246
+ --colorNeutral50: #b9b9b9;
247
+ --colorNeutral60: #acacac;
248
+ --colorNeutral70: #9e9e9e;
247
249
  --colorNeutral80: #909090;
248
250
  --colorNeutral90: #828282;
249
251
  --colorNeutral100: #747474;
250
252
  --colorNeutral110: #666666;
251
- --colorNeutral120: #5D5D5D;
253
+ --colorNeutral120: #5d5d5d;
252
254
  --colorNeutral130: #535353;
253
- --colorNeutral140: #4A4A4A;
255
+ --colorNeutral140: #4a4a4a;
254
256
  --colorNeutral150: #414141;
255
257
  --colorNeutral160: #383838;
256
- --colorNeutral170: #2E2E2E;
258
+ --colorNeutral170: #2e2e2e;
257
259
  --colorNeutral180: #252525;
258
- --colorNeutral190: #1C1C1C;
260
+ --colorNeutral190: #1c1c1c;
259
261
  --colorNeutral200: #131313;
260
262
  --colorNeutral210: #090909;
261
263
  --colorNeutral220: #000000;
@@ -263,17 +265,17 @@
263
265
  /* === Variables used exclusively in the color palette property === */
264
266
 
265
267
  /* Components - Button */
266
- --btnDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
267
- --btnPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
268
- --btnSuccess: linear-gradient(180deg, #2FFC2B 0%, #0E890B 100%);
269
- --btnCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
270
- --btnWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
271
- --btnDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
272
- --btnLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
268
+ --btnDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
269
+ --btnPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
270
+ --btnSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
271
+ --btnCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
272
+ --btnWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
273
+ --btnDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
274
+ --btnLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
273
275
  --btnLink: var(--colorCalm60, #2fc2ba);
274
- --btnStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
275
- --btnRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
276
- --btnDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
276
+ --btnStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
277
+ --btnRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
278
+ --btnDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
277
279
 
278
280
  --textColorDefault: var(--textColorDefault40, #f0f0f0);
279
281
  --textColorPrimary: var(--textColorPrimary40, #f0f0f0);
@@ -299,28 +301,28 @@
299
301
  --borderBtnDark: transparent;
300
302
 
301
303
  /* Components - Text color */
302
- --colorDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
303
- --colorPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
304
- --colorSuccess: linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%);
305
- --colorCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
306
- --colorWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
307
- --colorDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
308
- --colorLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
309
- --colorStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
310
- --colorRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
311
- --colorDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
304
+ --colorDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
305
+ --colorPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
306
+ --colorSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
307
+ --colorCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
308
+ --colorWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
309
+ --colorDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
310
+ --colorLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
311
+ --colorStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
312
+ --colorRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
313
+ --colorDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
312
314
 
313
315
  /* Components - Checkbox */
314
- --checkboxDefault: linear-gradient(180deg, #262C32 0%, #2D3843 100%);
315
- --checkboxPrimary: linear-gradient(180deg, #197FDD 0%, #08427A 100%);
316
- --checkboxSuccess: linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%);
317
- --checkboxCalm: linear-gradient(180deg, #44E1D8 0%, #25968F 100%);
318
- --checkboxWarning: linear-gradient(180deg, #F58D11 0%, #B36305 100%);
319
- --checkboxDanger: linear-gradient(180deg, #F03A3A 0%, #7E2121 100%);
320
- --checkboxLight: linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%);
321
- --checkboxStable: linear-gradient(180deg, #818181 0%, #3E3E3E 100%);
322
- --checkboxRoyal: linear-gradient(180deg, #0E3760 0%, #2D3843 100%);
323
- --checkboxDark: linear-gradient(180deg, #000000 0%, #0F1E2E 100%);
316
+ --checkboxDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
317
+ --checkboxPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
318
+ --checkboxSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
319
+ --checkboxCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
320
+ --checkboxWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
321
+ --checkboxDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
322
+ --checkboxLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
323
+ --checkboxStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
324
+ --checkboxRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
325
+ --checkboxDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
324
326
 
325
327
  --borderCheckboxDefault: transparent;
326
328
  --borderCheckboxPrimary: transparent;
@@ -334,39 +336,39 @@
334
336
  --borderCheckboxDark: transparent;
335
337
 
336
338
  /* Components - Toggle */
337
- --toggleDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
338
- --togglePrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
339
- --toggleSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
340
- --toggleCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
341
- --toggleWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
342
- --toggleDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
343
- --toggleLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
344
- --toggleStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
345
- --toggleRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
346
- --toggleDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
347
-
348
- --borderToggleDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
349
- --borderTogglePrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
350
- --borderToggleSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
351
- --borderToggleCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
352
- --borderToggleWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
353
- --borderToggleDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
354
- --borderToggleLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
355
- --borderToggleStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
356
- --borderToggleRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
357
- --borderToggleDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
339
+ --toggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
340
+ --togglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
341
+ --toggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
342
+ --toggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
343
+ --toggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
344
+ --toggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
345
+ --toggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
346
+ --toggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
347
+ --toggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
348
+ --toggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
349
+
350
+ --borderToggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
351
+ --borderTogglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
352
+ --borderToggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
353
+ --borderToggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
354
+ --borderToggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
355
+ --borderToggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
356
+ --borderToggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
357
+ --borderToggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
358
+ --borderToggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
359
+ --borderToggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
358
360
 
359
361
  /* Components - Tabs - crn-ion-segment */
360
- --bgDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
361
- --bgPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
362
- --bgSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
363
- --bgCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
364
- --bgWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
365
- --bgDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
366
- --bgLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
367
- --bgStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
368
- --bgRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
369
- --bgDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
362
+ --bgDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
363
+ --bgPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
364
+ --bgSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
365
+ --bgCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
366
+ --bgWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
367
+ --bgDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
368
+ --bgLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
369
+ --bgStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
370
+ --bgRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
371
+ --bgDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
370
372
 
371
373
  --borderActiveBackgroundDefault: transparent;
372
374
  --borderActiveBackgroundPrimary: transparent;
@@ -379,16 +381,17 @@
379
381
  --borderActiveBackgroundRoyal: transparent;
380
382
  --borderActiveBackgroundDark: transparent;
381
383
 
382
- --activeBackgroundDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
383
- --activeBackgroundPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
384
- --activeBackgroundSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
385
- --activeBackgroundCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
386
- --activeBackgroundWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
387
- --activeBackgroundDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
388
- --activeBackgroundLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
389
- --activeBackgroundStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
390
- --activeBackgroundRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
391
- --activeBackgroundDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
384
+ --activeBackgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
385
+ --activeBackgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
386
+ --activeBackgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
387
+ --activeBackgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
388
+ --activeBackgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
389
+ --activeBackgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
390
+ --activeBackgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
391
+ --activeBackgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
392
+ --activeBackgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
393
+ --activeBackgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
394
+
392
395
  --ionSegmentDefault: var(--textColorPrimary40, #f0f0f0);
393
396
  --ionSegmentPrimary: var(--textColorDefault40, #f0f0f0);
394
397
  --ionSegmentSuccess: var(--textColorSuccess40, #f0f0f0);
@@ -400,63 +403,63 @@
400
403
  --ionSegmentRoyal: var(--textColorRoyal40, #f0f0f0);
401
404
  --ionSegmentDark: var(--textColorDark40, #f0f0f0);
402
405
 
403
- --iconThemeLightDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
404
- --iconThemeLightPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
405
- --iconThemeLightSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
406
- --iconThemeLightCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
407
- --iconThemeLightWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
408
- --iconThemeLightDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
409
- --iconThemeLightLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
410
- --iconThemeLightStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
411
- --iconThemeLightRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
412
- --iconThemeLightDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
406
+ --iconThemeLightDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
407
+ --iconThemeLightPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
408
+ --iconThemeLightSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
409
+ --iconThemeLightCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
410
+ --iconThemeLightWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
411
+ --iconThemeLightDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
412
+ --iconThemeLightLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
413
+ --iconThemeLightStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
414
+ --iconThemeLightRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
415
+ --iconThemeLightDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
413
416
 
414
417
  /* Components - Old Tabs - pallete false */
415
- --tabsDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
416
- --tabsPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
417
- --tabsSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
418
- --tabsCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
419
- --tabsWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
420
- --tabsDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
421
- --tabsLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
422
- --tabsStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
423
- --tabsRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
424
- --tabsDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
418
+ --tabsDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
419
+ --tabsPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
420
+ --tabsSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
421
+ --tabsCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
422
+ --tabsWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
423
+ --tabsDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
424
+ --tabsLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
425
+ --tabsStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
426
+ --tabsRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
427
+ --tabsDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
425
428
 
426
429
  /* Components - Header */
427
- --barDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
428
- --barPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
429
- --barSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
430
- --barCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
431
- --barWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
432
- --barDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
433
- --barLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
434
- --barStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
435
- --barRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
436
- --barDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
430
+ --barDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
431
+ --barPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
432
+ --barSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
433
+ --barCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
434
+ --barWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
435
+ --barDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
436
+ --barLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
437
+ --barStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
438
+ --barRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
439
+ --barDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1e2e) 100%);
437
440
 
438
441
  /* Componentes - Footer with icon */
439
- --backgroundDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
440
- --backgroundPrimary: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
441
- --backgroundSuccess: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
442
- --backgroundCalm: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
443
- --backgroundWarning: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
444
- --backgroundDanger: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
445
- --backgroundLight: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
446
- --backgroundStable: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
447
- --backgroundRoyal: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
448
- --backgroundDark: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
449
-
450
- --tabsIconDefault: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
451
- --tabsIconPrimary: var(--textColorDefault40, #f0f0f0);
452
- --tabsIconSuccess: var(--textColorSuccess40, #f0f0f0);
453
- --tabsIconCalm: var(--textColorCalm40, #f0f0f0);
454
- --tabsIconWarning: var(--textColorWarning40, #f0f0f0);
455
- --tabsIconDanger: var(--textColorDanger40, #f0f0f0);
456
- --tabsIconLight: var(--textColorLight40, #f0f0f0);
457
- --tabsIconStable: var(--textColorStable40, #f0f0f0);
458
- --tabsIconRoyal: var(--textColorRoyal40, #f0f0f0);
459
- --tabsIconDark: var(--textColorDark40, #f0f0f0);
442
+ --backgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
443
+ --backgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
444
+ --backgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
445
+ --backgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
446
+ --backgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
447
+ --backgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
448
+ --backgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
449
+ --backgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
450
+ --backgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
451
+ --backgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
452
+
453
+ --tabsIconDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
454
+ --tabsIconPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
455
+ --tabsIconSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
456
+ --tabsIconCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
457
+ --tabsIconWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
458
+ --tabsIconDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
459
+ --tabsIconLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
460
+ --tabsIconStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
461
+ --tabsIconRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
462
+ --tabsIconDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
460
463
  /* End - Variables used exclusively in the color palette property */
461
464
  }
462
465
 
@@ -473,25 +476,42 @@ h6,
473
476
  .h5,
474
477
  .h6 {
475
478
  font-family: var(--fontFamily, "Open Sans", "Arial", sans-serif);
479
+ color: var(--textColor40, #f0f0f0);
480
+ }
481
+
482
+ h1 {
483
+ font-size: var(--textFullSize, 36px);
484
+ }
485
+
486
+ .h3 {
487
+ font-size: var(--textBigSize, 24px);
488
+ }
489
+
490
+ .h5 {
491
+ font-size: var(--textSmallTitle, 18px);
492
+ }
493
+
494
+ h2 {
495
+ font-size: 18px;
476
496
  }
477
497
 
478
498
  a,
479
499
  a:focus,
480
500
  a:active,
481
501
  a:hover {
482
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
502
+ color: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
483
503
  }
484
504
 
485
505
  .light,
486
506
  a.light,
487
507
  .color-light {
488
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
508
+ color: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
489
509
  }
490
510
 
491
511
  .stable,
492
512
  a.stable,
493
513
  .color-stable {
494
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
514
+ color: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
495
515
  }
496
516
 
497
517
  /* Login */
@@ -553,8 +573,8 @@ a.stable,
553
573
 
554
574
  /* Cabeçalho */
555
575
  .bar.bar-default {
556
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
557
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
576
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
577
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
558
578
  color: var(--textColorPrimary40, #f0f0f0);
559
579
  }
560
580
 
@@ -564,8 +584,8 @@ a.stable,
564
584
  }
565
585
 
566
586
  .bar.bar-positive {
567
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
568
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
587
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
588
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
569
589
  color: var(--textColorDefault40, #f0f0f0);
570
590
  }
571
591
 
@@ -576,22 +596,30 @@ a.stable,
576
596
 
577
597
  /* Menu */
578
598
  .menu-view {
579
- background: var(--colorLight60, #303B46);
599
+ background: var(--colorLight60, #303b46);
580
600
  color: var(--textColor10, #f0f0f0);
581
601
  }
582
602
 
603
+ #menu-blue .item:hover {
604
+ background: var(--backgroundColor30, #546270);
605
+ }
606
+
607
+ #menu-blue .item:active,
608
+ #menu-blue .item.actived {
609
+ background: var(--backgroundColor50, #3a434b);
610
+ }
611
+
583
612
  /* Button Positive */
584
613
  .button.button-positive {
585
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
614
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
586
615
  }
587
616
 
588
617
  .button.button-positive:active,
589
618
  .button.button-positive.activated {
590
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
619
+ background: var(--colorPrimary70, #09467f);
591
620
  }
592
621
 
593
622
  /* Light - Outline */
594
-
595
623
  .button.button-light.button-outline {
596
624
  border-color: none;
597
625
  }
@@ -622,66 +650,154 @@ a.stable,
622
650
  }
623
651
 
624
652
  /* Rodapé com ícone */
625
-
626
653
  .tabs-striped.background-default .tabs {
627
- background: var(--textColorDefault40, #f0f0f0);
654
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
655
+ }
656
+
657
+ .tabs-striped.background-positive .tabs {
658
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
659
+ }
660
+
661
+ .tabs-striped.background-balanced .tabs {
662
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
663
+ }
664
+
665
+ .tabs-striped.background-calm .tabs {
666
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
667
+ }
668
+
669
+ .tabs-striped.background-energized .tabs {
670
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
671
+ }
672
+
673
+ .tabs-striped.background-assertive .tabs {
674
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
675
+ }
676
+
677
+ .tabs-striped.background-light .tabs {
678
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
679
+ }
680
+
681
+ .tabs-striped.background-stable .tabs {
682
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
683
+ }
684
+
685
+ .tabs-striped.background-royal .tabs {
686
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
687
+ }
688
+
689
+ .tabs-striped.background-dark .tabs {
690
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
628
691
  }
629
692
 
630
693
  .tabs-striped.tabs-icon-default .tab-item {
631
694
  color: var(--textColorDefault40, #f0f0f0);
632
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
695
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
633
696
  opacity: 0.5;
634
697
  }
635
698
 
699
+ /* Rodapé com botões*/
700
+ .bar.bar-default.bar-footer,
701
+ .bar.bar-default {
702
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
703
+ }
704
+
705
+ .bar.bar-positive.bar-footer,
706
+ .bar.bar-positive {
707
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
708
+ }
709
+
710
+ .bar.bar-balanced.bar-footer,
711
+ .bar.bar-balanced {
712
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
713
+ }
714
+
715
+ .bar.bar-calm.bar-footer,
716
+ .bar.bar-calm {
717
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
718
+ }
719
+
720
+ .bar.bar-energized.bar-footer,
721
+ .bar.bar-energized {
722
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
723
+ }
724
+
725
+ .bar.bar-assertive.bar-footer,
726
+ .bar.bar-assertive {
727
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
728
+ }
729
+
730
+ .bar.bar-light.bar-footer,
731
+ .bar.bar-light {
732
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
733
+ }
734
+
735
+ .bar.bar-stable.bar-footer,
736
+ .bar.bar-stable {
737
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
738
+ }
739
+
740
+ .bar.bar-royal.bar-footer,
741
+ .bar.bar-royal {
742
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
743
+ }
744
+
745
+ .bar.bar-dark.bar-footer,
746
+ .bar.bar-dark {
747
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
748
+ }
749
+
636
750
  .item-input .icon {
637
751
  font-size: 12px;
638
752
  }
639
753
 
640
- #menu-blue .item:hover {
641
- background: var(--backgroundColor30, #f4f4f4);
754
+ .button.button-default {
755
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
642
756
  }
643
757
 
644
758
  .button.button-default:hover {
645
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
759
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
760
+ box-shadow: 0px 0px 3px 0px #3a4753;
646
761
  }
647
762
 
648
- .button.button-default:active {
649
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
763
+ .button.button-default:active,
764
+ .button.button-default.activated {
765
+ background: var(--colorDefault50, #252e36);
650
766
  }
651
767
 
652
768
  .login-mobile .button.button-light {
653
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
769
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
654
770
  color: var(--textColorWarning40, #f0f0f0);
655
771
  border-radius: 20px;
656
772
  }
657
773
 
658
774
  .login-mobile .button.button-light:hover {
659
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
775
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
660
776
  color: var(--textColorWarning40, #f0f0f0);
661
777
  }
662
778
 
663
779
  .login-mobile .button.button-light:active {
664
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
780
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
665
781
  color: var(--textColorWarning40, #f0f0f0);
666
782
  }
667
783
 
668
784
  .button#button-reset-password {
669
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
785
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
670
786
  color: var(--textColorWarning40, #ffffff);
671
787
  }
672
788
 
673
789
  .button#button-reset-password:hover {
674
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
790
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
675
791
  color: var(--textColorWarning40, #f0f0f0);
676
792
  }
677
793
 
678
794
  .button#button-reset-password:active {
679
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
795
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
680
796
  color: var(--textColorWarning40, #f0f0f0);
681
797
  }
682
798
 
683
799
  .item-radio input:checked+.radio-content .item-content {
684
- background: var(--backgroundColor40, #f2f2f2);
800
+ background: var(--backgroundColor40, #090f13);
685
801
  color: var(--textColor40, #f0f0f0);
686
802
  }
687
803
 
@@ -702,38 +818,47 @@ a.stable,
702
818
 
703
819
  input[placeholder]:not([placeholder=""])::placeholder {
704
820
  /* Chrome, Firefox, Opera, Safari 10.1+ */
705
- color: var(--textColor60, #5F5F5F);
821
+ color: var(--textColor60, #5f5f5f);
706
822
  opacity: 1;
707
823
  /* Firefox */
708
824
  }
709
825
 
710
826
  input:-ms-input-placeholder {
711
827
  /* Internet Explorer 10-11 */
712
- color: var(--textColor60, #5F5F5F);
828
+ color: var(--textColor60, #5f5f5f);
713
829
  }
714
830
 
715
831
  input::-ms-input-placeholder {
716
832
  /* Microsoft Edge */
717
- color: var(--textColor60, #5F5F5F);
833
+ color: var(--textColor60, #5f5f5f);
718
834
  margin-left: 10px;
719
835
  }
720
836
 
721
837
  .list-inset .item.item-input input {
722
- background: var(--backgroundColor10, #CED0D2);
838
+ background: var(--backgroundColor10, #ced0d2);
723
839
  color: var(--textColor70, #434343);
724
840
  border-radius: 20px;
841
+ border-bottom: 0;
725
842
  }
726
843
 
727
844
  .modal .item {
728
845
  border-width: 1px;
729
846
  border-color: none;
730
- background: var(--backgroundColor10, #CED0D2);
847
+ background: var(--backgroundColor10, #ced0d2);
731
848
  color: var(--textColor40, #f0f0f0);
732
849
  }
733
850
 
851
+ .k-widget.k-window .k-window-titlebar .k-window-title {
852
+ color: var(--textColor40, #f0f0f0);
853
+ margin-top: 23px;
854
+ }
855
+
856
+ .k-widget.k-window {
857
+ border-radius: 20px;
858
+ }
734
859
 
735
860
  .item-input-wrapper {
736
- background: var(--backgroundColor40, #f2f2f2);
861
+ background: var(--backgroundColor40, #090f13);
737
862
  }
738
863
 
739
864
  .ion-search:before {
@@ -759,6 +884,10 @@ input[type="password"] {
759
884
  letter-spacing: 0px;
760
885
  }
761
886
 
887
+ .button.button {
888
+ border-radius: 20px;
889
+ }
890
+
762
891
  button#crn-button-signup {
763
892
  letter-spacing: 0px;
764
893
  border-radius: 0px;
@@ -789,7 +918,7 @@ button#crn-button-signup:hover {
789
918
 
790
919
  /*Default*/
791
920
  .button.button-default.button-outline {
792
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
921
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
793
922
  border-color: transparent;
794
923
  color: var(--textColor40, #f0f0f0);
795
924
  }
@@ -799,27 +928,32 @@ button#crn-button-signup:hover {
799
928
  }
800
929
 
801
930
  .button.button-default.button-outline:active {
802
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
931
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
803
932
  }
804
933
 
805
934
  .button.button-default.button-outline i {
806
935
  color: var(--textColor40, #f0f0f0);
807
936
  }
808
937
 
809
- .button.button-default {
810
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
811
- border-radius: 20px;
812
- }
813
-
814
938
  /*Secundary*/
815
939
  .button.button-positive {
816
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
940
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
941
+ }
942
+
943
+ .button.button-positive:hover {
944
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
945
+ box-shadow: 0px 0px 3px 0px #187ad4;
946
+ }
947
+
948
+ .button.button-positive:active {
949
+ background: var(--colorPrimary70, #09467f);
817
950
  }
818
951
 
819
952
  .button.button-positive.button-outline {
820
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
953
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
821
954
  border-color: transparent;
822
955
  color: var(--textColorDefault40, #f0f0f0);
956
+ border-bottom: 0;
823
957
  }
824
958
 
825
959
  .button.button-positive.button-outline span {
@@ -827,7 +961,8 @@ button#crn-button-signup:hover {
827
961
  }
828
962
 
829
963
  .button.button-positive.button-outline:active {
830
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
964
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
965
+ border-bottom: 0;
831
966
  }
832
967
 
833
968
  .button.button-positive.button-outline i {
@@ -836,13 +971,23 @@ button#crn-button-signup:hover {
836
971
 
837
972
  /*Success*/
838
973
  .button.button-balanced {
839
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
974
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
975
+ }
976
+
977
+ .button.button-balanced:hover {
978
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
979
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
980
+ }
981
+
982
+ .button.button-balanced:active {
983
+ background: var(--colorSuccess70, #108d0d);
840
984
  }
841
985
 
842
986
  .button.button-balanced.button-outline {
843
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
987
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
844
988
  border-color: transparent;
845
989
  color: var(--textColorDefault40, #f0f0f0);
990
+ border-bottom: 0;
846
991
  }
847
992
 
848
993
  .button.button-balanced.button-outline span {
@@ -850,7 +995,7 @@ button#crn-button-signup:hover {
850
995
  }
851
996
 
852
997
  .button.button-balanced.button-outline:active {
853
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
998
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
854
999
  }
855
1000
 
856
1001
  .button.button-balanced.button-outline i {
@@ -859,13 +1004,23 @@ button#crn-button-signup:hover {
859
1004
 
860
1005
  /*Calm*/
861
1006
  .button.button-calm {
862
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1007
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1008
+ }
1009
+
1010
+ .button.button-calm:hover {
1011
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1012
+ box-shadow: 0px 0px 3px 0px #42dcd3;
1013
+ }
1014
+
1015
+ .button.button-calm:active {
1016
+ background: var(--colorCalm60, #169f97);
863
1017
  }
864
1018
 
865
1019
  .button.button-calm.button-outline {
866
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1020
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
867
1021
  border-color: transparent;
868
1022
  color: var(--textColorDefault40, #f0f0f0);
1023
+ border-bottom: 0;
869
1024
  }
870
1025
 
871
1026
  .button.button-calm.button-outline span {
@@ -873,7 +1028,7 @@ button#crn-button-signup:hover {
873
1028
  }
874
1029
 
875
1030
  .button.button-calm.button-outline:active {
876
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1031
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
877
1032
  }
878
1033
 
879
1034
  .button.button-calm.button-outline i {
@@ -882,13 +1037,23 @@ button#crn-button-signup:hover {
882
1037
 
883
1038
  /*Warning*/
884
1039
  .button.button-energized {
885
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1040
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1041
+ }
1042
+
1043
+ .button.button-energized:hover {
1044
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1045
+ box-shadow: 0px 0px 3px 0px #f58d11;
1046
+ }
1047
+
1048
+ .button.button-energized:active {
1049
+ background: var(--colorWarning60, #b46406);
886
1050
  }
887
1051
 
888
1052
  .button.button-energized.button-outline {
889
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1053
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
890
1054
  border-color: transparent;
891
1055
  color: var(--textColorDefault40, #f0f0f0);
1056
+ border-bottom: 0;
892
1057
  }
893
1058
 
894
1059
  .button.button-energized.button-outline span {
@@ -896,7 +1061,7 @@ button#crn-button-signup:hover {
896
1061
  }
897
1062
 
898
1063
  .button.button-energized.button-outline:active {
899
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1064
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
900
1065
  }
901
1066
 
902
1067
  .button.button-energized.button-outline i {
@@ -905,11 +1070,21 @@ button#crn-button-signup:hover {
905
1070
 
906
1071
  /*Danger*/
907
1072
  .button.button-assertive {
908
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1073
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1074
+ border-bottom: 0;
1075
+ }
1076
+
1077
+ .button.button-assertive:hover {
1078
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1079
+ box-shadow: 0px 0px 3px 0px #dE3636;
1080
+ }
1081
+
1082
+ .button.button-assertive:active {
1083
+ background: var(--colorDanger60, #7e2121);
909
1084
  }
910
1085
 
911
1086
  .button.button-assertive.button-outline {
912
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1087
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
913
1088
  border-color: transparent;
914
1089
  color: var(--textColorDanger40, #f0f0f0);
915
1090
  }
@@ -919,7 +1094,7 @@ button#crn-button-signup:hover {
919
1094
  }
920
1095
 
921
1096
  .button.button-assertive.button-outline:active {
922
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1097
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
923
1098
  }
924
1099
 
925
1100
  .button.button-assertive.button-outline i {
@@ -928,11 +1103,21 @@ button#crn-button-signup:hover {
928
1103
 
929
1104
  /*Light*/
930
1105
  .button.button-light {
931
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1106
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1107
+ border-bottom: 0;
1108
+ }
1109
+
1110
+ .button.button-light:hover {
1111
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1112
+ box-shadow: 0px 0px 3px 0px #8da0b2;
1113
+ }
1114
+
1115
+ .button.button-light:active {
1116
+ background: var(--colorLight60, #303b46);
932
1117
  }
933
1118
 
934
1119
  .button.button-light.button-outline {
935
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1120
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
936
1121
  border-color: transparent;
937
1122
  color: var(--textColorLight40, #f0f0f0);
938
1123
  }
@@ -942,7 +1127,7 @@ button#crn-button-signup:hover {
942
1127
  }
943
1128
 
944
1129
  .button.button-light.button-outline:active {
945
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1130
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
946
1131
  }
947
1132
 
948
1133
  .button.button-light.button-outline i {
@@ -951,11 +1136,22 @@ button#crn-button-signup:hover {
951
1136
 
952
1137
  /*Stable*/
953
1138
  .button.button-stable {
954
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1139
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1140
+ border-bottom: 0;
1141
+ }
1142
+
1143
+ .button.button-stable:hover {
1144
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1145
+ box-shadow: 0px 0px 3px 0px #7b7b7b;
1146
+ }
1147
+
1148
+ .button.button-stable:active,
1149
+ .button.button-stable.activated {
1150
+ background: var(--colorStable50, #4d4d4d);
955
1151
  }
956
1152
 
957
1153
  .button.button-stable.button-outline {
958
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1154
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
959
1155
  border-color: transparent;
960
1156
  color: var(--textColorStable40, #434343);
961
1157
  }
@@ -965,7 +1161,7 @@ button#crn-button-signup:hover {
965
1161
  }
966
1162
 
967
1163
  .button.button-stable.button-outline:active {
968
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1164
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
969
1165
  }
970
1166
 
971
1167
  .button.button-stable.button-outline i {
@@ -974,11 +1170,22 @@ button#crn-button-signup:hover {
974
1170
 
975
1171
  /*Royal*/
976
1172
  .button.button-royal {
977
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1173
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1174
+ border-bottom: 0;
1175
+ }
1176
+
1177
+ .button.button-royal:hover {
1178
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1179
+ box-shadow: 0px 0px 3px 0px #11375d;
1180
+ }
1181
+
1182
+ .button.button-royal:active,
1183
+ .button.button-royal.activated {
1184
+ background: var(--colorRoyal70, #1a2e43);
978
1185
  }
979
1186
 
980
1187
  .button.button-royal.button-outline {
981
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1188
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
982
1189
  border-color: transparent;
983
1190
  color: var(--textColorRoyal40, #f0f0f0);
984
1191
  }
@@ -988,7 +1195,7 @@ button#crn-button-signup:hover {
988
1195
  }
989
1196
 
990
1197
  .button.button-royal.button-outline:active {
991
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1198
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
992
1199
  }
993
1200
 
994
1201
  .button.button-royal.button-outline i {
@@ -998,14 +1205,27 @@ button#crn-button-signup:hover {
998
1205
  /*Dark*/
999
1206
 
1000
1207
  .button.button-dark {
1001
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1208
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1209
+ }
1210
+
1211
+ .button.button-dark:hover {
1212
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1213
+ box-shadow: 0px 0px 3px 0px #132639;
1214
+ }
1002
1215
 
1216
+ .button.button-dark:active,
1217
+ .button.button-dark.activated {
1218
+ background: var(--colorDark50, #0a141e);
1219
+ border-bottom: 0;
1220
+ border-top: 0;
1003
1221
  }
1004
1222
 
1005
1223
  .button.button-dark.button-outline {
1006
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1224
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1007
1225
  border-color: transparent;
1008
1226
  color: var(--textColorDark40, #f0f0f0);
1227
+ border-bottom: 0;
1228
+ border-top: 0;
1009
1229
  }
1010
1230
 
1011
1231
  .button.button-dark.button-outline span {
@@ -1013,7 +1233,7 @@ button#crn-button-signup:hover {
1013
1233
  }
1014
1234
 
1015
1235
  .button.button-dark.button-outline:active {
1016
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1236
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1017
1237
  }
1018
1238
 
1019
1239
  .button.button-dark.button-outline i {
@@ -1036,7 +1256,7 @@ button#crn-button-signup:hover {
1036
1256
  }
1037
1257
 
1038
1258
  .button#button-reset-password {
1039
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1259
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1040
1260
  color: var(--textColorWarning40, #ffffff);
1041
1261
  border-radius: 20px;
1042
1262
  }
@@ -1052,7 +1272,7 @@ button#crn-button-signup {
1052
1272
  justify-content: center;
1053
1273
  align-items: center;
1054
1274
  display: flex;
1055
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1275
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1056
1276
  }
1057
1277
 
1058
1278
  .crn-ion-segment-light ul li a,
@@ -1064,12 +1284,406 @@ button#crn-button-signup {
1064
1284
  }
1065
1285
 
1066
1286
  .item h3:last-child,
1067
- .item h3,
1068
- .item h2 {
1287
+ .item h3 {
1069
1288
  color: var(--textColorDark40, #f0f0f0);
1070
1289
  }
1071
1290
 
1072
- .item-icon-left .icon:before,
1073
- .item-complex .item-content {
1291
+ /*Abas*/
1292
+ .crn-ion-segment-classic ul li a {
1293
+ border-radius: 20px;
1294
+ }
1295
+
1296
+ .crn-ion-segment-classic ul.active-background-default li.active a {
1297
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1298
+ color: var(--textColor40, #f0f0f0);
1299
+ }
1300
+
1301
+ .crn-ion-segment-classic ul.active-background-positive li.active a {
1302
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1303
+ color: var(--textColor40, #f0f0f0);
1304
+ }
1305
+
1306
+ .crn-ion-segment-classic ul.active-background-balanced li.active a {
1307
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1308
+ color: var(--textColor40, #f0f0f0);
1309
+ }
1310
+
1311
+ .crn-ion-segment-classic ul.active-background-calm li.active a {
1312
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1313
+ color: var(--textColor40, #f0f0f0);
1314
+ }
1315
+
1316
+ .crn-ion-segment-classic ul.active-background-energized li.active a {
1317
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1318
+ color: var(--textColor40, #f0f0f0);
1319
+ }
1320
+
1321
+ .crn-ion-segment-classic ul.active-background-assertive li.active a {
1322
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1323
+ color: var(--textColor40, #f0f0f0);
1324
+ }
1325
+
1326
+ .crn-ion-segment-classic ul.active-background-light li.active a {
1327
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1328
+ color: var(--textColor40, #f0f0f0);
1329
+ }
1330
+
1331
+ .crn-ion-segment-classic ul.active-background-stable li.active a {
1332
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1333
+ color: var(--textColor40, #f0f0f0);
1334
+ }
1335
+
1336
+ .crn-ion-segment-classic ul.active-background-royal li.active a {
1337
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1338
+ color: var(--textColor40, #f0f0f0);
1339
+ }
1340
+
1341
+ .crn-ion-segment-classic ul.active-background-dark li.active a {
1342
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1343
+ color: var(--textColor40, #f0f0f0);
1344
+ }
1345
+
1346
+ canvas {
1347
+ background: var(--backgroundColor10, #ced0d2);
1348
+ }
1349
+
1350
+ /* Cores icones*/
1351
+ .default {
1352
+ color: var(--colorDefault40, #262C32);
1353
+ }
1354
+
1355
+ .positive {
1356
+ color: var(--colorPrimary40, #197fdd);
1357
+ }
1358
+
1359
+ .balanced {
1360
+ color: var(--colorSuccess40, #2ffc2b);
1361
+ }
1362
+
1363
+ .calm {
1364
+ color: var(--colorCalm40, #44e1d8);
1365
+ }
1366
+
1367
+ .energized {
1368
+ color: var(--colorWarning40, #f58d11);
1369
+ }
1370
+
1371
+ .assertive {
1372
+ color: var(--colorDanger40, #f03a3a);
1373
+ }
1374
+
1375
+ .light {
1376
+ color: var(--colorLight40, #8da0b2);
1377
+ }
1378
+
1379
+ .stable {
1380
+ color: var(--colorStable40, #818181);
1381
+ }
1382
+
1383
+ .royal {
1384
+ color: var(--colorRoyal40, #0e3760);
1385
+ }
1386
+
1387
+ .dark {
1388
+ color: var(--colorDark40, #000000);
1389
+ }
1390
+
1391
+ /* Cores Links*/
1392
+ .color-default {
1393
+ color: var(--colorDefault40, #262C32);
1394
+ }
1395
+
1396
+ .color-positive {
1397
+ color: var(--colorPrimary40, #197fdd);
1398
+ }
1399
+
1400
+ .color-balanced {
1401
+ color: var(--colorSuccess40, #2ffc2b);
1402
+ }
1403
+
1404
+ .color-calm {
1405
+ color: var(--colorCalm40, #44e1d8);
1406
+ }
1407
+
1408
+ .color-energized {
1409
+ color: var(--colorWarning40, #f58d11);
1410
+ }
1411
+
1412
+ .color-assertive {
1413
+ color: var(--colorDanger40, #f03a3a);
1414
+ }
1415
+
1416
+ .color-light {
1417
+ color: var(--colorLight40, #8da0b2);
1418
+ }
1419
+
1420
+ .color-stable {
1421
+ color: var(--colorStable40, #818181);
1422
+ }
1423
+
1424
+ .color-royal {
1425
+ color: var(--colorRoyal40, #0e3760);
1426
+ }
1427
+
1428
+ .color-dark {
1429
+ color: var(--colorDark40, #000000);
1430
+ }
1431
+
1432
+
1433
+ /*Cores Checkbox*/
1434
+ .checkbox input:before {
1435
+ border-radius: 2px;
1436
+ }
1437
+
1438
+ .checkbox-default input:checked:before {
1439
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1440
+ border-color: var(--colorDefault40, #262c32);
1441
+ border-radius: 2px;
1442
+ }
1443
+
1444
+ .checkbox-positive input:checked:before {
1445
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1446
+ border-color: var(--colorPrimary40, #197fdd);
1447
+ border-radius: 2px;
1448
+ }
1449
+
1450
+ .checkbox-balanced input:checked:before {
1451
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1452
+ border-color: var(--colorSuccess60, #22b920);
1453
+ border-radius: 2px;
1454
+ }
1455
+
1456
+ .checkbox-calm input:checked:before {
1457
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1458
+ border-color: var(--colorCalm40, #44e1d8);
1459
+ border-radius: 2px;
1460
+ }
1461
+
1462
+ .checkbox-energized input:checked:before {
1463
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1464
+ border-color: var(--colorWarning40, #f58d11);
1465
+ border-radius: 2px;
1466
+ }
1467
+
1468
+ .checkbox-assertive input:checked:before {
1469
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1470
+ border-color: var(--colorDanger40, #f03a3a);
1471
+ border-radius: 2px;
1472
+ }
1473
+
1474
+ .checkbox-light input:checked:before {
1475
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1476
+ border-color: var(--colorLight40, #8da0b2);
1477
+ border-radius: 2px;
1478
+ }
1479
+
1480
+ .checkbox-stable input:checked:before {
1481
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1482
+ border-color: var(--colorStable40, #818181);
1483
+ border-radius: 2px;
1484
+ }
1485
+
1486
+ .checkbox-royal input:checked:before {
1487
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1488
+ border-color: var(--colorRoyal40, #0e3760);
1489
+ border-radius: 2px;
1490
+ }
1491
+
1492
+ .checkbox-dark input:checked:before {
1493
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1494
+ border-color: var(--colorDark40, #000000);
1495
+ border-radius: 2px;
1496
+ }
1497
+
1498
+ /*Toogle*/
1499
+ .toggle.toggle-default input:checked+.track {
1500
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1501
+ border-color: var(--colorDefault40, #262c32);
1502
+ }
1503
+
1504
+ .toggle.toggle-positive input:checked+.track {
1505
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1506
+ }
1507
+
1508
+ .toggle.toggle-balanced input:checked+.track {
1509
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1510
+ }
1511
+
1512
+ .toggle.toggle-calm input:checked+.track {
1513
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1514
+ }
1515
+
1516
+ .toggle.toggle-energized input:checked+.track {
1517
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1518
+ }
1519
+
1520
+ .toggle.toggle-assertive input:checked+.track {
1521
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1522
+ }
1523
+
1524
+ .toggle.toggle-light input:checked+.track {
1525
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1526
+ }
1527
+
1528
+ .toggle.toggle-stable input:checked+.track {
1529
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1530
+ }
1531
+
1532
+ .toggle.toggle-royal input:checked+.track {
1533
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1534
+ }
1535
+
1536
+ .toggle.toggle-dark input:checked+.track {
1537
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1538
+ }
1539
+
1540
+ .k-combobox .k-dropdown-wrap .k-input,
1541
+ .k-combobox .k-dropdown-wrap .k-select {
1542
+ background: var(--colorDark50, #0a141e);
1543
+ color: var(--textColor40, #f0f0f0);
1544
+ }
1545
+
1546
+ .tabs-striped .tabs,
1547
+ .tabs-striped.tabs-icon-default .tab-item.active,
1548
+ .tabs-striped .tabs .tab-item {
1549
+ margin-top: 0px;
1550
+ border-style: 0px;
1551
+ border-width: 0px;
1552
+ border-color: 0px;
1553
+ padding: 0px;
1554
+ }
1555
+
1556
+ .k-list .k-item {
1557
+ background: var(--colorDark50, #0a141e);
1074
1558
  color: var(--textColorDark40, #f0f0f0);
1559
+ }
1560
+
1561
+ .k-list .k-item:focus,
1562
+ .k-list .k-item:hover {
1563
+ background: var(--backgroundColor10, #ced0d2);
1564
+ color: var(--textColor70, #434343);
1565
+ }
1566
+
1567
+ .k-list .k-item.k-state-selected {
1568
+ background: var(--colorStable20, #c6c6c6);
1569
+ color: var(--textColor70, #434343);
1570
+ }
1571
+
1572
+ h5 {
1573
+ font-size: 18px;
1574
+ }
1575
+
1576
+ .k-dialog .k-dialog-titlebar:before {
1577
+ margin-right: -35px;
1578
+ }
1579
+
1580
+ .k-dialog-buttongroup {
1581
+ width: 150px;
1582
+ margin-left: 74px;
1583
+ margin-bottom: 20px;
1584
+ }
1585
+
1586
+ .k-dialog[data-dialog-type="success"] .k-dialog-titlebar,
1587
+ .k-dialog[data-dialog-type="success"] .k-dialog-title,
1588
+ .k-dialog[data-dialog-type="success"] .k-dialog-titlebar:before {
1589
+ background-color: var(--backgroundColor30, #546270);
1590
+ color: var(--colorSuccess40, #2ffc2b);
1591
+ border: none;
1592
+ margin: auto;
1593
+ margin-top: 20px;
1594
+ white-space: break-spaces;
1595
+ text-align: center;
1596
+ }
1597
+
1598
+ .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
1599
+ .k-dialog[data-dialog-type="info"] .k-dialog-title,
1600
+ .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
1601
+ background-color: var(--backgroundColor30, #546270);
1602
+ color: var(--colorCalm40, #44e1d8);
1603
+ border: none;
1604
+ margin: auto;
1605
+ margin-top: 20px;
1606
+ white-space: break-spaces;
1607
+ text-align: center;
1608
+ }
1609
+
1610
+ .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
1611
+ .k-dialog[data-dialog-type="error"] .k-dialog-title,
1612
+ .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
1613
+ background-color: var(--backgroundColor30, #546270);
1614
+ color: var(--colorDanger40, #f03a3a);
1615
+ border: none;
1616
+ margin: auto;
1617
+ margin-top: 20px;
1618
+ white-space: break-spaces;
1619
+ text-align: center;
1620
+ }
1621
+
1622
+ .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
1623
+ .k-dialog[data-dialog-type="warning"] .k-dialog-title,
1624
+ .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
1625
+ background-color: var(--backgroundColor30, #546270);
1626
+ color: var(--colorWarning40, #f58d11);
1627
+ border: none;
1628
+ margin: auto;
1629
+ margin-top: 20px;
1630
+ white-space: break-spaces;
1631
+ text-align: center;
1632
+ }
1633
+
1634
+ .k-button.k-primary:hover {
1635
+ background: var(--colorSuccess60, #22b920);
1636
+ border-radius: 30px;
1637
+ border: none;
1638
+ }
1639
+
1640
+ .k-button.k-primary:active {
1641
+ background: var(--colorSuccess70, #108d0d);
1642
+ border-radius: 30px;
1643
+ border: none;
1644
+ }
1645
+
1646
+ .k-window {
1647
+ background: var(--backgroundColor30, #546270);
1648
+ border-radius: 30px;
1649
+ border: none;
1650
+ margin-top: 20px;
1651
+ }
1652
+
1653
+ .k-window-content {
1654
+ background: var(--backgroundColor30, #546270);
1655
+ border-radius: 30px;
1656
+ border: none;
1657
+ }
1658
+
1659
+
1660
+ .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1661
+ color: var(--textColorSuccess40, #f0f0f0);
1662
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1663
+ border-radius: 20px;
1664
+ }
1665
+
1666
+ .k-dialog-button-layout-stretched .k-button:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1667
+ color: var(--textColorDanger40, #f0f0f0);
1668
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1669
+ border-radius: 20px;
1670
+ margin: 3px;
1671
+ }
1672
+
1673
+ .k-dialog-buttongroup .k-button {
1674
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%) !important;
1675
+ }
1676
+
1677
+ .k-dialog-button-layout-stretched .k-button.k-button {
1678
+ margin: 0;
1679
+ border-left-width: 1px;
1680
+ border-radius: 20px;
1681
+ color: var(--textColorDanger40, #f0f0f0);
1682
+ box-shadow: 0px 0px 3px 0px #de3636;
1683
+ }
1684
+
1685
+ .k-dialog-button-layout-stretched .k-button.k-primary:hover {
1686
+ color: var(--textColorSuccess40, #f0f0f0);
1687
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1688
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
1075
1689
  }