From 21e9d1705bd580a2bbc64dd621f8305439a74dfa Mon Sep 17 00:00:00 2001
From: Namita g <namita_g@tekditechnologies.com>
Date: Tue, 6 Dec 2022 12:36:20 +0530
Subject: [PATCH] Fix:CSS

---
 .../add-template/add-template.component.scss  |  124 +-
 .../advance-editor.component.scss             |   99 +-
 .../config-workflow.component.scss            |  102 +-
 .../configurations.component.scss             |   22 +-
 .../create-vc-template.component.scss         |  120 +-
 .../edit-template.component.scss              |  157 +--
 .../get-started/get-started.component.scss    |  320 +----
 src/styles.scss                               | 1075 +++++++++--------
 8 files changed, 727 insertions(+), 1292 deletions(-)

diff --git a/src/app/admin/add-template/add-template.component.scss b/src/app/admin/add-template/add-template.component.scss
index 70bdc73..6a6e29c 100644
--- a/src/app/admin/add-template/add-template.component.scss
+++ b/src/app/admin/add-template/add-template.component.scss
@@ -1,97 +1,49 @@
 select {
-    // height: 34px;
-    // width: 100%;
-    // left: 1px;
-    // top: 22px;
-    border-radius: 4px;
-    background: #FFFFFF;
-    border: 1px solid #EFEFEF;
-    box-sizing: border-box;
-    border-radius: 4px;
-    padding: 11px 10px;
-    width: 100%;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #efefef;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 11px 10px;
+  width: 100%;
 }
-
-// select option {
-//     height: 34px; 
-// }
-
-
-.inputField {
-    height: 40px;
-    width: 505px;
-    left: -5px;
-    top: 8px;
-    border-radius: 4px;
-    border: 1px solid #EFEFEF !important;
-}
-
-
-
 .div-scroll {
-    overflow-y: scroll; /* Show vertical scrollbar */
-    overflow-x: scroll; /* Show horizontal scrollbar */
-  }
-@media(min-width:768px){
-    .h-card{
-        min-height: 570px !important;
-        height: auto;
-      }
-      .setHeight{
-        height: 614px !important;
-        max-height: 614px !important;
-    }
+  overflow-y: scroll; /* Show vertical scrollbar */
+  overflow-x: scroll; /* Show horizontal scrollbar */
 }
-@media(max-width:768px){
-    .p-sm-0{
-        padding: 0 !important;
-    }
+@media (min-width: 768px) {
+  .h-card {
+    min-height: 570px !important;
+    height: auto;
+  }
+  .setHeight {
+    height: 614px !important;
+    max-height: 614px !important;
+  }
 }
-
-.mt-23{
-    margin-top: -23px;
+@media (max-width: 768px) {
+  .p-sm-0 {
+    padding: 0 !important;
+  }
 }
 .modal-content {
-    width: 45%;
-    height: 425px;
-    margin: 10% 30%;
+  width: 45%;
+  height: 425px;
+  margin: 10% 30%;
 }
-
-.w-0{
-    width: 0 !important;
+.box {
+  float: left;
+  margin-right: 10px;
 }
-  
-
-
-.box{
-    float:left;
-    margin-right:10px;
+.prevBtn {
+  margin: 1px 0 -2px 20px;
+  z-index: 9999;
+  position: absolute;
 }
-.clear{
-    clear:both;
-}
-
-.wrapper {
-    display: grid;
-    //grid-template-columns: repeat(2, 1fr);;
-  }
-
-  .desc {
-    height: 90px;
-}
-
-.prevBtn 
-{
-    margin: 1px 0 -2px 20px;
-    z-index: 9999;
-    position: absolute;
-}
-
 .templateThumb {
-    width: 120px;
-    height: 172px;
-    //border: 2px solid #1987B6;
-    border: 1px solid #d7d5d5;
-    box-sizing: border-box;
-    margin: 4px 0 2px 2px;
-}
\ No newline at end of file
+  width: 120px;
+  height: 172px;
+  border: 1px solid #d7d5d5;
+  box-sizing: border-box;
+  margin: 4px 0 2px 2px;
+}
diff --git a/src/app/admin/advance-editor/advance-editor.component.scss b/src/app/admin/advance-editor/advance-editor.component.scss
index 240db40..3a1b05f 100644
--- a/src/app/admin/advance-editor/advance-editor.component.scss
+++ b/src/app/admin/advance-editor/advance-editor.component.scss
@@ -1,65 +1,52 @@
 .jsonviewer {
-    max-height: 600px;
-    overflow: scroll;
+  max-height: 600px;
+  overflow: scroll;
 }
-
 .well {
-    min-height: 20px;
-    padding: 19px;
-    margin-bottom: 20px;
-    background-color: #ffffff;
-    border: 1px solid #e8e8e8;
-    border-radius: 0;
-    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
-    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
 }
-
-.disabledbutton {
-    pointer-events: none;
-}
-
 .ace-jsoneditor .ace_scroller {
   pointer-events: none !important;
 }
-
-
 /* Start - ngx-editor css */
 .collapsible {
-    background-color: #777;
-    color: white;
-    cursor: pointer;
-    padding: 10px;
-    width: 100%;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-    margin-bottom: 5px;
-  }
-  
-  .active, .collapsible:hover {
-    background-color: #555;
-  }
-  
-  .content {
-    padding: 0 18px;
-    display: none;
-    overflow: hidden;
-    background-color: #f1f1f1;
-  }
-  
-  .ngx-text-editor{
-    background-color: #ffffff !important;
-    font-size: 14px;
-  }
-
-  .ngx-toolbar {
-    display: none !important;
-  }
-
-  /* End - ngx-editor css */
-
-  .arrIcon {
-    font-size: x-small;
-    padding: 5px;
-  }
\ No newline at end of file
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  margin-bottom: 5px;
+}
+.active,
+.collapsible:hover {
+  background-color: #555;
+}
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
+.ngx-text-editor {
+  background-color: #ffffff !important;
+  font-size: 14px;
+}
+.ngx-toolbar {
+  display: none !important;
+}
+/* End - ngx-editor css */
+.arrIcon {
+  font-size: x-small;
+  padding: 5px;
+}
diff --git a/src/app/admin/config-workflow/config-workflow.component.scss b/src/app/admin/config-workflow/config-workflow.component.scss
index 6c45527..b0fdfdc 100644
--- a/src/app/admin/config-workflow/config-workflow.component.scss
+++ b/src/app/admin/config-workflow/config-workflow.component.scss
@@ -12,14 +12,6 @@
   padding: 5px 9px;
   border: 1px solid #666;
 }
-
-.custom-container {
-  background-color: #f6f8fc;
-  margin-top: 25px !important;
-  margin-left: 0px !important;
-
-  height: 186px;
-}
 .custom-container-edit {
   background-color: #f6f8fc;
   margin-top: 0px !important;
@@ -27,46 +19,25 @@
   height: auto;
   padding: 10px;
 }
-
-.delete-btn {
-  background-color: hsl(0, 81%, 86%);
-  border-radius: 20px;
-  width: 120px;
-  height: 40px;
-  padding: 10px;
-  float: right;
-  // opacity: 0.1;
-  text-align: center;
-}
-.text-color {
-  color: #c31212;
-  font-weight: 700;
-}
-
 .custom-container-attester {
   background-color: #f6f8fc;
   margin-top: 0px !important;
   margin-left: 0px !important;
   height: 186px;
 }
-
-.btn-add-attester {
-  background-color: #e8f3f8;
-  border-radius: 20px;
-  width: 170px;
-  height: 40px;
+.custom-dropdown-attester {
+  width: 26%;
+  height: 45px;
+  color: #8d9091;
+  border-radius: 4px 4px 4px 4px;
+  background-color: #ffffff;
   padding: 10px;
-  margin-left: 10px;
-}
-.btn-edit-attester {
-  background-color: #e8f3f8;
-  width: 170px;
-  height: 40px;
-  padding: 5px;
-  margin-left: 10px;
+  border-color: rgb(231, 229, 229);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-
-.custom-dropdown-attester {
+.custom-dropdown-attester-w-auto {
   width: auto;
   height: 45px;
   color: #8d9091;
@@ -74,6 +45,9 @@
   background-color: #ffffff;
   padding: 10px;
   border-color: rgb(231, 229, 229);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .custom-dropdown-attester-details {
   width: auto;
@@ -83,32 +57,6 @@
   background-color: #ffffff;
   border-color: rgb(231, 229, 229);
 }
-
-.clr-grey {
-  color: #8d9091;
-}
-
-.ml-40 {
-  margin-left: 40px;
-}
-
-.ml-240 {
-  margin-left: 210px;
-}
-
-.custom-hr {
-  color: #efefef;
-  height: 1px;
-}
-
-.ml-360 {
-  margin-left: 360px;
-}
-
-.ml-13 {
-  margin-left: 13px;
-}
-
 .custom-dropdown2 {
   width: 143px;
   height: 45px;
@@ -116,25 +64,3 @@
   border-radius: 4px 4px 4px 4px;
   background-color: #ffffff;
 }
-
-.clr-grey2 {
-  background-color: #f6f8fc !important;
-}
-
-.clr-blue {
-  color: #1987b6;
-}
-
-.plus-btn {
-  width: 151px;
-  height: 40px;
-
-  background: #e8f3f8;
-  border-radius: 8px;
-}
-
-.newDiv {
-  height: 200px;
-  width: 400px;
-  background-color: red;
-}
diff --git a/src/app/admin/configurations/configurations.component.scss b/src/app/admin/configurations/configurations.component.scss
index badc071..2d1fee2 100644
--- a/src/app/admin/configurations/configurations.component.scss
+++ b/src/app/admin/configurations/configurations.component.scss
@@ -1,18 +1,8 @@
-.card-bottom{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+.card-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-
-.ylow{
-    background-color: rgba(255, 217, 101, 0.3)
-    
+.ylow {
+  background-color: rgba(255, 217, 101, 0.3);
 }
-
-.grey{
-    background-color: #CCCCCC;
-    font-family: 'Lato';
-    color: #8D9091;
-    font-size: 12px;
-    border-radius: 5px;
-}
\ No newline at end of file
diff --git a/src/app/admin/create-vc-template/create-vc-template.component.scss b/src/app/admin/create-vc-template/create-vc-template.component.scss
index d9c7b87..8afa41b 100644
--- a/src/app/admin/create-vc-template/create-vc-template.component.scss
+++ b/src/app/admin/create-vc-template/create-vc-template.component.scss
@@ -1,75 +1,51 @@
 .templateThumb {
-    //border: 2px solid #1987B6;
-    border: 1px solid #d7d5d5;
-    box-sizing: border-box;
-    // margin: 4px 0 2px 2px;
-}
-.img-hold{
-    display: flex;
-    gap: 15px;
-}
-
-
-@media (max-width:768px) {
-    .templateThumb{
-        width: 90px;
-        height: 105px;
-    }
-    .Add-set{
-        margin-bottom: 80px;
-    }
-    .img-hold{
-        display: flex;
-        gap: 5px;
-    }
-}
-
-.thmbCol{
-   display: flex;
-   flex-direction: column;
-   align-items: center;
-   justify-content: center;
-   height: 100%;
-
-}
-.thmbCol2{
+  border: 1px solid #d7d5d5;
+  box-sizing: border-box;
+}
+.img-hold {
+  display: flex;
+  gap: 15px;
+}
+@media (max-width: 768px) {
+  .templateThumb {
+    width: 90px;
+    height: 105px;
+  }
+  .Add-set {
+    margin-bottom: 80px;
+  }
+  .img-hold {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-   
- 
- }
-
-.img-ht{
-    height:190px;
-    width:130px;
-    background-color: #FFFFFF;
-    border:  1px solid #EFEFEF;;
-}
-.ft-12{
-font-size: 12px;
-}
-
-.ft-10{
-font-size: 10px;
-}
-
-.pt-c{
-    cursor: pointer;
-}
-
-
-.wrap{
-    width: 130px !important;
-    height: 190px !important;
-    overflow: hidden;
-
-}
-
-#iframe1{
-   height: 430%;
-   width: 325%;
-   overflow: hidden;
-   transform: scale(0.32,0.3); 
-    transform-origin: 0 0;
+    gap: 5px;
+  }
+}
+.thmbCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.thmbCol2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.img-ht {
+  height: 190px;
+  width: 130px;
+  background-color: #ffffff;
+  border: 1px solid #efefef;
+}
+.wrap {
+  width: 130px !important;
+  height: 190px !important;
+  overflow: hidden;
+}
+#iframe1 {
+  height: 430%;
+  width: 325%;
+  overflow: hidden;
+  transform: scale(0.32, 0.3);
+  transform-origin: 0 0;
 }
diff --git a/src/app/admin/edit-template/edit-template.component.scss b/src/app/admin/edit-template/edit-template.component.scss
index ea41bcf..7e67efb 100644
--- a/src/app/admin/edit-template/edit-template.component.scss
+++ b/src/app/admin/edit-template/edit-template.component.scss
@@ -1,135 +1,22 @@
-select {
-    height: 34px;
-    width: 100%;
-    left: 1px;
-    top: 22px;
-    border-radius: 4px;
-    background: white;
-}
-
-select option {
-    height: 34px; 
-}
-
-
-.inputField {
-    height: 40px;
-    width: 505px;
-    left: -5px;
-    top: 8px;
-    border-radius: 4px;
-    border: 1px solid #EFEFEF !important;
-}
-
-
-
-.div-scroll {
-    overflow-y: scroll; /* Show vertical scrollbar */
-    overflow-x: scroll; /* Show horizontal scrollbar */
-  }
-
-  .h-card{
-    height: 570px !important;
-  }
-
-
-  .mt-23{
-    margin-top: -23px;
-}
-
-// .setHeight{
-//     height: 614px !important;
-//     max-height: 614px !important;
-// }
-
-// .modal-content {
-//     width: 45%;
-//     height: 425px;
-//     margin: 10% 30%;
-// }
-
-.w-0{
-    width: 0 !important;
-}
-  
-
-
-.box{
-    float:left;
-    margin-right:20px;
-}
-.clear{
-    clear:both;
-}
-
-.wrapper {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);;
-  }
-
-  .desc {
-    height: 90px;
-}
-
-.prevBtn 
-{
-    margin: 1px 0 -2px 20px;
-    z-index: 9999;
-    position: absolute;
-}
-
-.templateThumb {
-    width: 122px;
-    border: 1px solid;
-}
-
-  /* Move the textarea in front of the result */
-  
-  
-  /* Paragraphs; First Image */
-
-  p code {
-    border-radius: 2px;
-    background-color: #eee;
-    color: #111;
-  }
-  
-
-    /*  grapesjs: start*/
-
-    .gjs-cv-canvas {
-      top: 0;
-      width: 100%;
-      height: 100%;
-   }
-   
-   .gjs-block {
-      width: auto;
-      height: auto;
-      min-height: auto;
-   }
-
-
-    /* grapesjs : end*/
-
-//disable json editor
-    .disabledbutton {
-      pointer-events: none;
-  }
-
-
-  .adv-btn {
-    color: #A6D4FF;
-    background-color: #000000;
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 700 !important;
-  }
-
-  .adv-label {
-    font-size: 14px !important;
-    line-height: 18px !important;
-    font-weight: 700 !important;
-    color: #A6D4FF !important;
-    background-color: #000000 !important;
-}
+.desc {
+  height: 90px;
+}
+/* Move the textarea in front of the result */
+/* Paragraphs; First Image */
+p code {
+  border-radius: 2px;
+  background-color: #eee;
+  color: #111;
+}
+/*  grapesjs: start*/
+.gjs-cv-canvas {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.gjs-block {
+  width: auto;
+  height: auto;
+  min-height: auto;
+}
+/* grapesjs : end*/
diff --git a/src/app/admin/get-started/get-started.component.scss b/src/app/admin/get-started/get-started.component.scss
index d07611e..3338169 100644
--- a/src/app/admin/get-started/get-started.component.scss
+++ b/src/app/admin/get-started/get-started.component.scss
@@ -1,30 +1,14 @@
-/*
-    DEMO STYLE
-*/
-
 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
 
 body {
   background: #ffffff;
 }
-
 p {
   font-size: 1.1em;
   font-weight: 300;
   line-height: 1.7em;
   color: #999;
 }
-.wrapped-start {
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
-.agree-container {
-  width: 83%;
-  background-color: white;
-  margin-top: 0%;
-  margin-left: 8.5%;
-}
 .white-background {
   background-color: #fff;
 }
@@ -34,17 +18,10 @@ p {
 .form-check {
   padding-left: 1.5rem;
 }
-.border1 {
-  border: 3px solid #0098ab !important;
-}
-.border2 {
-  border: 1px solid #fff !important;
-}
 .bottom-padding-container {
-  padding-bottom:35px !important;
+  padding-bottom: 45px !important;
 }
 .container .form-check-input {
-  // position: relative;
   width: 1.125rem;
   height: 1.125rem;
   opacity: 1;
@@ -57,248 +34,22 @@ p {
 .top-padding-title {
   padding-top: 0;
 }
-.bottom-padding-btn {
-  margin-bottom:0;
-}
-
-a,
-a:hover,
-a:focus {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.3s;
-}
-
-.navbar {
-  padding: 0 10px;
-  background: #fff;
-  border: none;
-  border-radius: 0;
-  margin-bottom: 40px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-btn {
-  box-shadow: none;
-  outline: none !important;
-  border: none;
-}
-
-.line {
-  width: 100%;
-  height: 1px;
-  border-bottom: 1px dashed #ddd;
-  margin: 40px 0;
-}
-
-/* ---------------------------------------------------
-    SIDEBAR STYLE
------------------------------------------------------ */
-
-.wrapper {
-  display: flex;
-  width: 100%;
-  align-items: stretch;
-}
-
-#sidebar {
-  min-width: 250px;
-  max-width: 250px;
-  background: #ffffff;
-  color: rgb(0, 0, 0);
-  transition: all 0.3s;
-}
-
-#sidebar.active {
-  margin-left: -250px;
-}
-
-#sidebar .sidebar-header {
-  padding: 20px;
-  background: #ffffff;
-}
-
-#sidebar ul.components {
-  padding: 20px 0;
-}
-
-#sidebar ul p {
-  color: rgb(0, 0, 0);
-  padding: 10px;
-}
-
-#sidebar ul li a {
-  padding: 10px;
-  font-size: 14px;
-  display: block;
-}
-
-#sidebar ul li a:hover {
-  color: #7386d5;
-  background: rgb(0, 0, 0);
-}
-
-.active-link {
-  color: #1987b6;
-}
-
-#sidebar ul li.active > a,
-a[aria-expanded="true"] {
-  color: rgb(21, 20, 20);
-  background: #ffffff;
-}
-
-a[data-toggle="collapse"] {
-  position: relative;
-}
-
-.dropdown-toggle::after {
-  display: block;
-  position: absolute;
-  top: 50%;
-  right: 20px;
-  transform: translateY(-50%);
-}
-
-ul ul a {
-  font-size: 0.9em !important;
-  padding-left: 30px !important;
-  background: #feffff;
-}
-
-ul.CTAs {
-  padding: 20px;
-}
-
-ul.CTAs a {
-  text-align: center;
-  font-size: 0.9em !important;
-  display: block;
-  border-radius: 5px;
-  margin-bottom: 5px;
-}
-
-a.download {
-  background: #fff;
-  color: #000000;
-}
-
-a.article,
-a.article:hover {
-  background: #e7e8ed !important;
-  color: rgb(0, 0, 0) !important;
-}
-
-/* ---------------------------------------------------
-    CONTENT STYLE
------------------------------------------------------ */
-
-#content {
-  width: 100%;
-  padding: 5px;
-  min-height: 100vh;
-  transition: all 0.3s;
-}
-
-/* ---------------------------------------------------
-    MEDIAQUERIES
------------------------------------------------------ */
-
-@media (max-width: 768px) {
-  #sidebar {
-    margin-left: -250px;
-  }
-
-  #sidebar.active {
-    margin-left: 0;
-  }
-
-  #sidebarCollapse span {
-    display: none;
-  }
-}
 
 //  Added css by - pratiksha
 
-.mtop6 {
-  margin-top: 3rem;
-}
-
-.get-card {
-  //     height: 220px;
-  // width: 286px;
-  left: 0px;
-  top: 0px;
-  border-radius: 4px;
-  box-sizing: border-box;
-
-  position: absolute;
-
-  background: #ffffff;
-  /* Grey / Grey 3 */
-
-  border: 1px solid #efefef;
-  border-radius: 4px;
-  padding: 2px !important;
-  margin: 3px !important;
-}
-
 .row {
   overflow-x: hidden;
   overflow-y: hidden;
-  // height: 1000px;
   min-height: 215px !important;
   position: relative;
   width: auto !important;
   flex-wrap: nowrap;
-  // padding-left: 8px;
 }
 
 .col {
   margin-right: 82px !important;
 }
 
-.row2 {
-  overflow-x: hidden;
-  overflow-y: hidden;
-  // height: 1000px;
-  min-height: 155px !important;
-  position: relative;
-  width: auto !important;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.get-module-card {
-  left: 0px;
-  top: 0px;
-  border-radius: 4px;
-  box-sizing: border-box;
-
-  position: absolute;
-
-  background: #ffffff;
-  /* Grey / Grey 3 */
-
-  border: 1px solid #efefef;
-  border-radius: 4px;
-  padding: 2px !important;
-  margin: 3px !important;
-  width: 100%;
-}
-
-/* Create a custom checkbox */
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 24px;
-  width: 24px;
-  background-color: #ffffff;
-  border-radius: 4px;
-  border: 1px solid #efefef;
-}
-
 /* Hide the browser's default checkbox */
 .container input {
   position: absolute;
@@ -307,47 +58,6 @@ a.article:hover {
   height: 0;
   width: 0;
 }
-
-.container input:checked ~ .checkmark {
-  background-color: #1987b6;
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-/* Style the checkmark/indicator */
-.container .checkmark:after {
-  left: 9px;
-  top: 5px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 1.5px 1.5px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.mp-0 {
-  margin: 0;
-  padding: 0;
-}
-
-@media (max-width: 1025px) {
-  .min-ht2 {
-    height: 70px;
-  }
-}
-
 @media (max-width: 768px) {
   .row {
     overflow-x: scroll;
@@ -361,26 +71,18 @@ a.article:hover {
   .min-ht2 {
     height: 74px;
   }
-}
-@media (max-width: 350px) {
-  .min-ht2 {
-    height: 95px;
+  @media (max-width: 350px) {
+    .min-ht2 {
+      height: 95px;
+    }
   }
 }
-
-.to-0 {
-  text-overflow: ellipsis;
-}
-
-.fa-question-circle {
-  color: #cccccc;
+.border1 {
+  border: 3px solid #0098ab !important;
 }
-
-.modal-body {
-  background-color: #f6f8fc;
-  border-radius: 10px;
+.border2 {
+  border: 1px solid #fff !important;
 }
-
 .min-ht {
   min-height: 220px;
 }
@@ -391,10 +93,6 @@ a.article:hover {
 .card-title {
   margin-bottom: 0rem !important;
 }
-
-.custHr {
-  border: 1px solid #efefef;
-}
 .fw-400 {
   font-weight: 400;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 7bce1c0..ef416fc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,64 +1,63 @@
-@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
-@import '~@fortawesome/fontawesome-free/scss/solid.scss';
-@import '~@fortawesome/fontawesome-free/scss/regular.scss';
-@import '~@fortawesome/fontawesome-free/scss/brands.scss';
-@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';
+@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "~@fortawesome/fontawesome-free/scss/solid.scss";
+@import "~@fortawesome/fontawesome-free/scss/regular.scss";
+@import "~@fortawesome/fontawesome-free/scss/brands.scss";
+@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import "https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,700;1,200;1,300;1,400;1,600&display=swap";
 @import "https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";
 
 /* Importing Bootstrap SCSS file. */
 
-@import '~bootstrap/scss/bootstrap';
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import "~bootstrap/scss/bootstrap";
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
 :root {
-    // SB-RC
-    // --primaryColor: #1987B6;
-    // --secondaryColor: #0098AB;
-    // --bodyBackground: #F6F8FC;
-    // --cardBackground: #FFFFFF;
-    // --tagsBackground: #8D9091;
-    // --navLabelColor: #1987B6;
-    // --headerColor: #FFFFFF;
-    // --headerLinkColor: #0098AB;
-    // --primaryTextColor: #000000;
-    // --secondaryTextColor: #8D9091;
-    // SL
-    --primaryColor: #1987B6;
-    --secondaryColor: #0098AB;
-    --bodyBackground: #F6F8FC;
-    --cardBackground: #FFFFFF;
-    --tagsBackground: #F4ECFF;
-    --navLabelColor: #0098AB;
-    --headerColor: #FFFFFF;
-    --headerLinkColor: #0098AB;
-    --primaryTextColor: #000000;
-    --secondaryTextColor: #000000;
-    --linkColor: #443DF6;
-    --secondaryBtnBgColor: #e8f3f8;
-    --cardBorder: #00000020;
-
-
-    //   dark
-    // --primaryColor: #F07D00;
-    // --secondaryColor: #F07D00;
-    // --bodyBackground: #080808;
-    // --cardBackground: #323232;
-    // --tagsBackground: #505050;
-    // --navLabelColor: #FFB96C;
-    // --headerColor: #313131;
-    // --primaryTextColor: #FFFFFF;
-    // --secondaryTextColor:#FFFFFF;
-    --labelOnPrimary: var(--cardBackground);
-    --btnBgColor: var(--secondaryColor);
-    --headerTitle: var(--primaryColor);
-    --secondarybgColor: var(--secondaryColor);
-    --secondarytextColor: var(--bodyBackground);
-    --primarybgColor: var(--primaryColor);
-    --tagstextColor: var(--secondaryColor);
-    --navlinkColor: var(--navLabelColor);
-    --textWhite: var(--secondarytextColor);
-    /*mm
+  // SB-RC
+  // --primaryColor: #1987B6;
+  // --secondaryColor: #0098AB;
+  // --bodyBackground: #F6F8FC;
+  // --cardBackground: #FFFFFF;
+  // --tagsBackground: #8D9091;
+  // --navLabelColor: #1987B6;
+  // --headerColor: #FFFFFF;
+  // --headerLinkColor: #0098AB;
+  // --primaryTextColor: #000000;
+  // --secondaryTextColor: #8D9091;
+  // SL
+  --primaryColor: #1987b6;
+  --secondaryColor: #0098ab;
+  --bodyBackground: #f6f8fc;
+  --cardBackground: #ffffff;
+  --tagsBackground: #f4ecff;
+  --navLabelColor: #0098ab;
+  --headerColor: #ffffff;
+  --headerLinkColor: #0098ab;
+  --primaryTextColor: #000000;
+  --secondaryTextColor: #000000;
+  --linkColor: #443df6;
+  --secondaryBtnBgColor: #e8f3f8;
+  --cardBorder: #00000020;
+
+  //   dark
+  // --primaryColor: #F07D00;
+  // --secondaryColor: #F07D00;
+  // --bodyBackground: #080808;
+  // --cardBackground: #323232;
+  // --tagsBackground: #505050;
+  // --navLabelColor: #FFB96C;
+  // --headerColor: #313131;
+  // --primaryTextColor: #FFFFFF;
+  // --secondaryTextColor:#FFFFFF;
+  --labelOnPrimary: var(--cardBackground);
+  --btnBgColor: var(--secondaryColor);
+  --headerTitle: var(--primaryColor);
+  --secondarybgColor: var(--secondaryColor);
+  --secondarytextColor: var(--bodyBackground);
+  --primarybgColor: var(--primaryColor);
+  --tagstextColor: var(--secondaryColor);
+  --navlinkColor: var(--navLabelColor);
+  --textWhite: var(--secondarytextColor);
+  /*mm
   --secondarybgColor:#4A227C;
   --secondarytextColor:#F6F8FC;
   --primarybgColor:#F07D00;
@@ -68,644 +67,637 @@
   --textWhite:#ffffff;*/
 }
 
-
 /* PK changes for - theme support */
-
 .nav-link-color {
-    color: var(--navlinkColor) !important;  
+  color: var(--navlinkColor) !important;
 }
-
-
 .tagstextColor {
-    color: var(--primarybgColor) !important;
+  color: var(--primarybgColor) !important;
 }
-
 .headerTitleColor {
-    color: var(--secondaryColor) !important;
+  color: var(--secondaryColor) !important;
 }
-
 .primarybgColor {
-    color: var(--primarybgColor) !important;
+  color: var(--primarybgColor) !important;
 }
-
 .card .card-body {
-    background-color: var(--cardBackground) !important;
-    color: var(--primaryTextColor) !important;
-    
-    text-overflow: hidden; 
-}
+  background-color: var(--cardBackground) !important;
+  color: var(--primaryTextColor) !important;
 
+  text-overflow: hidden;
+}
 .card-title {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
 
-
 /* pk changes - end */
 
 .bg-header {
-    background: var(--headerColor) !important;
+  background: var(--headerColor) !important;
 }
-
 .text-wb {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
-
 .table-striped tbody tr:nth-of-type(odd) {
-    background-color: var(--bodyBackground) !important;
+  background-color: var(--bodyBackground) !important;
 }
-
 .btn-success {
-    background-color: #88ecb226 !important;
-    color: #22B02E !important;
-    border: 0 !important;
+  background-color: #88ecb226 !important;
+  color: #22b02e !important;
+  border: 0 !important;
 }
-
 .bg-primary {
-    background-color: var(--primaryColor) !important
+  background-color: var(--primaryColor) !important;
 }
-
 .ngx-pagination .current {
-    background: var(--primaryColor) !important;
-    ;
+  background: var(--primaryColor) !important;
 }
-
 .d-contents {
-    display: contents !important;
+  display: contents !important;
 }
-
 .btn-deny {
-    background-color: #f3c2c24f !important;
-    color: #C5292A !important;
-    border: 0 !important;
+  background-color: #f3c2c24f !important;
+  color: #c5292a !important;
+  border: 0 !important;
 }
-
 textarea.form-control {
-    height: 100px !important;
-    font-size: 12px;
+  height: 100px !important;
+  font-size: 12px;
 }
-
 .btn-primary {
-    background-color: var(--primaryColor) !important;
-    border-color: var(--primaryColor) !important;
-    border: 0 !important;
+  background-color: var(--primaryColor) !important;
+  border-color: var(--primaryColor) !important;
+  border: 0 !important;
 }
-
 .btn-style {
-    border-radius: 8px !important;
-    height: 40px;
+  border-radius: 8px !important;
+  height: 40px;
 }
-
 .text-primary-color {
-    color: var(--primaryColor) !important;
+  color: var(--primaryColor) !important;
 }
-
 .text-secondary-color {
-    color: var(--navLabelColor) !important;
+  color: var(--navLabelColor) !important;
 }
-
 .label-primary {
-    color: var(--labelOnPrimary) !important;
+  color: var(--labelOnPrimary) !important;
 }
-
 .p14,
 formly-field-select select,
 formly-autocomplete-type,
 .form-group,
 .form-control {
-    font-size: 14px !important;
-    text-overflow: ellipsis;
+  font-size: 14px !important;
+  text-overflow: ellipsis;
 }
-
 .p16,
 legend {
-    font-size: 16px !important;
+  font-size: 16px !important;
 }
-
 legend {
-    font-weight: 700;
+  font-weight: 700;
 }
-
 .img16 {
-    width: 16px
+  width: 16px;
 }
-
 .p12 {
-    font-size: 12px !important;
-    color: var(--secondaryTextColor);
+  font-size: 12px !important;
+  color: var(--secondaryTextColor);
 }
-
-.l10{
-    font-size: 10px !important;
+.l10 {
+  font-size: 10px !important;
 }
-
-.l12{
-    font-size: 12px !important;
+.l12 {
+  font-size: 12px !important;
 }
-
 .btn-bg {
-    background-color: var( --btnBgColor) !important;
+  background-color: var(--btnBgColor) !important;
 }
-
-.btn-sec-bg{
-    background-color: var( --secondaryBtnBgColor) !important;
+.btn-sec-bg {
+  background-color: var(--secondaryBtnBgColor) !important;
 }
 .badge-secondary {
-    border: 1px solid #CCCCCC !important;
-    background-color: var(--bodyBackground) !important;
-    color: #8D9091 !important;
+  border: 1px solid #cccccc !important;
+  background-color: var(--bodyBackground) !important;
+  color: #8d9091 !important;
 }
-
 .marker-pointer {
-    font-family: "Font Awesome 5 Free";
-    content: "\f3c5";
-    display: inline-block;
-    padding-left: 10px;
-    vertical-align: middle;
-    font-weight: 900;
-    font-style: normal;
-    font-size: 12px;
+  font-family: "Font Awesome 5 Free";
+  content: "\f3c5";
+  display: inline-block;
+  padding-left: 10px;
+  vertical-align: middle;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 12px;
 }
-
 .input-group-text {
-    background: none !important;
-    border: none !important;
-    font-size: 14px !important;
-    padding-left: 0 !important;
-    padding-right: 5px !important;
-    color: var(--primaryTextColor) !important;
+  background: none !important;
+  border: none !important;
+  font-size: 14px !important;
+  padding-left: 0 !important;
+  padding-right: 5px !important;
+  color: var(--primaryTextColor) !important;
 }
-
 form-group {
-    color: #000000;
+  color: #000000;
 }
-
 .mb30 {
-    margin-top: -30px;
+  margin-top: -30px;
 }
-
-// .form-group{
-//     font-size: 14px;
-// }
 .form-group label {
-    font-size: 12px;
-    font-weight: 700;
+  font-size: 12px;
+  font-weight: 700;
 }
-
 .custom-control-label {
-    font-size: 14px;
-    font-weight: 400 !important;
-    padding-top: 5px !important;
+  font-size: 14px;
+  font-weight: 400 !important;
+  padding-top: 5px !important;
 }
-
-// .text-primary-color{
-//     color: #1987B6 !important;
-// }
 .private-access:before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f023";
-    display: inline-block;
-    padding-left: 10px;
-    vertical-align: middle;
-    font-weight: 900;
-    font-style: normal;
-    font-size: 12px;
+  font-family: "Font Awesome 5 Free";
+  content: "\f023";
+  display: inline-block;
+  padding-left: 10px;
+  vertical-align: middle;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 12px;
 }
-
 .internal-access:before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f023 ";
-    display: inline-block;
-    padding-left: 10px;
-    vertical-align: middle;
-    font-weight: 900;
-    font-size: 12px;
-    font-style: normal;
+  font-family: "Font Awesome 5 Free";
+  content: "\f023 ";
+  display: inline-block;
+  padding-left: 10px;
+  vertical-align: middle;
+  font-weight: 900;
+  font-size: 12px;
+  font-style: normal;
 }
-
 .public-access:before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f57c ";
-    display: inline-block;
-    padding-left: 10px;
-    vertical-align: middle;
-    font-weight: 900;
-    font-size: 12px;
-    font-style: normal;
+  font-family: "Font Awesome 5 Free";
+  content: "\f57c ";
+  display: inline-block;
+  padding-left: 10px;
+  vertical-align: middle;
+  font-weight: 900;
+  font-size: 12px;
+  font-style: normal;
 }
-
 .custom-input-class {
-    color: #2a8bac;
-    background-color: var(--secondaryColor);
+  color: #2a8bac;
+  background-color: var(--secondaryColor);
 }
-
 $primary-color: var(--primaryColor);
 $gray-color: #8d9091;
 .primary-color {
-    background-color: var(--primaryColor) !important;
+  background-color: var(--primaryColor) !important;
 }
-
 .btn-primary {
-    background: $primary-color;
+  background: $primary-color;
 }
-
 $primary-color-dark: #000;
 .primary-color-dark {
-    background-color: $gray-color!important;
+  background-color: $gray-color !important;
 }
-
-// .text-primary-color{
-//     color: $primary-color;
-// }
 .text-grey-color {
-    color: $gray-color;
+  color: $gray-color;
 }
-
 .form-label {
-    color: $primary-color-dark;
+  color: $primary-color-dark;
 }
-
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
-
 body {
-    margin: 0;
-    font-family: "Lato", sans-serif !important;
-    color: rgb(0, 0, 0);
-    background: var(--bodyBackground) !important;
+  margin: 0;
+  font-family: "Lato", sans-serif !important;
+  color: rgb(0, 0, 0);
+  background: var(--bodyBackground) !important;
 }
-
 .fs-7 {
-    font-size: 0.8rem;
+  font-size: 0.8rem;
 }
-
 .fs-8 {
-    font-size: 0.7rem;
+  font-size: 0.7rem;
 }
-
 .w-70 {
-    width: 70% !important;
+  width: 70% !important;
 }
-
 a {
-    text-decoration: none !important;
-   // color: var(--linkColor) !important;
+  text-decoration: none !important;
+  // color: var(--linkColor) !important;
+}
+.ml-12 {
+  margin-left: -12px;
 }
 
+.ml-32 {
+  margin-left: -32px;
+}
+.disabledbutton {
+  pointer-events: none;
+}
+.border-white {
+  border: white solid;
+}
+.mbtn-10 {
+  margin-top: -25px !important;
+  cursor: pointer;
+}
 // /* Importing Bootstrap SCSS file. */
 // @import '~bootstrap/scss/bootstrap';
 button.calendar,
 button.calendar:active {
-    width: 2.75rem;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=)!important;
-    background-repeat: no-repeat;
-    background-size: 23px;
-    background-position: 50%;
+  width: 2.75rem;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEUSURBVEiJ7ZQxToVAEIY/YCHGxN6XGOIpnpaEsBSeQC9ArZbm9TZ6ADyBNzAhQGGl8Riv4BLAWAgmkpBYkH1b8FWT2WK/zJ8ZJ4qiI6XUI3ANnGKWBnht2/ZBDRK3hgVGNsCd7/ui+JkEIrKtqurLpEWaphd933+IyI3LEIdpCYCiKD6HcuOa/nwOa0ScJEnk0BJg0UTUWJRl6RxCYEzEmomsIlPU3IPW+grIAbquy+q6fluy/28RIBeRMwDXdXMgXLj/B2uimRXpui4D9sBeRLKl+1N+L+t6RwbWrZliTTTr1oxYtzVWiTQAcRxvTX+eJMnlUDaO1vpZRO5NS0x48sIwfPc87xg4B04MCzQi8hIEwe4bl1DnFMCN2zsAAAAASUVORK5CYII=) !important;
+  background-repeat: no-repeat;
+  background-size: 23px;
+  background-position: 50%;
 }
-
 .btn-outline-secondary {
-    color: #8d9091;
-    border-color: #8d9091;
+  color: #8d9091;
+  border-color: #8d9091;
 }
-
 .btn-outline-secondary:hover {
-    color: #8d9091;
-    border-color: #8d9091;
+  color: #8d9091;
+  border-color: #8d9091;
 }
-
 .d-flex {
-    display: flex;
+  display: flex;
 }
-
 .flex-justify-between {
-    justify-content: space-between;
+  justify-content: space-between;
 }
-
 .alert-warning {
-    color: #0e0e0e !important;
-    background-color: #f7efe0 !important;
-    border-color: #f7efe0 !important;
-    font-size: 0.8rem;
-    padding: 1rem;
+  color: #0e0e0e !important;
+  background-color: #f7efe0 !important;
+  border-color: #f7efe0 !important;
+  font-size: 0.8rem;
+  padding: 1rem;
 }
-
 .alert-success {
-    color: #0e0e0e !important;
-    font-size: 0.8rem;
+  color: #0e0e0e !important;
+  font-size: 0.8rem;
 }
-
 .red {
-    color: red;
+  color: red;
 }
-
 .display-flex {
-    display: flex;
+  display: flex;
 }
-
 .flex-1 {
-    flex: 1;
+  flex: 1;
 }
-
 .flex-2 {
-    flex: 2;
+  flex: 2;
 }
-
 .flex-3 {
-    flex: 3;
+  flex: 3;
 }
-
 .flex-4 {
-    flex: 4;
+  flex: 4;
 }
-
 .flex-5 {
-    flex: 5;
+  flex: 5;
 }
-
 .flex-6 {
-    flex: 6;
+  flex: 6;
+}
+.clr-grey2 {
+  background-color: #f6f8fc !important;
+}
+.clr-blue {
+  color: #1987b6;
+}
+.clr-grey {
+  color: #8d9091;
+}
+.ml-40 {
+  margin-left: 40px;
+}
+.ml-240 {
+  margin-left: 210px;
+}
+.custom-hr {
+  color: #efefef;
+  height: 1px;
+}
+.ml-360 {
+  margin-left: 360px;
+}
+.ml-13 {
+  margin-left: 13px;
+}
+.text-color-red-700 {
+  color: #c31212;
+  font-weight: 700;
+}
+.delete-btn {
+  background-color: hsl(0, 81%, 86%);
+  border-radius: 20px;
+  width: 120px;
+  height: 40px;
+  padding: 10px;
+  float: right;
+  // opacity: 0.1;
+  text-align: center;
+}
+.btn-add {
+  background-color: #e8f3f8;
+  border-radius: 20px;
+  width: 170px;
+  height: 40px;
+  padding: 10px;
+  margin-left: 10px;
+}
+.btn-edit {
+  background-color: #e8f3f8;
+  width: 170px;
+  height: 40px;
+  padding: 5px;
+  margin-left: 10px;
 }
 
 [class*="flex-"] {
-    padding-left: 10px;
-    padding-right: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 [class*="flex-"]:first-child {
-    padding-left: 0;
+  padding-left: 0;
 }
 
 [class*="flex-"]:nth-last-child(2) {
-    padding-right: 0;
+  padding-right: 0;
 }
 
 .modal-dialog.panel-right {
-    position: fixed !important;
-    left: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto !important;
-     width: 600px !important;
-    height: 100%;
-    max-width: 800px !important;
-    -webkit-transform: translate3d(0%, 0, 0) !important;
-    -ms-transform: translate3d(0%, 0, 0) !important;
-    -o-transform: translate3d(0%, 0, 0) !important;
-    transform: translate3d(0%, 0, 0) !important;
+  position: fixed !important;
+  left: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto !important;
+  width: 600px !important;
+  height: 100%;
+  max-width: 800px !important;
+  -webkit-transform: translate3d(0%, 0, 0) !important;
+  -ms-transform: translate3d(0%, 0, 0) !important;
+  -o-transform: translate3d(0%, 0, 0) !important;
+  transform: translate3d(0%, 0, 0) !important;
 }
 
 .modal-dialog.panel-right .modal-content {
-    height: 100%;
-    overflow-y: auto;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
+  height: 100%;
+  overflow-y: auto;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
 .modal-content {
-    background-color: var(--cardBackground) !important;
+  background-color: var(--cardBackground) !important;
 }
 
 .modal-dialog.panel-right .modal-body {
-    padding: 15px 15px 80px;
+  padding: 15px 15px 80px;
 }
 
-
 /*Right*/
 
 .modal.fade .modal-dialog.panel-right {
-    right: -320px;
-    -webkit-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
-    -moz-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
-    -o-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
-    transition: opacity 0.3s linear, right 400ms ease-in-out !important;
+  right: -320px;
+  -webkit-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
+  -moz-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
+  -o-transition: opacity 0.3s linear, right 400ms ease-in-out !important;
+  transition: opacity 0.3s linear, right 400ms ease-in-out !important;
 }
 
 .modal.fade.show .modal-dialog.panel-right {
-    right: 0;
+  right: 0;
 }
 
 .container {
-    //margin-top: 100px;
-    padding-bottom: 100px;
-    margin-top: 10px;
+  //margin-top: 100px;
+  padding-bottom: 100px;
+  margin-top: 10px;
 }
 
 formly-field {
-    display: block;
+  display: block;
 }
 
 @import "~@ng-select/ng-select/themes/default.theme.css";
 [type="file"] {
-    height: 0;
-    overflow: hidden;
-    width: 0;
-}
-
-[type="file"]+label {
-    background: white;
-    border: none;
-    border-radius: 5px;
-    color: blue;
-    cursor: pointer;
-    display: inline-block;
-    font-family: 'Rubik', sans-serif;
-    font-size: inherit;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    outline: none;
-    position: relative;
-    transition: all 0.3s;
-    vertical-align: middle;
-    &:hover {
-        background-color: darken(white, 5%);
-    }
-    #custom-text {
-        margin-left: 10px;
-        font-family: sans-serif;
-        color: #aaa;
-    }
+  height: 0;
+  overflow: hidden;
+  width: 0;
+}
+
+[type="file"] + label {
+  background: white;
+  border: none;
+  border-radius: 5px;
+  color: blue;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Rubik", sans-serif;
+  font-size: inherit;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  outline: none;
+  position: relative;
+  transition: all 0.3s;
+  vertical-align: middle;
+  &:hover {
+    background-color: darken(white, 5%);
+  }
+  #custom-text {
+    margin-left: 10px;
+    font-family: sans-serif;
+    color: #aaa;
+  }
 }
 
 // discovery page
 .selected-list .c-list .c-token {
-    background-color: #6495ed99 !important;
+  background-color: #6495ed99 !important;
 }
 
 .dropdown-list.tagToBody {
-    position: fixed;
-    width: 400px !important;
+  position: fixed;
+  width: 400px !important;
 }
 
 .list-area {
-    background-color : var(--cardBackground) !important;
- color: var(--primaryTextColor) !important;
+  background-color: var(--cardBackground) !important;
+  color: var(--primaryTextColor) !important;
 }
 
 .list-filter {
-    background: #FFFFFF;
+  background: #ffffff;
 }
 
-
 formly-autocomplete-type .ng-select {
-    margin-top: 25px !important;
-    margin-bottom: 5px;
+  margin-top: 25px !important;
+  margin-bottom: 5px;
 }
 
 .logo {
-    // width: 50px;
-    width: auto;
-    height: auto;
-    display: block;
-    text-indent: -9999px;
-    max-width: 150px;
-    min-width: 50px;
-    min-height: 40px;
-    max-height: 50px;
+  // width: 50px;
+  width: auto;
+  height: auto;
+  display: block;
+  text-indent: -9999px;
+  max-width: 150px;
+  min-width: 50px;
+  min-height: 40px;
+  max-height: 50px;
 }
 
 .ng-select {
-    margin-bottom: 15px;
-    margin-top: 15px;
-    width: 100%;
+  margin-bottom: 15px;
+  margin-top: 15px;
+  width: 100%;
 }
 
 .form-control:focus {
-    border-color: #69afcf;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #69afcf;
+  border-color: #69afcf;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #69afcf;
 }
 
 .navbar-brand {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    text-align: center;
-    margin: 0 auto;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  text-align: center;
+  margin: 0 auto;
 }
 
-
 /* MM */
 
 .height-100 {
-    height: 100%;
+  height: 100%;
 }
 
 .hr-0 {
-    height: 0 !important;
-    border-color: #ccc !important;
+  height: 0 !important;
+  border-color: #ccc !important;
 }
 
 .w-45 {
-    width: 45px;
+  width: 45px;
 }
 
 .min-70 {
-    min-width: 70px;
+  min-width: 70px;
 }
 
 .min-220 {
-    min-width: 220px;
+  min-width: 220px;
+}
+.fs-10 {
+  font-size: 10px;
 }
-
 .fs-12 {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 .fs-14 {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .fs-25 {
-    font-size: 25px;
+  font-size: 25px;
 }
 
-
 /* Button */
 
+.pt-c {
+  cursor: pointer;
+}
+
 .btn {
-    border-radius: 8px !important;
-    text-transform: inherit !important;
-    box-shadow: none !important;
+  border-radius: 8px !important;
+  text-transform: inherit !important;
+  box-shadow: none !important;
 }
 
 .primary-text-color {
-    color: $primary-color !important;
+  color: $primary-color !important;
 }
 
 .btn-secondary {
-    color: var(--secondarytextColor) !important;
-    background-color: var(--secondarybgColor) !important;
-    border-color: var(--secondarybgColor) !important;
+  color: var(--secondarytextColor) !important;
+  background-color: var(--secondarybgColor) !important;
+  border-color: var(--secondarybgColor) !important;
 }
 
 .btn-primary {
-    color: var(--secondarytextColor) !important;
-    background-color: var(--primarybgColor) !important;
-    border-color: var(--primarybgColor) !important;
+  color: var(--secondarytextColor) !important;
+  background-color: var(--primarybgColor) !important;
+  border-color: var(--primarybgColor) !important;
 }
 
-
 /* Tags */
 
 .tags-list {
-    margin-top: 10px;
-    ul {
-        margin: 0;
-        padding: 0;
-        li {
-            display: inline-block;
-            list-style: none;
-            font-size: 11px;
-            background-color: var(--secondarybgColor) !important;
-            padding: 5px 7px;
-            border-radius: 5px;
-            margin-right: 5px;
-            margin-bottom: 5px;
-            color: var(--tagstextColor) !important;
-        }
+  margin-top: 10px;
+  ul {
+    margin: 0;
+    padding: 0;
+    li {
+      display: inline-block;
+      list-style: none;
+      font-size: 11px;
+      background-color: var(--secondarybgColor) !important;
+      padding: 5px 7px;
+      border-radius: 5px;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      color: var(--tagstextColor) !important;
     }
+  }
 }
 
-
 /* Tabs */
 
 .nav-tabs {
-    border: 0 !important;
-    li {
-        .nav-link {
-            padding: 10px 0px;
-            margin-right: 15px;
-            text-transform: capitalize;
-            border: 0px;
-            color: var(--primaryTextColor) !important;
-            font-weight: 400 !important;
-            &.active,
-            &:hover {
-                border-bottom: 1px solid var(--navlinkColor) !important;
-                color: var(--navlinkColor) !important;
-                background-color: transparent !important;
-            }
-        }
+  border: 0 !important;
+  li {
+    .nav-link {
+      padding: 10px 0px;
+      margin-right: 15px;
+      text-transform: capitalize;
+      border: 0px;
+      color: var(--primaryTextColor) !important;
+      font-weight: 400 !important;
+      &.active,
+      &:hover {
+        border-bottom: 1px solid var(--navlinkColor) !important;
+        color: var(--navlinkColor) !important;
+        background-color: transparent !important;
+      }
     }
+  }
 }
 
-
 /* Card */
 
 .card {
-    background-color: var(--cardBackground) !important;
-    border: 1px solid  var(--cardBorder) !important;
+  background-color: var(--cardBackground) !important;
+  border: 1px solid var(--cardBorder) !important;
 }
 
 .floating-bottom {
-    bottom: 30px;
-    right: 20px;
+  bottom: 30px;
+  right: 20px;
 }
 
 .btn-icon-circle {
-    border-radius: 50% !important;
-    padding: 12px 17px !important;
+  border-radius: 50% !important;
+  padding: 12px 17px !important;
 }
 
 //   @import "~@material/fab";
@@ -714,206 +706,233 @@ formly-autocomplete-type .ng-select {
 //     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
 //   }
 .toggler {
-    color: var(--headerLinkColor);
+  color: var(--headerLinkColor);
 }
 
 .navbar-light .navbar-nav .nav-link {
-    color: var(--primaryTextColor) !important;
-    margin-right: 10px;
-    margin-left: 10px;
+  color: var(--primaryTextColor) !important;
+  margin-right: 10px;
+  margin-left: 10px;
 }
 
 .navbar-light .navbar-nav .active {
-    color: var(--primaryColor) !important;
+  color: var(--primaryColor) !important;
 }
 
-
 /* borders */
 
 .bb-1 {
-    border-bottom: 1px solid #cecece;
+  border-bottom: 1px solid #cecece;
 }
 
-legend{
-    color: var(--primaryTextColor) !important;
- 
+legend {
+  color: var(--primaryTextColor) !important;
 }
 
-h4, h3 {
-    color: var(--primaryTextColor)
+h4,
+h3 {
+  color: var(--primaryTextColor);
 }
 
 h5 {
-    color: var(--primaryTextColor)
+  color: var(--primaryTextColor);
 }
 
 h6 {
-    color: var(--primaryTextColor)
+  color: var(--primaryTextColor);
 }
 
 p {
-    color: var(--primaryTextColor)
+  color: var(--primaryTextColor);
 }
 
 .text-dark {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
 
 .text-grey {
-    color: $gray-color !important;
+  color: $gray-color !important;
 }
 
 .form-group {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
 
 label {
-    color: var(--secondaryTextColor);
+  color: var(--secondaryTextColor);
 }
 
 .primary-text {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
 
 .lh-32 {
-    line-height: 32px;
+  line-height: 32px;
 }
 
 .search-area .input-append input {
-    background-color: var(--cardBackground) !important;
+  background-color: var(--cardBackground) !important;
 }
 
 .search-area .fa-search {
-    color: var(--primaryTextColor) !important;
+  color: var(--primaryTextColor) !important;
 }
 
-.modal-header
-{
-    background-color: var(--headerColor) !important;
+.modal-header {
+  background-color: var(--headerColor) !important;
 }
 
-.table td, .table th {
-    color: var(--primaryTextColor)}
+.table td,
+.table th {
+  color: var(--primaryTextColor);
+}
 
+a,
+li {
+  cursor: pointer;
+}
 
-   a, li { cursor: pointer; }
+/*  Json Editor : start*/
 
-     /*  Json Editor : start*/
+.json-editor,
+div.jsoneditor-outer,
+.ace-jsoneditor,
+textarea.jsoneditor-text {
+  min-height: 600px !important;
+  width: 100%;
+}
 
-  .json-editor, div.jsoneditor-outer , .ace-jsoneditor, textarea.jsoneditor-text{
-    min-height: 600px !important;
-    width: 100%;
-  }
+.jsoneditor-menu {
+  display: none;
+}
 
-.jsoneditor-menu{
-    display: none;
+.clear {
+  clear: both;
+}
+.wrapper {
+  display: grid;
 }
 
-.mt-6{
-    margin-top: 6rem !important;
+.mt-6 {
+  margin-top: 6rem !important;
+}
+.w-0 {
+  width: 0 !important;
 }
 
-.jsoneditor{
-    height: 700px !important;
+.mt-23 {
+  margin-top: -23px;
+}
+.jsoneditor {
+  height: 700px !important;
 }
- /*  Json Editor : end */
 
- .btn-bg-grey {
-     background-color: #CCCCCC !important;
- }
+.inputField {
+  height: 40px;
+  width: 505px;
+  left: -5px;
+  top: 8px;
+  border-radius: 4px;
+  border: 1px solid #efefef !important;
+}
 
-/*  Advance editor: start */
+/*  Json Editor : end */
 
- .formcomponents {
- padding-right: 5px !important;
- padding-left: 5px !important;
+.btn-bg-grey {
+  background-color: #cccccc !important;
+}
+
+/*  Advance editor: start */
 
+.formcomponents {
+  padding-right: 5px !important;
+  padding-left: 5px !important;
 }
 
- /*  advance editor: End */
+/*  advance editor: End */
 
- /*   Gragesjs editor - start */
- .gjs-cv-canvas{
-     width: 70% !important;
- }
+/*   Gragesjs editor - start */
+.gjs-cv-canvas {
+  width: 70% !important;
+}
 
- .gjs-pn-panel{
-    width: 30% !important;
- }
+.gjs-pn-panel {
+  width: 30% !important;
+}
 
- .gjs-pn-options {
-    right: 30% !important;
- }
+.gjs-pn-options {
+  right: 30% !important;
+}
 
-.gjs-pn-btn{
-margin-right :15px !important;
+.gjs-pn-btn {
+  margin-right: 15px !important;
 }
 
 .gjs-pn-commands {
-    display: flex !important;
+  display: flex !important;
 }
 
 .adv-btn {
-    color: #A6D4FF !important;
-    background-color: #100e0e9c !important;
-    font-size: 14px !important;
-    line-height: 18px !important;
-    font-weight: 700 !important;
-  }
-  
-  .builder-sidebar_scroll {
-    margin: -8px !important;
+  color: #a6d4ff !important;
+  background-color: #100e0e9c !important;
+  font-size: 14px !important;
+  line-height: 18px !important;
+  font-weight: 700 !important;
+}
+
+.builder-sidebar_scroll {
+  margin: -8px !important;
 }
 
-  .pcard {
-    background-color: #322931 !important;
-    color: #FFFFFF !important;
+.pcard {
+  background-color: #322931 !important;
+  color: #ffffff !important;
 }
 
-.pcard-body, .card-body-container{
-    background: #1B2124;
-    color: #FFFFFF !important;
+.pcard-body,
+.card-body-container {
+  background: #1b2124;
+  color: #ffffff !important;
 }
 
 /* Start - ngx-editor css */
 .collapsible {
-    background-color: #777;
-    color: white;
-    cursor: pointer;
-    padding: 10px;
-    width: 100%;
-    height: 50%;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-    margin-bottom: 5px;
-  }
-  
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  height: 50%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  margin-bottom: 5px;
+}
+
 //   .active, .collapsible:hover {
 //     background-color: #555;
 //   }
-  
-  .content {
-    padding: 0 18px;
-    display: none;
-    overflow: hidden;
-    background-color: #f1f1f1;
-  }
-  
-  .ngx-text-editor{
-    background-color: #ffffff !important;
-    font-size: 14px;
-    height: 600px !important;
-  }
 
-  .ngx-text-editor-textarea{
-    height: 600px !important;
-  }
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
 
-  .ngx-toolbar {
-    display: none !important;
-  }
+.ngx-text-editor {
+  background-color: #ffffff !important;
+  font-size: 14px;
+  height: 600px !important;
+}
+
+.ngx-text-editor-textarea {
+  height: 600px !important;
+}
 
-  /* End - ngx-editor css */
+.ngx-toolbar {
+  display: none !important;
+}
 
+/* End - ngx-editor css */