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

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

@@ -0,0 +1,1205 @@
+.checklist-card div,
+input[type=text]:not(.plain-input),
+input[type=time],
+input[type=number],
+select {
+    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;
+    line-height: 24px;
+}
+
+.checklist-card input {
+    padding-right: 20%;
+}
+
+.card {
+    border-radius: 16px;
+}
+
+.row>* {
+    padding-right: 0px;
+}
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+input[type="checkbox"]:focus {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+input:focus {
+    border: #F9FAFB !important;
+    outline: 1px solid var(--primary-300, #6BCAFF);
+    box-shadow: 0px 0px 0px 4px #D5EFFE, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #101828;
+}
+
+select {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    height: 45px;
+    width: 100%;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
+    background-position: 100%;
+    background-repeat: no-repeat;
+}
+
+select:focus {
+    border: #F9FAFB !important;
+    outline: 1px solid var(--primary-300, #6BCAFF);
+    box-shadow: 0px 0px 0px 4px #D5EFFE, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #101828;
+}
+
+// .checklist-card {
+//     cursor: pointer;
+// }
+
+textarea:focus {
+    // border:2px solid #009BF3;
+    border: #F9FAFB !important;
+    outline: 1px solid var(--primary-300, #6BCAFF);
+    box-shadow: 0px 0px 0px 4px #D5EFFE, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #101828;
+}
+
+textarea,
+select {
+    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;
+    line-height: 24px;
+}
+
+.btn-outline {
+    border: 1px solid lightgrey;
+    padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+}
+
+.btn-light-primary {
+    color: var(--primary-700, #009BF3);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+    text-transform: capitalize;
+}
+
+.newbutton {
+    border: 1px solid lightgrey;
+    padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+    color: #000;
+    background-color: white;
+}
+
+.newbutton:hover,
+.newbutton:active {
+    background-color: #009BF3;
+    color: white;
+}
+
+.btn.btn-light-primary:hover:not(.btn-active),
+.btn-light-primary:active {
+    color: var(--primary-700, #009BF3);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    outline: none !important;
+    background-color: #d1f0ff82 !important;
+}
+
+.ml-5 {
+    margin-left: 10px;
+}
+
+.pl-5 {
+    padding-left: 10px !important;
+}
+
+.btn-left {
+    display: inline-block;
+    width: 100%;
+    font-size: 16px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+
+}
+
+.card hr {
+    width: -webkit-fill-available
+}
+
+.card {
+    height: 100% !important;
+}
+
+.rotate {
+    transform: rotate(180deg);
+    transition: 1s;
+}
+
+.hidesec {
+    visibility: hidden;
+    opacity: 0.1;
+    transition: 1s;
+}
+
+.fs-16px {
+    font-size: 16px;
+}
+
+.card svg {
+    margin-left: 5px !important;
+    cursor: pointer;
+}
+
+.form-switch {
+    padding-left: 5px !important;
+}
+
+.form-check-label {
+    padding-left: 5px !important;
+}
+
+.webkitwidth {
+    width: -webkit-fill-available
+}
+
+.fs-18px {
+    font-size: 18px;
+    color: var(--black, #000);
+    font-family: inter;
+}
+
+.Answer1,
+.Answer2 {
+    .checklist-card {
+        position: relative;
+    }
+
+    svg {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+    }
+
+    .imgAdd {
+        position: absolute;
+        top: 13px !important;
+        right: 57px !important;
+    }
+
+    .flag {
+        color: red !important;
+    }
+
+    .flag>.flag-path {
+        fill: red !important;
+        stroke: red;
+    }
+
+    .vl {
+        position: absolute;
+        top: 1px;
+        right: 45px;
+        border-left: 1px solid #D0D5DD;
+        height: 43px;
+    }
+
+    .vl2 {
+        position: absolute;
+        top: 1px;
+        right: 90px;
+        border-left: 1px solid #D0D5DD;
+        height: 43px;
+    }
+}
+
+.Answer1 svg:hover,
+.Answer2 svg:hover {
+    fill: #D0D5DD !important;
+}
+
+.editablecontent {
+    display: inline-block;
+    // width: 128px;
+    max-width: 60ch;
+    white-space: nowrap;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.editablecontent-left {
+    display: inline-block;
+    width: 180px;
+    white-space: nowrap;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+[contenteditable] {
+    outline: 0px solid transparent;
+}
+
+.min-width-popup {
+    min-width: 46% !important;
+}
+
+.max-w-128px {
+    max-width: 128px;
+}
+
+.fw-600 {
+    font-weight: 600 !important;
+}
+
+.fw-400 {
+    font-weight: 400;
+}
+
+.footer1 {
+    span {
+        color: #000;
+        font-family: 'inter';
+        font-size: 14px;
+        font-weight: 500px;
+        line-height: 20px;
+    }
+
+    a {
+        font-family: 'inter';
+        font-size: 14px;
+        font-weight: 600;
+        text-decoration: underline;
+        color: var(--primary-700, #009BF3);
+    }
+
+    a:hover {
+        color: var(--primary-700, #009BF3);
+        text-decoration-line: underline !important;
+        text-decoration-thickness: 1px !important;
+    }
+}
+
+.btn-sec {
+    color: var(--gray-700, #344054) !important;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500 !important;
+    line-height: 24px;
+}
+
+.form-check-label {
+    color: var(--gray-700, #344054) !important;
+}
+
+.question-left {
+    max-height: 63vh;
+    overflow: auto;
+    overflow-x: hidden;
+}
+
+.Question-sec {
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid var(--gray-300, #D0D5DD);
+    background: var(--gray-50, #F9FAFB);
+    width: 100%;
+    padding: 24px 16px 16px 16px;
+
+    .questiontitle {
+        position: absolute;
+        top: -15px;
+        background-color: white;
+        border: 1px solid var(--gray-300, #D0D5DD) !important;
+        border-radius: 8px;
+    }
+
+    h3 {
+        color: var(--gray-700, #344054);
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 20px;
+        margin-bottom: 0px !important;
+    }
+
+    .fs16-600 {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+    }
+
+    p {
+        color: var(--gray-500, #667085);
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+    }
+}
+
+.swal2-confirm {
+    font-family: 'Inter' !important;
+    font-size: 30px !important;
+    background-color: var(--white, #FFF) !important;
+    border: solid var(--gray-300, #D0D5DD) !important;
+}
+
+.Overlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 200 !important;
+    position: fixed;
+    // background: #494a4a;
+    // opacity:0.1;
+    background: rgba(88, 87, 87, 0.6);
+    // background: transparent;
+}
+
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 1;
+    transform: translate(-50%, -50%);
+    background: var(--white, #FFF);
+    border-radius: 12px !important;
+    border-radius: 12px;
+    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+    padding: 30px;
+    width: 400px;
+    height: fit-content;
+}
+
+.kiwi:hover {
+    fill: rgb(208, 213, 221) !important;
+    stroke: rgb(208, 213, 221) !important;
+
+    path {
+        fill: rgb(208, 213, 221) !important;
+        stroke: rgb(208, 213, 221) !important;
+    }
+}
+
+.kiwi {
+    fill: white !important;
+    stroke: rgb(208, 213, 221) !important;
+
+    path {
+        fill: white !important;
+        stroke: rgb(208, 213, 221) !important;
+    }
+}
+
+.kiwi:active {
+    fill: rgb(208, 213, 221) !important;
+    stroke: rgb(208, 213, 221) !important;
+
+    path {
+        fill: rgb(208, 213, 221) !important;
+        stroke: rgb(208, 213, 221) !important;
+    }
+}
+
+.active-flag {
+    fill: red !important;
+    stroke: red !important;
+
+    path {
+        fill: red !important;
+        stroke: red !important;
+    }
+}
+
+.active-flag:active {
+    fill: red !important;
+    stroke: red !important;
+
+    path {
+        fill: red !important;
+        stroke: red !important;
+    }
+}
+
+.toasttitile {
+    color: #3F4254;
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%;
+    // margin-top: -2%;
+    /* 19.6px */
+}
+
+.ref_del_icon {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    transform: translate(50%, -50%);
+    padding: 6px;
+    border-radius: 8px;
+    border: 1px solid var(--error-50, #FEF3F2);
+    background: var(--error-50, #FEF3F2);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+    svg {
+        margin: 0px !important;
+    }
+}
+
+.ref_img_cont {
+    position: relative;
+}
+
+//   .swal_ding {
+//     overflow-x: hidden !important;
+//   }
+::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;
+
+    }
+
+    .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 .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;
+}
+
+.text-gray-700 {
+    color: #344054 !important;
+}
+
+.mandatoryfield,
+.answervalidation {
+    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;
+    }
+}
+
+.concise-checklistname {
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    text-transform: capitalize;
+}
+
+.concise-question {
+    display: inline-block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    text-align: left;
+}
+
+.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 {
+    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);
+}
+
+// .left-panel-container {
+//     overflow-y: scroll;
+//     max-height: 400px;
+// }
+
+.pointer {
+    cursor: pointer;
+}
+
+select {
+    option {
+        padding: 4px;
+    }
+}
+
+.add-ref-btn {
+    border-radius: 8px;
+    border: 1px solid var(--primary-50, #EAF8FF);
+    // background: var(--primary-50, #EAF8FF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    padding: 14px 0px !important;
+}
+
+
+::ng-deep {
+
+    .form-switch {
+        .form-check-input {
+            border: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E") !important;
+            // background: var(--gray-100, #F2F4F7);
+            // &:checked {
+            //     filter: none;
+            //     background-image: escape-svg($form-switch-checked-bg-image);
+            // }
+        }
+
+        .form-check-input:not(:checked) {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E") !important;
+            background-color: var(--gray-100, #F2F4F7) !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;
+    }
+}
+
+.auto-adjust {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    background-color: white;
+}
+
+.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);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.create {
+    color: var(--white, #FFF);
+    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;
+}
+
+//  ::ng-deep {
+.questionsArea {
+    overflow-y: scroll;
+    // max-height: 60vh;
+    padding: 4px;
+}
+
+::ng-deep {
+
+    .questionsArea::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px !important;
+        border-radius: 10px !important;
+        background: var(--gray-100, #eaeaea) !important;
+        height: 50px !important;
+    }
+
+    .questionsArea::-webkit-scrollbar {
+        width: 10px !important;
+    }
+
+    .questionsArea::-webkit-scrollbar-track {
+        background: none !important;
+        box-shadow: none !important;
+    }
+}
+
+::ng-deep {
+    .swal2-html-container {
+        overflow: hidden !important;
+    }
+}
+
+.ansoptions {
+    color: var(--gray-700, #344054);
+    font-family: "Inter";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.checklist {
+    font-family: Inter;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: left;
+    color:#667085 !important;
+}
+
+.checklistDescription {
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: left;
+}
+
+.dscriptiveType {
+    font-size:15px !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;
+        }
+    }
+
+
+}
+
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+ 
+.base-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+ 
+.overlay-icons {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  gap: 10px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+ 
+.image-container:hover .overlay-icons {
+  opacity: 1;
+}
+ 
+.overlay-icons button {
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  padding: 10px;
+  cursor: pointer;
+}
+ 
+.overlay-icons button:hover {
+  background: rgba(255, 255, 255, 1);
+}
+
+.btn-light-disbaled {
+    color: var(--Primary-300, #6BCAFF) !important;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px; /* 142.857% */
+    text-transform: capitalize;
+}
+
+.borderCard {
+    border-radius: 8px;
+    border: 1px solid var(--Primary-25, #F6FCFF);
+    background: var(--Primary-25, #F6FCFF);
+    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+}
+
+:host::ng-deep {
+    #checklistCreate {
+        .md-drppicker .dropdowns:first-child {
+            width:115px  !important
+        }
+        
+        .md-drppicker .dropdowns:nth-child(2) {
+            width:56px  !important
+        }
+        .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;
+        }
+        
+        .daterangepicker {
+            display: block !important;
+            top: 153.85px !important;
+            left: 900px !important;
+            right: 0px;
+        }
+    }
+
+}
+
+.rangeText {
+    font-family: Inter;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0%;
+    color: #101828;
+    margin-top: 10px;
+    color:#101828
+}
+
+.dropText {
+    color:#101828;
+    font-family: Inter;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0%;
+}
+
+.limitTooltipText {
+    font-family: Inter;
+    font-weight: 400;
+    font-style: Italic;
+    font-size: 12px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color:#667085
+}
+
+.limitComplianceText {
+    font-family: Inter;
+    font-weight: 500;
+    font-style: Italic;
+    font-size: 14px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    color:#667085
+}