tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/checklist-configure/checklist-configure.component.scss

@@ -0,0 +1,2338 @@
+// .title-card{
+//     color: var(--black, #000);
+// font-family: 'Inter';
+// font-size: 20px;
+// font-weight: 600;
+// line-height: 30px; /* 150% */
+// }
+.card {
+    border-radius: 16px;
+}
+
+.section1 {
+    color: var(--Black, #101828);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.row>* {
+    padding-right: 0px;
+}
+.storeAssign,.table-header{
+    a:hover{
+        text-decoration: underline !important;
+    }
+}
+
+
+.checkconfigcont {
+    .card {
+        height: 100%;
+    }
+
+    .section {
+        display: inline-block;
+        width: 160px;
+        white-space: nowrap;
+        outline: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+    }
+
+    .radio {
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        /* 150% */
+    }
+
+    .mat-radio-button.mat-primary .mat-radio-inner-circle,
+    .mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
+    .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,
+    .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
+        background-color: #00A3FF;
+    }
+
+    .section-leftheading1 {
+        overflow: hidden;
+        color: var(--black, #101828);
+        text-overflow: ellipsis;
+        /* Text lg/Semibold */
+        font-family: 'Inter';
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        /* 155.556% */
+
+        // color: var(--black, #101828);
+        // font-family: 'Inter';
+        // font-size: 20px;
+        // font-style: normal;
+        // font-weight: 600;
+        // line-height: 28px;
+    }
+
+    .section {
+        color: var(--Black, #101828);
+        font-family: Inter;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+    }
+
+    .scedule-text{
+        overflow: hidden;
+        color: var(--Black, #101828);
+        text-overflow: ellipsis;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px; /* 150% */  
+    }
+
+    .svg-icon svg {
+        height: 1.25em;
+        width: 1.25em;
+    }
+
+    .section-leftheading {
+        overflow: hidden;
+        color: var(--black, #101828);
+        text-overflow: ellipsis;
+        /* Text lg/Semibold */
+        font-family: 'Inter';
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        /* 155.556% */
+
+        // color: var(--black, #101828);
+        // font-family: 'Inter';
+        // font-size: 20px;
+        // font-style: normal;
+        // font-weight: 600;
+        // line-height: 28px;
+    }
+
+    .sub {
+        color: var(--gray-700, #101828);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+    }
+    .sub1 {
+        color: var(--gray-700, #101828);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+    }
+
+    .subopen {
+        color: var(--black, #101828);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        /* 150% */
+    }
+
+    .symbol-circle {
+        margin-left: -6px;
+    }
+
+    .checklistlabel {
+        padding: 4px 12px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 16px;
+        background: var(--gray-100, #F2F4F7);
+    }
+
+    .subtitle {
+        font-family: 'Inter';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0em;
+        text-align: left;
+        color: #667085;
+
+    }
+
+    .template-dropdown{
+        background: var(--Gray-100, #F2F4F7);
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px; 
+    }
+
+    .form-control.form-control-solid {
+        display: flex;
+        padding: 11px 14px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+        border-radius: 8px;
+        border: 1px solid var(--gray-500, #D0D5DD);
+        background: var(--white, #FFF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    .searchplaceholder {
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
+    }
+
+    .custom-appbox {
+        border-radius: 12px;
+    }
+
+    input::placeholder {
+        color: #667085 !important;
+        opacity: 1;
+    }
+
+    .checklisttext {
+        color: var(--gray-700, #344054);
+        text-align: center;
+        font-family: 'Inter';
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+    }
+
+    .separator {
+        height: 1px;
+        align-self: stretch;
+        // background: var(--gray-300, #D0D5DD);
+    }
+
+    ::ng-deep.mat-form-field-infix {
+        color: #101828;
+        border: 1px solid #D0D5DD;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        font-size: 16px;
+        width: 100%;
+        padding: 10px 14px;
+        font-family: "Inter";
+        font-weight: 400;
+        width: 500px !important;
+        line-height: 24px;
+
+    }
+
+    // ::ng-deep.mat-autocomplete-panel-above {
+    //     bottom: 38.4875px;
+    //     left: 633.688px;
+    //     width: 500px;
+    // }
+
+    ::ng-deep .storechip {
+        color: #101828;
+        /* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); */
+        /* border-radius: 8px; */
+        font-size: 16px;
+        width: 100%;
+        /* padding: 10px 14px; */
+        font-family: "Inter";
+        font-weight: 400;
+        width: 780px !important;
+        line-height: 24px;
+    }
+
+    ::ng-deep .mat-chip {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 17px;
+        /* identical to box height */
+        text-align: center;
+        color: #5E6278 !important;
+    }
+
+    ::ng-deep .mat-chip-list-wrapper .mat-standard-chip {
+        margin: 4px;
+    }
+
+    ::ng-deep .matChip-store {
+        height: 100px;
+        display: block;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
+        background-color: white !important;
+    }
+
+    ::ng-deep .mat-form-field-underline {
+        display: none;
+    }
+
+    ::ng-deep .mat-form-field-ripple {
+        display: none;
+    }
+
+    .subtext {
+        color: var(--gray-500, #667085);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+    }
+
+    .zone-subscription{
+        color: var(--Gray-500, #667085);
+        // text-align: center;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+    }
+
+    .upload {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+
+        /* Shadow/xs */
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        display: flex;
+        padding: 10px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex: 1 0 0;
+
+        &:hover {
+            background: #f3f8fd !important;
+            border: 1px solid var(--gray-300, #D0D5DD) !important;
+        }
+    }
+
+    .uploadtext {
+        color: var(--gray-700, #344054);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+    }
+
+    .savedraft {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+        // display: flex;
+        padding: 10px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+        &:hover {
+            background: #f3f8fd !important;
+            border: 1px solid var(--gray-300, #D0D5DD) !important;
+        }
+    }
+
+    .savedrafttext {
+        color: var(--gray-700, #344054);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+    }
+    .configureAcite{
+        // border-radius: 8px;
+        border: 1px solid var(--Primary-300, #6BCAFF);
+        background: var(--Primary-50, #EAF8FF);
+    }
+
+    .text-primary{
+        color: var(--primary-700, #009BF3) !important;
+    }
+    .border-primary{
+        border: 1px dashed var(--Primary-500, #33B5FF) !important;
+        background: var(--Primary-25, #F6FCFF) !important;
+    }
+    .download {
+        border-radius: 8px;
+        border: 1px solid var(--primary-50, #EAF8FF);
+        background: var(--primary-50, #EAF8FF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        display: flex;
+        padding: 10px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex: 1 0 0;
+        color: var(--primary-700, #009BF3);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+    }
+
+    .svg-icon1:hover:not(.svg-active) {
+        color: #ffff;
+    }
+
+    .btn-outline {
+        border: 1px solid lightgrey !important;
+        padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+    }
+
+    .footertext {
+        color: #000;
+        font-family: 'Inter';
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        text-align: right
+    }
+
+    .footer1 {
+        text-align: end;
+    }
+
+    ::ng-deep {
+        .mat-radio-button.mat-accent .mat-radio-inner-circle {
+            background-color: #009EF7 !important;
+        }
+
+        .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+            border-color: #009EF7 !important;
+        }
+
+        .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+            border-color: #009EF7 !important;
+        }
+
+        .mat-radio-button.mat-accent .mat-radio-inner-circle {
+            background-color: #009EF7 !important;
+        }
+
+        .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
+            background-color: rgba(29, 161, 242, 0.1);
+            color: #009ef7;
+        }
+
+        .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
+            background-color: #009ef7;
+        }
+
+        th.mat-header-cell:first-of-type,
+        td.mat-cell:first-of-type,
+        td.mat-footer-cell:first-of-type {
+            padding-right: none;
+
+        }
+
+        .sopTable {
+            input {
+                border: none;
+                padding: 0px !important;
+            }
+
+            input[type='checkbox'] {
+                width: 16px !important;
+                height: 16px !important;
+                margin: 5px;
+                border-radius: 4px !important;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                -o-appearance: none;
+                appearance: none;
+                outline: 1px solid var(--gray-600, #D0D5DD) !important;
+                box-shadow: none;
+                font-size: 0.5em;
+                text-align: center;
+                line-height: 1em;
+                background: white;
+            }
+
+            input[type='checkbox']:checked {
+                outline: 1px solid var(--primary-600, #00A3FF) !important;
+                background-color: var(--primary-50, #EAF8FF);
+            }
+
+            input[type='checkbox']:checked:after {
+                content: '';
+                transform: rotate(45deg);
+                border-bottom: 2px solid #00A3FF;
+                border-right: 2px solid #00A3FF;
+                display: inline-block;
+                width: 0.5em;
+                padding-left: 3px;
+                padding-top: 10px;
+                padding-right: 0px;
+            }
+        }
+
+        .card-body-sop {
+            border: 1px solid var(--gray-200, #EAECF0);
+            background: var(--white, #FCFCFD);
+            border-radius: 6px;
+        }
+    }
+
+    .schedule {
+        color: var(--gray-700, #344054);
+
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        /* 150% */
+    }
+
+    .user {
+        color: var(--gray-700, #344054);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        /* 142.857% */
+    }
+
+    .dropdown {
+        margin-left: -9%;
+    }
+
+    // .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
+    //     border: 0;
+    //     padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+    //     // background-color: #F2F4F7;
+    // }
+    // .nav-item
+    .pillstyle {
+        color: var(--gray-700, #344054);
+        text-align: center;
+
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        /* 142.857% */
+    }
+
+    // .editques {
+    //     margin-top: 60px !important;
+    //     position: absolute !important;
+
+    //  }
+    .leftcard {
+        position: relative;
+    }
+
+    .editques {
+        // margin-top: 60px !important;
+        position: absolute !important;
+        left: 12%;
+        transform: translateX(-5%);
+        bottom: 30px;
+
+    }
+
+    .orposition{
+        top:0px;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        text-align: center;
+    }
+
+    .questiontype {
+        color: var(--primary-700, #009BF3);
+        font-family: Inter;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        outline: none !important;
+        background-color: #F1FAFF !important;
+    }
+
+    .btn-left {
+        display: inline-block;
+        width: 100%;
+        font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+
+    }
+
+    .nav {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex: 1 0 0;
+        align-self: stretch;
+        --bs-nav-link-color: none;
+    }
+
+    .form-control.form-control-solid {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    .form-select.form-select-solid {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    .checklistturnoff {
+        border-radius: 8px;
+        border: 1px solid var(--gray-200, #EAECF0);
+        background: var(--white, #FFF);
+        display: flex;
+        padding: 16px;
+        align-items: flex-start;
+        align-self: stretch;
+    }
+
+    .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active) {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        display: flex;
+        padding: 10px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex: 1 0 0;
+    }
+
+
+    // .table {
+    //     height: 250px;
+    //     overflow: hidden;
+    // }
+
+    // .table:hover {
+    //     overflow: auto;
+    // }
+
+    // th.mat-header-cell {
+    //     text-align: start;
+    // }
+
+    // .sopTable th.mat-header-cell:first-of-type,
+    // .sopTable td.mat-cell:first-of-type,
+    // .sopTable td.mat-footer-cell:first-of-type {
+    //     // padding-left: 0px;
+    //     // min-width: 200px;
+    //     // display: flex;
+    //     height: 44px;
+    //     padding: 12px 24px;
+    //     align-items: center;
+    //     gap: 12px;
+    //     align-self: stretch;
+
+    // }
+
+    // th.mat-header-cell:first-of-type,
+    // td.mat-cell:first-of-type,
+    // td.mat-footer-cell:first-of-type {
+    //     // padding-left: 0px;
+    //     height: 44px;
+    //     padding: 12px 24px;
+    //     align-items: center;
+    //     gap: 12px;
+    //     align-self: stretch;
+    // }
+
+    .sopTable {
+        input {
+            border: none;
+            padding: 0px !important;
+        }
+
+        input[type='checkbox'] {
+            width: 16px !important;
+            height: 16px !important;
+            margin: 5px;
+            border-radius: 4px !important;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            -o-appearance: none;
+            appearance: none;
+            outline: 1px solid var(--gray-600, #D0D5DD) !important;
+            box-shadow: none;
+            font-size: 0.5em;
+            text-align: center;
+            line-height: 1em;
+            background: white;
+        }
+
+        input[type='checkbox']:checked {
+            outline: 1px solid var(--primary-600, #00A3FF) !important;
+            background-color: var(--primary-50, #EAF8FF);
+        }
+
+        input[type='checkbox']:checked:after {
+            content: '';
+            transform: rotate(45deg);
+            border-bottom: 2px solid #00A3FF;
+            border-right: 2px solid #00A3FF;
+            display: inline-block;
+            width: 0.5em;
+            padding-left: 3px;
+            padding-top: 10px;
+            padding-right: 0px;
+        }
+    }
+
+    // .sopTable table {
+    //     margin-top: 0px !important
+    // }
+
+    // .sopTable thead {
+    //     height: 44px !important;
+    //     padding: 12px 24px;
+    //     align-items: center;
+    //     gap: 12px;
+    //     align-self: stretch;
+    // }
+
+    // .sopTable tbody,
+    // .sopTable tfoot,
+    // .sopTable td,
+    // .sopTable th {
+    //     // border-bottom-width: 1px;
+    //     // border-bottom-style: dashed !important;
+    //     // border-bottom-color: #eff2f5;
+    //     border-bottom: 1px solid var(--gray-200, #EAECF0);
+    //     height: 72px;
+    //     // padding: 16px 24px;
+    //     align-items: center;
+    //     align-self: stretch;
+
+    // }
+
+    // .sopTable th,
+    // .sopTable td {
+    //     min-width: 130px !important;
+    // }
+
+    // .sopTable th span {
+    //     // padding: 0 0 0 10px;
+    //     text-align: start;
+    //     // font-size: 14px;
+    // }
+
+    // .sopTable td {
+    //     text-align: start;
+    // }
+
+    // .sopTable th span span {
+    //     padding: 0 0 0 10px;
+    //     text-align: start;
+    //     // font-size: 14px;
+    // }
+
+    // .sopTable .mat-header-cell {
+    //     font-size: 14px;
+    // }
+
+
+    // th.mat-header-cell {
+    //     // padding: 0px 26px;
+    //     text-align: start !important;
+    // }
+
+    .option {
+        font-weight: normal;
+        display: block;
+        // white-space-collapse: collapse;
+        // text-wrap: nowrap;
+        min-height: 1.2em;
+        padding: 0px 2px 1px;
+    }
+
+    .card hr {
+        width: -webkit-fill-available
+    }
+
+    .imgnodata1 {
+        // width: 45%;
+        // height: 45%
+        width: 216px;
+        height: 245px;
+    }
+
+    .editablecontent {
+        display: inline-block;
+        width: 230px;
+        white-space: nowrap;
+        outline: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+    }
+
+    #navfont {
+        font-size: 1.15rem !important;
+    }
+
+    .imgdata {
+        width: 50%;
+        height: 50%;
+    }
+
+    .imgnodata {
+        width: 312px;
+        height: 312px;
+        margin-top: -4%;
+    }
+
+    // .btn.btn-light:hover:not(.btn-active), .btn.btn-light:active:not(.btn-active), .btn.btn-light.active, .btn.btn-light.show, .show > .btn.btn-light {
+    //     border-radius: 8px;
+    //     border: 1px solid var(--gray-300, #D0D5DD);
+    //     background: var(--gray-50, #F9FAFB);
+
+    //     /* Shadow/xs */
+    //     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    // }
+
+    .card .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        flex-wrap: wrap;
+        min-height: 70px;
+        padding: 0 0.25rem;
+        background-color: transparent;
+        border-bottom: none;
+    }
+
+    ::ng-deep .mat-select {
+        background: #F5F8FA;
+        border-radius: 8px;
+    }
+
+    ::ng-deep .mat-select-value {
+        height: 42px;
+    }
+
+    ::ng-deep .multiselect-dropdown .dropdown-btn {
+        border: none !important;
+    }
+
+    ::ng-deep .multiselect-dropdown .dropdown-list {
+        border: none;
+        box-shadow: 0 1px 5px #959595;
+        margin-left: -12px;
+    }
+
+    ::ng-deep .multiselect-dropdown:focus-visible {
+        border: none !important;
+        box-shadow: 0 1px 5px #959595;
+        margin-left: -12px;
+        max-height: 250px;
+    }
+
+    // .form-check.form-check-solid .form-check-input {
+    //     border-radius: 6px;
+    //     border: 1px solid var(--primary-600, #00A3FF);
+    //     background: var(--primary-50, #EAF8FF);
+    //     // display: flex;
+    // width: 20px;
+    // height: 20px;
+    // padding: 3px;
+    // justify-content: center;
+    // align-items: center;
+    // }
+    // .form-check-input {
+    //     --bs-form-check-bg: var(--primary-600, #00A3FF);
+    // }
+
+    // .form-check.form-check-solid .form-check-input:checked {
+    //     border-radius: 6px;
+    //     border: 1px solid var(--primary-600, #00A3FF);
+    //     background: var(--primary-50, #EAF8FF);
+    // }
+    .custom-checkbox {
+        --checkbox-background-checked: white !important;
+        --checkmark-color: #009BF3;
+        --border-color: #009BF3;
+        --border-radius: 4px
+    }
+
+    .form-check.form-check-custom {
+        display: flex;
+        align-items: center;
+        padding-left: 0;
+        margin: 0;
+        padding: 12px 24px;
+        height: 44px;
+        padding: 12px 24px;
+        align-items: center;
+        gap: 12px;
+        align-self: stretch;
+    }
+
+    .tabsub {
+        color: var(--gray-500, #667085);
+
+        /* Text sm/Medium */
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        /* 142.857% */
+    }
+
+    .selectstore {
+        color: var(--primary-700, #009BF3);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        /* 142.857% */
+        text-decoration-line: underline;
+        text-transform: capitalize;
+    }
+
+    .headeralign {
+        color: var(--gray-500, #667085);
+        font-family: 'Inter';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        /* 150% */
+    }
+
+    .rotate {
+        transform: rotate(180deg);
+        transition: 1s;
+    }
+
+    //  td.mat-cell,
+    //  td.mat-footer-cell {
+    //      padding: 20px;
+    //      border-bottom-width: 1px;
+    //      border-bottom-style: solid;
+    //  }
+
+    // .btn.btn-active-primary:hover:not(.btn-active), .btn.btn-active-primary:active:not(.btn-active), .btn.btn-active-primary.active, .btn.btn-active-primary.show, .show > .btn.btn-active-primary {
+    //     color: #FFFFFF;
+    //     border-color: #009EF7;
+    //     background-color: #009EF7 !important;
+    // }
+    // .btn1:not(.btn1-outline):not(.btn1-dashed):not(.border-hover):not(.border-active):not(.btn1-flush):not(.btn1-icon) {
+    //     border: 0;
+    //     background-color: beige !important;
+    //     padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+    // }
+    // .btn.btn-light:hover:not(.btn1-active), .btn.btn-light:active:not(.btn1-active), .btn.btn-light.active, .btn.btn-light.show, .show > .btn.btn-light {
+    //         border-radius: 8px;
+    //         border: 1px solid var(--gray-300, #D0D5DD);
+    //         background: var(--gray-50, #F9FAFB);
+
+    //     }
+
+    .weekstyle {
+        border-radius: 20px;
+        background: var(--gray-100, #F2F4F7);
+    }
+
+    ::ng-deep {
+        .swal2-popup.swal2-toast .swal2-icon {
+            grid-column: 1;
+            grid-row: 1/99;
+            align-self: center;
+            // width: 5em;
+            min-width: 2em;
+            height: 0em;
+            margin: 0 0.5em 0 0;
+        }
+
+        .listitem {
+            // display: -webkit-box;
+            // display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: justify;
+            -ms-flex-pack: justify;
+            justify-content: space-between;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: #F3F6F9;
+            margin-top: 0.75rem;
+            border-radius: 0.42rem;
+
+        }
+
+        .list {
+            overflow-y: auto;
+            // height: 30%;
+        }
+
+        .listitemlabel {
+            font-size: 13px !important;
+            font-weight: 600;
+            font-family: "Inter";
+            color: #7E8299;
+
+        }
+
+
+        .swal2-container {
+            padding: 0.4em !important;
+        }
+
+        .swal2-icon {
+            border: 1px solid white !important
+        }
+
+        body.swal2-toast-shown .swal2-container {
+            width: 500px !important;
+
+        }
+
+        .swal2-popup.swal2-toast .swal2-title {
+            margin: 9px 5px auto !important;
+        }
+
+        .label {
+            color: #3F4254;
+            font-family: 'Inter';
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 140%;
+            /* 19.6px */
+        }
+
+        .form-check-input[disabled]~.form-check-label.spocName,
+        .form-check-input:disabled~.form-check-label.spocName {
+            opacity: unset !important;
+        }
+    }
+
+    tr.mat-header-row {
+        height: 56px;
+        border-bottom: 1px solid var(--gray-200, #EAECF0);
+        background: var(--gray-25, #FCFCFD);
+    }
+
+    .detectiontext {
+        color: var(--gray-700, #344054);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        /* 142.857% */
+    }
+
+    .alert{
+        border-radius: 16px;
+        background: var(--Gray-100, #F2F4F7);
+        .text{
+            color: var(--Gray-500, #667085);
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px; 
+        }
+    }
+
+    .alerttext {
+        color: var(--primary-600, #00A3FF);
+        text-align: center;
+
+        font-family: 'Inter';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        /* 150% */
+    }
+
+    .alertlabel {
+        // display: flex;
+        width: 24px;
+        height: 24px;
+        padding: 4px 0px 2px 0px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 200px;
+        background: var(--primary-50, #EAF8FF);
+    }
+
+    .create {
+        color: var(--white, #FFF);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+
+    }
+
+    .create1{
+        color: var(--Gray-700, #344054);
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+        text-transform: capitalize;
+    }
+
+    .createbuttons {
+        padding: 10px 18px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        border-radius: 8px;
+        border: 1px solid var(--primary-600, #00A3FF);
+        background: var(--primary-600, #00A3FF);
+
+        /* Shadow/xs */
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    .alertsinput {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300, #D0D5DD);
+        background: var(--white, #FFF);
+
+        /* Shadow/xs */
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        // display: flex;
+        padding: 10px 14px;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .usageerror {
+        display: block;
+        width: 255px;
+    }
+
+    // .addstore{
+    // width: 330px;
+    // }
+    .reupload {
+        // display: flex;
+        padding: 10px 18px !important;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        flex: 1 0 0;
+        border-radius: 8px;
+        border: 1px solid var(--primary-600, #00A3FF);
+        background: var(--primary-600, #00A3FF);
+        width: 220px;
+        cursor: pointer;
+
+        /* Shadow/xs */
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    }
+
+    .reuploadtext {
+        color: var(--White, #FFF);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+        cursor: pointer;
+    }
+
+    .download {
+        border-radius: 8px;
+        border: 1px solid var(--primary-50, #EAF8FF);
+        background: var(--primary-50, #EAF8FF);
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+        // display: flex;
+        padding: 10px 18px !important;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        width: 220px;
+
+    }
+
+    .downloadtext {
+        color: var(--primary-700, #009BF3);
+        font-family: 'Inter';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        /* 150% */
+        text-transform: capitalize;
+    }
+
+    .assignpadding {
+        padding: 0px 40px;
+    }
+
+    .uploadpadding {
+        padding: 0px 20% 9px;
+    }
+}
+
+
+::ng-deep {
+    .swal2-popup.swal2-toast .swal2-icon {
+        grid-column: 1;
+        grid-row: 1/99;
+        align-self: center;
+        // width: 5em;
+        min-width: 2em;
+        height: 0em;
+        margin: 0 0.5em 0 0;
+    }
+
+    .listitem {
+        // display: -webkit-box;
+        // display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        background-color: #F3F6F9;
+        margin-top: 0.75rem;
+        border-radius: 0.42rem;
+
+    }
+
+    // .section-left{
+    //     max-height: 50%;
+    //     overflow: auto;
+    //     overflow-x: hidden;
+    // }
+    .question-left {
+        max-height: 50vh;
+        overflow: auto;
+        overflow-x: hidden;
+    }
+
+    .toasttitile {
+        color: #3F4254;
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 140%;
+        // margin-top: -2%;
+        /* 19.6px */
+    }
+
+    .list {
+        overflow-y: auto;
+        // height: 30%;
+    }
+
+    .listitemlabel {
+        font-size: 13px !important;
+        font-weight: 600;
+        font-family: "Inter";
+        color: #7E8299;
+
+    }
+
+
+    .swal2-container {
+        padding: 0.4em !important;
+    }
+
+    .swal2-icon {
+        border: 1px solid white !important
+    }
+
+    body.swal2-toast-shown .swal2-container {
+        width: 500px !important;
+
+    }
+
+    // .swal2-popup.swal2-toast {
+    //     border-left: 4px solid #009EF7;
+    // }
+
+    .swal2-popup.swal2-toast .swal2-title {
+        margin: 9px 5px auto !important;
+    }
+
+    .label {
+        color: #3F4254;
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 140%;
+        /* 19.6px */
+    }
+}
+
+::ng-deep {
+    .matWidth {
+        margin-left: 12px;
+        margin-right: 12px;
+    }
+}
+
+::ng-deep .mat-tooltip {
+    white-space: pre-line; // Allow line break
+}
+
+::ng-deep .custom-test {
+    color: var(--gray-700, #344054) !important;
+    text-align: start;
+    font-family: 'Inter';
+    font-size: 12px;
+    font-style: normal;
+    border-radius: 8px;
+    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+    font-weight: 600;
+    line-height: 18px;
+    background: white;
+}
+
+.checkconfigcont .matChip-store {
+    height: 113px;
+    display: block;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.emailalert {
+    position: relative;
+    height: 500px !important;
+    overflow: auto !important;
+    overflow-x: hidden !important;
+}
+
+.emailalert1 {
+    overflow-y: auto !important;
+    height: 10% !important;
+    position: relative;
+}
+
+.active-question {
+    color: var(--primary-700, #009BF3);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    /* 150% */
+    display: flex;
+    padding: 8px 12px;
+    align-items: center;
+    gap: 105px;
+    align-self: stretch;
+    border-radius: 6px;
+    background: var(--primary-50, #EAF8FF);
+    /* 150% */
+    /* 150% */
+}
+
+// .q-btn:not(.q-btn-outline):not(.q-btn-dashed):not(.border-hover):not(.border-active):not(.q-btn-flush):not(.q-btn-icon).q-btn-sm, .q-btn-group-sm > .q-btn:not(.q-btn-outline):not(.q-btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.q-btn-icon) {
+//     color: var(--primary-700, #009BF3);
+//     font-size: 16px;
+//     font-style: normal;
+//     font-weight: 500;
+//     line-height: 24px;
+//     /* 150% */
+//     display: flex;
+//     padding: 8px 12px;
+//     align-items: center;
+//     gap: 105px;
+//     align-self: stretch;
+//     border-radius: 6px;
+//     background: var(--primary-50, #EAF8FF);
+//     /* 150% */
+// }
+
+.q-btn {
+    color: var(--gray-700, #344054);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    display: flex;
+    padding: 8px 12px;
+    align-items: center;
+    gap: 105px;
+    align-self: stretch;
+    border-radius: 6px;
+    background: var(--primary-50, white);
+}
+
+.concise-question {
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    text-align: left;
+}
+
+@media screen and (min-width: 1400px) {
+    .emailalert {
+        position: relative;
+        height: 700px !important;
+        overflow: auto !important;
+        overflow-x: hidden !important;
+    }
+}
+
+::ng-deep {
+    .swal2-html-container {
+        overflow: hidden !important;
+    }
+}
+
+.badgeColor {
+    background-color: #FFFAEB !important;
+    color: #B54708 !important;
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: center;
+}
+
+.config-heading {
+    color: var(--Gray-900, #101828);
+    font-family: 'Inter';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+    width: 35%;
+}
+
+.ps-20 {
+    padding-left: 7rem !important;
+}
+
+.ps-18 {
+    padding-left: 6.5rem !important;
+}
+
+.remove {
+    color: var(--Gray-500, #667085);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    /* 150% */
+    text-decoration-line: underline;
+    text-transform: capitalize;
+}
+
+.fw-400{
+    font-weight: 400;
+}
+
+.chip-container {
+    margin-top: 10px;
+}
+
+.mat-chip {
+    margin: 5px;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    z-index: 1000;
+    display: block;
+    box-sizing: border-box;
+    height: 0%;
+}
+
+.dropdown-item {
+    padding: 8px 12px;
+}
+
+.dropdown-item:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown-item input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.custom-dropdown-menu {
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.custom-dropdown-item {
+    display: flex;
+    align-items: center;
+
+}
+
+.custom-dropdown-item input {
+    margin-left: 10px;
+}
+
+.btn-resize {
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 3px !important;
+}
+
+.formSeach {
+    width: 95%
+}
+
+.nav-item{
+    .nav-link{
+        color: var(--Gray-500, #667085);
+        font-size: 16px;
+        font-weight: 500;
+    }
+    .nav-link:hover{
+        border-bottom: none !important;
+    }
+    .nav-link.active{
+        border-radius: 10px !important;
+       border-bottom: none !important;
+    }
+    .bg-light-primary{
+        background: var(--Primary-50, #EAF8FF) !important;
+    }
+
+  }
+
+.storetext {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.position-relative {
+    position: relative !important;
+}
+
+
+/* Content Wrapper */
+.content {
+    background-color: #fff;
+    /* Light grey background */
+    padding: 10px 22px 10px 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.badge-pill {
+    display: flex;
+    padding: 2px 6px 2px 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    border-radius: 16px;
+    background: var(--Gray-100, #F2F4F7);
+}
+
+//   .badge-specificdate{
+//     max-width: 100%;
+//   overflow-x: auto; 
+//   white-space: nowrap !important; 
+//   width: 50%;
+//   }
+.badge-specificdate {
+    max-width: 100%;
+    overflow-x: hidden;
+    white-space: normal;
+    // width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.badge-specificdate .badge {
+    margin-bottom: 8px;
+}
+
+.bg-color-disabled {
+    color: var(--Gray-500, #667085) !important;
+    /* Text sm/Regular */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+a.cursor-default {
+    cursor: default !important;
+    background-color: unset !important;
+}
+
+.form-control.form-control-solid.disabled {
+    background-color: #eef3f7 !important;
+}
+
+.plain-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    color: var(--black, #101828);
+    text-overflow: ellipsis;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px;
+
+    /* 155.556% */
+    &:focus {
+        border-radius: 0px !important;
+        border: white !important;
+        outline: none !important;
+        box-shadow: none !important;
+    }
+}
+
+.daterangepicker {
+    display: block !important;
+    top: 153.85px !important;
+    left: 900px !important;
+    right: 0px;
+}
+
+.form-control {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600;
+    line-height: 20px;
+    text-transform: capitalize;
+}
+
+::ng-deep .applyBtn {
+    display: none !important;
+}
+
+.wrapper {
+    min-width: 200px;
+}
+
+.btn-primary {
+    line-height: 18px !important;
+}
+
+.selectDay {
+    background-color: var(--bs-primary) !important;
+}
+
+a.selectDay span {
+    color: white !important;
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+}
+
+tr th .form-check-label,
+tr td .form-check-label {
+    color: var(--Gray-700, #344054) !important;
+}
+
+:host::ng-deep {
+    .schedule {
+        .md-drppicker .btn {
+            line-height: 10px !important;
+        }
+
+        .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+            display: none;
+        }
+
+        .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+            top: 65px !important;
+        }
+
+        .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+            top: 65px !important;
+            right: -475px !important;
+            left: unset !important;
+            height: 400px !important;
+        }
+
+        .md-drppicker .btn {
+            border-radius: 8px !important;
+            border: 1px solid var(--Primary-600, #00A3FF) !important;
+            background: var(--Primary-600, #00A3FF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--White, #FFF) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+        }
+
+        .md-drppicker .ranges ul li button {
+            padding: 12px 16px;
+            width: 160px;
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            background: none;
+            border: none;
+            text-align: left;
+            cursor: pointer;
+        }
+
+        .md-drppicker td.active,
+        .md-drppicker td.active:hover {
+            background-color: #029cf4 !important;
+            border-radius: 20px !important;
+            color: var(--White, #FFF) !important;
+            text-align: center !important;
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px;
+        }
+
+        .md-drppicker.ltr .ranges {
+            float: left;
+            margin-top: 10px !important;
+        }
+
+        .md-drppicker td.in-range {
+            background: var(--Primary-50, #EAF8FF);
+        }
+
+        .md-drppicker .ranges ul li button.active {
+            background: var(--Primary-50, #EAF8FF) !important;
+            border-radius: 8px !important;
+            color: var(--Primary-700, #009BF3);
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px !important;
+        }
+
+        table th,
+        table td {
+            width: 40px !important;
+            height: 40px !important;
+            padding: 10px 8px !important;
+        }
+
+        .md-drppicker td.available.prev,
+        .md-drppicker th.available.prev {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        .md-drppicker td.available.next,
+        .md-drppicker th.available.next {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        table th {
+            border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+            background: transparent !important;
+            color: var(--Gray-700, #344054) !important;
+            text-align: center;
+            font-size: 16px !important;
+            font-weight: 500 !important;
+            line-height: 24px;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right: 10px !important;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+    }
+}
+.fontSize {
+    font-size:14px;
+}
+
+.margin {
+    margin-top: 2px;
+}
+
+.w-20 {
+    width:20% !important
+}
+
+.w-80 {
+    width:80% !important
+}
+
+.approver {
+    color: var(--gray-700, #101828);
+    font-family: "Inter";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+.line-height {
+    line-height:25px;
+}
+
+.storeAssign {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.selected-radio{
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+}
+
+.lineHeight {
+    line-height: 27px;;
+}
+.table-header{
+    color: var(--Gray-800, #1D2939);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+.text-error{
+    color: var(--Error-700, #B42318) !important;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+.excel-error{
+    color: var(--Error-600, #D92D20);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+.error-heading{
+    color: var(--Error-600, #D92D20);
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 30px; 
+}
+.border-error{
+    border: 1px solid var(--Error-300, #FDA29B) !important;
+    background: var(--Error-25, #FFFBFA) !important;
+}
+
+.popup-card{
+    border-radius: 6px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: #FFF;
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+}
+
+.schedule-config-header {
+    color: var(--Black, #101828);
+    /* Text md/Semibold */
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+}
+
+.schedule-config-description {
+    color: var(--Gray-500, #667085);
+    /* Text xs/Medium */
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px; /* 150% */
+}
+
+.schedule-config-sub-header {
+    color: var(--Black, #101828);
+    /* Text md/Medium */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px; /* 150% */
+}
+
+.advancedConfigureAcite{
+    // border-radius: 8px;
+    border: 1px solid var(--Primary-300, #6BCAFF) !important;
+    background: var(--Primary-50, #EAF8FF);
+}
+.bg-light-custom { background-color: #f8fafc; min-height: 100vh; }
+
+.config-card {
+  background: #fff;
+  border: 1px solid #eef2f6;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
+}
+
+.extra-small { font-size: 0.75rem; }
+
+/* Tags & Chips */
+.tag-input-box {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fcfcfd;
+  min-height: 45px;
+}
+
+.badge-tag {
+  background: #e9ecef;
+  color: #475467;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+}
+
+.chip-container {
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  background: #fff;
+  min-height: 38px;
+  align-items: center;
+  padding-left: 10px !important;
+}
+
+.user-chip {
+  background: #f0f9ff;
+  border: 1px solid #e0f2fe;
+  border-radius: 6px;
+  padding: 2px 8px;
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+}
+
+.user-chip .initials { color: #0ea5e9; font-weight: bold; margin-right: 6px; }
+.user-chip .name { color: #344054; }
+
+/* Alert Box Styling */
+.info-banner {
+  background: #f1f5f9;
+  padding: 10px 15px;
+  border-radius: 10px;
+  font-size: 0.85rem;
+  color: #64748b;
+}
+
+.threshold-inner-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 15px;
+  position: relative;
+}
+
+.floating-icon {
+  position: absolute;
+  top: -22px;
+  right: 25%;
+  width: 44px;
+  height: 44px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+}
+
+.sub-config-box {
+    border: 1px solid #f1f5f9;
+    border-radius: 12px;
+}
+
+/* Switch customization to match blue in image */
+.form-check-input:checked {
+  background-color: #0ea5e9;
+  border-color: #0ea5e9;
+}
+
+.cursor-pointer { cursor: pointer; }
+
+
+
+/* Time Input Styling */
+.time-input-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.time-field {
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    padding: 8px 12px;
+    padding-right: 35px; /* space for icon */
+    font-weight: 500;
+    color: #334155;
+    width: 120px;
+}
+
+.time-input-wrapper i {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #334155;
+    pointer-events: none;
+    font-size: 1.1rem;
+}
+
+/* Custom Switch Color */
+.custom-switch {
+    width: 3em !important;
+    height: 1.5em !important;
+    cursor: pointer;
+}
+
+.form-check-input:checked {
+    background-color: #0095ff; /* Vibrant blue from image */
+    border-color: #0095ff;
+}
+
+/* Select Styling */
+.form-select {
+    border-radius: 8px;
+    padding: 8px 29px 8px 15px;
+    border: 1px solid #dee2e6;
+}
+
+/* Animations */
+.animate-fade-in {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Remove default browser icon for type="time" */
+// input[type="time"]::-webkit-calendar-picker-indicator {
+//     background: transparent;
+//     bottom: 0;
+//     color: transparent;
+//     cursor: pointer;
+//     height: auto;
+//     left: 0;
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     width: auto;
+// }
+/* Color Palette */
+.text-dark-blue { color: #1e293b; }
+.text-secondary-blue { color: #334155; }
+
+/* Custom Blue Switch */
+.custom-switch {
+  width: 3.2em !important;
+  height: 1.6em !important;
+  cursor: pointer;
+}
+
+.form-check-input:checked {
+  background-color: #0ea5e9; /* Vibrant blue from screenshot */
+  border-color: #0ea5e9;
+}
+
+/* Custom Select Dropdown */
+.custom-select {
+  width: 70px;
+  height: 48px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  text-align: center;
+  padding: 0 10px;
+  font-weight: 500;
+  background-color: #fff;
+  color: #334155;
+}
+
+/* Summary Text Style */
+.summary-text {
+  color: #475569;
+  font-size: 0.95rem;
+  font-weight: 500;
+  margin-top: 1.5rem;
+}
+
+/* Entry Animation */
+.fade-in {
+  animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+
+/* Color Palette */
+.text-dark-blue { color: #334155; }
+.text-secondary-blue { color: #475569; }
+
+/* Info Banner Styling */
+.info-banner {
+  background-color: #f1f5f9;
+  border-radius: 12px;
+  color: #64748b;
+}
+
+.small-text {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* Inner Container Styling */
+.threshold-container {
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background-color: #ffffff;
+}
+
+.description-text {
+  font-size: 0.8rem;
+  color: #94a3b8;
+}
+
+/* Custom Toggle Switch */
+.custom-switch {
+  width: 2.8em !important;
+  height: 1.4em !important;
+  cursor: pointer;
+}
+
+.form-check-input:checked {
+  background-color: #38bdf8; /* Soft blue */
+  border-color: #38bdf8;
+}
+
+/* Custom Select Dropdown */
+.custom-select {
+  width: 75px;
+  height: 42px;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  text-align: center;
+  font-weight: 500;
+  color: #334155;
+  cursor: pointer;
+  background-color: #fff;
+}
+
+.custom-select:focus {
+  border-color: #cbd5e1;
+  box-shadow: none;
+}
+.checklistDescription{
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+    letter-spacing: 0%;
+}
+
+
+// The white card background
+.config-card {
+  background-color: white;
+  border-radius: 20px;
+  width: 100%;
+}
+
+// Customize Bootstrap Switch to match the blue in the image
+
+
+// Customize Select boxes
+.custom-select {
+  border-radius: 8px;
+  border: 1px solid #dee2e6;
+  padding: 8px 16px;
+  min-width: 68px;
+  font-weight: 500;
+  
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba(0, 149, 255, 0.1);
+    border-color: #0095ff;
+  }
+}
+.custom-select1 {
+  border-radius: 8px;
+  border: 1px solid #dee2e6;
+  padding: 8px 23px;
+  min-width: 68px;
+  font-weight: 500;
+  
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba(0, 149, 255, 0.1);
+    border-color: #0095ff;
+  }
+}
+
+// Text colors
+h2, h6 {
+  color: #1a202c;
+}
+
+.text-secondary {
+  color: #718096 !important;
+}