Add global styles

Issue: SILABMC-191

22 files changed, 578 insertions, 153 deletions

diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss
index 0e78ba64..d85e9127 100644
--- a/src/assets/styles/bmc/_sila/_alert.scss
+++ b/src/assets/styles/bmc/_sila/_alert.scss
@@ -1,70 +1,70 @@
 .alert {
-    display: flex;
-    padding: $spacer;
-    border-width: 0 0 0 3px;
-    color: gray("800");
-    margin-bottom: $spacer;
+  display: flex;
+  padding: $spacer;
+  border-width: 0 0 0 3px;
+  color: gray("800");
+  margin-bottom: $spacer;
 
-    &.small {
-      padding: $spacer / 2;
-      font-size: 1rem;
-    }
+  &.small {
+    padding: $spacer / 2;
+    font-size: 1rem;
+  }
 
-    .close {
-      font-weight: 300;
-      opacity: 1;
-    }
+  .close {
+    font-weight: 300;
+    opacity: 1;
+  }
 
-    .alert-icon {
-      display: inline-flex;
-      align-items: flex-start;
-      margin-right: $spacer;
-      margin-bottom: $spacer;
+  .alert-icon {
+    display: inline-flex;
+    align-items: flex-start;
+    margin-right: $spacer;
+    margin-bottom: $spacer;
 
-      @include media-breakpoint-up(sm) {
-        margin-bottom: 0;
-      }
+    @include media-breakpoint-up(sm) {
+      margin-bottom: 0;
     }
+  }
 
-    .alert-content {
-      flex: 1 1 auto;
-    }
+  .alert-content {
+    flex: 1 1 auto;
+  }
 
-    .alert-title {
-      margin-bottom: $spacer / 2;
-    }
+  .alert-title {
+    margin-bottom: $spacer / 2;
+  }
 
-    .alert-msg {
-      p + p {
-        margin-bottom: $spacer;
-      }
-
-      p:last-of-type {
-        margin-bottom: 0;
-      }
+  .alert-msg {
+    p + p {
+      margin-bottom: $spacer;
     }
 
-    &.alert-info {
-      border-left-color: theme-color("info");
-      background-color: theme-color-light("info");
-      fill: theme-color("info");
+    p:last-of-type {
+      margin-bottom: 0;
     }
+  }
 
-    &.alert-success {
-      border-left-color: theme-color("success");
-      background-color: theme-color-light("success");
-      fill: theme-color("success");
-    }
+  &.alert-info {
+    border-left-color: theme-color("info");
+    background-color: theme-color-light("info");
+    fill: theme-color("info");
+  }
 
-    &.alert-danger {
-      border-left-color: theme-color("danger");
-      background-color: theme-color-light("danger");
-      fill: theme-color("danger");
-    }
+  &.alert-success {
+    border-left-color: theme-color("success");
+    background-color: theme-color-light("success");
+    fill: theme-color("success");
+  }
 
-    &.alert-warning {
-      border-left-color: theme-color("warning");
-      background-color: theme-color-light("warning");
-      fill: theme-color("warning");
-    }
-  }
\ No newline at end of file
+  &.alert-danger {
+    border-left-color: theme-color("danger");
+    background-color: theme-color-light("danger");
+    fill: theme-color("danger");
+  }
+
+  &.alert-warning {
+    border-left-color: theme-color("warning");
+    background-color: theme-color-light("warning");
+    fill: theme-color("warning");
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss
index 0b88b499..7d59e9a6 100644
--- a/src/assets/styles/bmc/_sila/_badge.scss
+++ b/src/assets/styles/bmc/_sila/_badge.scss
@@ -18,4 +18,4 @@
 .badge-primary {
   background-color: theme-color-light("info");
   color: theme-color("info");
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
index c11e046c..40806995 100644
--- a/src/assets/styles/bmc/_sila/_base.scss
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -1,50 +1,102 @@
-dt,
-legend,
-label {
-  color: gray("800");
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.4285;
+
+//
+// Scrollbars:
+//
+/* W3C standard: Firefox only */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(12,32,64,.7) transparent;
+}
+
+/* For Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+  height: 3px;
+  width: 3px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(12,32,64,.7);
+  border-radius: 2px;
+  border: 2px solid transparent;
 }
 
+//
+// Headers:
+//
 h1,
 .h1 {
-  font-size: 2.625rem;
-  font-weight: 300;
-  line-height: 1.238;
+  font-size: 2.25rem !important;
+  font-weight: 500;
+  line-height: 1.2;
 }
 
 h2,
 .h2 {
-  font-size: 2.25rem;
-  font-weight: 300;
-  line-height: 1.3333;
+  font-size: 1.5rem !important;
+  font-weight: 500;
+  line-height: 1.2;
 }
 
 h3,
 .h3 {
-  font-size: 1.75rem;
+  font-size: 1.5rem !important;
   font-weight: 400;
-  line-height: 1.2857;
+  line-height: 1.2;
 }
 
 h4,
 .h4 {
-  font-size: 1.25rem;
+  font-size: 1.25rem !important;
   font-weight: 400;
-  line-height: 1.3;
+  line-height: 1.2;
 }
 
 h5,
 .h5 {
-  font-size: 1rem;
+  font-size: 1rem !important;
   font-weight: 500;
-  line-height: 1.375;
+  line-height: 1.2;
 }
 
 h6,
 .h6 {
-  font-size: 0.875rem;
+  font-size: 0.825rem !important;
   font-weight: 500;
-  line-height: 1.2857;
+  line-height: 1.2;
+}
+
+
+.navbar-brand {
+  font-size: 1.4rem !important;
+}
+
+.nav-link--current{
+  background-color: $red-light-background !important;
+  color: $red !important;
+  &:hover,
+  &:focus {
+    background-color: $red-light-background !important;
+    color: $red !important;
+  }
+}
+
+.btn-link:active, .nav-link:active {
+  background-color: $red-light-background !important;
+  color: $red !important;
+}
+
+.app-header .navbar-text, .app-header .nav-link, .app-header .btn-link {
+  &:hover {
+    background-color: $red-40 !important;
+  }
+  &:active {
+    background-color: $red-active !important;
+  }
+  &:focus {
+    outline: 0;
+  }
 }
diff --git a/src/assets/styles/bmc/_sila/_bootstrap-grid.scss b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss
index 7ad7c81b..87332f4b 100644
--- a/src/assets/styles/bmc/_sila/_bootstrap-grid.scss
+++ b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss
@@ -5,4 +5,24 @@
   // so the content doesn't center align
   // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
   margin-left: 0;
-}
\ No newline at end of file
+}
+
+@media (min-width: 1200px) {
+  .container-xl {
+    max-width: unset !important;
+  }
+  .col-md-9,
+  .col-xl-9,
+  .col-xl-10,
+  .col-xl-11 {
+    flex: 0 0 100%;
+    max-width: unset !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md-9 {
+    flex: 0 0 100%;
+    max-width: unset !important;
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index 2a7b8169..b3a69757 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -10,7 +10,7 @@
     margin-right: $spacer / 4;
   }
   &:disabled {
-    color: gray("600");
+    color: $red;
     fill: currentColor;
     box-shadow: none !important;
     &:not(.btn-link) {
@@ -21,27 +21,114 @@
 }
 
 .btn-primary {
-  fill: currentColor;
-  &:focus,
-  &:not(:disabled):not(.disabled):active:focus {
-    border-color: $white;
-    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  background-color: $red;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 2px -1px #4f252566 inset;
+  &:hover {
+    background-color: $red-hover;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    background-color: $red-click;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    background-color: $red;
+  }
+  &:active {
+    border: none;
+    box-shadow: none;
+    background-color: $red;
   }
 }
 
 .btn-secondary {
-  fill: currentColor;
-  &:focus,
-  &:not(:disabled):not(.disabled):active:focus {
-    border-color: $white;
-    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+  background-color: $dark;
+  color: $gray-2;
+  border-radius: $border-radius;
+  border: none;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  &:hover {
+    background-color: $dark-hover;
+    color: $gray-2;
+  }
+  &:focus {
+    border: none;
+    box-shadow: 0px 0px 0px 4px $red-shadow;
+    color: $gray-2;
+    background-color: $dark;
+  }
+  &:not(:disabled):not(.disabled):active:focus,
+  &:focus-visible {
+    border: none;
+    box-shadow: none;
+    color: $gray-2;
+    background-color: $dark;
+  }
+}
+
+.btn-unstiled {
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.btn-popover {
+  border: none;
+  color: $red;
+  height: 28px;
+  border-radius: $border-radius;
+  font-weight: 500;
+  font-size: 12px;
+  transition: ease-in 0.2s;
+  &:hover {
+    color: $white;
+    transition: ease-in 0.2s;
+  }
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+  &.selected-unit-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+  &.selected-choice-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+}
+
+.btn-toogle-popover {
+  justify-content: flex-start;
+  width: 25px;
+  height: 16px;
+  padding: 0;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
   }
 }
 
 // Global style for all button link
 .btn-link {
-  font-weight: $headings-font-weight;
-  fill: theme-color("primary");
+  color: $text-primary;
   text-decoration: none !important;
   &:hover {
     background-color: gray("200");
@@ -50,14 +137,19 @@
   &:active {
     background-color: gray("300");
   }
-  &:focus {
-    box-shadow: inset 0 0 0 2px theme-color("primary");
-    color: theme-color("primary");
-    outline: none;
-  }
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+    .icon-expand-right {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
 }
 
 // Icon only buttons
@@ -77,6 +169,6 @@
 // Contain input buttons within input
 .btn-datepicker .dropdown-toggle,
 .input-action-btn {
-  padding: 7px;
+  padding: 6px;
   margin: 1px;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_calendar.scss b/src/assets/styles/bmc/_sila/_calendar.scss
index 0307a6ce..9a53169d 100644
--- a/src/assets/styles/bmc/_sila/_calendar.scss
+++ b/src/assets/styles/bmc/_sila/_calendar.scss
@@ -14,4 +14,4 @@
 // Date picker focus
 .b-calendar .b-calendar-grid {
   padding: 6px 12px;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_card.scss b/src/assets/styles/bmc/_sila/_card.scss
index 5f2a5962..d7ac04d2 100644
--- a/src/assets/styles/bmc/_sila/_card.scss
+++ b/src/assets/styles/bmc/_sila/_card.scss
@@ -1,5 +1,37 @@
 .card {
+  border-radius: $border-radius;
   .bg-success {
     background-color: theme-color-light('success')!important;
   }
-}
\ No newline at end of file
+}
+
+.card-header {
+  .card-header-tabs {
+    border: none !important;
+
+    .nav-link {
+      border: none !important;
+      color: $text-secondary;
+      font-weight: 500 !important;
+      background: none !important;
+      &:hover {
+        color: $red-hover
+      }
+    }
+
+    .nav-link.active {
+      color: $red-active !important;
+      text-decoration: underline;
+    }
+  }
+}
+
+.card-body dd .status-icon {
+  line-height: 1.1;
+}
+
+.card-buttons > a {
+  font-weight: 500;
+  font-size: .825rem;
+  vertical-align: baseline;
+}
diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss
index 969c4c68..02e4e855 100644
--- a/src/assets/styles/bmc/_sila/_dropdown.scss
+++ b/src/assets/styles/bmc/_sila/_dropdown.scss
@@ -1,18 +1,36 @@
 // Make calendar visible over the table
 .dropdown-menu {
   z-index: $zindex-dropdown + 1;
-  padding: 0;
+  padding: $spacer / 2;
+  border-radius: $border-radius;
 }
+
 .dropdown-item {
-  padding-left: $spacer/4;
-  margin-top: -1 * $spacer/4;
+  padding: $spacer / 4 $spacer / 2;
+  margin: $spacer / 4;
+  width: auto;
+  border-radius: $border-radius;
+  &:hover {
+    background-color: $red-hover;
+    color: $white;
+  }
+  &:active {
+    background-color: $red-active;
+  }
+  &:focus {
+    outline: none;
+    background-color: $red-click;
+    box-shadow: inset 0 0 0 2px theme-color("primary");
+  }
 }
+
 .b-dropdown-form {
   padding: $spacer/2;
   .form-group {
     margin-bottom: $spacer/2;
   }
 }
+
 // Table filter dropdown clear button style
 .table-filter {
   .dropdown-item {
@@ -28,4 +46,4 @@
       box-shadow: inset 0 0 0 2px theme-color("primary");
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 428a40c2..914bf379 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -21,20 +21,12 @@
 .custom-select,
 .form-control,
 .input-group-text {
-  border-color: gray("500") !important;
-  background-color: gray("100");
+  border-radius: $border-radius;
+  background-color: $white;
 }
 
 .custom-select,
 .form-control {
-  &:active {
-    border: 1px solid $primary!important;
-  }
-  &:focus {
-    color: theme-color("dark");
-    background-color: gray("100");
-    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
-  }
   &:disabled {
     background-color: gray("400");
     color: gray("600");
@@ -48,26 +40,52 @@
   }
 }
 
-.custom-select,
-.custom-control-label,
+.form-control::-webkit-outer-spin-button,
+.form-control::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.form-control[type='number'] {
+  -moz-appearance: textfield;
+}
+
 .form-control {
-  color: theme-color("dark") !important;
-  font-size: 1rem;
+  color: $text-secondary;
+  border-radius: $border-radius;
+  border: none;
+  background-color: $gray-5;
+  font-size: 0.875rem;
+  &:focus {
+    color: $text-secondary;
+  }
+  &:hover {
+    background-color: $gray-5-hover;
+  }
 }
 
 // Inverted form colors
 .form-background {
-  background-color: gray("100");
+  background-color: none;
+  padding: 0 !important;
   .custom-select,
   .form-control {
-    background-color: $white;
+    color: #0c1c29e6;
+    border-radius: $border-radius;
+    border: none;
+    background-color: $gray-5;
+    &:hover {
+      background-color: $gray-5-hover;
+    }
     &:focus {
-      background-color: $white;
+      border: 1px solid gray("400");
     }
     &:disabled {
       background-color: gray("400");
       color: gray("600");
     }
+    &.is-valid {
+      border: 1px solid gray("400");
+    }
   }
 }
 
@@ -76,12 +94,22 @@
   line-height: $form-line-height;
 }
 
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid $on-surface-secondary;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
 .custom-control-input:checked ~ .custom-control-label::before  {
-  background-color: $black;
-  border-color: $black;
+  background-color: $red;
+  border-color: $red;
   cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
 }
 
 .custom-control {
@@ -94,8 +122,35 @@
   }
 }
 
-.custom-control-input:focus ~ .custom-control-label::before{
-  box-shadow: 0 0 0 2px  theme-color("primary");
+.custom-switch {
+  width: 28px;
+  height: 16px;
+}
+
+.custom-switch
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: none;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::after {
+  border: 1px solid $gray-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $gray-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $gray-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $gray-20;
+  background: rgba(4, 10, 15, 0.3);
 }
 
 .custom-control-label::after {
@@ -130,3 +185,26 @@
     background-position: right 3rem bottom 50%;
   }
 }
+// For invisible label of fields
+.invisible {
+  height: 0;
+  margin-bottom: 0;
+}  
+// Global style progress bar
+.progress {
+  height: 8px;
+  background-color: $gray-10;
+}
+
+.progress-bar {
+  background-color: $red;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}
diff --git a/src/assets/styles/bmc/_sila/_index.scss b/src/assets/styles/bmc/_sila/_index.scss
index 74594e35..14c85d70 100644
--- a/src/assets/styles/bmc/_sila/_index.scss
+++ b/src/assets/styles/bmc/_sila/_index.scss
@@ -15,4 +15,10 @@
 @import "./section-divider";
 @import "./sol";
 @import "./tables";
-@import "./toasts";
\ No newline at end of file
+@import "./toasts";
+@import "./pages/login";
+@import "./pages/virtual-media";
+@import "./pages/firmware";
+@import "./pages/inventory";
+@import "./pages/power-operations";
+@import "./pages/security";
diff --git a/src/assets/styles/bmc/_sila/_kvm.scss b/src/assets/styles/bmc/_sila/_kvm.scss
index a7223844..8276b8ea 100644
--- a/src/assets/styles/bmc/_sila/_kvm.scss
+++ b/src/assets/styles/bmc/_sila/_kvm.scss
@@ -9,4 +9,4 @@
     display: block !important;
     overflow: hidden !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss
index d38ce5d2..97fe0132 100644
--- a/src/assets/styles/bmc/_sila/_pagination.scss
+++ b/src/assets/styles/bmc/_sila/_pagination.scss
@@ -21,4 +21,4 @@
     border-color: $border-color;
     box-shadow: inset 0px -3px theme-color("primary");
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 620c9e56..bca2d77e 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -1,3 +1,3 @@
 .section-divider {
-    border-bottom: 1px solid gray('400');
-  }
\ No newline at end of file
+  border-bottom: 1px solid gray('400');
+}
diff --git a/src/assets/styles/bmc/_sila/_sol.scss b/src/assets/styles/bmc/_sila/_sol.scss
index 6987cf79..3641c040 100644
--- a/src/assets/styles/bmc/_sila/_sol.scss
+++ b/src/assets/styles/bmc/_sila/_sol.scss
@@ -1,3 +1,3 @@
 #terminal .xterm .xterm-viewport {
   overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index e8b5a832..d73bfdde 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -3,16 +3,18 @@
   z-index: $zindex-dropdown;
 
   td {
-    border-top: 1px solid gray("300");
-    border-bottom: 1px solid gray("300");
+    border-top: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
+    border-bottom-width: 0px;
     &:first-of-type {
-      border-left: 1px solid gray("300");
+      border-right: 1px solid $gray-10;
     }
     &:last-of-type {
-      border-right: 1px solid gray("300");
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
     }
     vertical-align: middle;
-
+    font-size: 0.875rem;
     // Table action buttons
     .btn-link {
       width: 40px;
@@ -26,19 +28,30 @@
 
   // thead-light added for specificity
   .thead-light th {
+    background-color: $surface-secondary;
     vertical-align: middle;
-    border-top: 1px solid gray("300");
-    border-bottom: 1px solid gray("300");
+    border-top-width: 0px;
+    border-bottom: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
     &:first-of-type {
-      border-left: 1px solid gray("300");
+      border-right: 1px solid $gray-10;
     }
     &:last-of-type {
-      border-right: 1px solid gray("300");
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
     }
-    color: theme-color("dark");
+    text-transform: uppercase;
+    color: $text-primary;
     &:focus {
       outline: none;
     }
+    & > div {
+      font-size: 0.875rem !important;
+    }
+  }
+
+  .custom-switch {
+    width: 100%;
   }
 
   .status-icon svg {
@@ -56,21 +69,24 @@
   }
 
   .b-table-details {
-    background-color: theme-color("light");
+    border-top: 1px solid rgba(26,62,91,.3);
+    background-color: inherit;
     td {
-      padding-left: calc(50px + (#{$table-cell-padding} * 2));
-      padding-right: calc(50px + (#{$table-cell-padding} * 2));
+      padding-left: $table-cell-padding;
+      padding-right: $table-cell-padding;
     }
     dl {
       margin: 0;
     }
     dt {
+      font-size: 0.75rem !important;
       float: left;
       clear: left;
       margin-right: $spacer / 2;
     }
     dd {
-      line-height: 1.2
+      font-size: 0.75rem !important;
+      line-height: 1.5
     }
   }
 
@@ -78,12 +94,13 @@
     width: 50px;
     .btn {
       padding: 0;
-      width: 50px;
+      width: 40px;
     }
     svg {
       fill: theme-color("dark");
     }
   }
+
   .b-table-sort-icon-left {
     background-position: left calc(1.5rem / 2) center !important;
     padding-left: calc(1.2rem + 0.65em) !important;
@@ -104,12 +121,12 @@
 // Table stacked style for small screen only
 @include media-breakpoint-down(xs) {
   .b-table-stacked-sm {
-    border: 1px solid gray("300");
+    border: 1px solid $gray-10;
 
     tr {
 
       &:not(:first-child) > td[aria-colindex='1'] {
-        border-top: 1px solid gray("300");
+        border-top: 1px solid $gray-10;
         padding-top: 0.625rem;
       }
 
@@ -157,15 +174,15 @@
   .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
     &::before {
       text-align: left;
-      padding-left: $spacer /2;
+      padding-left: $spacer / 2;
     }
 
     > div {
       padding-left: 1rem;
     }
   }
+}
 
-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
-    border-top-width: 1px;
-  }
+.table-responsive, .table-responsive-md {
+  margin-top: 0.5rem;
 }
diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss
index 4e2ad7fa..482765ce 100644
--- a/src/assets/styles/bmc/_sila/_toasts.scss
+++ b/src/assets/styles/bmc/_sila/_toasts.scss
@@ -58,4 +58,4 @@
 .b-toast-warning .toast {
   border-left-color: theme-color("warning")!important;
   background-color: theme-color-light("warning")!important;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_firmware.scss b/src/assets/styles/bmc/_sila/pages/_firmware.scss
new file mode 100644
index 00000000..de65dc10
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_firmware.scss
@@ -0,0 +1,13 @@
+
+//
+// Firmware Update:
+//
+.firmware-update .btn,
+.firmware-update label {
+  width: 100%;
+}
+.firmware-update .form-background {
+  padding: $spacer * 2 !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_inventory.scss b/src/assets/styles/bmc/_sila/pages/_inventory.scss
new file mode 100644
index 00000000..6f065ad4
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_inventory.scss
@@ -0,0 +1,9 @@
+
+//
+// Service Indicators:
+//
+.service-indicators .form-background {
+  padding: $spacer * 2 !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_login.scss b/src/assets/styles/bmc/_sila/pages/_login.scss
new file mode 100644
index 00000000..cd7ef538
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_login.scss
@@ -0,0 +1,23 @@
+
+//
+// Login Page:
+//
+.login-form {
+  background-color: transparent !important;
+}
+
+.login-form > .btn-primary {
+  width: 100%;
+  margin-top: 2rem !important;
+}
+
+.login-main .h3 {
+  font-weight: 400 !important;
+  font-size: 1.6rem !important;
+}
+
+@media (max-width: 768px) {
+  .login-brand {
+    margin-top: 1rem;
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_power-operations.scss b/src/assets/styles/bmc/_sila/pages/_power-operations.scss
new file mode 100644
index 00000000..0921323e
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_power-operations.scss
@@ -0,0 +1,9 @@
+
+//
+// Power Operations:
+//
+.boot-settings .form-background {
+  padding: $spacer * 2 $spacer * 2 $spacer !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_security.scss b/src/assets/styles/bmc/_sila/pages/_security.scss
new file mode 100644
index 00000000..45473a53
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_security.scss
@@ -0,0 +1,9 @@
+
+//
+// Security and Access:
+//
+.ldap-settings .form-background {
+  padding: $spacer * 2 $spacer * 2 $spacer !important;
+  border-radius: $border-radius;
+  background-color: $surface-secondary !important;
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_virtual-media.scss b/src/assets/styles/bmc/_sila/pages/_virtual-media.scss
new file mode 100644
index 00000000..040e57b1
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/pages/_virtual-media.scss
@@ -0,0 +1,47 @@
+
+//
+// Media
+//
+.media-start {
+  margin-top: $spacer * 2;
+}
+
+.media-buttons-group >.media-start label {
+  width: 100%;
+}
+
+.media-buttons-group >.media-start .btn {
+  width: 50%;
+}
+
+.media-buttons-group >.media-stop > .btn {
+  width: 50%;
+}
+
+
+//
+// Media Legacy
+//
+.media-legacy label {
+  margin-top: $spacer * 2;
+}
+
+.media-legacy-buttons-group {
+  margin: 0px;
+}
+
+.media-legacy-buttons-group .btn {
+  width: 100%;
+}
+
+.media-legacy-buttons-group > .media-legacy-configure {
+  display: block;
+  width: 50%;
+  margin-bottom: $spacer * 2;
+}
+
+.media-legacy-buttons-group > .media-legacy-start {
+  display: inline-block;
+  width: 50%;
+  margin-bottom: - $spacer * 2;
+}