@egovernments/digit-ui-components-css 0.0.2-beta.10 → 0.0.2-beta.11

package/src/digitv2/pages/employee/workbench.scss

@@ -1,615 +1,615 @@
-@import url("../../index.scss");
-
-.bread-crumb.workbench-bredcrumb{
-a{
-  color: theme(digitv2.lightTheme.primary-orange);
-}
-}
-.workbench{
-.workbench-create-form {
-  display: inherit;
-  padding-top: 1.5rem;
-  .digit-form-composer-sub-header {
-    @extend .typography.text-heading-m;
-    padding-left: 1rem;
-    @media (max-width: theme(digitv2.screens.mobile)) {
-      padding-left: 0;
-    }
-  }
-
-  form {
-    #label_digit_root {
-      display: none;
-    }
-
-    #digit_root {
-      width: 100%;
-
-      .field-wrapper {
-        .form-group.field {
-          display: flex;
-          padding: 1em 0 0 1em;
-
-          @media (max-width: theme(digitv2.screens.mobile)) {
-            flex-direction: column;
-          }
-
-          &.field-error.has-error.has-danger {
-            .control-label {
-              @extend .alert-error;
-            }
-
-            .form-control {
-              @extend .alert-error-border;
-            }
-
-            .card-label-error {
-              display: inline;
-              position: relative;
-              margin: 0px;
-              padding: 0px;
-              top: -0.7rem;
-              font-weight: normal;
-
-            }
-          }
-
-          &.field-boolean.field-error.has-error.has-danger {
-
-            .card-label-error {
-              position: initial;
-              display: block;
-              margin-top: 0.5rem;
-
-            }
-          }
-
-          .control-label {
-            max-width: 12.5rem;
-            margin-right: 2.5rem;
-            @extend .card-label;
-            display: inline-flex;
-            /* align-self: center; */
-            line-height: 3rem;
-            @extend .typography.text-heading-s;
-            /* web view*/
-            @apply w-1/3;
-
-            /* tablet view*/
-
-            @media (max-width: theme(digitv2.screens.tablet)) {
-              max-width: 11rem;
-              margin-right: 1.5rem;
-
-            }
-
-            /* mobile view*/
-
-            @media (max-width: theme(digitv2.screens.mobile)) {
-              /*max-width: 10.2rem;*/
-              @apply w-full;
-
-            }
-
-          }
-
-          .all-input-field-wrapper {
-
-            @apply w-3/5;
-            @media (max-width: theme(digitv2.screens.mobile)) {
-              @apply w-full;
-            }
-
-            .form-control {
-              @extend .light-input-border;
-              @extend .employee-card-input;
-              font-style: inherit;
-              font-family: inherit;
-              /* web view*/
-              max-width: 37.5rem;
-              min-width: 20.5rem;
-              margin-bottom: 1rem;
-              /* tablet view*/
-
-              @media (max-width: theme(digitv2.screens.tablet)) {
-                max-width: 27.5rem;
-                min-width: 12.5rem;
-
-              }
-
-              /* mobile view*/
-
-              @media (max-width: theme(digitv2.screens.mobile)) {
-                max-width: 20.5rem;
-                min-width: 9.5rem;
-                @apply w-full;
-
-              }
-
-              &.form-select {
-                padding: 0%;
-                border: 0px;
-
-                .digit__control {
-                  @apply outline-none;
-
-                  .digit__value-container:in-range {
-                    border-color: unset;
-                    box-shadow: none;
-                    box-sizing: unset;
-                    @apply outline-none;
-                  }
-                }
-
-                .digit__control--is-focused {
-                  border-color: theme(digitv2.lightTheme.primary-orange) !important;
-                  box-shadow: none;
-                  box-sizing: unset;
-                  @apply outline-none;
-                }
-
-
-                .digit__control:hover {
-
-                  border-color: unset;
-                  box-shadow: none;
-                  box-sizing: unset;
-                  @apply outline-none;
-                }
-
-                .digit__control:focus {
-                  border-color: theme(digitv2.lightTheme.primary-orange);
-
-                  .digit__value-container:focus {
-                    border-color: theme(digitv2.lightTheme.primary-orange);
-
-                  }
-                }
-              }
-
-              &.form-select:focus {
-                @apply outline-none;
-                border-color: theme(digitv2.lightTheme.primary-orange);
-
-              }
-            }
-
-            .form-control:read-only {
-              background-color: theme(digitv2.lightTheme.generic-background);
-              color: theme(digitv2.lightTheme.text-secondary);
-            }
-
-            .form-control:focus {
-
-              @apply outline-none;
-              border-color: theme(digitv2.lightTheme.primary-orange);
-            }
-
-            textarea.form-control {
-              height: 5rem;
-            }
-          }
-
-          &.field-string {
-            align-self: center;
-          }
-
-          &.field-boolean {
-            padding-top: 0rem;
-            padding-bottom: 1rem;
-
-            .custom-checkbox {
-              display: inline-flex;
-              align-items: end;
-
-              &.custom-checkbox-disabled {
-                pointer-events: none;
-                opacity: 0.6;
-              }
-
-              .custom-checkbox-label {
-                @extend .typography.text-body-s;
-                @apply pl-sm;
-              }
-            }
-
-            .checkbox {
-              width: 28rem;
-
-              label {
-                float: left;
-
-                /* display: flex;
-            flex-direction: row-reverse;
-            */
-                span {
-                  width: 17rem;
-                  display: none;
-                  @extend .card-label;
-                }
-
-                input[type="checkbox"] {
-                  @extend .light-input-border;
-                  @extend .employee-card-input;
-                  height: 1.5rem;
-                  /*              @apply ml-sm;*/
-                }
-         
-                input[type="checkbox"]#digit_root_active {
-                  accent-color: theme(digitv2.lightTheme.primary-orange);
-                }
-
-                input:checked,
-                input:hover {
-                  @apply border-2;
-                  @extend .light-input-border;
-                }
-              }
-            }
-
-            .field-radio-group {
-              display: inline-flex;
-              height: 2.5rem;
-              align-items: center;
-
-              .radio {
-                @apply mr-sm;
-              }
-            }
-
-
-
-          }
-
-
-
-          &.field-object>.control-label {
-            margin-left: 0.5rem;
-          }
-
-          &.field-object {
-            display: block;
-            @extend .light-background;
-            @extend .light-paper-border;
-            padding: 1rem;
-            margin: 1rem;
-
-            .digit-expand-collapse-wrapper {
-              margin-top: 0px;
-            }
-
-            .digit-icon-toggle {
-              top: -1.5rem;
-              right: 1.5em;
-            }
-
-            .object-wrapper {
-              .array-remove-button-wrapper {
-                position: relative;
-              }
-            }
-
-            /* have to revisit for objects
-        [id^="root_"] {
-          @extend .light-background;
-        }
-        */
-          }
-
-          &.field-array {
-            display: block;
-            @extend .light-paper-secondary;
-            @extend .light-paper-border;
-            padding: 2rem;
-            margin: 1rem;
-            padding-top: 1rem;
-
-            .array-wrapper .array-item {
-              &.jk-array-objects>.array-remove-button-wrapper {
-                display: block;
-              }
-
-              &.jk-array-objects {
-                margin-bottom: 2rem;
-
-                .array-children>span .form-group.field.field-object {
-                  padding-bottom: 3rem;
-                }
-
-                .array-obj {
-                  position: absolute;
-                  bottom: 1.5rem;
-                  left: 2rem;
-
-                  >.array-remove-button-wrapper {
-                    position: unset;
-                  }
-                }
-
-              }
-
-              &.jk-array-of-non-objects>.array-remove-button-wrapper {
-                display: inline;
-                left: 38.5rem;
-                right: unset;
-                top: 0.7rem;
-              }
-
-              &.jk-array-of-non-objects .array-children {
-                span .form-group {
-                  padding-left: 0%;
-
-                  .control-label {
-                    display: none;
-                  }
-
-                }
-              }
-
-              /* it has been removed since we dont need diff color for array items @extend .light-background;*/
-              position: relative;
-
-              .field-object {
-                margin-left: 0;
-                margin-right: 0;
-              }
-
-
-              .array-remove-button-wrapper {
-                position: absolute;
-                right: 1.3em;
-                top: 1.3em;
-                background-color: inherit !important;
-
-                .array-remove-button {
-                  cursor: pointer;
-                  background-color: inherit !important;
-                  @media (max-width: theme(digitv2.screens.mobile)) {
-                    padding:0px;
-                  }  
-                  h2{
-                    @media (max-width: theme(digitv2.screens.mobile)) {
-                        display: none;
-                    }
-                  }
-                  
-                }
-              }
-
-              span.all-input-field-wrapper {
-                @apply w-3/5;
-
-                .form-control {
-                  @apply w-full;
-                }
-              }
-
-              .control-label {
-                @apply w-1/3;
-
-              }
-            }
-
-
-            .jk-digit-secondary-btn {
-              height: 1.7em;
-              margin-top: 0.5rem;
-
-              @media (max-width: theme(digitv2.screens.mobile)) {
-                height: auto;
-                width: 100%;
-              }
-
-              h2 {
-                font-size: 1rem;
-              }
-            }
-
-            .all-input-field-wrapper {
-              .card-label-error {
-                position: unset !important;
-              }
-            }
-
-          }
-
-          .digit-expand-collapse-header {
-            border: 0;
-            background-color: inherit;
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
-
-  div.action-bar-wrap {
-    @extend .action-bar-wrap;
-
-    .submit-bar {
-      @extend .submit-bar;
-      cursor: pointer;
-      @apply font-rc font-medium text-legend text-white leading-10;
-    }
-  }
-}
-
-.workbench-no-schema-found {
-  @apply flex justify-items-center flex-col;
-  align-items: center;
-}
-
-.jk-digit-loader {
-  position: absolute;
-  z-index: 10000;
-  width: 100vw;
-  background-color: rgba(189, 189, 189, 0.5);
-  height: 100vh;
-  left: 0;
-  top: 0;
-
-  .jk-spinner-wrapper {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    .jk-spinner {
-      border: 0.4em solid #fe7a51;
-      border-radius: 50%;
-      border-top: 0.4em solid #ffffff;
-      width: 4em;
-      height: 4em;
-      -webkit-animation: spin 2s linear infinite;
-      /* Safari */
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-.jk-sm-inbox-loader {
-  border: 0.2em solid #fe7a51;
-  border-radius: 50%;
-  border-top: 0.2em solid #ffffff;
-  width: 2em;
-  height: 2em;
-  -webkit-animation: spin 2s linear infinite;
-  /* Safari */
-  animation: spin 1s linear infinite;
-}
-
-/* Safari */
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.no-data-found {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .digit-error-msg {
-    margin-top: 2rem;
-  }
-}
-
-
-.tooltip .tooltiptext {
-
-  top: 2rem;
-  left: 0;
-  margin-left: 0rem;
-  width: fit-content;
-  height: max-content;
-  white-space: normal;
-
-  .tooltiptextvalue {
-    font-size: 14px;
-    font-weight: 400px;
-    color: white;
-  }
-}
-.employeeCard.manage-master-wrapper {
-  width: 100%;
-  display: flex;
-  padding-top: 2.1rem;
-  @media (max-width: theme(digitv2.screens.mobile)) {
-    flex-direction: column; 
- }
- .employee-select-wrap.form-field{
-  @apply w-1/4;
-  margin-right:1rem ;
-  @media (max-width: theme(digitv2.screens.mobile)) {
-    @apply w-full;
- }
-  }
-}
-
-.table{
-  padding-left:0.8rem ;
-  padding-right:0.8rem ;
-  &-row-mdms:hover{
-    background-color:  theme(digitv2.lightTheme.primary-orangebg); /* Change this to the desired hover color */
-    cursor: pointer;
-  }
-}
-}
-
-.header-btn{
-  width: 12rem;
-}
-
-.drag-drop-container {
-  background-color: #FAFAFA;
-  border: 1.5px dashed #D6D5D4;
-  border-radius: 5px;
-  margin:-1rem 1rem 1rem 1rem;
-  padding: 1rem 1rem 1rem 1rem;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  .drag-drop-text {
-    text-decoration: none;
-    .browse-text {
-      text-decoration: none;
-      color: #F47738; 
-      transition: color 0.3s;
-    }
-    .browse-text:hover {
-        color: #F47738; 
-        text-decoration: underline; 
-        cursor: pointer;
-    }
-  }
-
-}
-
-.uploaded-file-container {
-  background-color: #FAFAFA;
-  border: 1.5px solid #D6D5D4;
-  border-radius: 5px;
-  margin:0.5rem 1rem 2rem 1rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.6rem;
-  justify-content: space-between;
-
-  .uploaded-file-container-sub {
-    display: flex;
-    align-items: center;
-    
-    .icon:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-button:hover {
-  cursor: pointer;
-}
-
-.popup-header-fix {
-  margin-top: -0.5rem !important;
-}
+@import url("../../index.scss");
+
+.bread-crumb.workbench-bredcrumb{
+a{
+  color: theme(digitv2.lightTheme.primary-orange);
+}
+}
+.workbench{
+.workbench-create-form {
+  display: inherit;
+  padding-top: 1.5rem;
+  .digit-form-composer-sub-header {
+    @extend .typography.text-heading-m;
+    padding-left: 1rem;
+    @media (max-width: theme(digitv2.screens.mobile)) {
+      padding-left: 0;
+    }
+  }
+
+  form {
+    #label_digit_root {
+      display: none;
+    }
+
+    #digit_root {
+      width: 100%;
+
+      .field-wrapper {
+        .form-group.field {
+          display: flex;
+          padding: 1em 0 0 1em;
+
+          @media (max-width: theme(digitv2.screens.mobile)) {
+            flex-direction: column;
+          }
+
+          &.field-error.has-error.has-danger {
+            .control-label {
+              @extend .alert-error;
+            }
+
+            .form-control {
+              @extend .alert-error-border;
+            }
+
+            .card-label-error {
+              display: inline;
+              position: relative;
+              margin: 0px;
+              padding: 0px;
+              top: -0.7rem;
+              font-weight: normal;
+
+            }
+          }
+
+          &.field-boolean.field-error.has-error.has-danger {
+
+            .card-label-error {
+              position: initial;
+              display: block;
+              margin-top: 0.5rem;
+
+            }
+          }
+
+          .control-label {
+            max-width: 12.5rem;
+            margin-right: 2.5rem;
+            @extend .card-label;
+            display: inline-flex;
+            /* align-self: center; */
+            line-height: 3rem;
+            @extend .typography.text-heading-s;
+            /* web view*/
+            @apply w-1/3;
+
+            /* tablet view*/
+
+            @media (max-width: theme(digitv2.screens.tablet)) {
+              max-width: 11rem;
+              margin-right: 1.5rem;
+
+            }
+
+            /* mobile view*/
+
+            @media (max-width: theme(digitv2.screens.mobile)) {
+              /*max-width: 10.2rem;*/
+              @apply w-full;
+
+            }
+
+          }
+
+          .all-input-field-wrapper {
+
+            @apply w-3/5;
+            @media (max-width: theme(digitv2.screens.mobile)) {
+              @apply w-full;
+            }
+
+            .form-control {
+              @extend .light-input-border;
+              @extend .employee-card-input;
+              font-style: inherit;
+              font-family: inherit;
+              /* web view*/
+              max-width: 37.5rem;
+              min-width: 20.5rem;
+              margin-bottom: 1rem;
+              /* tablet view*/
+
+              @media (max-width: theme(digitv2.screens.tablet)) {
+                max-width: 27.5rem;
+                min-width: 12.5rem;
+
+              }
+
+              /* mobile view*/
+
+              @media (max-width: theme(digitv2.screens.mobile)) {
+                max-width: 20.5rem;
+                min-width: 9.5rem;
+                @apply w-full;
+
+              }
+
+              &.form-select {
+                padding: 0%;
+                border: 0px;
+
+                .digit__control {
+                  @apply outline-none;
+
+                  .digit__value-container:in-range {
+                    border-color: unset;
+                    box-shadow: none;
+                    box-sizing: unset;
+                    @apply outline-none;
+                  }
+                }
+
+                .digit__control--is-focused {
+                  border-color: theme(digitv2.lightTheme.primary-orange) !important;
+                  box-shadow: none;
+                  box-sizing: unset;
+                  @apply outline-none;
+                }
+
+
+                .digit__control:hover {
+
+                  border-color: unset;
+                  box-shadow: none;
+                  box-sizing: unset;
+                  @apply outline-none;
+                }
+
+                .digit__control:focus {
+                  border-color: theme(digitv2.lightTheme.primary-orange);
+
+                  .digit__value-container:focus {
+                    border-color: theme(digitv2.lightTheme.primary-orange);
+
+                  }
+                }
+              }
+
+              &.form-select:focus {
+                @apply outline-none;
+                border-color: theme(digitv2.lightTheme.primary-orange);
+
+              }
+            }
+
+            .form-control:read-only {
+              background-color: theme(digitv2.lightTheme.generic-background);
+              color: theme(digitv2.lightTheme.text-secondary);
+            }
+
+            .form-control:focus {
+
+              @apply outline-none;
+              border-color: theme(digitv2.lightTheme.primary-orange);
+            }
+
+            textarea.form-control {
+              height: 5rem;
+            }
+          }
+
+          &.field-string {
+            align-self: center;
+          }
+
+          &.field-boolean {
+            padding-top: 0rem;
+            padding-bottom: 1rem;
+
+            .custom-checkbox {
+              display: inline-flex;
+              align-items: end;
+
+              &.custom-checkbox-disabled {
+                pointer-events: none;
+                opacity: 0.6;
+              }
+
+              .custom-checkbox-label {
+                @extend .typography.text-body-s;
+                @apply pl-sm;
+              }
+            }
+
+            .checkbox {
+              width: 28rem;
+
+              label {
+                float: left;
+
+                /* display: flex;
+            flex-direction: row-reverse;
+            */
+                span {
+                  width: 17rem;
+                  display: none;
+                  @extend .card-label;
+                }
+
+                input[type="checkbox"] {
+                  @extend .light-input-border;
+                  @extend .employee-card-input;
+                  height: 1.5rem;
+                  /*              @apply ml-sm;*/
+                }
+         
+                input[type="checkbox"]#digit_root_active {
+                  accent-color: theme(digitv2.lightTheme.primary-orange);
+                }
+
+                input:checked,
+                input:hover {
+                  @apply border-2;
+                  @extend .light-input-border;
+                }
+              }
+            }
+
+            .field-radio-group {
+              display: inline-flex;
+              height: 2.5rem;
+              align-items: center;
+
+              .radio {
+                @apply mr-sm;
+              }
+            }
+
+
+
+          }
+
+
+
+          &.field-object>.control-label {
+            margin-left: 0.5rem;
+          }
+
+          &.field-object {
+            display: block;
+            @extend .light-background;
+            @extend .light-paper-border;
+            padding: 1rem;
+            margin: 1rem;
+
+            .digit-expand-collapse-wrapper {
+              margin-top: 0px;
+            }
+
+            .digit-icon-toggle {
+              top: -1.5rem;
+              right: 1.5em;
+            }
+
+            .object-wrapper {
+              .array-remove-button-wrapper {
+                position: relative;
+              }
+            }
+
+            /* have to revisit for objects
+        [id^="root_"] {
+          @extend .light-background;
+        }
+        */
+          }
+
+          &.field-array {
+            display: block;
+            @extend .light-paper-secondary;
+            @extend .light-paper-border;
+            padding: 2rem;
+            margin: 1rem;
+            padding-top: 1rem;
+
+            .array-wrapper .array-item {
+              &.jk-array-objects>.array-remove-button-wrapper {
+                display: block;
+              }
+
+              &.jk-array-objects {
+                margin-bottom: 2rem;
+
+                .array-children>span .form-group.field.field-object {
+                  padding-bottom: 3rem;
+                }
+
+                .array-obj {
+                  position: absolute;
+                  bottom: 1.5rem;
+                  left: 2rem;
+
+                  >.array-remove-button-wrapper {
+                    position: unset;
+                  }
+                }
+
+              }
+
+              &.jk-array-of-non-objects>.array-remove-button-wrapper {
+                display: inline;
+                left: 38.5rem;
+                right: unset;
+                top: 0.7rem;
+              }
+
+              &.jk-array-of-non-objects .array-children {
+                span .form-group {
+                  padding-left: 0%;
+
+                  .control-label {
+                    display: none;
+                  }
+
+                }
+              }
+
+              /* it has been removed since we dont need diff color for array items @extend .light-background;*/
+              position: relative;
+
+              .field-object {
+                margin-left: 0;
+                margin-right: 0;
+              }
+
+
+              .array-remove-button-wrapper {
+                position: absolute;
+                right: 1.3em;
+                top: 1.3em;
+                background-color: inherit !important;
+
+                .array-remove-button {
+                  cursor: pointer;
+                  background-color: inherit !important;
+                  @media (max-width: theme(digitv2.screens.mobile)) {
+                    padding:0px;
+                  }  
+                  h2{
+                    @media (max-width: theme(digitv2.screens.mobile)) {
+                        display: none;
+                    }
+                  }
+                  
+                }
+              }
+
+              span.all-input-field-wrapper {
+                @apply w-3/5;
+
+                .form-control {
+                  @apply w-full;
+                }
+              }
+
+              .control-label {
+                @apply w-1/3;
+
+              }
+            }
+
+
+            .jk-digit-secondary-btn {
+              height: 1.7em;
+              margin-top: 0.5rem;
+
+              @media (max-width: theme(digitv2.screens.mobile)) {
+                height: auto;
+                width: 100%;
+              }
+
+              h2 {
+                font-size: 1rem;
+              }
+            }
+
+            .all-input-field-wrapper {
+              .card-label-error {
+                position: unset !important;
+              }
+            }
+
+          }
+
+          .digit-expand-collapse-header {
+            border: 0;
+            background-color: inherit;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  div.action-bar-wrap {
+    @extend .action-bar-wrap;
+
+    .submit-bar {
+      @extend .submit-bar;
+      cursor: pointer;
+      @apply font-rc font-medium text-legend text-white leading-10;
+    }
+  }
+}
+
+.workbench-no-schema-found {
+  @apply flex justify-items-center flex-col;
+  align-items: center;
+}
+
+.jk-digit-loader {
+  position: absolute;
+  z-index: 10000;
+  width: 100vw;
+  background-color: rgba(189, 189, 189, 0.5);
+  height: 100vh;
+  left: 0;
+  top: 0;
+
+  .jk-spinner-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    .jk-spinner {
+      border: 0.4em solid #fe7a51;
+      border-radius: 50%;
+      border-top: 0.4em solid #ffffff;
+      width: 4em;
+      height: 4em;
+      -webkit-animation: spin 2s linear infinite;
+      /* Safari */
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+.jk-sm-inbox-loader {
+  border: 0.2em solid #fe7a51;
+  border-radius: 50%;
+  border-top: 0.2em solid #ffffff;
+  width: 2em;
+  height: 2em;
+  -webkit-animation: spin 2s linear infinite;
+  /* Safari */
+  animation: spin 1s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.no-data-found {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .digit-error-msg {
+    margin-top: 2rem;
+  }
+}
+
+
+.tooltip .tooltiptext {
+
+  top: 2rem;
+  left: 0;
+  margin-left: 0rem;
+  width: fit-content;
+  height: max-content;
+  white-space: normal;
+
+  .tooltiptextvalue {
+    font-size: 14px;
+    font-weight: 400px;
+    color: white;
+  }
+}
+.employeeCard.manage-master-wrapper {
+  width: 100%;
+  display: flex;
+  padding-top: 2.1rem;
+  @media (max-width: theme(digitv2.screens.mobile)) {
+    flex-direction: column; 
+ }
+ .employee-select-wrap.form-field{
+  @apply w-1/4;
+  margin-right:1rem ;
+  @media (max-width: theme(digitv2.screens.mobile)) {
+    @apply w-full;
+ }
+  }
+}
+
+.table{
+  padding-left:0.8rem ;
+  padding-right:0.8rem ;
+  &-row-mdms:hover{
+    background-color:  theme(digitv2.lightTheme.primary-orangebg); /* Change this to the desired hover color */
+    cursor: pointer;
+  }
+}
+}
+
+.header-btn{
+  width: 12rem;
+}
+
+.drag-drop-container {
+  background-color: #FAFAFA;
+  border: 1.5px dashed #D6D5D4;
+  border-radius: 5px;
+  margin:-1rem 1rem 1rem 1rem;
+  padding: 1rem 1rem 1rem 1rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .drag-drop-text {
+    text-decoration: none;
+    .browse-text {
+      text-decoration: none;
+      color: #F47738; 
+      transition: color 0.3s;
+    }
+    .browse-text:hover {
+        color: #F47738; 
+        text-decoration: underline; 
+        cursor: pointer;
+    }
+  }
+
+}
+
+.uploaded-file-container {
+  background-color: #FAFAFA;
+  border: 1.5px solid #D6D5D4;
+  border-radius: 5px;
+  margin:0.5rem 1rem 2rem 1rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.6rem;
+  justify-content: space-between;
+
+  .uploaded-file-container-sub {
+    display: flex;
+    align-items: center;
+    
+    .icon:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+.popup-header-fix {
+  margin-top: -0.5rem !important;
+}