diff --git a/src/app/utils.ts b/src/app/utils.ts
index 8fe3cdb9449d8b844b01d0e4daa7b23be57c1982..9de0924ca059552d51b47109882d5e1617b3f962 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -155,7 +155,9 @@ export function pieChartContextRenderer({ ctx, x, y, state: { selected, hover },
       ctx.shadowBlur = 10;
     }
 
-    ctx.fillStyle = style.color ? style.color : "red";
+    ctx.fillStyle = style.color ? style.color : 'rgba(255, 0, 0, 1)';
+    // set alpha value to 1
+    ctx.fillStyle = ctx.fillStyle.replace(/[^,]+(?=\))/, '1')
     ctx.strokeStyle = "black";
     ctx.lineWidth = 2;
     ctx.beginPath();
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 36d15ea284d35ea0ef72ffc5c962a66df6b44707..aa5e9f9a1f17d77e3bf76af1fdd1821e89bb197b 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -118,8 +118,8 @@
     /* Hide scrollbar for IE, Edge and Firefox */
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
-    @media only screen and (min-width: 1400px) {
-      max-width: $sidebar-max-width;
+    @media only screen and (min-width: #{$screen-lg}) {
+      max-width: 350px;
     }
   }
 
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index f4ca8471508eac481ec11767b5f0364914c59fe9..306031991e35f555e4234ef775e07217ac2beeb8 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -1,3 +1,6 @@
+// media queries
+$screen-lg: 1400px;
+
 $row-data-selector-height: auto;
 $network-header-height: 3rem;
 $network-footer-height: 4rem;
@@ -35,7 +38,6 @@ $legend-diamond-size: 25px;
 $height: 100%;
 
 $sidebar-width: 25%;
-$sidebar-max-width: 350px;
 $sidebar-min-width: 240px;
 
 // settings for different screen sizes