ms-design-system 0.0.11 → 0.0.13

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.
package/src/styles.scss CHANGED
@@ -33,11 +33,11 @@ $muted: #6A6B6D;
33
33
 
34
34
  /* Rounded */
35
35
  .rounded-sm {
36
- border-radius: 4px !important;
37
- -webkit-border-radius: 4px !important;
38
- -moz-border-radius: 4px !important;
39
- -ms-border-radius: 4px !important;
40
- -o-border-radius: 4px !important;
36
+ border-radius: 6px !important;
37
+ -webkit-border-radius: 6px !important;
38
+ -moz-border-radius: 6px !important;
39
+ -ms-border-radius: 6px !important;
40
+ -o-border-radius: 6px !important;
41
41
  }
42
42
 
43
43
  .rounded-md {
@@ -66,104 +66,132 @@ $muted: #6A6B6D;
66
66
 
67
67
  // Base button styles
68
68
  .ms-btn {
69
- padding: 5px 12px;
70
- border: 1px solid transparent;
71
- border-radius: 8px;
72
- font-size: 14px;
73
- font-weight: 400;
74
- line-height: 18px;
75
- text-align: center;
76
- text-decoration: none;
77
- display: inline-block;
78
- cursor: pointer;
79
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
69
+ padding: 5px 12px !important;
70
+ border: 1px solid transparent !important;
71
+ border-radius: 8px ;
72
+ font-size: 14px !important;
73
+ font-weight: 400 !important;
74
+ line-height: 18px !important;
75
+ text-align: center !important;
76
+ text-decoration: none !important;
77
+ display: inline-block !important;
78
+ cursor: pointer !important;
79
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
80
+ -webkit-border-radius: 8px ;
81
+ -moz-border-radius: 8px ;
82
+ -ms-border-radius: 8px ;
83
+ -o-border-radius: 8px ;
84
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
85
+ -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
86
+ -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
87
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
80
88
  }
81
89
 
82
90
  .ms-btn-sm {
83
- padding: 4px 12px;
84
- border: 1px solid transparent;
85
- border-radius: 6px;
86
- font-size: 13px;
87
- font-weight: 400;
88
- line-height: 16px;
89
- text-align: center;
90
- text-decoration: none;
91
- display: inline-block;
92
- cursor: pointer;
93
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
94
- -webkit-border-radius: 6px;
95
- -moz-border-radius: 6px;
96
- -ms-border-radius: 6px;
97
- -o-border-radius: 6px;
91
+ padding: 4px 12px !important;
92
+ border: 1px solid transparent !important;
93
+ border-radius: 6px ;
94
+ font-size: 13px !important;
95
+ font-weight: 400 !important;
96
+ line-height: 16px !important;
97
+ text-align: center !important;
98
+ text-decoration: none !important;
99
+ display: inline-block !important;
100
+ cursor: pointer !important;
101
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
102
+ -webkit-border-radius: 6px ;
103
+ -moz-border-radius: 6px ;
104
+ -ms-border-radius: 6px ;
105
+ -o-border-radius: 6px ;
106
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
107
+ -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
108
+ -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
109
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
98
110
  }
99
111
 
100
112
  .ms-btn-md {
101
- padding: 7px 12px;
102
- border: 1px solid transparent;
103
- border-radius: 8px;
104
- font-size: 14px;
105
- font-weight: 400;
106
- line-height: 18px;
107
- text-align: center;
108
- text-decoration: none;
109
- display: inline-block;
110
- cursor: pointer;
111
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
113
+ padding: 7px 12px !important;
114
+ border: 1px solid transparent !important;
115
+ border-radius: 8px ;
116
+ font-size: 14px !important;
117
+ font-weight: 400 !important;
118
+ line-height: 18px !important;
119
+ text-align: center !important;
120
+ text-decoration: none !important;
121
+ display: inline-block !important;
122
+ cursor: pointer !important;
123
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
124
+ -webkit-border-radius: 8px ;
125
+ -moz-border-radius: 8px ;
126
+ -ms-border-radius: 8px ;
127
+ -o-border-radius: 8px ;
128
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
129
+ -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
130
+ -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
131
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
112
132
  }
113
133
 
114
134
  .ms-btn-lg {
115
- padding: 8px 16px;
116
- border: 1px solid transparent;
117
- border-radius: 8px;
118
- font-size: 16px;
119
- font-weight: 400;
120
- line-height: 20px;
121
- text-align: center;
122
- text-decoration: none;
123
- display: inline-block;
124
- cursor: pointer;
125
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
135
+ padding: 8px 16px !important;
136
+ border: 1px solid transparent !important;
137
+ border-radius: 8px ;
138
+ font-size: 16px !important;
139
+ font-weight: 400 !important;
140
+ line-height: 20px !important;
141
+ text-align: center !important;
142
+ text-decoration: none !important;
143
+ display: inline-block !important;
144
+ cursor: pointer !important;
145
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
146
+ -webkit-border-radius: 8px ;
147
+ -moz-border-radius: 8px ;
148
+ -ms-border-radius: 8px ;
149
+ -o-border-radius: 8px ;
150
+ -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
151
+ -moz-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
152
+ -ms-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
153
+ -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
126
154
  }
127
155
 
128
156
  // Button variants
129
157
  .ms-btn-default {
130
- background-color: transparent;
131
- border-color: var(--defaultborder);
132
- color: #171717;
158
+ background-color: transparent !important;
159
+ border-color: var(--defaultborder) !important;
160
+ color: #171717 !important;
133
161
 
134
162
  &:hover {
135
- background-color: color.adjust($light, $lightness: -7.5%);
136
- border-color: color.adjust($defaultborder, $lightness: -10%);
163
+ background-color: color.adjust($light, $lightness: -7.5%) !important;
164
+ border-color: color.adjust($defaultborder, $lightness: -10%) !important;
137
165
  }
138
166
 
139
167
  &:focus {
140
- box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
141
- border-color: var(--primary);
142
- outline: none;
168
+ box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25) !important;
169
+ border-color: var(--primary) !important;
170
+ outline: none !important;
143
171
  }
144
172
 
145
173
  &:active {
146
- background-color: color.adjust($light, $lightness: -10%);
147
- border-color: color.adjust($defaultborder, $lightness: -15%);
174
+ background-color: color.adjust($light, $lightness: -10%) !important;
175
+ border-color: color.adjust($defaultborder, $lightness: -15%) !important;
148
176
  }
149
177
 
150
178
  &.disabled,
151
179
  &:disabled {
152
- opacity: 0.65;
153
- background-color: color.adjust($light, $lightness: -7.5%);
154
- cursor: not-allowed;
180
+ opacity: 0.65 !important;
181
+ background-color: color.adjust($light, $lightness: -7.5%) !important;
182
+ cursor: not-allowed !important;
155
183
  }
156
184
  }
157
185
 
158
186
  .ms-btn-pressed {
159
- background: #ebebeb;
160
- color: #1B1F22;
187
+ background: #ebebeb !important;
188
+ color: #1B1F22 !important;
161
189
  border: 1px solid var(--semantics-border-subtle-primary, #CCCCCC) !important;
162
190
  }
163
191
 
164
192
  .ms-btn-disabled {
165
- background: #ebebeb;
166
- color: #8a8585;
193
+ background: #ebebeb !important;
194
+ color: #8a8585 !important;
167
195
  border: 1px solid var(--semantics-border-subtle-primary, #CCCCCC) !important;
168
196
  }
169
197
 
@@ -171,460 +199,466 @@ $muted: #6A6B6D;
171
199
  background: transparent !important;
172
200
  border: thin solid #0084FF !important;
173
201
  color: #1B1F22 !important;
202
+ box-shadow: 0 0 0 1px #B7DCFF !important;
174
203
  }
175
204
 
176
205
  .ms-btn-hover {
177
- background: #f5f5f5;
178
- color: #1B1F22;
206
+ background: #f5f5f5 !important;
207
+ color: #1B1F22 !important;
179
208
  border: 1px solid var(--semantics-border-subtle-primary, #CCCCCC) !important;
180
209
  }
181
210
 
182
211
  .ms-btn-focus {
183
- background: transparent;
184
- border: thin solid #0084FF;
185
- color: #1B1F22;
212
+ background: transparent !important;
213
+ border: thin solid #0084FF !important;
214
+ color: #1B1F22 !important;
186
215
  }
187
216
 
188
217
 
189
218
  .ms-btn-primary {
190
- background-color: var(--primary);
191
- border-color: var(--primary);
192
- color: #fff;
219
+ background-color: var(--primary) !important;
220
+ border-color: var(--primary) !important;
221
+ color: #fff !important;
193
222
 
194
223
  &:hover {
195
- background-color: color.adjust($primary, $lightness: -7.5%);
196
- border-color: color.adjust($primary, $lightness: -10%);
224
+ background-color: color.adjust($primary, $lightness: -7.5%) !important;
225
+ border-color: color.adjust($primary, $lightness: -10%) !important;
197
226
  }
198
227
  }
199
228
 
200
229
  .ms-btn-secondary {
201
- background-color: var(--secondary);
202
- border-color: var(--secondary);
203
- color: #fff;
230
+ background-color: var(--secondary) !important;
231
+ border-color: var(--secondary) !important;
232
+ color: #fff !important;
204
233
 
205
234
  &:hover {
206
- background-color: color.adjust($secondary, $lightness: -7.5%);
207
- border-color: color.adjust($secondary, $lightness: -10%);
235
+ background-color: color.adjust($secondary, $lightness: -7.5%) !important;
236
+ border-color: color.adjust($secondary, $lightness: -10%) !important;
208
237
  }
209
238
  }
210
239
 
211
240
  .ms-btn-success {
212
- background-color: var(--success);
213
- border-color: var(--success);
214
- color: #fff;
241
+ background-color: var(--success) !important;
242
+ border-color: var(--success) !important;
243
+ color: #fff !important;
215
244
 
216
245
  &:hover {
217
- background-color: color.adjust($success, $lightness: -7.5%);
218
- border-color: color.adjust($success, $lightness: -10%);
246
+ background-color: color.adjust($success, $lightness: -7.5%) !important;
247
+ border-color: color.adjust($success, $lightness: -10%) !important;
219
248
  }
220
249
  }
221
250
 
222
251
  .ms-btn-danger {
223
- background-color: var(--danger);
224
- border-color: var(--danger);
225
- color: #fff;
252
+ background-color: var(--danger) !important;
253
+ border-color: var(--danger) !important;
254
+ color: #fff !important;
226
255
 
227
256
  &:hover {
228
- background-color: color.adjust($danger, $lightness: -7.5%);
229
- border-color: color.adjust($danger, $lightness: -10%);
257
+ background-color: color.adjust($danger, $lightness: -7.5%) !important;
258
+ border-color: color.adjust($danger, $lightness: -10%) !important;
230
259
  }
231
260
  }
232
261
 
233
262
  .ms-btn-warning {
234
- background-color: var(--warning);
235
- border-color: var(--warning);
236
- color: #ffffff;
263
+ background-color: var(--warning) !important;
264
+ border-color: var(--warning) !important;
265
+ color: #ffffff !important;
237
266
 
238
267
  &:hover {
239
- background-color: color.adjust($warning, $lightness: -7.5%);
240
- border-color: color.adjust($warning, $lightness: -10%);
268
+ background-color: color.adjust($warning, $lightness: -7.5%) !important;
269
+ border-color: color.adjust($warning, $lightness: -10%) !important;
241
270
  }
242
271
  }
243
272
 
244
273
  .ms-btn-info {
245
- background-color: var(--info);
246
- border-color: var(--info);
247
- color: #fff;
274
+ background-color: var(--info) !important;
275
+ border-color: var(--info) !important;
276
+ color: #fff !important;
248
277
 
249
278
  &:hover {
250
- background-color: color.adjust($info, $lightness: -7.5%);
251
- border-color: color.adjust($info, $lightness: -10%);
279
+ background-color: color.adjust($info, $lightness: -7.5%) !important;
280
+ border-color: color.adjust($info, $lightness: -10%) !important;
252
281
  }
253
282
  }
254
283
 
255
284
  .ms-btn-light {
256
- background-color: var(--light);
257
- border-color: var(--light);
258
- color: #212529;
285
+ background-color: var(--light) !important;
286
+ border-color: var(--light) !important;
287
+ color: #212529 !important;
259
288
 
260
289
  &:hover {
261
- background-color: color.adjust($light, $lightness: -7.5%);
262
- border-color: color.adjust($light, $lightness: -10%);
290
+ background-color: color.adjust($light, $lightness: -7.5%) !important;
291
+ border-color: color.adjust($light, $lightness: -10%) !important;
263
292
  }
264
293
  }
265
294
 
266
295
  .ms-btn-dark {
267
- background-color: var(--dark);
268
- border-color: var(--dark);
269
- color: #fff;
296
+ background-color: var(--dark) !important;
297
+ border-color: var(--dark) !important;
298
+ color: #fff !important;
270
299
 
271
300
  &:hover {
272
- background-color: color.adjust($dark, $lightness: -7.5%);
273
- border-color: color.adjust($dark, $lightness: -10%);
301
+ background-color: color.adjust($dark, $lightness: -7.5%) !important;
302
+ border-color: color.adjust($dark, $lightness: -10%) !important;
274
303
  }
275
304
  }
276
305
 
277
306
  .ms-btn-link {
278
- background-color: transparent;
279
- border-color: transparent;
280
- color: var(--link);
307
+ background-color: transparent !important;
308
+ border-color: transparent !important;
309
+ color: var(--link) !important;
281
310
 
282
311
  &:hover {
283
- color: color.adjust($link, $lightness: -15%);
284
- text-decoration: underline;
312
+ color: color.adjust($link, $lightness: -15%) !important;
313
+ text-decoration: underline !important;
285
314
  }
286
315
  }
287
316
 
288
317
  .ms-btn-subtle {
289
- background-color: transparent;
290
- border-color: transparent;
291
- color: #000000;
318
+ background-color: transparent !important;
319
+ border-color: transparent !important;
320
+ color: #000000 !important;
292
321
 
293
322
  &:hover {
294
- color: #000000;
323
+ color: #000000 !important;
295
324
  ;
296
325
  // text-decoration: underline;
297
326
  }
298
327
  }
299
328
 
300
329
  .ms-btn-skeleton {
301
- background: var(--skeleton);
302
- background-size: 200% 100%;
303
- animation: shimmer 1.5s infinite;
304
- color: transparent;
330
+ background: var(--skeleton) !important;
331
+ background-size: 200% 100% !important;
332
+ animation: shimmer 1.5s infinite !important;
333
+ color: transparent !important;
305
334
  border-color: $skeleton;
306
- cursor: default;
335
+ cursor: default !important;
336
+ -webkit-animation: shimmer 1.5s infinite !important;
307
337
  }
308
338
 
309
339
  @keyframes shimmer {
310
340
  0% {
311
- background-position: -200% 0;
341
+ background-position: -200% 0 !important;
312
342
  }
313
343
 
314
344
  100% {
315
- background-position: 200% 0;
345
+ background-position: 200% 0 !important;
316
346
  }
317
347
  }
318
348
 
319
349
  // Typography
320
350
  h1 {
321
- font-size: 32px;
322
- line-height: 40px;
323
- font-weight: 600;
324
- letter-spacing: -1%;
325
- margin: 0%;
351
+ font-size: 32px !important;
352
+ line-height: 40px !important;
353
+ font-weight: 600 !important;
354
+ letter-spacing: -1% !important;
355
+ margin: 0% !important;
326
356
  }
327
357
 
328
358
  h2 {
329
- font-size: 24px;
330
- line-height: 30px;
331
- font-weight: 600;
332
- letter-spacing: -1%;
333
- margin: 0%;
359
+ font-size: 24px !important;
360
+ line-height: 30px !important;
361
+ font-weight: 600 !important;
362
+ letter-spacing: -1% !important;
363
+ margin: 0% !important;
334
364
  }
335
365
 
336
366
  h3 {
337
- font-size: 20px;
338
- line-height: 25px;
339
- font-weight: 600;
340
- letter-spacing: -1%;
341
- margin: 0%;
367
+ font-size: 20px !important;
368
+ line-height: 25px !important;
369
+ font-weight: 600 !important;
370
+ letter-spacing: -1% !important;
371
+ margin: 0% !important;
342
372
  }
343
373
 
344
374
  p,
345
375
  div,
346
376
  span {
347
- font-size: 16px;
348
- line-height: 20px;
349
- font-weight: 400;
350
- letter-spacing: 0%;
377
+ font-size: 16px !important;
378
+ line-height: 20px !important;
379
+ font-weight: 400 !important;
380
+ letter-spacing: 0% !important;
351
381
  }
352
382
 
353
383
  // Card component
354
384
  .ms-card {
355
- position: relative;
356
- display: flex;
357
- flex-direction: column;
358
- min-width: 0;
359
- word-wrap: break-word;
360
- background-color: #fff;
361
- background-clip: border-box;
362
- border: 1px solid rgba(0, 0, 0, 0.125);
363
- border-radius: 0.75rem;
385
+ position: relative !important;
386
+ display: flex !important;
387
+ flex-direction: column !important;
388
+ min-width: 0 !important;
389
+ word-wrap: break-word !important;
390
+ background-color: #fff !important;
391
+ background-clip: border-box !important;
392
+ border: 1px solid rgba(0, 0, 0, 0.125) !important;
393
+ border-radius: 8px !important;
394
+ -webkit-border-radius: 8px !important;
395
+ -moz-border-radius: 8px !important;
396
+ -ms-border-radius: 8px !important;
397
+ -o-border-radius: 8px !important;
364
398
  }
365
399
 
366
400
  .ms-card-header {
367
- padding: 10px 16px;
368
- margin-bottom: 0;
401
+ padding: 10px 16px !important;
402
+ margin-bottom: 0 !important;
369
403
  // background-color: rgba(0, 0, 0, 0.03);
370
- border-bottom: 1px solid rgba(0, 0, 0, 0.125);
371
- border-top-left-radius: calc(0.75rem - 1px);
372
- border-top-right-radius: calc(0.75rem - 1px);
404
+ border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
405
+ border-top-left-radius: calc(0.75rem - 1px) !important;
406
+ border-top-right-radius: calc(0.75rem - 1px) !important;
373
407
  }
374
408
 
375
409
  .ms-card-toolbar {
376
- padding: 10px 16px;
377
- margin-bottom: 0;
410
+ padding: 10px 16px !important;
411
+ margin-bottom: 0 !important;
378
412
  // background-color: rgba(0, 0, 0, 0.03);
379
- border-bottom: 1px solid rgba(0, 0, 0, 0.125);
413
+ border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
380
414
  // border-top-left-radius: calc(0.75rem - 1px);
381
415
  // border-top-right-radius: calc(0.75rem - 1px);
382
416
  }
383
417
 
384
418
  .ms-card-body {
385
- flex: 1 1 auto;
386
- padding: 16px;
419
+ flex: 1 1 auto !important;
420
+ padding: 16px !important;
387
421
  }
388
422
 
389
423
  .ms-card-title {
390
- margin-top: 0.5rem;
391
- margin-bottom: 0.5rem;
392
- font-size: 1.25rem;
393
- font-weight: 500;
424
+ margin-top: 0.5rem !important;
425
+ margin-bottom: 0.5rem !important;
426
+ font-size: 1.25rem !important;
427
+ font-weight: 500 !important;
394
428
  }
395
429
 
396
430
  .ms-card-text {
397
- margin-top: 0;
398
- margin-bottom: 1rem;
431
+ margin-top: 0 !important;
432
+ margin-bottom: 1rem !important;
399
433
  }
400
434
 
401
435
  // Text color utilities
402
436
  .ms-text-primary {
403
- color: var(--primary);
437
+ color: var(--primary) !important;
404
438
  }
405
439
 
406
440
  .ms-text-secondary {
407
- color: var(--secondary);
441
+ color: var(--secondary) !important;
408
442
  }
409
443
 
410
444
  .ms-text-success {
411
- color: var(--success);
445
+ color: var(--success) !important;
412
446
  }
413
447
 
414
448
  .ms-text-danger {
415
- color: var(--danger);
449
+ color: var(--danger) !important;
416
450
  }
417
451
 
418
452
  .ms-text-warning {
419
- color: var(--warning);
453
+ color: var(--warning) !important;
420
454
  }
421
455
 
422
456
  .ms-text-info {
423
- color: var(--info);
457
+ color: var(--info) !important;
424
458
  }
425
459
 
426
460
  .ms-text-light {
427
- color: var(--light);
461
+ color: var(--light) !important;
428
462
  }
429
463
 
430
464
  .ms-text-dark {
431
- color: var(--dark);
465
+ color: var(--dark) !important;
432
466
  }
433
467
 
434
468
  .ms-text-link {
435
- color: var(--link);
469
+ color: var(--link) !important;
436
470
  }
437
471
 
438
472
  .ms-text-muted {
439
- color: var(--muted);
473
+ color: var(--muted) !important;
440
474
  }
441
475
 
442
476
  // Font weight utilities
443
477
  .ms-f-w-100 {
444
- font-weight: 100;
478
+ font-weight: 100 !important;
445
479
  }
446
480
 
447
481
  .ms-f-w-200 {
448
- font-weight: 200;
482
+ font-weight: 200 !important;
449
483
  }
450
484
 
451
485
  .ms-f-w-300 {
452
- font-weight: 300;
486
+ font-weight: 300 !important;
453
487
  }
454
488
 
455
489
  .ms-f-w-400 {
456
- font-weight: 400;
490
+ font-weight: 400 !important;
457
491
  }
458
492
 
459
493
  .ms-f-w-500 {
460
- font-weight: 500;
494
+ font-weight: 500 !important;
461
495
  }
462
496
 
463
497
  .ms-f-w-600 {
464
- font-weight: 600;
498
+ font-weight: 600 !important;
465
499
  }
466
500
 
467
501
  .ms-f-w-700 {
468
- font-weight: 700;
502
+ font-weight: 700 !important;
469
503
  }
470
504
 
471
505
  .ms-f-w-800 {
472
- font-weight: 800;
506
+ font-weight: 800 !important;
473
507
  }
474
508
 
475
509
  .ms-f-w-900 {
476
- font-weight: 900;
510
+ font-weight: 900 !important;
477
511
  }
478
512
 
479
513
  // Font size utilities
480
514
  .ms-fs-8 {
481
- font-size: 8px;
515
+ font-size: 8px !important;
482
516
  }
483
517
 
484
518
  .ms-fs-10 {
485
- font-size: 10px;
519
+ font-size: 10px !important;
486
520
  }
487
521
 
488
522
  .ms-fs-12 {
489
- font-size: 12px;
523
+ font-size: 12px !important;
490
524
  }
491
525
 
492
526
  .ms-fs-14 {
493
- font-size: 14px;
527
+ font-size: 14px !important;
494
528
  }
495
529
 
496
530
  .ms-fs-16 {
497
- font-size: 16px;
531
+ font-size: 16px !important;
498
532
  }
499
533
 
500
534
  .ms-fs-18 {
501
- font-size: 18px;
535
+ font-size: 18px !important;
502
536
  }
503
537
 
504
538
  .ms-fs-20 {
505
- font-size: 20px;
539
+ font-size: 20px !important;
506
540
  }
507
541
 
508
542
  .ms-fs-22 {
509
- font-size: 22px;
543
+ font-size: 22px !important;
510
544
  }
511
545
 
512
546
  .ms-fs-24 {
513
- font-size: 24px;
547
+ font-size: 24px !important;
514
548
  }
515
549
 
516
550
  .ms-fs-26 {
517
- font-size: 26px;
551
+ font-size: 26px !important;
518
552
  }
519
553
 
520
554
  .ms-fs-28 {
521
- font-size: 28px;
555
+ font-size: 28px !important;
522
556
  }
523
557
 
524
558
  .ms-fs-30 {
525
- font-size: 30px;
559
+ font-size: 30px !important;
526
560
  }
527
561
 
528
562
  .ms-fs-32 {
529
- font-size: 32px;
563
+ font-size: 32px !important;
530
564
  }
531
565
 
532
566
  .ms-rounded-default {
533
- border-radius: 12px;
534
- -webkit-border-radius: 12px;
535
- -moz-border-radius: 12px;
536
- -ms-border-radius: 12px;
537
- -o-border-radius: 12px;
567
+ border-radius: 12px !important;
568
+ -webkit-border-radius: 12px !important;
569
+ -moz-border-radius: 12px !important;
570
+ -ms-border-radius: 12px !important;
571
+ -o-border-radius: 12px !important;
538
572
  }
539
573
 
540
574
  .ms-border {
541
- border: 1px solid #E0E0E0;
575
+ border: 1px solid #E0E0E0 !important;
542
576
  }
543
577
 
544
578
  .ms-border-left {
545
- border-left: 1px solid #E0E0E0;
579
+ border-left: 1px solid #E0E0E0 !important;
546
580
  }
547
581
 
548
582
  .ms-border-bottom-success-2px {
549
- border-bottom: 2px solid var(--semantics-border-status-success-primary-default, #00935C)
583
+ border-bottom: 2px solid var(--semantics-border-status-success-primary-default, #00935C) !important
550
584
  }
551
585
 
552
586
  .ms-border-bottom {
553
- border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)
587
+ border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0) !important
554
588
  }
555
589
 
556
590
  .ms-border-success-2px {
557
- border: 2px solid var(--semantics-border-status-success-primary-default, #00935C)
591
+ border: 2px solid var(--semantics-border-status-success-primary-default, #00935C) !important
558
592
  }
559
593
 
560
594
  .ms-border-bottom-danger-2px {
561
- border-bottom: 2px solid var(--semantics-border-status-success-primary-default, #DA3E37)
595
+ border-bottom: 2px solid var(--semantics-border-status-success-primary-default, #DA3E37) !important
562
596
  }
563
597
 
564
598
  .ms-row {
565
- display: flex;
566
- flex-wrap: wrap;
599
+ display: flex !important;
600
+ flex-wrap: wrap !important;
567
601
  }
568
602
 
569
603
  /* Percentage-based widths for 12-ms-column grid */
570
604
  .ms-col-1 {
571
- flex: 0 0 auto;
572
- max-width: 8.3333%;
605
+ flex: 0 0 auto !important;
606
+ max-width: 8.3333% !important;
573
607
  }
574
608
 
575
609
  .ms-col-2 {
576
- flex: 0 0 auto;
577
- max-width: 16.6667%;
610
+ flex: 0 0 auto !important;
611
+ max-width: 16.6667% !important;
578
612
  }
579
613
 
580
614
  .ms-col-3 {
581
- flex: 0 0 auto;
582
- max-width: 24.8%;
615
+ flex: 0 0 auto !important;
616
+ max-width: 24.8% !important;
583
617
  }
584
618
 
585
619
  .ms-col-4 {
586
- flex: 0 0 auto;
587
- max-width: 33.3333%;
620
+ flex: 0 0 auto !important;
621
+ max-width: 33.3333% !important;
588
622
  }
589
623
 
590
624
  .ms-col-5 {
591
- flex: 0 0 auto;
592
- max-width: 41.6667%;
625
+ flex: 0 0 auto !important;
626
+ max-width: 41.6667% !important;
593
627
  }
594
628
 
595
629
  .ms-col-6 {
596
- flex: 0 0 auto;
597
- max-width: 50%;
630
+ flex: 0 0 auto !important;
631
+ max-width: 50% !important;
598
632
  }
599
633
 
600
634
  .ms-col-7 {
601
- flex: 0 0 auto;
602
- max-width: 58.3333%;
635
+ flex: 0 0 auto !important;
636
+ max-width: 58.3333% !important;
603
637
  }
604
638
 
605
639
  .ms-col-8 {
606
- flex: 0 0 auto;
607
- max-width: 66.6667%;
640
+ flex: 0 0 auto !important;
641
+ max-width: 66.6667% !important;
608
642
  }
609
643
 
610
644
  .ms-col-9 {
611
- flex: 0 0 auto;
612
- max-width: 75%;
645
+ flex: 0 0 auto !important;
646
+ max-width: 75% !important;
613
647
  }
614
648
 
615
649
  .ms-col-10 {
616
- flex: 0 0 auto;
617
- max-width: 83.3333%;
650
+ flex: 0 0 auto !important;
651
+ max-width: 83.3333% !important;
618
652
  }
619
653
 
620
654
  .ms-col-11 {
621
- flex: 0 0 auto;
622
- max-width: 91.6667%;
655
+ flex: 0 0 auto !important;
656
+ max-width: 91.6667% !important;
623
657
  }
624
658
 
625
659
  .ms-col-12 {
626
- flex: 0 0 auto;
627
- max-width: 100%;
660
+ flex: 0 0 auto !important;
661
+ max-width: 100% !important;
628
662
  }
629
663
 
630
664
  .ms-d-flex {
@@ -734,41 +768,49 @@ span {
734
768
  }
735
769
 
736
770
  .ms-form-control {
737
- width: 196;
738
- height: 36;
739
- gap: 6;
740
- opacity: 1;
741
- border-width: 1px;
742
- padding-top: 12px;
743
- padding-right: 8px;
744
- padding-bottom: 12px;
745
- padding-left: 8px;
746
- border-radius: 8px;
747
- background: var(--semantics-surface-subtle-primary-default, #FFFFFF);
748
- border: 1px solid var(--semantics-border-subtle-secondary, #E0E0E0)
771
+ //width: 196;
772
+ height: 12px !important;
773
+ gap: 6 !important;
774
+ opacity: 1 !important;
775
+ border-width: 1px !important;
776
+ padding-top: 12px !important;
777
+ padding-right: 8px !important;
778
+ padding-bottom: 12px !important;
779
+ padding-left: 8px !important;
780
+ border-radius: 8px !important;
781
+ background: var(--semantics-surface-subtle-primary-default, #FFFFFF) !important;
782
+ border: 1px solid var(--semantics-border-subtle-secondary, #E0E0E0) !important;
783
+ -webkit-border-radius: 8px !important;
784
+ -moz-border-radius: 8px !important;
785
+ -ms-border-radius: 8px !important;
786
+ -o-border-radius: 8px !important;
749
787
  }
750
788
 
751
789
  label {
752
- font-family: Family/Sans;
753
- font-weight: 450;
754
- font-style: Regular;
755
- font-size: 14px;
756
- line-height: 18px;
757
- letter-spacing: 0%;
758
- color: var(--semantics-text-subtle-primary-default, #1B1F22);
790
+ font-family: Family/Sans !important;
791
+ font-weight: 450 !important;
792
+ font-style: Regular !important;
793
+ font-size: 14px !important;
794
+ line-height: 18px !important;
795
+ letter-spacing: 0% !important;
796
+ color: var(--semantics-text-subtle-primary-default, #1B1F22) !important;
759
797
  }
760
798
 
761
799
  select {
762
- height: 36px;
763
- opacity: 1;
764
- border-width: Thin;
765
- padding-top: 4px;
766
- padding-right: 8px;
767
- padding-bottom: 4px;
768
- padding-left: 8px;
769
- border-radius: 8px;
770
- background: var(--semantics-surface-subtle-primary-default, #FFFFFF);
771
- border: 1px solid var(--semantics-border-subtle-secondary, #E0E0E0)
800
+ height: 36px !important;
801
+ opacity: 1 !important;
802
+ border-width: Thin !important;
803
+ padding-top: 4px !important;
804
+ padding-right: 8px !important;
805
+ padding-bottom: 4px !important;
806
+ padding-left: 8px !important;
807
+ border-radius: 8px !important;
808
+ background: var(--semantics-surface-subtle-primary-default, #FFFFFF) !important;
809
+ border: 1px solid var(--semantics-border-subtle-secondary, #E0E0E0) !important;
810
+ -webkit-border-radius: 8px !important;
811
+ -moz-border-radius: 8px !important;
812
+ -ms-border-radius: 8px !important;
813
+ -o-border-radius: 8px !important;
772
814
  }
773
815
 
774
816
  ms-button .ms-btn-default {
@@ -790,105 +832,105 @@ ms-button .ms-btn-default {
790
832
  }
791
833
 
792
834
  .ms-w-50 {
793
- width: 50%;
835
+ width: 50% !important;
794
836
  }
795
837
 
796
838
  .ms-w-33 {
797
- width: 33.333%;
839
+ width: 33.333% !important;
798
840
  }
799
841
 
800
842
 
801
843
  .ms-cursor-pointer {
802
- cursor: pointer;
844
+ cursor: pointer !important;
803
845
  }
804
846
 
805
847
  .ms-pointer-events-none {
806
- pointer-events: none;
848
+ pointer-events: none !important;
807
849
  }
808
850
 
809
851
 
810
852
  .ms-shadow-sm {
811
- box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
853
+ box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
812
854
  }
813
855
 
814
856
  .ms-shadow {
815
- box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
857
+ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
816
858
  }
817
859
 
818
860
  .ms-shadow-lg {
819
- box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
861
+ box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
820
862
  }
821
863
 
822
864
  .ms-overflow-hidden {
823
- overflow: hidden;
865
+ overflow: hidden !important;
824
866
  }
825
867
 
826
868
  .ms-overflow-auto {
827
- overflow: auto;
869
+ overflow: auto !important;
828
870
  }
829
871
 
830
872
  .ms-overflow-scroll {
831
- overflow: scroll;
873
+ overflow: scroll !important;
832
874
  }
833
875
 
834
876
  .ms-overflow-overlay {
835
- overflow: overlay;
877
+ overflow: overlay !important;
836
878
  }
837
879
 
838
880
  .ms-text-start {
839
- text-align: left;
881
+ text-align: left !important;
840
882
  }
841
883
 
842
884
  .ms-text-center {
843
- text-align: center;
885
+ text-align: center !important;
844
886
  }
845
887
 
846
888
  .ms-text-end {
847
- text-align: right;
889
+ text-align: right !important;
848
890
  }
849
891
 
850
892
  .ms-w-25 {
851
- width: 25%;
893
+ width: 25% !important;
852
894
  }
853
895
 
854
896
  .ms-w-50 {
855
- width: 50%;
897
+ width: 50% !important;
856
898
  }
857
899
 
858
900
  .ms-w-75 {
859
- width: 75%;
901
+ width: 75% !important;
860
902
  }
861
903
 
862
904
  .ms-w-100 {
863
- width: 100%;
905
+ width: 100% !important;
864
906
  }
865
907
 
866
908
  .ms-p-0 {
867
- padding: 0;
909
+ padding: 0 !important;
868
910
  }
869
911
 
870
912
  .ms-p-1 {
871
- padding: .25rem;
913
+ padding: .25rem !important;
872
914
  }
873
915
 
874
916
  .ms-p-2 {
875
- padding: .5rem;
917
+ padding: .5rem !important;
876
918
  }
877
919
 
878
920
  .ms-p-3 {
879
- padding: 1rem;
921
+ padding: 1rem !important;
880
922
  }
881
923
 
882
924
  .ms-p-4 {
883
- padding: 1.5rem;
925
+ padding: 1.5rem !important;
884
926
  }
885
927
 
886
928
  .ms-p-5 {
887
- padding: 3rem;
929
+ padding: 3rem !important;
888
930
  }
889
931
 
890
932
  .ms-pt-3 {
891
- padding-top: 1rem;
933
+ padding-top: 1rem !important;
892
934
  }
893
935
 
894
936
  .ms-pt-2 {
@@ -896,11 +938,11 @@ ms-button .ms-btn-default {
896
938
  }
897
939
 
898
940
  .ms-ps-4 {
899
- padding-left: 1.5rem;
941
+ padding-left: 1.5rem !important;
900
942
  }
901
943
 
902
944
  .ms-ps-3 {
903
- padding-left: 1rem;
945
+ padding-left: 1rem !important;
904
946
  }
905
947
 
906
948
  .ms-ps-2 {
@@ -908,11 +950,11 @@ ms-button .ms-btn-default {
908
950
  }
909
951
 
910
952
  .ms-pe-4 {
911
- padding-right: 1.5rem;
953
+ padding-right: 1.5rem !important;
912
954
  }
913
955
 
914
956
  .ms-pe-3 {
915
- padding-right: 1rem;
957
+ padding-right: 1rem !important;
916
958
  }
917
959
 
918
960
  .ms-pe-2 {
@@ -920,43 +962,43 @@ ms-button .ms-btn-default {
920
962
  }
921
963
 
922
964
  .ms-pb-3 {
923
- padding-bottom: 1rem;
965
+ padding-bottom: 1rem !important;
924
966
  }
925
967
 
926
968
  .ms-m-0 {
927
- margin: 0;
969
+ margin: 0 !important;
928
970
  }
929
971
 
930
972
  .ms-m-1 {
931
- margin: .25rem;
973
+ margin: .25rem !important;
932
974
  }
933
975
 
934
976
  .ms-m-2 {
935
- margin: .5rem;
977
+ margin: .5rem !important;
936
978
  }
937
979
 
938
980
  .ms-m-3 {
939
- margin: 1rem;
981
+ margin: 1rem !important;
940
982
  }
941
983
 
942
984
  .ms-m-4 {
943
- margin: 1.5rem;
985
+ margin: 1.5rem !important;
944
986
  }
945
987
 
946
988
  .ms-m-5 {
947
- margin: 3rem;
989
+ margin: 3rem !important;
948
990
  }
949
991
 
950
992
  .ms-mt-3 {
951
- margin-top: 1rem;
993
+ margin-top: 1rem !important;
952
994
  }
953
995
 
954
996
  .ms-mb-3 {
955
- margin-bottom: 1rem;
997
+ margin-bottom: 1rem !important;
956
998
  }
957
999
 
958
1000
  .ms-ms-3 {
959
- margin-left: 1rem;
1001
+ margin-left: 1rem !important;
960
1002
  }
961
1003
 
962
1004
  .ms-me-0 {
@@ -964,132 +1006,132 @@ ms-button .ms-btn-default {
964
1006
  }
965
1007
 
966
1008
  .ms-me-1 {
967
- margin-right: .25rem;
1009
+ margin-right: .25rem !important;
968
1010
  }
969
1011
 
970
1012
  .ms-me-2 {
971
- margin-right: .5rem;
1013
+ margin-right: .5rem !important;
972
1014
  }
973
1015
 
974
1016
  .ms-me-3 {
975
- margin-right: 1rem;
1017
+ margin-right: 1rem !important;
976
1018
  }
977
1019
 
978
1020
  .ms-me-4 {
979
- margin-right: 1.5rem;
1021
+ margin-right: 1.5rem !important;
980
1022
  }
981
1023
 
982
1024
  .ms-me-5 {
983
- margin-right: 3rem;
1025
+ margin-right: 3rem !important;
984
1026
  }
985
1027
 
986
1028
  .ms-mx-auto {
987
- margin-left: auto;
988
- margin-right: auto;
1029
+ margin-left: auto !important;
1030
+ margin-right: auto !important;
989
1031
  }
990
1032
 
991
1033
  .ms-align-items-start {
992
- align-items: flex-start;
1034
+ align-items: flex-start !important;
993
1035
  }
994
1036
 
995
1037
  .ms-align-items-center {
996
- align-items: center;
1038
+ align-items: center !important;
997
1039
  }
998
1040
 
999
1041
  .ms-align-items-end {
1000
- align-items: flex-end;
1042
+ align-items: flex-end !important;
1001
1043
  }
1002
1044
 
1003
1045
  .ms-align-items-stretch {
1004
- align-items: stretch;
1046
+ align-items: stretch !important;
1005
1047
  }
1006
1048
 
1007
1049
  .ms-justify-content-start {
1008
- justify-content: flex-start;
1050
+ justify-content: flex-start !important;
1009
1051
  }
1010
1052
 
1011
1053
  .ms-justify-content-center {
1012
- justify-content: center;
1054
+ justify-content: center !important;
1013
1055
  }
1014
1056
 
1015
1057
  .ms-justify-content-end {
1016
- justify-content: flex-end;
1058
+ justify-content: flex-end !important;
1017
1059
  }
1018
1060
 
1019
1061
  .ms-justify-content-between {
1020
- justify-content: space-between;
1062
+ justify-content: space-between !important;
1021
1063
  }
1022
1064
 
1023
1065
  .ms-justify-content-around {
1024
- justify-content: space-around;
1066
+ justify-content: space-around !important;
1025
1067
  }
1026
1068
 
1027
1069
  .ms-justify-content-evenly {
1028
- justify-content: space-evenly;
1070
+ justify-content: space-evenly !important;
1029
1071
  }
1030
1072
 
1031
1073
  .ms-flex-wrap {
1032
- flex-wrap: wrap;
1074
+ flex-wrap: wrap !important;
1033
1075
  }
1034
1076
 
1035
1077
  .ms-flex-nowrap {
1036
- flex-wrap: nowrap;
1078
+ flex-wrap: nowrap !important;
1037
1079
  }
1038
1080
 
1039
1081
  .ms-flex-row {
1040
- flex-direction: row;
1082
+ flex-direction: row !important;
1041
1083
  }
1042
1084
 
1043
1085
  .ms-flex-column {
1044
- flex-direction: column;
1086
+ flex-direction: column !important;
1045
1087
  }
1046
1088
 
1047
1089
  .ms-flex-row-reverse {
1048
- flex-direction: row-reverse;
1090
+ flex-direction: row-reverse !important;
1049
1091
  }
1050
1092
 
1051
1093
  .ms-flex-column-reverse {
1052
- flex-direction: column-reverse;
1094
+ flex-direction: column-reverse !important;
1053
1095
  }
1054
1096
 
1055
1097
  .ms-position-relative {
1056
- position: relative;
1098
+ position: relative !important;
1057
1099
  }
1058
1100
 
1059
1101
  .ms-position-absolute {
1060
- position: absolute;
1102
+ position: absolute !important;
1061
1103
  }
1062
1104
 
1063
1105
  .ms-position-fixed {
1064
- position: fixed;
1106
+ position: fixed !important;
1065
1107
  }
1066
1108
 
1067
1109
  .ms-position-sticky {
1068
- position: sticky;
1110
+ position: sticky !important;
1069
1111
  }
1070
1112
 
1071
1113
  .ms-d-block {
1072
- display: block;
1114
+ display: block !important;
1073
1115
  }
1074
1116
 
1075
1117
  .ms-d-inline {
1076
- display: inline;
1118
+ display: inline !important;
1077
1119
  }
1078
1120
 
1079
1121
  .ms-d-inline-block {
1080
- display: inline-block;
1122
+ display: inline-block !important;
1081
1123
  }
1082
1124
 
1083
1125
  .ms-d-flex {
1084
- display: flex;
1126
+ display: flex !important;
1085
1127
  }
1086
1128
 
1087
1129
  .ms-d-inline-flex {
1088
- display: inline-flex;
1130
+ display: inline-flex !important;
1089
1131
  }
1090
1132
 
1091
1133
  .ms-d-none {
1092
- display: none;
1134
+ display: none !important;
1093
1135
  }
1094
1136
 
1095
1137
 
@@ -1099,33 +1141,33 @@ ms-button .ms-btn-default {
1099
1141
 
1100
1142
 
1101
1143
  .ms-h-25 {
1102
- height: 25%;
1144
+ height: 25% !important;
1103
1145
  }
1104
1146
 
1105
1147
  .ms-h-50 {
1106
- height: 50%;
1148
+ height: 50% !important;
1107
1149
  }
1108
1150
 
1109
1151
  .ms-h-75 {
1110
- height: 75%;
1152
+ height: 75% !important;
1111
1153
  }
1112
1154
 
1113
1155
  .ms-h-100 {
1114
- height: 100%;
1156
+ height: 100% !important;
1115
1157
  }
1116
1158
 
1117
1159
  .ms-min-vh-100 {
1118
- min-height: 100vh;
1160
+ min-height: 100vh !important;
1119
1161
  }
1120
1162
 
1121
1163
  .ms-container {
1122
- padding-left: 12px;
1123
- padding-right: 12px;
1164
+ padding-left: 12px !important;
1165
+ padding-right: 12px !important;
1124
1166
  }
1125
1167
 
1126
1168
  .ms-row {
1127
- display: flex;
1128
- flex-wrap: wrap;
1169
+ display: flex !important;
1170
+ flex-wrap: wrap !important;
1129
1171
  }
1130
1172
 
1131
1173
 
@@ -1193,122 +1235,128 @@ ms-button .ms-btn-default {
1193
1235
 
1194
1236
  @media (min-width: 576px) {
1195
1237
  .ms-col-sm-1 {
1196
- flex: 0 0 8.3333%;
1197
- max-width: 8.3333%;
1238
+ flex: 0 0 8.3333% !important;
1239
+ max-width: 8.3333% !important;
1198
1240
  }
1199
1241
 
1200
1242
  .ms-col-sm-2 {
1201
- flex: 0 0 16.6667%;
1202
- max-width: 16.6667%;
1243
+ flex: 0 0 16.6667% !important;
1244
+ max-width: 16.6667% !important;
1203
1245
  }
1204
1246
 
1205
1247
  .ms-col-sm-3 {
1206
- flex: 0 0 25%;
1207
- max-width: 25%;
1248
+ flex: 0 0 25% !important;
1249
+ max-width: 25% !important;
1208
1250
  }
1209
1251
 
1210
1252
  .ms-col-sm-4 {
1211
- flex: 0 0 33.3333%;
1212
- max-width: 33.3333%;
1253
+ flex: 0 0 33.3333% !important;
1254
+ max-width: 33.3333% !important;
1213
1255
  }
1214
1256
 
1215
1257
  .ms-col-sm-6 {
1216
- flex: 0 0 50%;
1217
- max-width: 50%;
1258
+ flex: 0 0 50% !important;
1259
+ max-width: 50% !important;
1218
1260
  }
1219
1261
 
1220
1262
  .ms-col-sm-12 {
1221
- flex: 0 0 100%;
1222
- max-width: 100%;
1263
+ flex: 0 0 100% !important;
1264
+ max-width: 100% !important;
1223
1265
  }
1224
1266
  }
1225
1267
 
1226
1268
  @media (min-width: 768px) {
1227
1269
  .ms-col-md-1 {
1228
- flex: 0 0 8.3333%;
1229
- max-width: 8.3333%;
1270
+ flex: 0 0 8.3333% !important;
1271
+ max-width: 8.3333% !important;
1230
1272
  }
1231
1273
 
1232
1274
  .ms-col-md-2 {
1233
- flex: 0 0 16.6667%;
1234
- max-width: 16.6667%;
1275
+ flex: 0 0 16.6667% !important;
1276
+ max-width: 16.6667% !important;
1235
1277
  }
1236
1278
 
1237
1279
  .ms-col-md-3 {
1238
- flex: 0 0 25%;
1239
- max-width: 25%;
1280
+ flex: 0 0 25% !important;
1281
+ max-width: 25% !important;
1240
1282
  }
1241
1283
 
1242
1284
  .ms-col-md-4 {
1243
- flex: 0 0 33.3333%;
1244
- max-width: 33.3333%;
1285
+ flex: 0 0 33.3333% !important;
1286
+ max-width: 33.3333% !important;
1245
1287
  }
1246
1288
 
1247
1289
  .ms-col-md-6 {
1248
- flex: 0 0 50%;
1249
- max-width: 50%;
1290
+ flex: 0 0 50% !important;
1291
+ max-width: 50% !important;
1250
1292
  }
1251
1293
 
1252
1294
  .ms-col-md-12 {
1253
- flex: 0 0 100%;
1254
- max-width: 100%;
1295
+ flex: 0 0 100% !important;
1296
+ max-width: 100% !important;
1255
1297
  }
1256
1298
  }
1257
1299
 
1258
1300
  @media (min-width: 992px) {
1259
1301
  .ms-col-lg-1 {
1260
- flex: 0 0 8.3333%;
1261
- max-width: 8.3333%;
1302
+ flex: 0 0 8.3333% !important;
1303
+ max-width: 8.3333% !important;
1262
1304
  }
1263
1305
 
1264
1306
  .ms-col-lg-2 {
1265
- flex: 0 0 16.6667%;
1266
- max-width: 16.6667%;
1307
+ flex: 0 0 16.6667% !important;
1308
+ max-width: 16.6667% !important;
1267
1309
  }
1268
1310
 
1269
1311
  .ms-col-lg-3 {
1270
- flex: 0 0 25%;
1271
- max-width: 25%;
1312
+ flex: 0 0 25% !important;
1313
+ max-width: 25% !important;
1272
1314
  }
1273
1315
 
1274
1316
  .ms-col-lg-4 {
1275
- flex: 0 0 33.3333%;
1276
- max-width: 33.3333%;
1317
+ flex: 0 0 33.3333% !important;
1318
+ max-width: 33.3333% !important;
1277
1319
  }
1278
1320
 
1279
1321
  .ms-col-lg-6 {
1280
- flex: 0 0 50%;
1281
- max-width: 50%;
1322
+ flex: 0 0 50% !important;
1323
+ max-width: 50% !important;
1282
1324
  }
1283
1325
 
1284
1326
  .ms-col-lg-12 {
1285
- flex: 0 0 100%;
1286
- max-width: 100%;
1327
+ flex: 0 0 100% !important;
1328
+ max-width: 100% !important;
1287
1329
  }
1288
1330
  }
1289
1331
 
1290
1332
  @media (min-width: 1200px) {
1291
1333
  .ms-col-xl-3 {
1292
- flex: 0 0 25%;
1293
- max-width: 25%;
1334
+ flex: 0 0 25% !important;
1335
+ max-width: 25% !important;
1294
1336
  }
1295
1337
 
1296
1338
  .ms-col-xl-4 {
1297
- flex: 0 0 33.3333%;
1298
- max-width: 33.3333%;
1339
+ flex: 0 0 33.3333% !important;
1340
+ max-width: 33.3333% !important;
1299
1341
  }
1300
1342
 
1301
1343
  .ms-col-xl-6 {
1302
- flex: 0 0 50%;
1303
- max-width: 50%;
1344
+ flex: 0 0 50% !important;
1345
+ max-width: 50% !important;
1304
1346
  }
1305
1347
  }
1306
1348
 
1307
1349
  .ms-border-bottom {
1308
- border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)
1350
+ border-bottom: 1px solid var(--semantics-border-status-success-primary-default, #E0E0E0) !important;
1309
1351
  }
1310
1352
 
1311
1353
  .ms-scroll-h-195-calc {
1312
- height: calc(100vh - 195px);
1313
- overflow: overlay;
1354
+ height: calc(100vh - 195px) !important;
1355
+ overflow: overlay !important;
1356
+ }
1357
+
1358
+ ms-button {
1359
+ a{
1360
+ padding: 0px !important;
1361
+ }
1314
1362
  }