diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 1c7a2c72..4ac30a5a 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -72,7 +72,7 @@
       @include nb-rtl(border, none);
     }
 
-    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
+    .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
       color: nb-theme(color-white);
       background: transparent;
     }
@@ -94,7 +94,7 @@
     }
   }
 
-  .toggle-settings /deep/ a {
+  .toggle-settings ::ng-deep a {
     display: block;
     text-decoration: none;
     line-height: 1;
@@ -178,7 +178,7 @@
 
   @include media-breakpoint-down(sm) {
 
-    nb-user /deep/ .user-name {
+    nb-user ::ng-deep .user-name {
       display: none;
     }
   }
@@ -205,7 +205,7 @@
   }
 
   @include media-breakpoint-down(xs) {
-    .right /deep/ {
+    .right ::ng-deep {
       display: none;
     }
   }
diff --git a/src/app/@theme/components/search-input/search-input.component.scss b/src/app/@theme/components/search-input/search-input.component.scss
index 5ef07efa..3bfa7aca 100644
--- a/src/app/@theme/components/search-input/search-input.component.scss
+++ b/src/app/@theme/components/search-input/search-input.component.scss
@@ -25,7 +25,7 @@
     }
   }
 
-  /deep/ search-input {
+  ::ng-deep search-input {
     input {
       background: transparent;
     }
diff --git a/src/app/@theme/components/theme-settings/theme-settings.component.scss b/src/app/@theme/components/theme-settings/theme-settings.component.scss
index 58301ba8..89111557 100644
--- a/src/app/@theme/components/theme-settings/theme-settings.component.scss
+++ b/src/app/@theme/components/theme-settings/theme-settings.component.scss
@@ -57,7 +57,7 @@
     font-size: 1.524rem;
     width: 12rem;
 
-    /deep/ ngx-switcher {
+    ::ng-deep ngx-switcher {
       .switch-label span {
         font-size: 1em;
         font-weight: normal;
diff --git a/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss b/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
index ef168634..e5392ad0 100644
--- a/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
+++ b/src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
@@ -12,7 +12,7 @@ $icon-top-color-cosmic: #a258fe;
 $icon-top-color-corporate: #e9e8eb;
 
 @include nb-install-component() {
-  /deep/ .themes-switcher-list {
+  ::ng-deep .themes-switcher-list {
     padding: 1rem 2rem 1.25rem 0.5rem;
     margin: 0;
 
@@ -69,7 +69,7 @@ $icon-top-color-corporate: #e9e8eb;
   }
 
   @include media-breakpoint-down(is) {
-    /deep/ .themes-switcher-list {
+    ::ng-deep .themes-switcher-list {
       display: none;
     }
   }
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss
index 32733f56..68ca890e 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@@ -17,7 +17,7 @@
     &.collapsed {
       width: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         width: 0;
 
         .scrollable {
@@ -27,7 +27,7 @@
       }
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       width: $sidebar-width;
       background: nb-theme(color-bg);
       transition: width 0.3s ease;
@@ -51,7 +51,7 @@
       margin-top: 0;
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       height:
         calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
       @include nb-ltr(border-top-right-radius, nb-theme(radius));
@@ -64,7 +64,7 @@
       }
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       @include nb-for-theme(corporate) {
         padding-top: 0;
 
@@ -74,7 +74,7 @@
       }
     }
 
-    /deep/ nb-sidebar-header {
+    ::ng-deep nb-sidebar-header {
       padding-bottom: 0.5rem;
       text-align: center;
     }
@@ -107,7 +107,7 @@
 
     &.compacted {
 
-      /deep/ nb-sidebar-header {
+      ::ng-deep nb-sidebar-header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -139,7 +139,7 @@
 
       margin-top: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
         @include nb-ltr(border-top-right-radius, 0);
         @include nb-rtl(border-top-left-radius, 0);
diff --git a/src/app/@theme/layouts/sample/sample.layout.scss b/src/app/@theme/layouts/sample/sample.layout.scss
index b3cf2c22..2416da4e 100644
--- a/src/app/@theme/layouts/sample/sample.layout.scss
+++ b/src/app/@theme/layouts/sample/sample.layout.scss
@@ -24,12 +24,12 @@
       transform: translate3d(0, 0, 0);
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       width: $sidebar-width;
       padding: 3.4rem 0.25rem;
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       width: $sidebar-width;
       background: nb-theme(color-bg);
       transition: transform 0.3s ease;
@@ -54,7 +54,7 @@
       margin-top: 0;
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       height:
         calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
       @include nb-ltr(border-top-right-radius, nb-theme(radius));
@@ -67,7 +67,7 @@
       }
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       @include nb-for-theme(corporate) {
         padding-top: 0;
 
@@ -77,7 +77,7 @@
       }
     }
 
-    /deep/ nb-sidebar-header {
+    ::ng-deep nb-sidebar-header {
       padding-bottom: 0.5rem;
       text-align: center;
     }
@@ -108,7 +108,7 @@
       }
     }
 
-    /deep/ nb-menu {
+    ::ng-deep nb-menu {
       & > .menu-items {
         & > .menu-item:first-child {
           .menu-title {
@@ -132,7 +132,7 @@
 
     &.compacted {
 
-      /deep/ nb-sidebar-header {
+      ::ng-deep nb-sidebar-header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -164,7 +164,7 @@
 
       margin-top: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
         @include nb-ltr(border-top-right-radius, 0);
         @include nb-rtl(border-top-left-radius, 0);
diff --git a/src/app/@theme/layouts/three-columns/three-columns.layout.scss b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
index 32733f56..68ca890e 100644
--- a/src/app/@theme/layouts/three-columns/three-columns.layout.scss
+++ b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
@@ -17,7 +17,7 @@
     &.collapsed {
       width: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         width: 0;
 
         .scrollable {
@@ -27,7 +27,7 @@
       }
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       width: $sidebar-width;
       background: nb-theme(color-bg);
       transition: width 0.3s ease;
@@ -51,7 +51,7 @@
       margin-top: 0;
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       height:
         calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
       @include nb-ltr(border-top-right-radius, nb-theme(radius));
@@ -64,7 +64,7 @@
       }
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       @include nb-for-theme(corporate) {
         padding-top: 0;
 
@@ -74,7 +74,7 @@
       }
     }
 
-    /deep/ nb-sidebar-header {
+    ::ng-deep nb-sidebar-header {
       padding-bottom: 0.5rem;
       text-align: center;
     }
@@ -107,7 +107,7 @@
 
     &.compacted {
 
-      /deep/ nb-sidebar-header {
+      ::ng-deep nb-sidebar-header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -139,7 +139,7 @@
 
       margin-top: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
         @include nb-ltr(border-top-right-radius, 0);
         @include nb-rtl(border-top-left-radius, 0);
diff --git a/src/app/@theme/layouts/two-columns/two-columns.layout.scss b/src/app/@theme/layouts/two-columns/two-columns.layout.scss
index c5eae39a..a8a36ebe 100644
--- a/src/app/@theme/layouts/two-columns/two-columns.layout.scss
+++ b/src/app/@theme/layouts/two-columns/two-columns.layout.scss
@@ -17,7 +17,7 @@
     &.collapsed {
       width: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         width: 0;
 
         .scrollable {
@@ -27,7 +27,7 @@
       }
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       width: $sidebar-width;
       background: nb-theme(color-bg);
       transition: width 0.3s ease;
@@ -51,7 +51,7 @@
       margin-top: 0;
     }
 
-    /deep/ .main-container {
+    ::ng-deep .main-container {
       height:
         calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
       @include nb-ltr(border-top-right-radius, nb-theme(radius));
@@ -65,7 +65,7 @@
       }
     }
 
-    /deep/ .scrollable {
+    ::ng-deep .scrollable {
       @include nb-for-theme(corporate) {
         padding-top: 0;
 
@@ -75,7 +75,7 @@
       }
     }
 
-    /deep/ nb-sidebar-header {
+    ::ng-deep nb-sidebar-header {
       padding-bottom: 0.5rem;
       text-align: center;
     }
@@ -108,7 +108,7 @@
 
     &.compacted {
 
-      /deep/ nb-sidebar-header {
+      ::ng-deep nb-sidebar-header {
         padding-left: 0;
         padding-right: 0;
       }
@@ -140,7 +140,7 @@
 
       margin-top: 0;
 
-      /deep/ .main-container {
+      ::ng-deep .main-container {
         height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
         @include nb-ltr(border-top-right-radius, 0);
         @include nb-rtl(border-top-left-radius, 0);
diff --git a/src/app/pages/bootstrap/buttons/buttons.component.scss b/src/app/pages/bootstrap/buttons/buttons.component.scss
index c972d13f..e786b26f 100644
--- a/src/app/pages/bootstrap/buttons/buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/buttons.component.scss
@@ -4,7 +4,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  /deep/ {
+  ::ng-deep {
     $button-size: 50px;
 
     .container-title {
@@ -70,7 +70,7 @@
   }
 
   @include media-breakpoint-down(is) {
-    ngx-default-buttons /deep/ nb-card-header {
+    ngx-default-buttons ::ng-deep nb-card-header {
       flex-direction: column;
       align-items: left;
 
@@ -82,19 +82,19 @@
 
   @include media-breakpoint-down(xs) {
 
-    /deep/.icon-buttons .icon-button-examples {
+    ::ng-deep.icon-buttons .icon-button-examples {
       button {
         @include nb-ltr(margin-right, 1rem);
         @include nb-rtl(margin-left, 1rem);
       }
     }
 
-    ngx-default-buttons /deep/ nb-card-header {
+    ngx-default-buttons ::ng-deep nb-card-header {
       flex-direction: column;
       margin-bottom: 0.5rem;
     }
 
-    ngx-block-level-buttons /deep/ {
+    ngx-block-level-buttons ::ng-deep {
       .btn-primary {
         padding: 0.75rem 1rem;
       }
diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss
index 90f4b0a0..6c4e1891 100644
--- a/src/app/pages/charts/chartjs/chartjs.component.scss
+++ b/src/app/pages/charts/chartjs/chartjs.component.scss
@@ -11,7 +11,7 @@
     height: nb-theme(card-height-medium);
     width: 100%;
 
-    /deep/ chart {
+    ::ng-deep chart {
       display: block;
       height: 100%;
       width: 100%;
diff --git a/src/app/pages/charts/d3/d3.component.scss b/src/app/pages/charts/d3/d3.component.scss
index b11c36b0..e7a43513 100644
--- a/src/app/pages/charts/d3/d3.component.scss
+++ b/src/app/pages/charts/d3/d3.component.scss
@@ -11,7 +11,7 @@
     width: 100%;
     height: nb-theme(card-height-medium);
 
-    /deep/ {
+    ::ng-deep {
       .pie-label {
         fill: nb-theme(color-fg-heading);
       }
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss
index bd7f3998..6f3cb3c8 100644
--- a/src/app/pages/charts/echarts/echarts.component.scss
+++ b/src/app/pages/charts/echarts/echarts.component.scss
@@ -13,7 +13,7 @@
     width: 100%;
   }
 
-  /deep/ .echart {
+  ::ng-deep .echart {
     height: 100%;
     width: 100%;
   }
diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss
index c046d28c..1ef1e862 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.scss
+++ b/src/app/pages/dashboard/contacts/contacts.component.scss
@@ -41,7 +41,7 @@
     text-transform: uppercase;
   }
 
-  nb-user /deep/ {
+  nb-user ::ng-deep {
     .info-container {
       @include nb-ltr(margin-left, 0.875rem);
       @include nb-rtl(margin-right, 0.875rem);
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss
index 6aa31a5f..cb08d221 100644
--- a/src/app/pages/dashboard/dashboard.component.scss
+++ b/src/app/pages/dashboard/dashboard.component.scss
@@ -15,7 +15,7 @@
   }
 
   @include media-breakpoint-down(is) {
-    /deep/ nb-card.large-card {
+    ::ng-deep nb-card.large-card {
       height: nb-theme(card-height-medium);
     }
   }
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss
index a29d9412..8b0049c7 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity.component.scss
@@ -41,7 +41,7 @@
     }
   }
 
-  nb-tabset /deep/ {
+  nb-tabset ::ng-deep {
     flex: 1;
     overflow: hidden;
     display: flex;
@@ -223,7 +223,7 @@
   }
 
   @include nb-for-theme(cosmic) {
-    nb-tabset /deep/ ul li.active {
+    nb-tabset ::ng-deep ul li.active {
       background-color: nb-theme(color-primary);
       border-radius: nb-theme(radius);
 
@@ -250,7 +250,7 @@
   }
 
   @include nb-for-theme(corporate) {
-    nb-tabset /deep/ ul li.active {
+    nb-tabset ::ng-deep ul li.active {
       &::before {
         display: none;
       }
diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss
index 6a3ebc1c..05aa2bad 100644
--- a/src/app/pages/dashboard/rooms/rooms.component.scss
+++ b/src/app/pages/dashboard/rooms/rooms.component.scss
@@ -33,7 +33,7 @@
     flex-direction: column;
     flex: 1;
 
-    /deep/ .room-selector {
+    ::ng-deep .room-selector {
       display: flex;
       align-items: center;
       justify-items: center;
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index 0ab66b3c..b2719411 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
     height: 100%;
 
-    /deep/ ul {
+    ::ng-deep ul {
       border: none;
     }
   }
@@ -136,7 +136,7 @@
     ngx-temperature-dragger {
       max-width: 250px;
 
-      /deep/ .power-bg {
+      ::ng-deep .power-bg {
         width: 4rem;
         height: 4rem;
         font-size: 3rem;
@@ -160,7 +160,7 @@
       }
     }
 
-    nb-tabset /deep/ ul {
+    nb-tabset ::ng-deep ul {
       padding: 0 0.5rem;
       a {
         padding: 1.25rem 1rem;
diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss
index 1dc9a319..0624aef7 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.scss
+++ b/src/app/pages/dashboard/traffic/traffic.component.scss
@@ -14,7 +14,7 @@
     position: relative;
   }
 
-  /deep/ canvas {
+  ::ng-deep canvas {
     border-bottom-left-radius: nb-theme(card-border-radius);
     border-bottom-right-radius: nb-theme(card-border-radius);
   }
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
index 273fdfa1..13f76670 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
@@ -22,12 +22,12 @@
     ngx-legend-chart {
       align-self: flex-start;
 
-      /deep/ .legends {
+      ::ng-deep .legends {
         padding-left: 0;
         font-size: nb-theme(font-size-sm);
       }
 
-      /deep/ .legend {
+      ::ng-deep .legend {
         margin-left: 1rem;
       }
     }
diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
index cce1459f..9fe7278c 100644
--- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
@@ -6,7 +6,7 @@ $legend-canceled-color: #3f4fda;
 
 @include nb-install-component() {
 
-  /deep/ nb-tabset {
+  ::ng-deep nb-tabset {
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
index 0361b33f..878e0fb1 100644
--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
+++ b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
@@ -21,15 +21,15 @@
     }
   }
 
-  /deep/ .leaflet-top, /deep/ .leaflet-bottom {
+  ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
     z-index: 997;
   }
 
-  /deep/ .leaflet-bar {
+  ::ng-deep .leaflet-bar {
     box-shadow: none;
   }
 
-  /deep/ .leaflet-control-zoom {
+  ::ng-deep .leaflet-control-zoom {
     border: none;
 
     a {
@@ -59,7 +59,7 @@
     }
   }
 
-  /deep/ .leaflet-control-attribution {
+  ::ng-deep .leaflet-control-attribution {
     background: transparent;
 
     a {
diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.scss b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
index 3b37d854..2916c494 100644
--- a/src/app/pages/e-commerce/earning-card/earning-card.component.scss
+++ b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
@@ -15,7 +15,7 @@
     cursor: pointer;
   }
 
-  /deep/ .flipped {
+  ::ng-deep .flipped {
     .back-container {
       .nb-arrow-right {
         transform: scaleX(-1);
@@ -35,14 +35,14 @@
     flex: 1;
   }
 
-  /deep/ nb-card-header {
+  ::ng-deep nb-card-header {
     display: flex;
     justify-content: space-between;
     @include nb-rtl(flex-direction, row-reverse);
     padding-left: 1rem;
   }
 
-  /deep/ nb-card-body {
+  ::ng-deep nb-card-body {
     overflow: hidden;
     display: flex;
   }
diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
index 77acaf1e..f4fb77f7 100644
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
+++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
@@ -81,7 +81,7 @@
     position: relative;
   }
 
-  /deep/ canvas {
+  ::ng-deep canvas {
     border-bottom-left-radius: nb-theme(card-border-radius);
     border-bottom-right-radius: nb-theme(card-border-radius);
   }
diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
index dbd16841..725b8548 100644
--- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
+++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   flex: 1;
 
-  /deep/ nb-card-header {
+  ::ng-deep nb-card-header {
     display: flex;
     justify-content: space-between;
 
@@ -19,7 +19,7 @@
     }
   }
 
-  /deep/ nb-card-body {
+  ::ng-deep nb-card-body {
     overflow: hidden;
 
     display: flex;
@@ -71,7 +71,7 @@
     position: relative;
   }
 
-  /deep/ canvas {
+  ::ng-deep canvas {
     border-bottom-left-radius: nb-theme(card-border-radius);
     border-bottom-right-radius: nb-theme(card-border-radius);
   }
diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
index 6cb93398..ecaa71ad 100644
--- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
+++ b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   flex: 1;
 
-  /deep/ nb-card-header {
+  ::ng-deep nb-card-header {
     display: flex;
     justify-content: space-between;
 
@@ -19,7 +19,7 @@
     }
   }
 
-  /deep/ nb-card-body {
+  ::ng-deep nb-card-body {
     display: flex;
     position: relative;
     flex: 1;
diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.scss b/src/app/pages/e-commerce/progress-section/progress-section.component.scss
index f399c589..f964af88 100644
--- a/src/app/pages/e-commerce/progress-section/progress-section.component.scss
+++ b/src/app/pages/e-commerce/progress-section/progress-section.component.scss
@@ -29,7 +29,7 @@ $shadow-green: #00977e;
     margin-top: 0.5rem;
   }
 
-  /deep/ nb-progress-bar {
+  ::ng-deep nb-progress-bar {
     margin-top: 0.2rem;
 
     .progress-container {
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
index 6a95b224..e9b1e201 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
@@ -17,7 +17,7 @@
     position: relative;
   }
 
-  /deep/ canvas {
+  ::ng-deep canvas {
     border-bottom-left-radius: nb-theme(card-border-radius);
     border-bottom-right-radius: nb-theme(card-border-radius);
   }
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
index 463e638a..f88832db 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
@@ -12,7 +12,7 @@
   }
 
   nb-card-back {
-    /deep/ nb-card-header {
+    ::ng-deep nb-card-header {
       border: none;
     }
   }
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
index deaef014..5796cf79 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
@@ -46,7 +46,7 @@
 
   @include media-breakpoint-down(is) {
     ngx-legend-chart {
-      /deep/ .legends {
+      ::ng-deep .legends {
         padding-left: 0;
         font-size: nb-theme(font-size-sm);
       }
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
index 2bc715d6..831a0401 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
@@ -45,12 +45,12 @@
 
   // legend start
   .visitors-statistics-legend {
-    /deep/ .legends {
+    ::ng-deep .legends {
       padding: 0;
       margin-left: 0;
     }
 
-    /deep/ .legend {
+    ::ng-deep .legend {
       flex: 1;
       margin-left: 0;
       justify-content: flex-start;
diff --git a/src/app/pages/extra-components/chat/chat.component.scss b/src/app/pages/extra-components/chat/chat.component.scss
index fff34685..f8b18d29 100644
--- a/src/app/pages/extra-components/chat/chat.component.scss
+++ b/src/app/pages/extra-components/chat/chat.component.scss
@@ -4,7 +4,7 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  /deep/ nb-layout-column {
+  ::ng-deep nb-layout-column {
     justify-content: center;
     display: flex;
   }
diff --git a/src/app/pages/extra-components/spinner/spinner.component.scss b/src/app/pages/extra-components/spinner/spinner.component.scss
index 0ffe71f9..a8b9883e 100644
--- a/src/app/pages/extra-components/spinner/spinner.component.scss
+++ b/src/app/pages/extra-components/spinner/spinner.component.scss
@@ -5,7 +5,7 @@
     margin: 1rem;
   }
 
-  /deep/ nb-spinner {
+  ::ng-deep nb-spinner {
     z-index: 999;
   }
 }
diff --git a/src/app/pages/extra-components/stepper/stepper.component.scss b/src/app/pages/extra-components/stepper/stepper.component.scss
index e596439d..db429ac8 100644
--- a/src/app/pages/extra-components/stepper/stepper.component.scss
+++ b/src/app/pages/extra-components/stepper/stepper.component.scss
@@ -1,7 +1,7 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  /deep/ nb-stepper .step-content {
+  ::ng-deep nb-stepper .step-content {
     text-align: center;
 
     button {
diff --git a/src/app/pages/extra-components/tabs/tabs.component.scss b/src/app/pages/extra-components/tabs/tabs.component.scss
index 5fcbccf6..a658da0f 100644
--- a/src/app/pages/extra-components/tabs/tabs.component.scss
+++ b/src/app/pages/extra-components/tabs/tabs.component.scss
@@ -13,13 +13,13 @@
     padding: nb-theme(padding);
   }
 
-  /deep/ ngx-tab1, /deep/ ngx-tab2 {
+  ::ng-deep ngx-tab1, ::ng-deep ngx-tab2 {
     display: block;
     padding: nb-theme(padding);
   }
 
   @include media-breakpoint-down(xs) {
-    nb-tabset /deep/ul {
+    nb-tabset ::ng-deepul {
       font-size: 1rem;
       padding: 0 0.25rem;
     }
diff --git a/src/app/pages/extra-components/tree/tree.component.scss b/src/app/pages/extra-components/tree/tree.component.scss
index adc43492..9398f785 100644
--- a/src/app/pages/extra-components/tree/tree.component.scss
+++ b/src/app/pages/extra-components/tree/tree.component.scss
@@ -2,7 +2,7 @@
 
 @include nb-install-component() {
 
-  /deep/ .angular-tree-component {
+  ::ng-deep .angular-tree-component {
     cursor: default;
 
     .node-wrapper {
diff --git a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
index 6f313676..c46dba43 100644
--- a/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
+++ b/src/app/pages/forms/buttons/action-groups/action-groups.component.scss
@@ -37,11 +37,11 @@
 
     nb-action {
       padding: 0 0.5rem;
-      /deep/ .control-icon {
+      ::ng-deep .control-icon {
         font-size: 1.75rem;
       }
     }
-    nb-user /deep/ {
+    nb-user ::ng-deep {
       .user-container {
         font-size: 0.875rem;
       }
@@ -56,11 +56,11 @@
 
     nb-action {
       padding: 0 0.375rem;
-      /deep/ .control-icon {
+      ::ng-deep .control-icon {
         font-size: 1.5rem;
       }
     }
-    nb-user /deep/ {
+    nb-user ::ng-deep {
       .user-container {
         font-size: 0.75rem;
       }
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss
index c972d13f..e786b26f 100644
--- a/src/app/pages/forms/buttons/buttons.component.scss
+++ b/src/app/pages/forms/buttons/buttons.component.scss
@@ -4,7 +4,7 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  /deep/ {
+  ::ng-deep {
     $button-size: 50px;
 
     .container-title {
@@ -70,7 +70,7 @@
   }
 
   @include media-breakpoint-down(is) {
-    ngx-default-buttons /deep/ nb-card-header {
+    ngx-default-buttons ::ng-deep nb-card-header {
       flex-direction: column;
       align-items: left;
 
@@ -82,19 +82,19 @@
 
   @include media-breakpoint-down(xs) {
 
-    /deep/.icon-buttons .icon-button-examples {
+    ::ng-deep.icon-buttons .icon-button-examples {
       button {
         @include nb-ltr(margin-right, 1rem);
         @include nb-rtl(margin-left, 1rem);
       }
     }
 
-    ngx-default-buttons /deep/ nb-card-header {
+    ngx-default-buttons ::ng-deep nb-card-header {
       flex-direction: column;
       margin-bottom: 0.5rem;
     }
 
-    ngx-block-level-buttons /deep/ {
+    ngx-block-level-buttons ::ng-deep {
       .btn-primary {
         padding: 0.75rem 1rem;
       }
diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss
index 7c96244f..b6694cbf 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.scss
+++ b/src/app/pages/maps/gmaps/gmaps.component.scss
@@ -6,7 +6,7 @@
     padding: 0;
   }
 
-  /deep/ agm-map {
+  ::ng-deep agm-map {
     width: 100%;
     height: nb-theme(card-height-large);
   }
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss
index 5a46781e..253a4471 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/src/app/pages/maps/leaflet/leaflet.component.scss
@@ -6,11 +6,11 @@
     padding: 0;
   }
 
-  /deep/ .leaflet-top, /deep/ .leaflet-bottom {
+  ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
     z-index: 997;
   }
 
-  /deep/ .leaflet-container {
+  ::ng-deep .leaflet-container {
     width: 100%;
     height: nb-theme(card-height-large);
   }
diff --git a/src/app/pages/maps/search-map/map/map.component.scss b/src/app/pages/maps/search-map/map/map.component.scss
index a051dacb..13783ab3 100644
--- a/src/app/pages/maps/search-map/map/map.component.scss
+++ b/src/app/pages/maps/search-map/map/map.component.scss
@@ -6,7 +6,7 @@
     padding: 0;
   }
 
-  /deep/ agm-map {
+  ::ng-deep agm-map {
     width: 100%;
     height: nb-theme(card-height-large);
   }
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.scss b/src/app/pages/modal-overlays/popovers/popovers.component.scss
index 589bfcfb..09cab9e6 100644
--- a/src/app/pages/modal-overlays/popovers/popovers.component.scss
+++ b/src/app/pages/modal-overlays/popovers/popovers.component.scss
@@ -1,6 +1,6 @@
 @import '~@nebular/theme/styles/core/mixins';
 
-/deep/ nb-card.popover-card {
+::ng-deep nb-card.popover-card {
   margin-bottom: 0;
   width: 300px;
   box-shadow: none;
@@ -12,7 +12,7 @@
     @include nb-rtl(margin, 0 0 2rem 0.75rem);
   }
 
-  /deep/ .btn-outline-secondary {
+  ::ng-deep .btn-outline-secondary {
     @include nb-ltr(margin, 0 0.5rem 0.5rem 0);
     @include nb-rtl(margin, 0 0 0.5rem 0.5rem);
   }
diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.scss b/src/app/pages/modal-overlays/toastr/toastr.component.scss
index 09a409c5..1f6db6bc 100644
--- a/src/app/pages/modal-overlays/toastr/toastr.component.scss
+++ b/src/app/pages/modal-overlays/toastr/toastr.component.scss
@@ -14,7 +14,7 @@
   }
 
   /* stylelint-disable */
-  toaster-container /deep/ {
+  toaster-container ::ng-deep {
     #toast-container .toast-close-button {
       right: 0;
     }
diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
index 61a70207..9ef1b9a0 100644
--- a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
+++ b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
@@ -1,7 +1,7 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  /deep/ .form {
+  ::ng-deep .form {
     display: flex;
     flex-direction: column;
 
diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss
index 272cb26e..69198093 100755
--- a/src/app/pages/pages.component.scss
+++ b/src/app/pages/pages.component.scss
@@ -1,7 +1,7 @@
 @import '../@theme/styles/themes';
 
 @include nb-install-component() {
-  /deep/ router-outlet + * {
+  ::ng-deep router-outlet + * {
     display: block;
     animation: fade 1s;