ngx-form-designer 0.0.23

package/style-test-bug.scss

@@ -0,0 +1,2562 @@
+/* Host-style reproduction stylesheet for Bootstrap + Tailwind + Angular Material. */
+/* What impacts Tailwind here:
+   1. Bootstrap's global CSS, loaded in the earliest layer.
+   2. Broad host selectors in @layer legacy.
+   3. Explicit overrides in @layer components.
+   Tailwind theme/base/utilities load after bootstrap + legacy, so equal-specificity
+   conflicts resolve in Tailwind's favor without needing a class prefix.
+*/
+
+@layer bootstrap,theme, base, components, utilities;
+
+@import "./node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "./node_modules/quill/dist/quill.bubble.css" layer(components);
+
+@source "./node_modules/@json-editor/json-editor/dist/**/*.js";
+@source "./projects/ngx-form-designer/src/**/*.{html,ts}";
+
+@theme {
+
+    /* 2. Colors: Nested objects become dash-separated variables */
+
+
+
+    --color-accent-50: #eff6ff;
+
+
+
+    --color-accent-100: #dbeafe;
+
+
+
+    --color-accent-200: #bfdbfe;
+
+
+
+    --color-accent-500: #2563eb;
+
+
+
+    --color-accent-600: #1d4ed8;
+
+
+
+    --color-accent-700: #1e40af;
+
+
+
+    --color-ink-900: #0f172a;
+
+
+
+    --color-ink-700: #1f2937;
+
+
+
+    --color-ink-600: #374151;
+
+
+
+    --color-ink-500: #4b5563;
+
+
+
+    --color-ink-400: #6b7280;
+
+
+
+    --color-slate-50: #f8fafc;
+
+
+
+    --color-slate-100: #f1f5f9;
+
+
+
+    --color-slate-200: #e2e8f0;
+
+
+
+    --color-slate-300: #cbd5e1;
+
+
+
+    /* Light theme tokens */
+
+
+
+    --color-panel-dark: #ffffff;
+
+
+
+    --color-input-dark: #f9fafb;
+
+
+
+    --color-border-dark: #e5e7eb;
+
+
+
+    --color-text-secondary-dark: #6b7280;
+
+
+
+    --color-highlight-orange: #c46c35;
+
+
+
+    --color-primary-blue: #0073e6;
+
+
+
+    --color-primary-50: #ECF3FF;
+
+
+
+    --color-primary-500: #3F8CFF;
+
+
+
+    --color-text-primary: #1C2431;
+
+
+
+    --color-text-strong: #000000;
+
+
+
+    --color-border-default: #E6EAF0;
+
+
+
+    --color-surface-default: #FFFFFF;
+
+
+
+    --color-focus-border: #7FB2FF;
+
+
+
+    /* 3. Border Radius: Maps to 'rounded-*' utilities */
+
+
+
+    --radius-md: 10px;
+
+
+
+    --radius-lg: 12px;
+
+
+
+    /* 4. Box Shadow: Maps to 'shadow-*' utilities */
+
+
+
+    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
+
+
+
+    --shadow-popover: 0 10px 40px rgba(15, 23, 42, 0.12);
+
+
+
+    /* 5. Font Family */
+
+
+
+    --font-sans: Inter, Segoe UI, system-ui, sans-serif;
+
+}
+
+
+
+:root {
+
+    --accent: #2563eb;
+
+
+
+    --accent-600: #1d4ed8;
+
+
+
+    --accent-700: #1e40af;
+
+
+
+    --panel: #f8fafc;
+
+
+
+    --card: #ffffff;
+
+
+
+    --card-border: #e2e8f0;
+
+
+
+    --muted: #6b7280;
+
+
+
+    --muted-2: #94a3b8;
+
+
+
+    --radius: 12px;
+
+
+
+    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
+
+
+
+    --shadow-popover: 0 10px 40px rgba(15, 23, 42, 0.12);
+
+}
+
+
+
+@layer components {
+
+    .fd-json-schema-editor {
+
+        @apply text-sm text-ink-900;
+
+    }
+
+
+
+    .fd-json-schema-editor .je-panel,
+    .fd-json-schema-editor .je-panel-top,
+    .fd-json-schema-editor .je-indented-panel,
+    .fd-json-schema-editor .je-indented-panel--top {
+
+        @apply rounded-md border border-slate-200 bg-slate-50 shadow-none;
+
+    }
+
+
+
+    .fd-json-schema-editor .form-group {
+
+        @apply mb-3;
+
+    }
+
+
+
+    .fd-json-schema-editor label {
+
+        @apply text-[11px] font-semibold text-ink-500;
+
+    }
+
+
+
+    .fd-json-schema-editor input:not([type='checkbox']):not([type='radio']),
+    .fd-json-schema-editor select,
+    .fd-json-schema-editor textarea {
+
+        @apply w-full rounded-md border border-slate-200 bg-white px-2 py-1.5 text-sm text-ink-900 shadow-sm;
+        @apply focus:outline-none focus:ring-2 focus:ring-accent-100 focus:border-accent-500;
+
+    }
+
+
+
+    .fd-json-schema-editor button[class*='json-editor-btn-'] {
+
+        @apply inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-ink-600 shadow-none;
+        @apply hover:bg-slate-50 hover:text-ink-900;
+        @apply focus:outline-none focus:ring-2 focus:ring-accent-100 focus:border-accent-500;
+
+    }
+
+
+
+    .fd-json-schema-editor button.json-editor-btn-collapse {
+
+        @apply m-0 h-7 w-7 justify-center p-0;
+
+    }
+
+
+
+    .fd-json-schema-editor button.json-editor-btn-collapse svg {
+
+        @apply h-4 w-4;
+
+    }
+
+
+
+    .fd-json-schema-editor .json-editor-btntype-add {
+
+        @apply border-accent-600 bg-accent-600 text-white hover:border-accent-700 hover:bg-accent-700;
+
+    }
+
+
+
+    .fd-json-schema-editor .json-editor-btntype-delete,
+    .fd-json-schema-editor .json-editor-btntype-deletelast,
+    .fd-json-schema-editor .json-editor-btntype-deleteall {
+
+        @apply border-red-200 bg-red-50 text-red-700 hover:bg-red-100;
+
+    }
+
+
+
+    .fd-json-schema-editor .form-input-hint {
+
+        @apply mt-1 text-[11px] text-red-600;
+
+    }
+
+}
+
+
+
+
+
+    html,
+    body {
+
+        height: 100%;
+
+        margin: 0;
+
+        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+
+        color: #0f172a;
+
+        background: #f8fafc;
+
+    }
+
+
+
+    #tailwind-root {
+
+        min-height: 100vh;
+
+    }
+
+
+
+    .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #d5d9e3; border-radius: 12px; }
+
+    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+
+
+
+    /* The host app also used Angular Material density Sass, but this workspace
+       does not install the Material package. The plain CSS selectors below are
+       the part that affects cascade behavior for this repro. */
+
+
+
+    @font-face {
+
+        font-family: LatoBold;
+
+        src: local("Lato Bold"), local("Lato-Bold");
+
+    }
+
+
+
+    @font-face {
+
+        font-family: LatoBlack;
+
+        src: local("Lato Black"), local("Lato-Black");
+
+    }
+
+
+
+    @font-face {
+
+        font-family: LatoRegular;
+
+        src: local("Lato Regular"), local("Lato-Regular");
+
+    }
+
+
+
+    @font-face {
+
+        font-family: LatoLight;
+
+        src: local("Lato Light"), local("Lato-Light");
+
+    }
+
+
+
+    @font-face {
+
+        font-family: "Material Icons";
+
+        font-style: normal;
+
+        font-weight: 400;
+
+        src:
+
+            local("Material Icons"),
+
+            local("MaterialIcons-Regular");
+
+    }
+
+
+
+    :root {
+
+        --blue-color: #1852b3, --headline: #1852b3;
+
+        --header-border: #d9d9d9;
+
+        // --background-image: url("/../assets/background/Landing_Page_Background.png");
+
+        // --header-strip: url(assets/headerStrip.png);
+
+        // --light-strip: url(assets/app-icons/lightstrip.png);
+
+        // --side-meny-bm: url(assets/app-icons/side-menu-BM.png);
+
+        // --background-export: url(assets/settings-icons/export-background.png);
+
+        --background: #ffffff;
+
+        --on-background: #283041;
+
+        --container: #ffffff;
+
+        --container-secondary: #d4d1d1;
+
+        --container-third: #e4e4e4;
+
+        --on-container: #283041;
+
+        --secondary-color: #575757;
+
+        --hr-line: #c3bfbf;
+
+        --mat-icon: #5f7d95;
+
+        --tab-container: #e0dfdf;
+
+        --pannel: #ececec;
+
+        --mat-icon-background: #fbfbfb;
+
+        --panel-background: #ffffff;
+
+        --globalsearch-background: #ffffff;
+
+        --globalcontent-background: #f8f8f8;
+
+        --text-color: #1c2431;
+
+        --mat-form-underline: #d0d0d0;
+
+        --options-button: #f1f1f1;
+
+        --highlight-color: #1852b3;
+
+        --third-grey: #f2f2f2;
+
+        --placeholder: #a5a5a5;
+
+        --select-background: #ffffff;
+
+        --tile-border-select: #1071bc;
+
+        --info-background: #f0f0f0;
+
+        --dot: #ff5050;
+
+        --table-head: #dcdcdc;
+
+        --mat-row: #f2f2f2;
+
+        --data-bg: #ebebf0;
+
+
+
+        /* Landing page */
+
+        --hr-color: #e5e5e5;
+
+        --mat-tab-background: #ebebf0;
+
+        --box-shadow-color: #00000029;
+
+        --strip: #ffffff;
+
+
+
+        /* Button */
+
+        --button-background: lightgrey;
+
+        --button-color: #36445a;
+
+
+
+        /* Teams */
+
+        --ts-wrapper: #f2f2f2;
+
+        --teams-circle: #bababa;
+
+        --teams-background: #ffffff;
+
+        --teams-heading: #283041;
+
+
+
+        /* Designer module */
+
+        --ds-main-tab: #f8f8f8;
+
+        --ds-on-main-tab: #818181;
+
+        --ds-on-main-select: #0071bc;
+
+        --ds-sub-tab: #0071bc;
+
+        --ds-on-sub-tab: #ffffff;
+
+        --ds-sub-tab_ative: #0071bc;
+
+        --ds-sub-tab-select: #34a0e8;
+
+        --ds-side-bars: #f8f8f8;
+
+        --ds-right-side: #4f5867;
+
+        --ds-right-side-disable: #4f5867;
+
+        --designer-head: #4f5867;
+
+
+
+        --ds-background: #ffffff;
+
+        --ds-white-font: #283041;
+
+        --ds-table-header: #f2f2f2;
+
+        --ds-table-body: #ffffff;
+
+        --ds-table-header-font: #1c2431;
+
+        --ds-table-border: #f2f2f2;
+
+        --circle-info: #1c2431;
+
+        --cross-color: #283041;
+
+        --div-border: #ebebeb;
+
+        --card-background: #f8f8f8;
+
+        --on-card-background: #ffffff;
+
+        --card-label: #1c2431;
+
+        --card-sub-label: #a5a5a5;
+
+        --section-heading: #283041;
+
+        --mat-select-value: #000000;
+
+        --field-lines: #d0d0d0;
+
+        --field-label: #1c2431;
+
+        --thumbnail: #cccccc;
+
+        --ds-card-background: #f0f0f0;
+
+        --ds-link: #1852b2;
+
+
+
+        /* Activity */
+
+        --ds-enter: #1071bc;
+
+        --ds-border-tab: #696965;
+
+        --ds-placeholder: #535353;
+
+        --ds-pin: #dbdbdb;
+
+        --ds-fa-circle: #afafaf;
+
+        --ds-app-admin: #9572b9;
+
+        --ds-stream-owner: #91606b;
+
+        --ds-author: #668ebc;
+
+        --ds-quality-expert: #349caa;
+
+        --ds-any: #d2691e;
+
+
+
+        /* Workspace */
+
+        --ds-border: #d9d9d9;
+
+        --ds-radio-icon: #707070;
+
+        --ds-header-border: #ebebeb;
+
+
+
+        /* Settings */
+
+        --ubackground: #ffffff;
+
+        --ulabel: #393939;
+
+        --udropdown: #ffffff;
+
+        --udropdownplaceholder: #393939;
+
+        --pageHeading: #283041;
+
+        --submitButton: #1852b3;
+
+        --selecteddropdown: #393939;
+
+        --option-background: #ffffff;
+
+        --table: #f2f2f2;
+
+        --on-table: #1c2431;
+
+        --tableDetails: #ffffff;
+
+        --search: #ffffff;
+
+        --onSearch: #a5a5a5;
+
+        --umaticon: #1c2431;
+
+        --ucontainer: #ffffff;
+
+
+
+        /* Streams */
+
+        --panel-border: #d9d9d9;
+
+        --menu-hover: #f2f2f2;
+
+        --card-content: #f2f2f2;
+
+        --card-thumbnail: #cccccc;
+
+        --add-stream: #657083;
+
+        --stream-image: #cccccc;
+
+        --left-section: #ffffff;
+
+        --info-card: #ffffff;
+
+        --date-color: #5a5a5a;
+
+        --info-text: #575757;
+
+
+
+        /* Events */
+
+        --selection-background: #f8f8ff;
+
+        --details-link: #1071bc;
+
+        --selection-row: #efeff0;
+
+
+
+        /* Category definition */
+
+        --on-paginator: #1c2431;
+
+        --on-tree: #000000;
+
+        --on-select: #1852b3;
+
+        --tree: #ffffff;
+
+
+
+        /* Error handler */
+
+        --error-container: #ffffff;
+
+        --on-error-container: #000000;
+
+
+
+        /* Pack template */
+
+        --on-selected-area: #434343;
+
+        --selected-area: #f4f4f4;
+
+
+
+        /* New setting border */
+
+        --border-container: #d3d3d3;
+
+        --content-heading: #545456;
+
+
+
+        /* Stepper */
+
+        --selected-stepper-bar: #407ee3;
+
+        --selected-stepper-circle: #1852b2;
+
+        --stepper-bar: #dedede;
+
+        --stepper-circle: #ffffff;
+
+        --tile-circle: #969696;
+
+        --normal-text: #4b5467;
+
+        --select-row: #f9f9f9;
+
+
+
+        /* Planner */
+
+        --ds-planner-ongoing-bg: #ffcc00;
+
+        --ds-planner-completed-bg: #34c759;
+
+        --ds-planner-overdue-bg: #faa5a5;
+
+        --ds-planner-landing-cards-bg: #f0f0f2;
+
+        --ds-planner-blue: #1852b2;
+
+        --ds-planner-white: #ffffff;
+
+        --ds-planner-select: #545456;
+
+        --ds-planner-preview: #ffffff;
+
+        --filter-font: #1c2431;
+
+
+
+        /* Cards */
+
+        --card-color: #ffffff;
+
+        --card-heading: #1c2431;
+
+        --card-body: #5a5a5a;
+
+        --header-options: #1852b3;
+
+
+
+        /* Access management */
+
+        --mat-table-header: #e0e0e0;
+
+        --back-page: #f0f0f0;
+
+        --border-top: #d9d9d9;
+
+        --mat-cell-text: #5a5a5a;
+
+        --searchbar-border: #ededed;
+
+        --link: #1552b9;
+
+        --selectedView: #1852b2;
+
+        --viewTitle: #5e7d95;
+
+        --roleInfo-back: #ffffff;
+
+        --strip-border: #f2f2f2;
+
+        --nameHeading: #1c2431;
+
+        --input-field: #f0f0f0;
+
+        --ds-selected: #f2f2f2;
+
+        --approve: #c6efce;
+
+
+
+        /* Organizer */
+
+        --head-text: #575757;
+
+        --panel-head: #ffffff;
+
+        --panel-background-org: #ebebeb;
+
+        --org-info-head: #434343;
+
+        --top-code-sub: #434343;
+
+        --info-text-desc: #575757;
+
+        --panel-body-orgTree: #e5e5e5;
+
+        --org-expansion-header: #cccccc;
+
+        --org-expansion-back: #ffffff;
+
+        --selected-pack-back: #cccccc;
+
+        --product-head: #5a5a5a;
+
+        --org-tab-border: #ededed;
+
+        --select-cat-org: #d9d9d9;
+
+        --org-product-back: #d9d9d9;
+
+        --org-product-title: #1c2431;
+
+        --org-download-tile: #1852b2;
+
+        --org-product-tab: #1852b2;
+
+        --org-drop-desc: #434343;
+
+        --org-product-landing-back: #ffffff;
+
+        --org-product-grey-strip: #f0f0f0;
+
+        --org-product-desc: #434343;
+
+        --org-product-bottom-wrap: #f0f0f0;
+
+        --org-product-bottom-white-wrap: #ffffff;
+
+        --org-product-title-head: #575757;
+
+        --org-product-border: #dedede;
+
+        --org-product-border-bottom: #f0f0f0;
+
+        --org-product-strip-wrap: #421888;
+
+        --org-product-strip-wrap-sub: #1981d2;
+
+        --org-product-middle-buttons: #ffffff;
+
+        --org-product-card-back: #ffffff;
+
+        --org-product-card-border: #d9d9d9;
+
+        --org-product-card-head: #5a5a5a;
+
+        --org-product-card-head2: #5a5a5a;
+
+        --org-searchbar-border: #ededed;
+
+        --org-event-back: #f5f5f5;
+
+        --org-event-selected-back: #cccccc;
+
+        --select-category-org: #d9d9d9;
+
+        --btn-org-create: #1852b3;
+
+        --product-word-head-back1: #785ca3;
+
+        --product-word-head-back2: #2a91e2;
+
+        --product-word-background: #785ca3;
+
+        --product-word-background-rem: #2a91e2;
+
+        --event-btn-back: #518ae5;
+
+        --org-expansion-back-create-screen: #f0f0f0;
+
+        --org-teams-role-desc: #808080;
+
+        --org-product-details-back: #f0f0f0;
+
+        --org-landing-event-name: #2348c2;
+
+        --org-button-hover: #1852b3;
+
+        --org-lob-back: #ffffff;
+
+        --org-lob-back-business-process: #cccccc;
+
+
+
+        --noData-img-message-back: #eeeef0;
+
+        --noData-img-message: #7f7f88;
+
+        --unlink-heading: #575757;
+
+        --heading1: #5a5a5a;
+
+        --btn_class: #ffff;
+
+        --selectCat: rgb(217, 217, 217);
+
+        --head1: #5a5a5a;
+
+        --card: #ffffff;
+
+        --card-border: #d9d9d9;
+
+        --info-text-Event: #545454;
+
+        --eventBg: #ffffff;
+
+        --midsection: #ffffff;
+
+        --background-body: #ffffff;
+
+        --cancel-btn: #EBEBFO;
+
+        --checked-box-clr: #1852b2;
+
+        --fliter-color: invert(100%) sepia(84%) saturate(239100%) hue-rotate(209deg) brightness(92%) contrast(100%);
+
+        --horiZontal-strip: #f2f2f2;
+
+    }
+
+
+    body {
+
+        font-family: LatoRegular !important;
+
+        box-sizing: border-box;
+
+    }
+
+
+    .row {
+
+        margin-right: 0 !important;
+
+        margin-left: 0 !important;
+
+        --bs-gutter-x: 0px !important;
+
+    }
+
+
+
+    .mat-typography {
+
+        margin: 0px !important;
+
+    }
+
+
+
+    .mat-mdc-select-arrow {
+
+        border: 0 !important;
+
+        border-top: 0.1rem solid !important;
+
+        border-right: 0.1rem solid !important;
+
+        width: 6px !important;
+
+        height: 6px !important;
+
+
+
+        box-sizing: border-box;
+
+        transform: rotate(135deg) !important;
+
+        color: var(--text-color) !important;
+
+        margin-right: 10px !important;
+
+    }
+
+
+
+    .mat-mdc-select-arrow svg {
+
+        display: none !important;
+
+    }
+
+
+
+    .mdc-text-field--outlined .mat-mdc-form-field-infix,
+
+    .mdc-text-field--no-label .mat-mdc-form-field-infix {
+
+        padding: 2px !important;
+
+        min-height: auto !important;
+
+    }
+
+
+
+    .mat-mdc-form-field-focus-overlay {
+
+        background-color: transparent !important;
+
+    }
+
+
+
+    .mat-mdc-form-field-infix {
+
+        min-height: auto !important;
+
+    }
+
+
+
+    .mat-mdc-form-field-subscript-wrapper,
+
+    .mat-mdc-form-field-bottom-align::before {
+
+        line-height: 15px !important;
+
+        height: 0px !important;
+
+        content: none !important;
+
+    }
+
+
+
+    .cdk-overlay-pane.mat-mdc-dialog-panel {
+
+        max-width: none !important;
+
+    }
+
+
+
+    .text-truncate {
+
+        width: 100%;
+
+    }
+
+
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
+
+        border-color: #ebebeb !important;
+
+        border-radius: 3px;
+
+    }
+
+
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece ::focus {
+
+        border-color: #ebebeb !important;
+
+        border-radius: 3px;
+
+        border-width: 1px;
+
+    }
+
+
+
+    .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
+
+        font-size: 12px !important;
+
+        font-family: "LatoBold" !important;
+
+        color: #3f86f0 !important;
+
+        top: 33px !important;
+
+    }
+
+
+
+    ::placeholder {
+
+        color: #b2b5ba !important;
+
+        font-size: 12px;
+
+        font-family: LatoRegular;
+
+        opacity: 1;
+
+    }
+
+
+
+    .mat-form-field-infix {
+
+        padding-bottom: 0.5rem !important;
+
+    }
+
+
+
+    .mat-mdc-select-panel {
+
+        padding: 0 !important;
+
+        overflow-x: hidden !important;
+
+        position: relative !important;
+
+
+
+        &.ng-animating {
+
+            visibility: hidden !important;
+
+        }
+
+    }
+
+
+
+    .mat-mdc-form-field-focus-overlay {
+
+        background-color: transparent !important;
+
+    }
+
+
+
+    .mat-mdc-text-field-wrapper {
+
+        padding-left: 0px !important;
+
+    }
+
+
+
+    .mat-mdc-form-field-error-wrapper {
+
+        padding-left: 0px !important;
+
+    }
+
+
+
+    // .mat-mdc-form-field-flex {
+
+    //     padding: 1rem 1.4rem;
+
+    // }
+
+    .submit-button {
+
+        background-color: #1852b2 !important;
+
+        color: white !important;
+
+        border: 0.1rem solid #1852b2 !important;
+
+        border-radius: 0.5rem;
+
+        width: 10rem;
+
+        height: 3rem !important;
+
+        line-height: 3rem !important;
+
+        font-size: 1.2rem;
+
+        font-weight: bold;
+
+    }
+
+
+
+     button,
+
+     button:focus {
+
+        border: none !important;
+
+        outline: none !important;
+
+        font-family: LatoRegular;
+
+        font-size: 1.2rem;
+
+        font-weight: bold;
+
+        letter-spacing: 0px;
+
+        color: #ffffff;
+
+        background: #3f85f0 0% 0% no-repeat padding-box;
+
+        border-radius: 5px;
+
+        opacity: 1;
+
+
+
+        &:disabled,
+
+        &[disabled] {
+
+            background: #d3d3d3 0% 0% no-repeat padding-box !important;
+
+            cursor: not-allowed;
+
+            color: #ffffff;
+
+        }
+
+    }
+
+
+
+    
+
+
+    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
+
+        width: 12px !important;
+
+    }
+
+
+
+    .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input {
+
+        padding-left: 12px;
+
+    }
+
+
+
+    .mat-mdc-input-element {
+
+        font-size: 11px;
+
+        font-family: LatoBold;
+
+        color: #1c2431;
+
+    }
+
+
+
+    .mat-mdc-select-placeholder {
+
+        color: #b2b5ba !important;
+
+        font-size: 12px;
+
+        font-family: LatoRegular;
+
+        opacity: 1;
+
+    }
+
+
+
+    .mat-mdc-select-placeholder {
+
+        padding-left: 12px;
+
+    }
+
+
+
+    .mat-mdc-input-element,
+
+    .mat-select-value-text {
+
+        color: #1c2431 !important;
+
+        font-size: 12px !important;
+
+        font-family: LatoRegular !important;
+
+    }
+
+
+
+    .cdk-overlay-pane {
+
+        background: #ffffff;
+
+    }
+
+
+
+    .mdc-notched-outline__leading,
+
+    .mdc-notched-outline__notch,
+
+    .mdc-notched-outline__trailing {
+
+        border-color: rgba(0, 0, 0, 0.12) !important;
+
+    }
+
+
+
+    .mdc-notched-outline--notched .mdc-notched-outline__notch {
+
+        padding-right: 0px !important;
+
+    }
+
+
+
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+
+        --mat-mdc-form-field-label-transform: translateY(calc(calc(12.75px + 56px / 2) * -1)) scale(0.75) !important;
+
+    }
+
+
+
+    .cancel-btn-active,
+
+    .cancel-btn-active:focus {
+
+        border: 1px solid #3f85f0 !important;
+
+        border-radius: 5px;
+
+        background: #ffff;
+
+        color: #3f85f0;
+
+        font-size: 12px;
+
+        font-family: LatoBold;
+
+        height: 30px;
+
+        width: 110px;
+
+    }
+
+
+
+    .submit-btn-deactive,
+
+    .submit-btn-deactive:focus {
+
+        border: 1px solid #b4b4b4;
+
+        border-radius: 5px;
+
+        background: #b4b4b4;
+
+        color: #ffffff;
+
+        font-size: 12px;
+
+        font-family: LatoBold;
+
+        height: 30px;
+
+        width: 110px;
+
+    }
+
+
+
+    .submit-btn-active,
+
+    .submit-btn-active:focus {
+
+        border: 1px solid #3f85f0;
+
+        border-radius: 5px;
+
+        background: #3f85f0;
+
+        color: #ffffff;
+
+        font-size: 12px;
+
+        font-family: LatoBlack;
+
+        height: 30px;
+
+        width: 110px;
+
+    }
+
+
+
+    .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
+
+        color: red !important;
+
+    }
+
+
+
+    .pointer {
+
+        cursor: pointer;
+
+    }
+
+
+
+    .mat-mdc-select-value-text {
+
+        font-size: 12px;
+
+        font-family: LatoRegular;
+
+        color: #1c2431;
+
+        padding-left: 10px;
+
+    }
+
+
+
+    .mat-mdc-option {
+
+        min-height: 30px !important;
+
+        width: 100% !important;
+
+    }
+
+
+
+    .mat-mdc-option .mdc-list-item__primary-text {
+
+        color: #5a5a5a !important;
+
+        font-size: 12px !important;
+
+        font-family: "LatoRegular" !important;
+
+    }
+
+
+
+    .mat-pseudo-checkbox .mat-mdc-option-pseudo-checkbox {
+
+        visibility: hidden !important;
+
+    }
+
+
+
+    .mat-mdc-option .mat-pseudo-checkbox-minimal {
+
+        display: none;
+
+    }
+
+
+
+    .mat-pseudo-checkbox-full {
+
+        border-color: #1071bc !important;
+
+    }
+
+
+
+    .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {
+
+        color: #ffffff !important;
+
+        width: 7px;
+
+        height: 4px;
+
+    }
+
+
+
+    .mat-pseudo-checkbox-checked {
+
+        background-color: #3f86f0 !important;
+
+    }
+
+
+
+    .mat-pseudo-checkbox {
+
+        width: 15px !important;
+
+        height: 15px !important;
+
+    }
+
+
+
+    .table-wrapper {
+
+        box-shadow: 0rem 3px 6px #00000029;
+
+        background: var(--ds-table-body) !important;
+
+        color: var(--on-container) !important;
+
+        text-align: center;
+
+        min-height: 450px;
+
+        overflow: unset;
+
+
+
+        .mat-mdc-table {
+
+            min-height: 400px !important;
+
+            max-height: 400px;
+
+            overflow-y: auto;
+
+            width: 100%;
+
+        }
+
+    }
+
+
+
+    .mat-mdc-header-row {
+
+        background: var(--ds-table-header) !important;
+
+        min-height: 33px !important;
+
+        height: 33px !important;
+
+        z-index: 0;
+
+        margin-bottom: 10px;
+
+        top: 0px !important;
+
+    }
+
+
+
+    .mat-mdc-row {
+
+        min-height: 27px !important;
+
+        border-bottom: none;
+
+    }
+
+
+
+    mat-header-cell {
+
+        color: var(--ds-table-header-font) !important;
+
+        //margin-right: 2rem;
+
+        vertical-align: middle;
+
+        text-transform: uppercase;
+
+        font-size: 12px;
+
+        font-family: LatoBlack;
+
+
+
+        button {
+
+            background: none !important;
+
+            color: var(--ds-table-header-font) !important;
+
+            font-family: LatoBlack !important;
+
+        }
+
+    }
+
+
+
+    mat-cell {
+
+        color: var(--on-container) !important;
+
+        font-size: 12px;
+
+        font-family: LatoRegular;
+
+        // margin-right: 2rem;
+
+    }
+
+
+
+    .paginator {
+
+        width: 100%;
+
+        border-top: 1px solid var(--ds-border);
+
+        background: var(--container) !important;
+
+        height: 45px;
+
+        display: flex;
+
+        justify-content: flex-end;
+
+        align-items: center;
+
+
+
+        .text-left {
+
+            color: var(--on-container) !important;
+
+            font-family: LatoRegular;
+
+            font-size: 11px;
+
+        }
+
+    }
+
+
+
+    .ngx-pagination {
+
+        margin-bottom: 0rem !important;
+
+
+
+        .pagination-previous {
+
+            text-transform: capitalize !important;
+
+        }
+
+
+
+        .current {
+
+            padding: 1px 6px;
+
+            background: var(--on-select) !important;
+
+            color: #fefefe;
+
+            cursor: default;
+
+            margin-left: 10px;
+
+            margin-right: 10px;
+
+            border-radius: 30px;
+
+        }
+
+    }
+
+
+
+    .text-truncate {
+
+        width: 100%;
+
+    }
+
+
+
+    ::ng-deep .mdc-line-ripple {
+
+        display: none !important;
+
+    }
+
+
+
+    .mdc-checkbox__background {
+
+        width: 12px !important;
+
+        height: 12px !important;
+
+        border: 1px solid #5e7c95 !important;
+
+    }
+
+
+
+    .celldata {
+
+        font-size: 11px;
+
+        color: #5a5a5a !important;
+
+        font-family: LatoRegular;
+
+    }
+
+
+
+    .mdc-checkbox__checkmark-path {
+
+        color: #ffffff;
+
+    }
+
+
+
+    .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
+
+        background-color: #3e85f0 !important;
+
+    }
+
+    .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {
+
+        color: white !important;
+
+        width: 8px !important;
+
+        height: 3px !important;
+
+    }
+
+    .searchInput:focus {
+
+        outline: none;
+
+        border: none;
+
+        width: 100%;
+
+        font-family: LatoRegular;
+
+        font-size: 13px;
+
+        color: #1c2431;
+
+        background: #ffffff;
+
+    }
+
+
+
+    .mat-mdc-form-field-infix {
+
+        height: 32px;
+
+    }
+
+
+
+    :host ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+
+        top: 33px !important;
+
+    }
+
+
+
+    .mat-mdc-tab {
+
+        letter-spacing: 0px !important;
+
+    }
+
+
+
+    .mat-mdc-tab .mdc-tab-indicator__content--underline {
+
+        background-color: #3f86f0 !important;
+
+        width: 30px !important;
+
+        border-radius: 10px !important;
+
+        height: 10% !important;
+
+        margin-left: 22px !important;
+
+    }
+
+
+
+    .mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label {
+
+        font-family: LatoBlack !important;
+
+        font-size: 13px !important;
+
+        color: #000000 !important;
+
+        opacity: 1 !important;
+
+    }
+
+
+
+    .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
+
+        font-family: LatoBlack !important;
+
+        font-size: 14px !important;
+
+        color: #000000 !important;
+
+        opacity: 1 !important;
+
+    }
+
+
+
+    .mat-mdc-tab .mdc-tab__text-label {
+
+        font-family: LatoRegular !important;
+
+        font-size: 14px;
+
+        color: #a5a5a5 !important;
+
+    }
+
+
+
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input {
+
+        padding-left: 10px !important;
+
+    }
+
+
+
+    .mat-mdc-option .mdc-list-item__primary-text {
+
+        white-space: nowrap !important;
+
+    }
+
+
+
+    .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab {
+
+        flex-grow: 0 !important;
+
+    }
+
+
+
+    /*Mat Tab CSS here */
+
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
+    .mat-mdc-tab-body.mat-tab-body-active {
+
+        overflow: unset !important;
+
+        // overflow-y: scroll;
+
+        // overflow-x: scroll;
+
+    }
+
+
+
+    .mat-mdc-tab-body-content {
+
+        overflow: unset !important;
+
+        background: var(--container) !important;
+
+    }
+
+
+
+    .mdc-tab {
+
+        min-width: unset !important;
+
+    }
+
+
+
+    //mat-tab-ink-bar
+
+    /* .mat-mdc-tab-group.mat-primary .mat-ink-bar,
+
+.mat-mdc-tab-nav-bar.mat-primary .mat-ink-bar {
+
+  background-color: #1852b2;
+
+  width: 2.15rem !important;
+
+  border-radius: 10px !important;
+
+  height: 10% !important;
+
+  margin-left: 22px !important;
+
+} */
+
+
+
+    //mat-tab-css
+
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
+    mat-tab-body {
+
+        width: -webkit-fill-available !important;
+
+    }
+
+
+
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
+    mat-tab-header {
+
+        border: 1px solid var(--ds-table-border) !important;
+
+    }
+
+
+
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
+    .mat-tab-header-pagination-before,
+
+    .mat-tab-header-pagination-after {
+
+        //padding-left: 4px;
+
+        display: none !important;
+
+    }
+
+
+
+    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+
+    .mat-tab-label-container {
+
+        background: var(--ds-table-header) 0% 0% no-repeat padding-box !important;
+
+        opacity: 1;
+
+    }
+
+
+
+    .mdc-tab-indicator {
+
+        justify-content: unset !important;
+
+    }
+
+
+
+    .mat-mdc-tab-label-container {
+
+        border-bottom: none !important;
+
+        border-bottom-color: transparent !important;
+
+        border-bottom-width: 0px !important;
+
+        border-bottom-style: none !important;
+
+    }
+
+
+
+    .mdc-tab-indicator__content--underline {
+
+        border-top-style: solid !important;
+
+        border-top-color: #3f86f0 !important;
+
+    }
+
+
+
+    .mat-mdc-tab-label-container {
+
+        height: 30px;
+
+    }
+
+
+
+    .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab {
+
+        height: 34px !important;
+
+    }
+
+
+
+    .mdc-tab {
+
+        padding: 0px 20px !important;
+
+    }
+
+
+
+    .mat-mdc-form-field-infix {
+
+        align-content: center;
+
+    }
+
+
+
+    .segmentName {
+
+        &:focus {
+
+            border: 0.1rem solid black !important;
+
+            padding: 0% 2% !important;
+
+        }
+
+    }
+
+
+
+    .error-font {
+
+        font-size: 10px !important;
+
+        font-family: latoregular !important;
+
+        color: #f44336 !important;
+
+        line-height: 1;
+
+        padding-top: 3px;
+
+        padding-left: 13px;
+
+    }
+
+
+
+    .warning-boxY {
+
+        height: 44px;
+
+        background-color: #f7f7f7;
+
+        font-size: 1.2rem;
+
+        align-items: center;
+
+        background: #f8f8f8 0% 0% no-repeat padding-box;
+
+        position: relative;
+
+    }
+
+
+
+    .headerStrip {
+
+        height: 40px;
+
+        align-content: center;
+
+    }
+
+
+
+    .topHead {
+
+        font-size: 13px;
+
+        font-family: "LatoBold";
+
+        color: #1c2431;
+
+    }
+
+
+
+    .imgbottom {
+
+        // border-bottom: 1px solid #C9C9C9;
+
+        cursor: pointer;
+
+        padding: 10px 10px 10px 15px;
+
+    }
+
+
+
+    .login-background {
+
+        height: 100vh;
+
+        background-size: 100% 100vh;
+
+        background-image: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+
+        background-position: 50% 50%;
+
+    }
+
+
+
+    mat-icon {
+
+        font-size: 20px;
+
+        height: fit-content !important;
+
+        width: fit-content !important;
+
+    }
+
+
+
+    .button {
+
+        cursor: pointer;
+
+        display: flex;
+
+        align-items: center;
+
+        justify-content: center;
+
+        gap: 0.5rem;
+
+        border-radius: 5px;
+
+        padding: 0.3rem 1.5rem;
+
+        font-family: "LatoBold";
+
+        font-size: 12px;
+
+
+
+        .button-icon {
+
+            display: flex;
+
+            align-items: center;
+
+            justify-content: center;
+
+
+
+            mat-icon {
+
+                font-size: 13px;
+
+                height: fit-content;
+
+                width: fit-content;
+
+            }
+
+        }
+
+    }
+
+
+
+    // .button-fill{
+
+    //  background:primaryBlueColor;
+
+    //  color:white,
+
+
+
+    // }
+
+    // .button-outline{
+
+    //  background: white;
+
+    //  color: $primaryBlueColor;
+
+    //  border: 1px solid $primaryBlueColor;
+
+    // }
+
+
+
+    /*********checkbox**/
+
+
+
+    .mat-mdc-checkbox .mdc-checkbox__ripple {
+
+        opacity: 0 !important;
+
+    }
+
+
+
+    .mat-mdc-checkbox-ripple,
+
+    .mdc-checkbox__ripple {
+
+        opacity: 0 !important;
+
+    }
+
+
+
+    .mdc-checkbox__background {
+
+        height: 15px !important;
+
+        width: 15px !important;
+
+    }
+
+
+
+    .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
+
+        border-color: #3f86f0 !important;
+
+        background-color: #0071bc !important;
+
+    }
+
+
+
+    .mdc-checkbox__checkmark {
+
+        color: white !important;
+
+        width: 7px;
+
+        // height: 3px;
+
+    }
+
+
+
+    .mat-pseudo-checkbox {
+
+        width: 12px !important;
+
+        height: 12px !important;
+
+        margin-right: 8px !important;
+
+    }
+
+
+
+    .mat-pseudo-checkbox-full {
+
+        border: 1px solid #3f86f0 !important;
+
+        width: 12px !important;
+
+        height: 12px !important;
+
+    }
+
+    .mat-button-toggle-checked .mat-button-toggle-checkbox-wrapper {
+
+        width: 0px !important;
+
+    }
+
+    /****Scroll bar****/
+
+    /* width */
+
+     ::-webkit-scrollbar {
+
+        width: 7px !important;
+
+        height: 7px !important;
+
+    }
+
+
+
+    /* Handle */
+
+    ::-webkit-scrollbar-thumb {
+
+        background: #a5abb3 !important;
+
+        border-radius: 10px !important;
+
+    }
+
+
+
+    /* Handle on hover */
+
+    ::-webkit-scrollbar-thumb:hover {
+
+        background: #8d9096 !important;
+
+    }
+
+    // make scrollbar handle transparent
+
+    .hide-scroll::-webkit-scrollbar-thumb:vertical {
+
+        background: transparent !important;
+
+    }
+
+
+
+    /*********/
+
+
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
+
+        border-color: #3f86f0 !important;
+
+    }
+
+
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
+
+        border-color: #3f86f0 !important;
+
+    }
+
+
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
+
+        border-color: #dcdcdc !important;
+
+    }
+
+
+
+    .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
+
+        border-left: none !important;
+
+    }
+
+
+
+    .header {
+
+        background: var(--header-strip);
+
+        width: 100%;
+
+        height: 45px;
+
+        background-size: cover;
+
+    }
+
+
+
+    .material-icons {
+
+        font-family: "Material Icons";
+
+        font-weight: normal;
+
+        font-style: normal;
+
+        font-size: 24px;
+
+        display: inline-block;
+
+        line-height: 1;
+
+        text-transform: none;
+
+        letter-spacing: normal;
+
+        word-wrap: normal;
+
+        white-space: nowrap;
+
+        direction: ltr;
+
+        cursor: pointer;
+
+        -webkit-font-smoothing: antialiased;
+
+        text-rendering: optimizeLegibility;
+
+        -moz-osx-font-smoothing: grayscale;
+
+        font-feature-settings: "liga";
+
+    }
+
+
+
+    .col-10 {
+
+        flex: 0 0 auto;
+
+        max-width: 83.33333333%;
+
+    }
+
+
+
+    //searchBar with search icon
+
+    .iconicSearchBar {
+
+        margin: 1.1rem 0 1.2rem 0;
+
+        display: flex;
+
+        background: #fff 0% 0% no-repeat padding-box;
+
+        border: 1px solid #d9d9d9;
+
+        border-radius: 5px;
+
+        opacity: 1;
+
+        width: 100%;
+
+        height: 3.5rem;
+
+        padding: 9px 15px 9px 12px !important;
+
+
+
+        .searchInput,
+
+        .searchInput:focus {
+
+            outline: none;
+
+            border: none;
+
+            width: 100%;
+
+            font-family: LatoRegular;
+
+            font-size: 13px;
+
+            color: #1c2431;
+
+            background: #fff;
+
+        }
+
+
+
+        .searchInput::placeholder {
+
+            font-size: 1.3rem !important;
+
+            color: #a5a5a5;
+
+        }
+
+
+
+        .searchLabel {
+
+            border-radius: 0px 5px 5px 0px !important;
+
+            width: 10%;
+
+        }
+
+
+
+        .search-image {
+
+            height: 1.6rem;
+
+            padding-bottom: 3%;
+
+        }
+
+    }
+
+
+
+    .latoRegular {
+
+        font-family: LatoRegular;
+
+        font-size: 12px;
+
+    }
+