cronapp-framework-mobile-js 3.0.0-SP.10 → 3.0.0-SP.12

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: #3A434B;
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,29 @@
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
+
317
+ --checkboxDefault: var(--colorDefault40, #262c32);
318
+ --checkboxPrimary: var(--colorPrimary40, #197fdd);
319
+ --checkboxSuccess: var(--colorSuccess40, #2ffc2b);
320
+ --checkboxCalm: var(--colorCalm40, #44e1d8);
321
+ --checkboxWarning: var(--colorWarning40, #f58d11);
322
+ --checkboxDanger: var(--colorDanger40, #f03a3a);
323
+ --checkboxLight: var(--colorLight40, #8da0b2);
324
+ --checkboxStable: var(--colorStable40, #818181);
325
+ --checkboxRoyal: var(--colorRoyal40, #0e3760);
326
+ --checkboxDark: var(--colorDark40, #000000);
324
327
 
325
328
  --borderCheckboxDefault: transparent;
326
329
  --borderCheckboxPrimary: transparent;
@@ -334,39 +337,39 @@
334
337
  --borderCheckboxDark: transparent;
335
338
 
336
339
  /* 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%));
340
+ --toggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
341
+ --togglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
342
+ --toggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
343
+ --toggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
344
+ --toggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
345
+ --toggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
346
+ --toggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
347
+ --toggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
348
+ --toggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
349
+ --toggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
350
+
351
+ --borderToggleDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
352
+ --borderTogglePrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
353
+ --borderToggleSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
354
+ --borderToggleCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
355
+ --borderToggleWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
356
+ --borderToggleDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
357
+ --borderToggleLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
358
+ --borderToggleStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
359
+ --borderToggleRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
360
+ --borderToggleDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
358
361
 
359
362
  /* 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%));
363
+ --bgDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
364
+ --bgPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
365
+ --bgSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
366
+ --bgCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
367
+ --bgWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
368
+ --bgDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
369
+ --bgLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
370
+ --bgStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
371
+ --bgRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
372
+ --bgDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
370
373
 
371
374
  --borderActiveBackgroundDefault: transparent;
372
375
  --borderActiveBackgroundPrimary: transparent;
@@ -379,16 +382,17 @@
379
382
  --borderActiveBackgroundRoyal: transparent;
380
383
  --borderActiveBackgroundDark: transparent;
381
384
 
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%));
385
+ --activeBackgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
386
+ --activeBackgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
387
+ --activeBackgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
388
+ --activeBackgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
389
+ --activeBackgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
390
+ --activeBackgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
391
+ --activeBackgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
392
+ --activeBackgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
393
+ --activeBackgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
394
+ --activeBackgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
395
+
392
396
  --ionSegmentDefault: var(--textColorPrimary40, #f0f0f0);
393
397
  --ionSegmentPrimary: var(--textColorDefault40, #f0f0f0);
394
398
  --ionSegmentSuccess: var(--textColorSuccess40, #f0f0f0);
@@ -400,63 +404,63 @@
400
404
  --ionSegmentRoyal: var(--textColorRoyal40, #f0f0f0);
401
405
  --ionSegmentDark: var(--textColorDark40, #f0f0f0);
402
406
 
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%));
407
+ --iconThemeLightDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
408
+ --iconThemeLightPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
409
+ --iconThemeLightSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
410
+ --iconThemeLightCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
411
+ --iconThemeLightWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
412
+ --iconThemeLightDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
413
+ --iconThemeLightLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
414
+ --iconThemeLightStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
415
+ --iconThemeLightRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
416
+ --iconThemeLightDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
413
417
 
414
418
  /* 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%));
419
+ --tabsDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
420
+ --tabsPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
421
+ --tabsSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
422
+ --tabsCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
423
+ --tabsWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
424
+ --tabsDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
425
+ --tabsLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
426
+ --tabsStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
427
+ --tabsRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
428
+ --tabsDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
425
429
 
426
430
  /* 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%));
431
+ --barDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
432
+ --barPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
433
+ --barSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
434
+ --barCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
435
+ --barWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
436
+ --barDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
437
+ --barLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
438
+ --barStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
439
+ --barRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
440
+ --barDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0F1e2e) 100%);
437
441
 
438
442
  /* 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);
443
+ --backgroundDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
444
+ --backgroundPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
445
+ --backgroundSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
446
+ --backgroundCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
447
+ --backgroundWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
448
+ --backgroundDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
449
+ --backgroundLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
450
+ --backgroundStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
451
+ --backgroundRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
452
+ --backgroundDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
453
+
454
+ --tabsIconDefault: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
455
+ --tabsIconPrimary: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
456
+ --tabsIconSuccess: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
457
+ --tabsIconCalm: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
458
+ --tabsIconWarning: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
459
+ --tabsIconDanger: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
460
+ --tabsIconLight: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
461
+ --tabsIconStable: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
462
+ --tabsIconRoyal: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
463
+ --tabsIconDark: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
460
464
  /* End - Variables used exclusively in the color palette property */
461
465
  }
462
466
 
@@ -473,6 +477,19 @@ h6,
473
477
  .h5,
474
478
  .h6 {
475
479
  font-family: var(--fontFamily, "Open Sans", "Arial", sans-serif);
480
+ color: var(--textColor40, #f0f0f0);
481
+ }
482
+
483
+ h1 {
484
+ font-size: var(--textFullSize, 36px);
485
+ }
486
+
487
+ .h3 {
488
+ font-size: var(--textBigSize, 24px);
489
+ }
490
+
491
+ .h5 {
492
+ font-size: var(--textSmallTitle, 18px);
476
493
  }
477
494
 
478
495
  h2 {
@@ -483,19 +500,19 @@ a,
483
500
  a:focus,
484
501
  a:active,
485
502
  a:hover {
486
- color: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
503
+ color: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
487
504
  }
488
505
 
489
506
  .light,
490
507
  a.light,
491
508
  .color-light {
492
- color: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
509
+ color: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
493
510
  }
494
511
 
495
512
  .stable,
496
513
  a.stable,
497
514
  .color-stable {
498
- color: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
515
+ color: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
499
516
  }
500
517
 
501
518
  /* Login */
@@ -557,8 +574,8 @@ a.stable,
557
574
 
558
575
  /* Cabeçalho */
559
576
  .bar.bar-default {
560
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
561
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
577
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
578
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
562
579
  color: var(--textColorPrimary40, #f0f0f0);
563
580
  }
564
581
 
@@ -568,8 +585,8 @@ a.stable,
568
585
  }
569
586
 
570
587
  .bar.bar-positive {
571
- border-color: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
572
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
588
+ border-color: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
589
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
573
590
  color: var(--textColorDefault40, #f0f0f0);
574
591
  }
575
592
 
@@ -580,7 +597,7 @@ a.stable,
580
597
 
581
598
  /* Menu */
582
599
  .menu-view {
583
- background: var(--colorLight60, #303B46);
600
+ background: var(--colorLight60, #303b46);
584
601
  color: var(--textColor10, #f0f0f0);
585
602
  }
586
603
 
@@ -590,21 +607,20 @@ a.stable,
590
607
 
591
608
  #menu-blue .item:active,
592
609
  #menu-blue .item.actived {
593
- background: var(--backgroundColor50, #3A434B);
610
+ background: var(--backgroundColor50, #3a434b);
594
611
  }
595
612
 
596
613
  /* Button Positive */
597
614
  .button.button-positive {
598
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
615
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
599
616
  }
600
617
 
601
618
  .button.button-positive:active,
602
619
  .button.button-positive.activated {
603
- background: var(--colorPrimary70, #09467F);
620
+ background: var(--colorPrimary70, #09467f);
604
621
  }
605
622
 
606
623
  /* Light - Outline */
607
-
608
624
  .button.button-light.button-outline {
609
625
  border-color: none;
610
626
  }
@@ -635,102 +651,101 @@ a.stable,
635
651
  }
636
652
 
637
653
  /* Rodapé com ícone */
638
-
639
654
  .tabs-striped.background-default .tabs {
640
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
655
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
641
656
  }
642
657
 
643
658
  .tabs-striped.background-positive .tabs {
644
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
659
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
645
660
  }
646
661
 
647
662
  .tabs-striped.background-balanced .tabs {
648
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
663
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
649
664
  }
650
665
 
651
666
  .tabs-striped.background-calm .tabs {
652
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
667
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
653
668
  }
654
669
 
655
670
  .tabs-striped.background-energized .tabs {
656
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
671
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
657
672
  }
658
673
 
659
674
  .tabs-striped.background-assertive .tabs {
660
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
675
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
661
676
  }
662
677
 
663
678
  .tabs-striped.background-light .tabs {
664
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
679
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
665
680
  }
666
681
 
667
682
  .tabs-striped.background-stable .tabs {
668
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
683
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
669
684
  }
670
685
 
671
686
  .tabs-striped.background-royal .tabs {
672
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
687
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
673
688
  }
674
689
 
675
690
  .tabs-striped.background-dark .tabs {
676
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
691
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
677
692
  }
678
693
 
679
694
  .tabs-striped.tabs-icon-default .tab-item {
680
695
  color: var(--textColorDefault40, #f0f0f0);
681
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
696
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
682
697
  opacity: 0.5;
683
698
  }
684
699
 
685
700
  /* Rodapé com botões*/
686
701
  .bar.bar-default.bar-footer,
687
702
  .bar.bar-default {
688
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
703
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
689
704
  }
690
705
 
691
706
  .bar.bar-positive.bar-footer,
692
707
  .bar.bar-positive {
693
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
708
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
694
709
  }
695
710
 
696
711
  .bar.bar-balanced.bar-footer,
697
712
  .bar.bar-balanced {
698
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
713
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
699
714
  }
700
715
 
701
716
  .bar.bar-calm.bar-footer,
702
717
  .bar.bar-calm {
703
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
718
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
704
719
  }
705
720
 
706
721
  .bar.bar-energized.bar-footer,
707
722
  .bar.bar-energized {
708
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
723
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
709
724
  }
710
725
 
711
726
  .bar.bar-assertive.bar-footer,
712
727
  .bar.bar-assertive {
713
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
728
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
714
729
  }
715
730
 
716
731
  .bar.bar-light.bar-footer,
717
732
  .bar.bar-light {
718
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
733
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
719
734
  }
720
735
 
721
736
  .bar.bar-stable.bar-footer,
722
737
  .bar.bar-stable {
723
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
738
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
724
739
  }
725
740
 
726
741
  .bar.bar-royal.bar-footer,
727
742
  .bar.bar-royal {
728
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
743
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
729
744
  }
730
745
 
731
746
  .bar.bar-dark.bar-footer,
732
747
  .bar.bar-dark {
733
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
748
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
734
749
  }
735
750
 
736
751
  .item-input .icon {
@@ -738,52 +753,52 @@ a.stable,
738
753
  }
739
754
 
740
755
  .button.button-default {
741
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
756
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
742
757
  }
743
758
 
744
759
  .button.button-default:hover {
745
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
746
- box-shadow: 0px 0px 3px 0px #3A4753;
760
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
761
+ box-shadow: 0px 0px 3px 0px #3a4753;
747
762
  }
748
763
 
749
764
  .button.button-default:active,
750
765
  .button.button-default.activated {
751
- background: var(--colorDefault60, #1c2025);
766
+ background: var(--colorDefault50, #252e36);
752
767
  }
753
768
 
754
769
  .login-mobile .button.button-light {
755
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
770
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
756
771
  color: var(--textColorWarning40, #f0f0f0);
757
772
  border-radius: 20px;
758
773
  }
759
774
 
760
775
  .login-mobile .button.button-light:hover {
761
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
776
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
762
777
  color: var(--textColorWarning40, #f0f0f0);
763
778
  }
764
779
 
765
780
  .login-mobile .button.button-light:active {
766
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
781
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
767
782
  color: var(--textColorWarning40, #f0f0f0);
768
783
  }
769
784
 
770
785
  .button#button-reset-password {
771
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
786
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
772
787
  color: var(--textColorWarning40, #ffffff);
773
788
  }
774
789
 
775
790
  .button#button-reset-password:hover {
776
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
791
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
777
792
  color: var(--textColorWarning40, #f0f0f0);
778
793
  }
779
794
 
780
795
  .button#button-reset-password:active {
781
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
796
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
782
797
  color: var(--textColorWarning40, #f0f0f0);
783
798
  }
784
799
 
785
800
  .item-radio input:checked+.radio-content .item-content {
786
- background: var(--backgroundColor40, #f2f2f2);
801
+ background: var(--backgroundColor40, #090f13);
787
802
  color: var(--textColor40, #f0f0f0);
788
803
  }
789
804
 
@@ -804,24 +819,24 @@ a.stable,
804
819
 
805
820
  input[placeholder]:not([placeholder=""])::placeholder {
806
821
  /* Chrome, Firefox, Opera, Safari 10.1+ */
807
- color: var(--textColor60, #5F5F5F);
822
+ color: var(--textColor60, #5f5f5f);
808
823
  opacity: 1;
809
824
  /* Firefox */
810
825
  }
811
826
 
812
827
  input:-ms-input-placeholder {
813
828
  /* Internet Explorer 10-11 */
814
- color: var(--textColor60, #5F5F5F);
829
+ color: var(--textColor60, #5f5f5f);
815
830
  }
816
831
 
817
832
  input::-ms-input-placeholder {
818
833
  /* Microsoft Edge */
819
- color: var(--textColor60, #5F5F5F);
834
+ color: var(--textColor60, #5f5f5f);
820
835
  margin-left: 10px;
821
836
  }
822
837
 
823
838
  .list-inset .item.item-input input {
824
- background: var(--backgroundColor10, #CED0D2);
839
+ background: var(--backgroundColor10, #ced0d2);
825
840
  color: var(--textColor70, #434343);
826
841
  border-radius: 20px;
827
842
  border-bottom: 0;
@@ -830,21 +845,21 @@ input::-ms-input-placeholder {
830
845
  .modal .item {
831
846
  border-width: 1px;
832
847
  border-color: none;
833
- background: var(--backgroundColor10, #CED0D2);
848
+ background: var(--backgroundColor10, #ced0d2);
834
849
  color: var(--textColor40, #f0f0f0);
835
850
  }
836
851
 
837
852
  .k-widget.k-window .k-window-titlebar .k-window-title {
838
853
  color: var(--textColor40, #f0f0f0);
854
+ margin-top: 23px;
839
855
  }
840
856
 
841
857
  .k-widget.k-window {
842
858
  border-radius: 20px;
843
859
  }
844
860
 
845
-
846
861
  .item-input-wrapper {
847
- background: var(--backgroundColor40, #f2f2f2);
862
+ background: var(--backgroundColor40, #090f13);
848
863
  }
849
864
 
850
865
  .ion-search:before {
@@ -904,7 +919,7 @@ button#crn-button-signup:hover {
904
919
 
905
920
  /*Default*/
906
921
  .button.button-default.button-outline {
907
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
922
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
908
923
  border-color: transparent;
909
924
  color: var(--textColor40, #f0f0f0);
910
925
  }
@@ -914,7 +929,7 @@ button#crn-button-signup:hover {
914
929
  }
915
930
 
916
931
  .button.button-default.button-outline:active {
917
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
932
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
918
933
  }
919
934
 
920
935
  .button.button-default.button-outline i {
@@ -923,20 +938,20 @@ button#crn-button-signup:hover {
923
938
 
924
939
  /*Secundary*/
925
940
  .button.button-positive {
926
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
941
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
927
942
  }
928
943
 
929
944
  .button.button-positive:hover {
930
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
931
- box-shadow: 0px 0px 3px 0px #187AD4;
945
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
946
+ box-shadow: 0px 0px 3px 0px #187ad4;
932
947
  }
933
948
 
934
949
  .button.button-positive:active {
935
- background: var(--colorPrimary70, #09467F);
950
+ background: var(--colorPrimary70, #09467f);
936
951
  }
937
952
 
938
953
  .button.button-positive.button-outline {
939
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
954
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
940
955
  border-color: transparent;
941
956
  color: var(--textColorDefault40, #f0f0f0);
942
957
  border-bottom: 0;
@@ -947,7 +962,7 @@ button#crn-button-signup:hover {
947
962
  }
948
963
 
949
964
  .button.button-positive.button-outline:active {
950
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
965
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
951
966
  border-bottom: 0;
952
967
  }
953
968
 
@@ -957,20 +972,20 @@ button#crn-button-signup:hover {
957
972
 
958
973
  /*Success*/
959
974
  .button.button-balanced {
960
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
975
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
961
976
  }
962
977
 
963
978
  .button.button-balanced:hover {
964
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
965
- box-shadow: 0px 0px 3px 0px #2FFC2B;
979
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
980
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
966
981
  }
967
982
 
968
983
  .button.button-balanced:active {
969
- background: var(--colorSuccess70, #108D0D);
984
+ background: var(--colorSuccess70, #108d0d);
970
985
  }
971
986
 
972
987
  .button.button-balanced.button-outline {
973
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
988
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
974
989
  border-color: transparent;
975
990
  color: var(--textColorDefault40, #f0f0f0);
976
991
  border-bottom: 0;
@@ -981,7 +996,7 @@ button#crn-button-signup:hover {
981
996
  }
982
997
 
983
998
  .button.button-balanced.button-outline:active {
984
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
999
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
985
1000
  }
986
1001
 
987
1002
  .button.button-balanced.button-outline i {
@@ -990,20 +1005,20 @@ button#crn-button-signup:hover {
990
1005
 
991
1006
  /*Calm*/
992
1007
  .button.button-calm {
993
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1008
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
994
1009
  }
995
1010
 
996
1011
  .button.button-calm:hover {
997
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
998
- box-shadow: 0px 0px 3px 0px #42DCD3;
1012
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1013
+ box-shadow: 0px 0px 3px 0px #42dcd3;
999
1014
  }
1000
1015
 
1001
1016
  .button.button-calm:active {
1002
- background: var(--colorCalm60, #169F97);
1017
+ background: var(--colorCalm60, #169f97);
1003
1018
  }
1004
1019
 
1005
1020
  .button.button-calm.button-outline {
1006
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1021
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1007
1022
  border-color: transparent;
1008
1023
  color: var(--textColorDefault40, #f0f0f0);
1009
1024
  border-bottom: 0;
@@ -1014,7 +1029,7 @@ button#crn-button-signup:hover {
1014
1029
  }
1015
1030
 
1016
1031
  .button.button-calm.button-outline:active {
1017
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1032
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1018
1033
  }
1019
1034
 
1020
1035
  .button.button-calm.button-outline i {
@@ -1023,20 +1038,20 @@ button#crn-button-signup:hover {
1023
1038
 
1024
1039
  /*Warning*/
1025
1040
  .button.button-energized {
1026
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1041
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1027
1042
  }
1028
1043
 
1029
1044
  .button.button-energized:hover {
1030
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1031
- box-shadow: 0px 0px 3px 0px #F58D11;
1045
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1046
+ box-shadow: 0px 0px 3px 0px #f58d11;
1032
1047
  }
1033
1048
 
1034
1049
  .button.button-energized:active {
1035
- background: var(--colorWarning60, #B46406);
1050
+ background: var(--colorWarning60, #b46406);
1036
1051
  }
1037
1052
 
1038
1053
  .button.button-energized.button-outline {
1039
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1054
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1040
1055
  border-color: transparent;
1041
1056
  color: var(--textColorDefault40, #f0f0f0);
1042
1057
  border-bottom: 0;
@@ -1047,7 +1062,7 @@ button#crn-button-signup:hover {
1047
1062
  }
1048
1063
 
1049
1064
  .button.button-energized.button-outline:active {
1050
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1065
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1051
1066
  }
1052
1067
 
1053
1068
  .button.button-energized.button-outline i {
@@ -1056,21 +1071,21 @@ button#crn-button-signup:hover {
1056
1071
 
1057
1072
  /*Danger*/
1058
1073
  .button.button-assertive {
1059
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1074
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1060
1075
  border-bottom: 0;
1061
1076
  }
1062
1077
 
1063
1078
  .button.button-assertive:hover {
1064
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1065
- box-shadow: 0px 0px 3px 0px #DE3636;
1079
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1080
+ box-shadow: 0px 0px 3px 0px #dE3636;
1066
1081
  }
1067
1082
 
1068
1083
  .button.button-assertive:active {
1069
- background: var(--colorDanger60, #7E2121);
1084
+ background: var(--colorDanger60, #7e2121);
1070
1085
  }
1071
1086
 
1072
1087
  .button.button-assertive.button-outline {
1073
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1088
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1074
1089
  border-color: transparent;
1075
1090
  color: var(--textColorDanger40, #f0f0f0);
1076
1091
  }
@@ -1080,7 +1095,7 @@ button#crn-button-signup:hover {
1080
1095
  }
1081
1096
 
1082
1097
  .button.button-assertive.button-outline:active {
1083
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1098
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1084
1099
  }
1085
1100
 
1086
1101
  .button.button-assertive.button-outline i {
@@ -1089,21 +1104,21 @@ button#crn-button-signup:hover {
1089
1104
 
1090
1105
  /*Light*/
1091
1106
  .button.button-light {
1092
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1107
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1093
1108
  border-bottom: 0;
1094
1109
  }
1095
1110
 
1096
1111
  .button.button-light:hover {
1097
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1098
- box-shadow: 0px 0px 3px 0px #8DA0B2;
1112
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1113
+ box-shadow: 0px 0px 3px 0px #8da0b2;
1099
1114
  }
1100
1115
 
1101
1116
  .button.button-light:active {
1102
- background: var(--colorLight60, #303B46);
1117
+ background: var(--colorLight60, #303b46);
1103
1118
  }
1104
1119
 
1105
1120
  .button.button-light.button-outline {
1106
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1121
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1107
1122
  border-color: transparent;
1108
1123
  color: var(--textColorLight40, #f0f0f0);
1109
1124
  }
@@ -1113,7 +1128,7 @@ button#crn-button-signup:hover {
1113
1128
  }
1114
1129
 
1115
1130
  .button.button-light.button-outline:active {
1116
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1131
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1117
1132
  }
1118
1133
 
1119
1134
  .button.button-light.button-outline i {
@@ -1122,22 +1137,22 @@ button#crn-button-signup:hover {
1122
1137
 
1123
1138
  /*Stable*/
1124
1139
  .button.button-stable {
1125
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1140
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1126
1141
  border-bottom: 0;
1127
1142
  }
1128
1143
 
1129
1144
  .button.button-stable:hover {
1130
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1131
- box-shadow: 0px 0px 3px 0px #7B7B7B;
1145
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1146
+ box-shadow: 0px 0px 3px 0px #7b7b7b;
1132
1147
  }
1133
1148
 
1134
1149
  .button.button-stable:active,
1135
1150
  .button.button-stable.activated {
1136
- background: var(--colorStable50, #4D4D4D);
1151
+ background: var(--colorStable50, #4d4d4d);
1137
1152
  }
1138
1153
 
1139
1154
  .button.button-stable.button-outline {
1140
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1155
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1141
1156
  border-color: transparent;
1142
1157
  color: var(--textColorStable40, #434343);
1143
1158
  }
@@ -1147,7 +1162,7 @@ button#crn-button-signup:hover {
1147
1162
  }
1148
1163
 
1149
1164
  .button.button-stable.button-outline:active {
1150
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1165
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1151
1166
  }
1152
1167
 
1153
1168
  .button.button-stable.button-outline i {
@@ -1156,22 +1171,22 @@ button#crn-button-signup:hover {
1156
1171
 
1157
1172
  /*Royal*/
1158
1173
  .button.button-royal {
1159
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1174
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1160
1175
  border-bottom: 0;
1161
1176
  }
1162
1177
 
1163
1178
  .button.button-royal:hover {
1164
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1165
- box-shadow: 0px 0px 3px 0px #11375D;
1179
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1180
+ box-shadow: 0px 0px 3px 0px #11375d;
1166
1181
  }
1167
1182
 
1168
1183
  .button.button-royal:active,
1169
1184
  .button.button-royal.activated {
1170
- background: var(--colorRoyal70, #1A2E43);
1185
+ background: var(--colorRoyal70, #1a2e43);
1171
1186
  }
1172
1187
 
1173
1188
  .button.button-royal.button-outline {
1174
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1189
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1175
1190
  border-color: transparent;
1176
1191
  color: var(--textColorRoyal40, #f0f0f0);
1177
1192
  }
@@ -1181,7 +1196,7 @@ button#crn-button-signup:hover {
1181
1196
  }
1182
1197
 
1183
1198
  .button.button-royal.button-outline:active {
1184
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1199
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1185
1200
  }
1186
1201
 
1187
1202
  .button.button-royal.button-outline i {
@@ -1191,23 +1206,23 @@ button#crn-button-signup:hover {
1191
1206
  /*Dark*/
1192
1207
 
1193
1208
  .button.button-dark {
1194
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1209
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1195
1210
  }
1196
1211
 
1197
1212
  .button.button-dark:hover {
1198
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1213
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1199
1214
  box-shadow: 0px 0px 3px 0px #132639;
1200
1215
  }
1201
1216
 
1202
1217
  .button.button-dark:active,
1203
1218
  .button.button-dark.activated {
1204
- background: var(--colorDark50, #0A141E);
1219
+ background: var(--colorDark50, #0a141e);
1205
1220
  border-bottom: 0;
1206
1221
  border-top: 0;
1207
1222
  }
1208
1223
 
1209
1224
  .button.button-dark.button-outline {
1210
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1225
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1211
1226
  border-color: transparent;
1212
1227
  color: var(--textColorDark40, #f0f0f0);
1213
1228
  border-bottom: 0;
@@ -1219,7 +1234,7 @@ button#crn-button-signup:hover {
1219
1234
  }
1220
1235
 
1221
1236
  .button.button-dark.button-outline:active {
1222
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1237
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1223
1238
  }
1224
1239
 
1225
1240
  .button.button-dark.button-outline i {
@@ -1242,7 +1257,7 @@ button#crn-button-signup:hover {
1242
1257
  }
1243
1258
 
1244
1259
  .button#button-reset-password {
1245
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1260
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1246
1261
  color: var(--textColorWarning40, #ffffff);
1247
1262
  border-radius: 20px;
1248
1263
  }
@@ -1258,7 +1273,7 @@ button#crn-button-signup {
1258
1273
  justify-content: center;
1259
1274
  align-items: center;
1260
1275
  display: flex;
1261
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1276
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1262
1277
  }
1263
1278
 
1264
1279
  .crn-ion-segment-light ul li a,
@@ -1280,57 +1295,57 @@ button#crn-button-signup {
1280
1295
  }
1281
1296
 
1282
1297
  .crn-ion-segment-classic ul.active-background-default li.active a {
1283
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1298
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1284
1299
  color: var(--textColor40, #f0f0f0);
1285
1300
  }
1286
1301
 
1287
1302
  .crn-ion-segment-classic ul.active-background-positive li.active a {
1288
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1303
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1289
1304
  color: var(--textColor40, #f0f0f0);
1290
1305
  }
1291
1306
 
1292
1307
  .crn-ion-segment-classic ul.active-background-balanced li.active a {
1293
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1308
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1294
1309
  color: var(--textColor40, #f0f0f0);
1295
1310
  }
1296
1311
 
1297
1312
  .crn-ion-segment-classic ul.active-background-calm li.active a {
1298
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1313
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1299
1314
  color: var(--textColor40, #f0f0f0);
1300
1315
  }
1301
1316
 
1302
1317
  .crn-ion-segment-classic ul.active-background-energized li.active a {
1303
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1318
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1304
1319
  color: var(--textColor40, #f0f0f0);
1305
1320
  }
1306
1321
 
1307
1322
  .crn-ion-segment-classic ul.active-background-assertive li.active a {
1308
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1323
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1309
1324
  color: var(--textColor40, #f0f0f0);
1310
1325
  }
1311
1326
 
1312
1327
  .crn-ion-segment-classic ul.active-background-light li.active a {
1313
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1328
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1314
1329
  color: var(--textColor40, #f0f0f0);
1315
1330
  }
1316
1331
 
1317
1332
  .crn-ion-segment-classic ul.active-background-stable li.active a {
1318
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1333
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1319
1334
  color: var(--textColor40, #f0f0f0);
1320
1335
  }
1321
1336
 
1322
1337
  .crn-ion-segment-classic ul.active-background-royal li.active a {
1323
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1338
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1324
1339
  color: var(--textColor40, #f0f0f0);
1325
1340
  }
1326
1341
 
1327
1342
  .crn-ion-segment-classic ul.active-background-dark li.active a {
1328
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1343
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1329
1344
  color: var(--textColor40, #f0f0f0);
1330
1345
  }
1331
1346
 
1332
1347
  canvas {
1333
- background: var(--backgroundColor10, #CED0D2);
1348
+ background: var(--backgroundColor10, #ced0d2);
1334
1349
  }
1335
1350
 
1336
1351
  /* Cores icones*/
@@ -1422,109 +1437,110 @@ canvas {
1422
1437
  }
1423
1438
 
1424
1439
  .checkbox-default input:checked:before {
1425
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1440
+ background: var(--colorDefault40, #262c32);
1426
1441
  border-color: var(--colorDefault40, #262c32);
1427
1442
  border-radius: 2px;
1428
1443
  }
1429
1444
 
1430
1445
  .checkbox-positive input:checked:before {
1431
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1446
+ background: var(--colorPrimary40, #197fdd);
1432
1447
  border-color: var(--colorPrimary40, #197fdd);
1433
1448
  border-radius: 2px;
1434
1449
  }
1435
1450
 
1436
1451
  .checkbox-balanced input:checked:before {
1437
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1452
+ background: var(--colorSuccess40, #2ffc2b);
1438
1453
  border-color: var(--colorSuccess60, #22b920);
1439
1454
  border-radius: 2px;
1440
1455
  }
1441
1456
 
1442
1457
  .checkbox-calm input:checked:before {
1443
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1458
+ background: var(--colorCalm40, #44e1d8);
1444
1459
  border-color: var(--colorCalm40, #44e1d8);
1445
1460
  border-radius: 2px;
1446
1461
  }
1447
1462
 
1448
1463
  .checkbox-energized input:checked:before {
1449
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1464
+ background: var(--colorWarning40, #f58d11);
1450
1465
  border-color: var(--colorWarning40, #f58d11);
1451
1466
  border-radius: 2px;
1452
1467
  }
1453
1468
 
1454
1469
  .checkbox-assertive input:checked:before {
1455
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1470
+ background: var(--colorDanger40, #f03a3a);
1456
1471
  border-color: var(--colorDanger40, #f03a3a);
1457
1472
  border-radius: 2px;
1458
1473
  }
1459
1474
 
1460
1475
  .checkbox-light input:checked:before {
1461
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1476
+ background: var(--colorLight40, #8da0b2);
1462
1477
  border-color: var(--colorLight40, #8da0b2);
1463
1478
  border-radius: 2px;
1464
1479
  }
1465
1480
 
1466
1481
  .checkbox-stable input:checked:before {
1467
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1482
+ background: var(--colorStable40, #818181);
1468
1483
  border-color: var(--colorStable40, #818181);
1469
1484
  border-radius: 2px;
1470
1485
  }
1471
1486
 
1472
1487
  .checkbox-royal input:checked:before {
1473
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1488
+ background: var(--colorRoyal40, #0e3760);
1474
1489
  border-color: var(--colorRoyal40, #0e3760);
1475
1490
  border-radius: 2px;
1476
1491
  }
1477
1492
 
1478
1493
  .checkbox-dark input:checked:before {
1479
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1494
+ background: var(--colorDark40, #000000);
1480
1495
  border-color: var(--colorDark40, #000000);
1481
1496
  border-radius: 2px;
1482
1497
  }
1483
1498
 
1484
1499
  /*Toogle*/
1485
1500
  .toggle.toggle-default input:checked+.track {
1486
- background: var(--colorDefault, linear-gradient(180deg, #262C32 0%, #2D3843 100%));
1501
+ background: linear-gradient(180deg, var(--colorDefault40, #262c32) 0%, var(--colorDefault70, #15181b) 100%);
1502
+ border-color: var(--colorDefault40, #262c32);
1487
1503
  }
1488
1504
 
1489
1505
  .toggle.toggle-positive input:checked+.track {
1490
- background: var(--colorPrimary, linear-gradient(180deg, #197FDD 0%, #08427A 100%));
1506
+ background: linear-gradient(180deg, var(--colorPrimary40, #197fdd) 0%, var(--colorPrimary70, #09467f) 100%);
1491
1507
  }
1492
1508
 
1493
1509
  .toggle.toggle-balanced input:checked+.track {
1494
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%));
1510
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%);
1495
1511
  }
1496
1512
 
1497
1513
  .toggle.toggle-calm input:checked+.track {
1498
- background: var(--colorCalm, linear-gradient(180deg, #44E1D8 0%, #25968F 100%));
1514
+ background: linear-gradient(180deg, var(--colorCalm40, #44e1d8) 0%, var(--colorCalm70, #077988) 100%);
1499
1515
  }
1500
1516
 
1501
1517
  .toggle.toggle-energized input:checked+.track {
1502
- background: var(--colorWarning, linear-gradient(180deg, #F58D11 0%, #B36305 100%));
1518
+ background: linear-gradient(180deg, var(--colorWarning40, #f58d11) 0%, var(--colorWarning70, #864d09) 100%);
1503
1519
  }
1504
1520
 
1505
1521
  .toggle.toggle-assertive input:checked+.track {
1506
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1522
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1507
1523
  }
1508
1524
 
1509
1525
  .toggle.toggle-light input:checked+.track {
1510
- background: var(--colorLight, linear-gradient(180deg, #8DA0B3 0%, #2D3843 100%));
1526
+ background: linear-gradient(180deg, var(--colorLight40, #8da0b2) 0%, var(--colorLight70, #4d5861) 100%);
1511
1527
  }
1512
1528
 
1513
1529
  .toggle.toggle-stable input:checked+.track {
1514
- background: var(--colorStable, linear-gradient(180deg, #818181 0%, #3E3E3E 100%));
1530
+ background: linear-gradient(180deg, var(--colorStable40, #818181) 0%, var(--colorStable70, #3e4042) 100%);
1515
1531
  }
1516
1532
 
1517
1533
  .toggle.toggle-royal input:checked+.track {
1518
- background: var(--colorRoyal, linear-gradient(180deg, #0E3760 0%, #2D3843 100%));
1534
+ background: linear-gradient(180deg, var(--colorRoyal40, #0e3760) 0%, var(--colorRoyal70, #1a2e43) 100%);
1519
1535
  }
1520
1536
 
1521
1537
  .toggle.toggle-dark input:checked+.track {
1522
- background: var(--colorDark, linear-gradient(180deg, #000000 0%, #0F1E2E 100%));
1538
+ background: linear-gradient(180deg, var(--colorDark40, #000000) 0%, var(--colorDark70, #0f1e2e) 100%);
1523
1539
  }
1524
1540
 
1525
1541
  .k-combobox .k-dropdown-wrap .k-input,
1526
1542
  .k-combobox .k-dropdown-wrap .k-select {
1527
- background: var(--colorDark50, #0A141E);
1543
+ background: var(--colorDark50, #0a141e);
1528
1544
  color: var(--textColor40, #f0f0f0);
1529
1545
  }
1530
1546
 
@@ -1539,13 +1555,13 @@ canvas {
1539
1555
  }
1540
1556
 
1541
1557
  .k-list .k-item {
1542
- background: var(--colorDark50, #0A141E);
1558
+ background: var(--colorDark50, #0a141e);
1543
1559
  color: var(--textColorDark40, #f0f0f0);
1544
1560
  }
1545
1561
 
1546
1562
  .k-list .k-item:focus,
1547
1563
  .k-list .k-item:hover {
1548
- background: var(--backgroundColor10, #CED0D2);
1564
+ background: var(--backgroundColor10, #ced0d2);
1549
1565
  color: var(--textColor70, #434343);
1550
1566
  }
1551
1567
 
@@ -1574,45 +1590,22 @@ h5 {
1574
1590
  background-color: var(--backgroundColor30, #546270);
1575
1591
  color: var(--colorSuccess40, #2ffc2b);
1576
1592
  border: none;
1577
- border-radius: 30px;
1578
- margin-left: 45px;
1593
+ margin: auto;
1579
1594
  margin-top: 20px;
1580
- }
1581
-
1582
- .k-button.k-primary:hover {
1583
- background: var(--colorSuccess60, #22b920);
1584
- border-radius: 30px;
1585
- border: none;
1586
- }
1587
-
1588
- .k-button.k-primary:active {
1589
- background: var(--colorSuccess70, #108D0D);
1590
- border-radius: 30px;
1591
- border: none;
1592
- }
1593
-
1594
- .k-window {
1595
- background: var(--backgroundColor30, #546270);
1596
- border-radius: 30px;
1597
- border: none;
1598
- margin-top: 20px;
1599
- }
1600
-
1601
- .k-window-content {
1602
- background: var(--backgroundColor30, #546270);
1603
- border-radius: 30px;
1604
- border: none;
1595
+ white-space: break-spaces;
1596
+ text-align: center;
1605
1597
  }
1606
1598
 
1607
1599
  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar,
1608
1600
  .k-dialog[data-dialog-type="info"] .k-dialog-title,
1609
1601
  .k-dialog[data-dialog-type="info"] .k-dialog-titlebar:before {
1610
1602
  background-color: var(--backgroundColor30, #546270);
1611
- color: var(--colorWarning40, #f58d11);
1612
- border-radius: 30px;
1603
+ color: var(--colorCalm40, #44e1d8);
1613
1604
  border: none;
1614
- margin-left: 37px;
1605
+ margin: auto;
1615
1606
  margin-top: 20px;
1607
+ white-space: break-spaces;
1608
+ text-align: center;
1616
1609
  }
1617
1610
 
1618
1611
  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar,
@@ -1620,10 +1613,11 @@ h5 {
1620
1613
  .k-dialog[data-dialog-type="error"] .k-dialog-titlebar:before {
1621
1614
  background-color: var(--backgroundColor30, #546270);
1622
1615
  color: var(--colorDanger40, #f03a3a);
1623
- border-radius: 30px;
1624
1616
  border: none;
1625
- margin-left: 45px;
1617
+ margin: auto;
1626
1618
  margin-top: 20px;
1619
+ white-space: break-spaces;
1620
+ text-align: center;
1627
1621
  }
1628
1622
 
1629
1623
  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar,
@@ -1631,39 +1625,66 @@ h5 {
1631
1625
  .k-dialog[data-dialog-type="warning"] .k-dialog-titlebar:before {
1632
1626
  background-color: var(--backgroundColor30, #546270);
1633
1627
  color: var(--colorWarning40, #f58d11);
1628
+ border: none;
1629
+ margin: auto;
1630
+ margin-top: 20px;
1631
+ white-space: break-spaces;
1632
+ text-align: center;
1633
+ }
1634
+
1635
+ .k-button.k-primary:hover {
1636
+ background: var(--colorSuccess60, #22b920);
1637
+ border-radius: 30px;
1638
+ border: none;
1639
+ }
1640
+
1641
+ .k-button.k-primary:active {
1642
+ background: var(--colorSuccess70, #108d0d);
1643
+ border-radius: 30px;
1644
+ border: none;
1645
+ }
1646
+
1647
+ .k-window {
1648
+ background: var(--backgroundColor30, #546270);
1634
1649
  border-radius: 30px;
1635
1650
  border: none;
1636
- margin-left: 45px;
1637
1651
  margin-top: 20px;
1638
1652
  }
1639
1653
 
1654
+ .k-window-content {
1655
+ background: var(--backgroundColor30, #546270);
1656
+ border-radius: 30px;
1657
+ border: none;
1658
+ }
1659
+
1660
+
1640
1661
  .k-dialog-button-layout-stretched .k-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1641
1662
  color: var(--textColorSuccess40, #f0f0f0);
1642
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
1663
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1643
1664
  border-radius: 20px;
1644
1665
  }
1645
1666
 
1646
1667
  .k-dialog-button-layout-stretched .k-button:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
1647
1668
  color: var(--textColorDanger40, #f0f0f0);
1648
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%));
1669
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%);
1649
1670
  border-radius: 20px;
1650
1671
  margin: 3px;
1651
1672
  }
1652
1673
 
1653
1674
  .k-dialog-buttongroup .k-button {
1654
- background: var(--colorDanger, linear-gradient(180deg, #F03A3A 0%, #7E2121 100%)) !important;
1675
+ background: linear-gradient(180deg, var(--colorDanger40, #f03a3a) 0%, var(--colorDanger70, #832020) 100%) !important;
1655
1676
  }
1656
1677
 
1657
- .k-dialog-button-layout-stretched .k-button~.k-button {
1678
+ .k-dialog-button-layout-stretched .k-button.k-button {
1658
1679
  margin: 0;
1659
1680
  border-left-width: 1px;
1660
1681
  border-radius: 20px;
1661
1682
  color: var(--textColorDanger40, #f0f0f0);
1662
- box-shadow: 0px 0px 3px 0px #DE3636;
1683
+ box-shadow: 0px 0px 3px 0px #de3636;
1663
1684
  }
1664
1685
 
1665
1686
  .k-dialog-button-layout-stretched .k-button.k-primary:hover {
1666
1687
  color: var(--textColorSuccess40, #f0f0f0);
1667
- background: var(--colorSuccess, linear-gradient(180deg, #0EDA0A 0%, #0D840A 100%)) !important;
1668
- box-shadow: 0px 0px 3px 0px #2FFC2B;
1688
+ background: linear-gradient(180deg, var(--colorSuccess40, #2ffc2b) 0%, var(--colorSuccess70, #108d0d) 100%) !important;
1689
+ box-shadow: 0px 0px 3px 0px #2ffc2b;
1669
1690
  }