Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.

22 files changed, 368 insertions, 59 deletions

diff --git a/src/assets/images/Radiobutton.svg b/src/assets/images/Radiobutton.svg
new file mode 100644
index 00000000..9647a19f
--- /dev/null
+++ b/src/assets/images/Radiobutton.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z" fill="#E11717"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM14.4 8C14.4 11.5346 11.5346 14.4 8 14.4C4.46538 14.4 1.6 11.5346 1.6 8C1.6 4.46538 4.46538 1.6 8 1.6C11.5346 1.6 14.4 4.46538 14.4 8Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/edit-no.svg b/src/assets/images/edit-no.svg
new file mode 100644
index 00000000..4cb0d8e8
--- /dev/null
+++ b/src/assets/images/edit-no.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2496 0.258431C10.9246 -0.0665688 10.3996 -0.0665688 10.0746 0.258431L5.99961 4.3251L1.92461 0.250098C1.59961 -0.0749023 1.07461 -0.0749023 0.749609 0.250098C0.424609 0.575098 0.424609 1.1001 0.749609 1.4251L4.82461 5.5001L0.749609 9.5751C0.424609 9.9001 0.424609 10.4251 0.749609 10.7501C1.07461 11.0751 1.59961 11.0751 1.92461 10.7501L5.99961 6.6751L10.0746 10.7501C10.3996 11.0751 10.9246 11.0751 11.2496 10.7501C11.5746 10.4251 11.5746 9.9001 11.2496 9.5751L7.17461 5.5001L11.2496 1.4251C11.5663 1.10843 11.5663 0.575098 11.2496 0.258431Z" fill="#FF4141"/>
+</svg>
diff --git a/src/assets/images/edit-ok.svg b/src/assets/images/edit-ok.svg
new file mode 100644
index 00000000..2534daca
--- /dev/null
+++ b/src/assets/images/edit-ok.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.49993 9.0001L1.58327 6.08343C1.25827 5.75843 0.741602 5.75843 0.416602 6.08343C0.0916016 6.40843 0.0916016 6.9251 0.416602 7.2501L3.90827 10.7418C4.23327 11.0668 4.75827 11.0668 5.08327 10.7418L13.9166 1.91676C14.2416 1.59176 14.2416 1.0751 13.9166 0.750098C13.5916 0.425098 13.0749 0.425098 12.7499 0.750098L4.49993 9.0001Z" fill="#4EBF19"/>
+</svg>
diff --git a/src/assets/images/icon-edit.svg b/src/assets/images/icon-edit.svg
new file mode 100644
index 00000000..9897aacd
--- /dev/null
+++ b/src/assets/images/icon-edit.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.18244 11.25H0.75V9.81101L7.37231 3.1887L8.81106 4.62745L2.18244 11.25ZM9.87196 4.62769L2.59297 11.9C2.53298 11.9667 2.44633 12 2.35967 12H0.333287C0.146646 12 0 11.8534 0 11.6667V9.64033C0 9.54701 0.0333288 9.46702 0.0999862 9.40036L7.37231 2.12804L9.87196 4.62769ZM11.2143 2.22469L10.5852 2.8538L9.1462 1.4148L9.77531 0.785698L11.2143 2.22469ZM10.5852 3.91446L11.805 2.69463C12.065 2.43466 12.065 2.01472 11.805 1.75476L10.2452 0.194973C9.98528 -0.064991 9.56534 -0.064991 9.30537 0.194973L8.08554 1.4148L10.5852 3.91446Z" fill="#0C1C29" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/icon-reload-red.svg b/src/assets/images/icon-reload-red.svg
new file mode 100644
index 00000000..c6e8e9ff
--- /dev/null
+++ b/src/assets/images/icon-reload-red.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0417 3.95837L12.7167 6.28337C12.45 6.55004 12.6333 7.00004 13.0083 7.00004H14.5C14.5 9.75837 12.2583 12 9.49998 12C8.84165 12 8.19998 11.875 7.62498 11.6334C7.32498 11.5084 6.98332 11.6 6.75832 11.825C6.33332 12.25 6.48332 12.9667 7.04165 13.1917C7.79998 13.5 8.63332 13.6667 9.49998 13.6667C13.1833 13.6667 16.1667 10.6834 16.1667 7.00004H17.6583C18.0333 7.00004 18.2167 6.55004 17.95 6.29171L15.625 3.96671C15.4667 3.80004 15.2 3.80004 15.0417 3.95837V3.95837ZM4.49998 7.00004C4.49998 4.24171 6.74165 2.00004 9.49998 2.00004C10.1583 2.00004 10.8 2.12504 11.375 2.36671C11.675 2.49171 12.0167 2.40004 12.2417 2.17504C12.6667 1.75004 12.5167 1.03337 11.9583 0.808374C11.2 0.500041 10.3667 0.333374 9.49998 0.333374C5.81665 0.333374 2.83332 3.31671 2.83332 7.00004H1.34165C0.966651 7.00004 0.783318 7.45004 1.04998 7.70837L3.37498 10.0334C3.54165 10.2 3.79998 10.2 3.96665 10.0334L6.29165 7.70837C6.54998 7.45004 6.36665 7.00004 5.99165 7.00004H4.49998V7.00004Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/popups/red-sign.svg b/src/assets/images/popups/red-sign.svg
new file mode 100644
index 00000000..fdc2e146
--- /dev/null
+++ b/src/assets/images/popups/red-sign.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99992 0.333496C3.31992 0.333496 0.333252 3.32016 0.333252 7.00016C0.333252 10.6802 3.31992 13.6668 6.99992 13.6668C10.6799 13.6668 13.6666 10.6802 13.6666 7.00016C13.6666 3.32016 10.6799 0.333496 6.99992 0.333496ZM6.99992 10.3335C6.63325 10.3335 6.33325 10.0335 6.33325 9.66683V7.00016C6.33325 6.6335 6.63325 6.3335 6.99992 6.3335C7.36659 6.3335 7.66659 6.6335 7.66659 7.00016V9.66683C7.66659 10.0335 7.36659 10.3335 6.99992 10.3335ZM7.66659 4.3335C7.66659 4.70169 7.36811 5.00016 6.99992 5.00016C6.63173 5.00016 6.33325 4.70169 6.33325 4.3335C6.33325 3.96531 6.63173 3.66683 6.99992 3.66683C7.36811 3.66683 7.66659 3.96531 7.66659 4.3335Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/popups/x-icon.svg b/src/assets/images/popups/x-icon.svg
new file mode 100644
index 00000000..74d403f6
--- /dev/null
+++ b/src/assets/images/popups/x-icon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2501 0.758431C10.9251 0.433431 10.4001 0.433431 10.0751 0.758431L6.0001 4.8251L1.9251 0.750098C1.6001 0.425098 1.0751 0.425098 0.750098 0.750098C0.425098 1.0751 0.425098 1.6001 0.750098 1.9251L4.8251 6.0001L0.750098 10.0751C0.425098 10.4001 0.425098 10.9251 0.750098 11.2501C1.0751 11.5751 1.6001 11.5751 1.9251 11.2501L6.0001 7.1751L10.0751 11.2501C10.4001 11.5751 10.9251 11.5751 11.2501 11.2501C11.5751 10.9251 11.5751 10.4001 11.2501 10.0751L7.1751 6.0001L11.2501 1.9251C11.5668 1.60843 11.5668 1.0751 11.2501 0.758431Z" fill="#040A0F" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-bold.svg b/src/assets/images/textarea-buttons/button-icon-bold.svg
new file mode 100644
index 00000000..53e67502
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-bold.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6 6.79C9.57 6.12 10.25 5.02 10.25 4C10.25 1.74 8.5 0 6.25 0H1C0.45 0 0 0.45 0 1V13C0 13.55 0.45 14 1 14H6.78C8.85 14 10.74 12.31 10.75 10.23C10.76 8.7 9.9 7.39 8.6 6.79ZM3 2.5H6C6.83 2.5 7.5 3.17 7.5 4C7.5 4.83 6.83 5.5 6 5.5H3V2.5ZM6.5 11.5H3V8.5H6.5C7.33 8.5 8 9.17 8 10C8 10.83 7.33 11.5 6.5 11.5Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-crossline.svg b/src/assets/images/textarea-buttons/button-icon-crossline.svg
new file mode 100644
index 00000000..347eee6f
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-crossline.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 15C10.1 15 11 14.1 11 13V12H7V13C7 14.1 7.9 15 9 15ZM2 1.5C2 2.33 2.67 3 3.5 3H7V6H11V3H14.5C15.33 3 16 2.33 16 1.5C16 0.67 15.33 0 14.5 0H3.5C2.67 0 2 0.67 2 1.5ZM1 10H17C17.55 10 18 9.55 18 9C18 8.45 17.55 8 17 8H1C0.45 8 0 8.45 0 9C0 9.55 0.45 10 1 10Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-cursive.svg b/src/assets/images/textarea-buttons/button-icon-cursive.svg
new file mode 100644
index 00000000..4632587d
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-cursive.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 1.5C4 2.33 4.67 3 5.5 3H6.21L2.79 11H1.5C0.67 11 0 11.67 0 12.5C0 13.33 0.67 14 1.5 14H6.5C7.33 14 8 13.33 8 12.5C8 11.67 7.33 11 6.5 11H5.79L9.21 3H10.5C11.33 3 12 2.33 12 1.5C12 0.67 11.33 0 10.5 0H5.5C4.67 0 4 0.67 4 1.5Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-link.svg b/src/assets/images/textarea-buttons/button-icon-link.svg
new file mode 100644
index 00000000..41e44097
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-link.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="10" viewBox="0 0 21 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.95995 4.38C2.23995 2.91 3.61995 1.9 5.11995 1.9H8.04995C8.56995 1.9 8.99995 1.47 8.99995 0.95C8.99995 0.43 8.56995 0 8.04995 0H5.21995C2.60995 0 0.279953 1.91 0.0299532 4.51C-0.260047 7.49 2.07995 10 4.99995 10H8.04995C8.56995 10 8.99995 9.57 8.99995 9.05C8.99995 8.53 8.56995 8.1 8.04995 8.1H4.99995C3.08995 8.1 1.57995 6.36 1.95995 4.38ZM6.99995 6H13C13.55 6 14 5.55 14 5C14 4.45 13.55 4 13 4H6.99995C6.44995 4 5.99995 4.45 5.99995 5C5.99995 5.55 6.44995 6 6.99995 6ZM14.78 0H11.95C11.43 0 11 0.43 11 0.95C11 1.47 11.43 1.9 11.95 1.9H14.88C16.38 1.9 17.76 2.91 18.04 4.38C18.42 6.36 16.91 8.1 15 8.1H11.95C11.43 8.1 11 8.53 11 9.05C11 9.57 11.43 10 11.95 10H15C17.92 10 20.26 7.49 19.98 4.51C19.73 1.91 17.39 0 14.78 0Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-list.svg b/src/assets/images/textarea-buttons/button-icon-list.svg
new file mode 100644
index 00000000..4a3d56a5
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-list.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 3H18C18.55 3 19 2.55 19 2C19 1.45 18.55 1 18 1H6C5.45 1 5 1.45 5 2C5 2.55 5.45 3 6 3ZM18 13H6C5.45 13 5 13.45 5 14C5 14.55 5.45 15 6 15H18C18.55 15 19 14.55 19 14C19 13.45 18.55 13 18 13ZM18 7H6C5.45 7 5 7.45 5 8C5 8.55 5.45 9 6 9H18C18.55 9 19 8.55 19 8C19 7.45 18.55 7 18 7ZM2.5 12H0.5C0.22 12 0 12.22 0 12.5C0 12.78 0.22 13 0.5 13H2V13.5H1.5C1.22 13.5 1 13.72 1 14C1 14.28 1.22 14.5 1.5 14.5H2V15H0.5C0.22 15 0 15.22 0 15.5C0 15.78 0.22 16 0.5 16H2.5C2.78 16 3 15.78 3 15.5V12.5C3 12.22 2.78 12 2.5 12ZM0.5 1H1V3.5C1 3.78 1.22 4 1.5 4C1.78 4 2 3.78 2 3.5V0.5C2 0.22 1.78 0 1.5 0H0.5C0.22 0 0 0.22 0 0.5C0 0.78 0.22 1 0.5 1ZM2.5 6H0.5C0.22 6 0 6.22 0 6.5C0 6.78 0.22 7 0.5 7H1.8L0.12 8.96C0.0399999 9.05 0 9.17 0 9.28V9.5C0 9.78 0.22 10 0.5 10H2.5C2.78 10 3 9.78 3 9.5C3 9.22 2.78 9 2.5 9H1.2L2.88 7.04C2.96 6.95 3 6.83 3 6.72V6.5C3 6.22 2.78 6 2.5 6Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-number-list.svg b/src/assets/images/textarea-buttons/button-icon-number-list.svg
new file mode 100644
index 00000000..01533066
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-number-list.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 6.5C1.17 6.5 0.5 7.17 0.5 8C0.5 8.83 1.17 9.5 2 9.5C2.83 9.5 3.5 8.83 3.5 8C3.5 7.17 2.83 6.5 2 6.5ZM2 0.5C1.17 0.5 0.5 1.17 0.5 2C0.5 2.83 1.17 3.5 2 3.5C2.83 3.5 3.5 2.83 3.5 2C3.5 1.17 2.83 0.5 2 0.5ZM2 12.5C1.17 12.5 0.5 13.18 0.5 14C0.5 14.82 1.18 15.5 2 15.5C2.82 15.5 3.5 14.82 3.5 14C3.5 13.18 2.83 12.5 2 12.5ZM6 15H18C18.55 15 19 14.55 19 14C19 13.45 18.55 13 18 13H6C5.45 13 5 13.45 5 14C5 14.55 5.45 15 6 15ZM6 9H18C18.55 9 19 8.55 19 8C19 7.45 18.55 7 18 7H6C5.45 7 5 7.45 5 8C5 8.55 5.45 9 6 9ZM5 2C5 2.55 5.45 3 6 3H18C18.55 3 19 2.55 19 2C19 1.45 18.55 1 18 1H6C5.45 1 5 1.45 5 2Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-underline.svg b/src/assets/images/textarea-buttons/button-icon-underline.svg
new file mode 100644
index 00000000..61801b1b
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-underline.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79 13.95C10.82 13.56 13 10.84 13 7.79V1.25C13 0.56 12.44 0 11.75 0C11.06 0 10.5 0.56 10.5 1.25V7.9C10.5 9.57 9.37 11.09 7.73 11.42C5.48 11.89 3.5 10.17 3.5 8V1.25C3.5 0.56 2.94 0 2.25 0C1.56 0 1 0.56 1 1.25V8C1 11.57 4.13 14.42 7.79 13.95ZM0 17C0 17.55 0.45 18 1 18H13C13.55 18 14 17.55 14 17C14 16.45 13.55 16 13 16H1C0.45 16 0 16.45 0 17Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index dcf563d6..8281ff52 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,26 +1,22 @@
-// dt,
-// legend,
-// label {
-//   color: gray("800");
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 1.4285;
-// }
-
-
-
-h1,
-.h1 {
-  font-size: 2.625rem;
-  font-weight: 300;
-  line-height: 1.238;
+body {
+  overflow-y: hidden;
 }
 
-h2,
-.h2 {
-  font-size: 2.25rem;
-  font-weight: 300;
-  line-height: 1.3333;
+.main-container {
+  overflow-y: overlay;
+  height: calc(100vh - 167px);
+  &::-webkit-scrollbar {
+    margin-top: $header-height;
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    margin-top: $header-height;
+    border: 4px solid transparent;
+    background: rgba(14, 32, 48, 0.384);
+    border-radius: 16px;
+    background-clip: content-box;
+  }
 }
 
 h3,
@@ -51,10 +47,109 @@ h6,
   line-height: 1.2857;
 }
 
-.text__h1 {
+.regular-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+    &.underline {
+      text-decoration: underline;
+    }
+    &.tretiatry {
+      color: $text-tretiatry;
+    }
+}
+
+.light-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+}
+
+.semi-bold-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+.semi-bold-12px__caps {
+  font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: left;
+    text-transform: uppercase;
+    color: $text-primary !important;
+    &:hover {
+      color: $text-primary !important;
+    }
+}
+
+.bold-12px__caps {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+  text-transform: uppercase;
+}
+
+.medium-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+}
+
+.semi-bold-16px {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: $text-primary;
+}
+
+.bold-16px__caps {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  text-transform: uppercase;
+  color: $text-secondary;
+}
+
+
+.bold-24px {
   font-family: Inter;
   font-style: normal;
   font-weight: bold;
+  font-weight: 700;
   font-size: 24px;
   line-height: 28px;
   color: $text-primary;
@@ -78,4 +173,12 @@ h6,
   font-size: 12px;
   line-height: 16px;
   color: $login-page-description-color;
+}
+
+.icon-expand {
+  height: 1.2rem;
+  width: 1.2rem;
+  float: right;
+  transition: 0.3s linear;
+  margin: $spacer/4 35px 0 auto;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index c80c62a6..1afcac0b 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -61,7 +61,7 @@
 
 // Global style for all button link
 .btn-link {
-  font-weight: $headings-font-weight;
+  // font-weight: $headings-font-weight;
   color: $text-primary;
   text-decoration: none !important;
   &:hover {
@@ -79,6 +79,12 @@
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
 }
 
 // Icon only buttons
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 693b5e0b..9e30359c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -23,14 +23,14 @@
 
 .custom-select,
 .form-control {
-  &:active {
+  // &:active {
     // border: 1px solid $primary!important;
-  }
-  &:focus {
+  // }
+  // &: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");
@@ -41,13 +41,13 @@
   }
 }
 
-.custom-select,
-.custom-control-label,
-.form-control {
-  color: theme-color("dark") !important;
-  font-size: 1rem;
-  border-radius: 8px;
-}
+// .custom-select,
+// .custom-control-label,
+// .form-control {
+  // color: theme-color("dark") !important;
+  // font-size: 1rem;
+  // border-radius: 8px;
+// }
 
 // Inverted form colors
 .form-background {
@@ -82,9 +82,13 @@
 .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;
+  border-radius: 3px;
+  background-color: $red-brand-primary;
+  border-color: $red-brand-primary;
   cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
 }
 
 .custom-control {
@@ -97,8 +101,43 @@
   }
 }
 
-.custom-control-input:focus ~ .custom-control-label::before{
-  // box-shadow: 0 0 0 2px  theme-color("primary");
+.custom-switch {
+  width: 28px;
+  height: 16px;
+  margin: 0 0 0 auto;
+}
+
+.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 $faint-secondary-primary-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $faint-secondary-primary-20;
+  background: rgba(4, 10, 15, 0.3);
+}
+
+.custom-switch
+.custom-control-input:checked ~ .custom-control-label::before {
+  background: $red-brand-primary;
+  border: 1px solid $faint-secondary-primary-20;
+  border-radius: 8px;
 }
 
 .custom-control-label::after {
@@ -133,3 +172,24 @@
     background-position: right 3rem bottom 50%;
   }
 }
+
+// Global style progress bar
+.progress {
+  width: 120px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: $faint-secondary-primary-10;
+}
+
+.progress-bar {
+  background-color: $red-brand-primary;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red-brand-primary;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index 74594e35..43b4e1a3 100644
--- a/src/assets/styles/bmc/custom/_index.scss
+++ b/src/assets/styles/bmc/custom/_index.scss
@@ -15,4 +15,5 @@
 @import "./section-divider";
 @import "./sol";
 @import "./tables";
-@import "./toasts";
\ No newline at end of file
+@import "./toasts";
+@import "./popover";
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss
new file mode 100644
index 00000000..681547d1
--- /dev/null
+++ b/src/assets/styles/bmc/custom/_popover.scss
@@ -0,0 +1,23 @@
+.b-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: $white;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  position: relative;
+  max-width: 389px;
+  width: 389px;
+  height: auto;
+}
+
+.popover-header {
+  background-color: transparent;
+  border: none;
+  padding: 24px 0px 0px 24px;
+  width: 389px;
+}
+
+.arrow {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_section-divider.scss b/src/assets/styles/bmc/custom/_section-divider.scss
index 620c9e56..79b14476 100644
--- a/src/assets/styles/bmc/custom/_section-divider.scss
+++ b/src/assets/styles/bmc/custom/_section-divider.scss
@@ -1,3 +1,7 @@
 .section-divider {
     border-bottom: 1px solid gray('400');
-  }
\ No newline at end of file
+  }
+
+.page-collapse-decorator {  
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a832..48d49b2b 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,16 +1,18 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
+  border-radius: 10px;
 
   td {
-    border-top: 1px solid gray("300");
-    border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
+    // border-top: 1px solid gray("300");
+    // border-bottom: 1px solid gray("300");
+    // &:first-of-type {
+    //   border-left: 1px solid gray("300");
+      
+    // }
+    // &:last-of-type {
+    //   border-right: 1px solid gray("300");
+    // }
     vertical-align: middle;
 
     // Table action buttons
@@ -27,15 +29,15 @@
   // thead-light added for specificity
   .thead-light th {
     vertical-align: middle;
-    border-top: 1px solid gray("300");
+    // border-top: 1px solid gray("300");
     border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
-    color: theme-color("dark");
+    // &:first-of-type {
+      // border-left: 1px solid gray("300");
+    // }
+    // &:last-of-type {
+      // border-right: 1px solid gray("300");
+    // }
+    // color: theme-color("dark");
     &:focus {
       outline: none;
     }
@@ -109,7 +111,7 @@
     tr {
 
       &:not(:first-child) > td[aria-colindex='1'] {
-        border-top: 1px solid gray("300");
+        // border-top: 1px solid gray("300");
         padding-top: 0.625rem;
       }
 
@@ -165,7 +167,68 @@
     }
   }
 
-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
-    border-top-width: 1px;
+  // .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+    // border-top-width: 1px;
+  // }
+}
+
+.bootstrap-table__section {
+  position: relative;
+  margin: 16px 2rem 0 2rem;
+  width: 90%;
+}
+
+.bootstrap-rounded-table {
+  border: 1px solid rgba(26, 62, 91, 0.3);
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px; 
+  border-radius: 10px; 
+}
+
+.bootstrap-rounded-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 10px 0 0 0;
+  -webkit-border-radius: 10px 0 0 0;
+  -moz-border-radius: 10px 0 0 0;
+}
+
+.bootstrap-rounded-table__column-last {
+  border-top: none !important;
+  border-radius: 0 10px 0 0;
+  -webkit-border-radius: 0 10px 0 0;
+  -moz-border-radius: 0 10px 0 0;
+}
+
+.bootstrap-rounded-table__column-center {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  -moz-border-radius: 0 0 0 0;
+}
+
+.bootstrap-rounded-table__head_bg {
+  background-color: $faint-secondary-primary-10 !important;
+}
+
+.bootstrap-rounded-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  -khtml-border-radius: 0;
+  &:hover {
+    background-color: $faint-secondary-primary-5;
   }
 }
+
+
+.bootstrap-table {
+  border-top: none !important;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  background-color: $faint-secondary-primary-5;
+}
+
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 32e93260..584a7785 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -42,9 +42,15 @@ $navbar-color: $primary;
 $login-page-description-color: rgba(12, 28, 41, 0.6);
 
 $text-primary: #0C1C29;
+$text-secondary: #0C1C29E5;
+$text-tretiatry: rgba(12, 28, 41, 0.6);
+
+$surface-secondary: #F3F4F5;
 
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
 $faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-secondary-primary-10: rgba(26, 62, 91, 0.1);
+$faint-secondary-primary-20: rgba(26, 62, 91, 0.2);
 $faint-brand-primary-40:rgba(225, 23, 23, 0.4);
 
 $red-brand-primary: #E11717;