fix: resolve sass variables override

src/components/Charts/ActiveIssues/index.js

@@ -25,7 +25,7 @@ class ActiveIssuesDash extends React.Component {
             <div className="k-card">
                 <h2 className="k-card-header m-0">Active Issues</h2>
                 <div className="k-card-body">
-                    <TabStrip selected={this.state.selected} onSelect={this.handleSelect} animation={false} className="col-12">
+                    <TabStrip selected={this.state.selected} onSelect={this.handleSelect} animation={false}>
                         <TabStripTab title="All Issues">
                             <div className="row">
                                 <ActiveIssues active={active} count={activeCount} />

src/index.scss

@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import 'node_modules/@progress/kendo-theme-material/scss/all';
 
 @import 'styles/variables';
 @import 'styles/bootstrap-custom';
@@ -12,6 +11,8 @@
 @import 'styles/login';
 @import 'styles/typography';
 
+@import 'node_modules/@progress/kendo-theme-material/scss/all';
+
 body {
   margin:0;
   background-color: $body-bg;

src/styles/_variables.scss

@@ -17,6 +17,7 @@ $enable-print-styles:       false;
 // Grayscale and brand colors for use across Bootstrap.
 
 $primary: #2196F3;
+$accent: #2196F3;
 $secondary: #e10050;
 
 $gray-dark:                 #252830;
@@ -64,7 +65,7 @@ $h6-font-size: 0.5rem;
 $font-weight-bold: 500;
 
 $card-header-text: 1.25rem;
-$card-box-shadow: $box-shadow-depth-4;
+$card-box-shadow: 3rem;
 $card-spacer-y: 1rem;
 $card-spacer-x: 2rem;