@edvak99/voice-receptionist-widget 1.1.13 → 1.1.14

package/src/styles.scss

@@ -0,0 +1,3651 @@
+/* Global stylesheet for @edvak99/voice-receptionist-widget.
+ * Loaded once via package entry: @use '@edvak99/voice-receptionist-widget/styles'
+ * (styles/_index.scss → this file). Do not import per-component.
+ */
+
+@use "tailwindcss/base";
+@use "tailwindcss/components";
+
+@use "./assets/fonts/inter.css";
+@use "./assets/fonts/lato.css";
+@use "./assets/css/main-layout";
+@use "./assets/css/alerts";
+@use "./assets/css/colors";
+@use "./assets/css/focus";
+@use "./assets/css/avatar";
+@use "./assets/css/buttons";
+@use "./assets/css/smooth-scrollbar";
+@use "./assets/css/badge";
+@use "./assets/css/checkbox_radio";
+@use "./assets/css/customfile_upload";
+@use "./assets/css/custom-elements";
+@use "./assets/css/date_picker";
+@use "./assets/css/headings";
+@use "./assets/css/input";
+@use "./assets/css/patient-portal-disclaimer-global";
+@use "./assets/css/task-description-tiptap-global";
+@use "./assets/css/list";
+@use "./assets/css/ng-select";
+@use "./assets/css/select";
+@use "./assets/css/tables";
+@use "./assets/css/api-log-chips";
+@use "./assets/css/tabs";
+@use "./assets/css/tag";
+@use "./assets/css/shoelace-edit";
+@use "./assets/css/animation";
+@use "./assets/css/zindex";
+@use "./assets/css/tour-guide";
+@use "./assets/css/smart-scroll";
+@use "./assets/css/Ed_style.scss";
+@use "./assets/css/resize-handler.directive";
+
+@use "tailwindcss/utilities";
+
+@forward "./assets/css/root";
+
+//    html, body {
+//         word-break: break-word;
+//         overflow-wrap: break-word;
+//    }
+
+html {
+    height: 100%;
+    overflow-wrap: break-word;
+}
+
+.break-text {
+    word-break:break-word;
+}
+
+body {
+    @apply text-body;
+    min-height: 100vh;
+    height: 1px;
+    font-size: var(--font-size-base);
+    font-weight: 400;
+    font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    // font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+// TRYING TO REMOVE DEFAULT STYLES FROM CHROME AUTO FILL INPUT
+input.no-styles:-webkit-autofill {
+    border: none !important;
+    -webkit-text-fill-color: black !important;
+    background-color: white !important;
+    -webkit-box-shadow: 0 0 0px 0px gray inset;
+    transition: background-color 5000s ease-in-out 0s;
+}
+
+.print-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    visibility: hidden;
+}
+
+option {
+    font-family: 'Inter', sans-serif;
+    padding: 4px 0;
+}
+
+div,
+p,
+span,
+li {
+    font-size: inherit;
+}
+
+[role="button"],
+[role="tab"],
+button,
+a {
+    cursor: pointer;
+}
+
+.cursor-not-allowed {
+    cursor: not-allowed;
+
+    &[role="button"],
+    &[role="tab"] {
+        cursor: not-allowed;
+    }
+}
+
+
+@layer base {
+    // div, span, td, th
+        // p {
+        //   overflow-wrap: anywhere;
+        // }
+    pre {
+        @apply whitespace-pre-wrap break-words overflow-auto;
+    }
+
+    th {
+        white-space: nowrap;
+    }
+    .pre-font{
+        font-family: 'Inter', sans-serif;
+    }
+}
+
+@layer components {
+
+    /* BUTTON COMPONENT STYLES */
+    .btn {
+        @apply inline-flex items-center justify-center px-6 rounded focus:outline-primary;
+        height: var(--height-default);
+    }
+
+    .btn:hover {
+        transition: background-color 300ms linear;
+    }
+
+    .is-rounded {
+        border-radius: 999px;
+    }
+
+    .btn.is-sm {
+        @apply px-2 text-sm;
+        height: var(--height-sm);
+    }
+
+    .btn.is-md {
+        @apply px-10 text-base;
+        height: var(--height-md);
+    }
+
+    .btn.is-lg {
+        @apply px-14 text-lg;
+        height: var(--height-lg)
+    }
+
+    /* PRIMARY BUTTON VARIATIONS */
+    .btn.is-primary {
+        @apply text-white font-medium bg-primary;
+    }
+
+    .btn.is-primary:hover {
+        background-color: var(--btn-primary-hover-bg);
+    }
+
+    .btn.is-primary.is-outline {
+        background-color: var(--btn-primary-outline-bg);
+        border-color: var(--btn-primary-outline-border);
+        border-width: 1px;
+        color: var(--btn-primary-outline-text);
+    }
+
+    .btn.is-primary.is-outline:hover {
+        background: var(--btn-primary-outline-hover-bg);
+    }
+
+    .btn.is-primary.is-text {
+        background-color: var(--btn-primary-text-bg);
+        color: var(--btn-primary-text-text);
+    }
+
+    .btn.is-primary.is-text:hover {
+        background-color: var(--btn-primary-text-hover-bg);
+        color: var(--btn-primary-text-hover-text);
+    }
+
+
+
+    /* SECONDARY BUTTON VARIATIONS */
+    .btn.is-secondary {
+        background-color: var(--btn-secondary-bg);
+        color: var(--btn-secondary-text);
+    }
+
+    .btn.is-secondary:hover {
+        background-color: var(--btn-secondary-hover-bg);
+        color: var(--btn-secondary-hover-text);
+    }
+
+
+.btn.is-secondary.is-outline {
+        background-color: var(--btn-secondary-outline-bg);
+        border-color: var(--btn-secondary-outline-border);
+        border-width: 1px;
+        color: var(--btn-secondary-outline-text);
+    }
+
+    .btn.is-secondary.is-outline:hover {
+        background-color: var(--btn-secondary-outline-hover-bg);
+        color: var(--btn-secondary-outline-hover-text);
+    }
+
+    .btn.is-secondary.is-text {
+        background-color: var(--btn-secondary-text-bg);
+        color: var(--btn-secondary-text-text);
+    }
+
+    .btn.is-secondary.is-text:hover {
+        background-color: var(--btn-secondary-text-hover-bg);
+        color: var(--btn-secondary-text-hover-text);
+    }
+
+
+
+
+    /* TETRIARY BUTTON VARIATIONS */
+    .btn.is-tetriary {
+        background-color: var(--btn-tetriary-bg);
+        color: var(--btn-tetriary-text);
+    }
+
+    .btn.is-tetriary:hover {
+        background-color: var(--btn-tetriary-hover-bg);
+        color: var(--btn-tetriary-hover-text);
+    }
+
+    .btn.is-tetriary.is-outline {
+        background-color: var(--btn-tetriary-outline-bg);
+        border-color: var(--btn-tetriary-outline-border);
+        border-width: 1px;
+        color: var(--btn-tetriary-outline-text);
+    }
+
+    .btn.is-tetriary.is-outline:hover {
+        color: var(--btn-tetriary-outline-hover-bg);
+        background-color: var(--btn-tetriary-outline-hover-text);
+    }
+
+    .btn.is-tetriary.is-text {
+        background-color: var(--btn-tetriary-text-bg);
+        color: var(--btn-tetriary-text-text);
+    }
+
+    .btn.is-tetriary.is-text:hover {
+        background-color: var(--btn-tetriary-text-hover-bg);
+        color: var(--btn-tetriary-text-hover-text);
+    }
+
+    .btn.is-success {
+        background-color: var(--color-success);
+        color: white;
+    }
+
+    .btn.is-danger {
+        background-color: var(--color-danger);
+        color: white;
+    }
+
+    .btn.is-warning {
+        background-color: var(--color-warning);
+        color: white;
+    }
+
+    .btn.is-info {
+        background-color: var(--color-info);
+        color: white;
+    }
+
+    .btn-cal {
+        @apply border border-transparent h-8 w-8 inline-flex justify-center items-center cursor-pointer focus:outline-primary;
+        color: #1C1B1F;
+        border-radius: 0.25rem;
+
+        &:hover {
+            @apply border-slate-200 bg-white;
+        }
+    }
+
+    .btn-cal[size="sm"] {
+        @apply w-6 h-6;
+    }
+
+
+    .btn-plus {
+        @apply border border-transparent h-8 w-8 inline-flex justify-center items-center cursor-pointer focus:outline-primary;
+        color: #1C1B1F;
+        border-radius: 0.25rem;
+
+        &:hover {
+            @apply border-primary-200 bg-primary-100 text-primary;
+        }
+    }
+
+    .btn-plus[size="sm"] {
+        @apply w-[30px] h-[30px];
+    }
+
+
+
+    .btn-copy {
+        @apply border border-transparent h-8 w-8 inline-flex justify-center items-center cursor-pointer text-slate-200;
+        border-radius: 0.25rem;
+
+        &:hover {
+            @apply bg-slate-700;
+        }
+    }
+
+    .btn-copy[size="sm"] {
+        @apply w-6 h-6;
+    }
+
+    .iconbtn-noborder sl-button[size=xs]::part(base) {
+        @apply border border-transparent h-8 w-8 inline-flex justify-center items-center cursor-pointer bg-transparent;
+        color: #1C1B1F;
+        border-radius: 0.25rem;
+
+        &:hover {
+            @apply border-slate-300 bg-white;
+        }
+    }
+
+
+    .btn-icon {
+        @apply bg-gray-50;
+        display: inline-flex;
+        align-items: center;
+        padding: 0.50rem;
+        border-radius: 0.25rem;
+        height: var(--height-default);
+        cursor: pointer;
+
+        &:hover {
+            @apply bg-slate-100;
+        }
+    }
+
+    .btn-icon-bg {
+        @apply bg-slate-200;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        cursor: pointer;
+
+        &:hover {
+            @apply bg-slate-300;
+        }
+    }
+
+    /* END OF BUTTON COMPONENT STYLES */
+
+
+    /* FORM INPUT TEXT COMPONENT STYLES */
+
+    .chip {
+        display: inline-flex;
+        align-items: center;
+        border-radius: 4px;
+        background-color: #f1f5f9;
+        border: 1px solid rgb(231, 231, 231);
+        padding: 2px 6px;
+        font-size: 11px;
+        font-weight: 500;
+
+        .is-primary {}
+
+        .is-secondary {
+            @apply bg-yellow-50;
+        }
+    }
+
+}
+
+
+@layer utilities {
+    // ^ FONT SIZES START
+    .fs-2xs {
+        font-size: 0.5rem; // 8px
+    }
+
+    .fs-xs {
+        font-size: 0.625rem; // 10px
+    }
+
+    .fs-sm, small {
+        font-size: 0.75rem;
+        /* 12px */
+        line-height: 1rem;
+        /* 16px */
+    }
+
+    .fs-base {
+        font-size: 0.8125rem !important;
+        /* 13px */
+        line-height: 1.25rem !important;
+        /* 20px */
+    }
+
+    .fs-md {
+        font-size: 0.9375rem;
+        /* 15px */
+        line-height: 1.5rem;
+        /* 24px */
+    }
+
+    .fs-lg {
+        font-size: 1.125rem;
+        /* 18px */
+        line-height: 1.75rem;
+        /* 28px */
+    }
+
+    .fs-xl {
+        font-size: 1.25rem;
+        /* 20px */
+        line-height: 1.75rem;
+        /* 28px */
+    }
+
+    .fs-2xl {
+        font-size: 1.375rem;
+        /* 22px */
+    }
+
+    .fs-3xl {
+        font-size: 1.5rem;
+        /* 24px */
+        line-height: 2rem;
+        /* 32px */
+    }
+
+    .fs-4xl {
+        font-size: 1.625rem;
+        /* 26px */
+    }
+
+    .fs-5xl {
+        font-size: 1.875rem;
+        /* 30px */
+        line-height: 2.25rem;
+        /* 36px */
+    }
+
+    .fs-6xl {
+        font-size: 2.25rem;
+        /* 36px */
+        line-height: 2.5rem;
+        /* 40px */
+    }
+
+    // ^ FONT SIZES END
+
+    input[type="search"]::-webkit-search-cancel-button {
+        display: none;
+    }
+
+    // [data-element="input-search"] button[data-icon="close"],
+    // [data-element="input-search"]:focus-within button[data-icon="search"] {
+    //     display: none;
+    // }
+
+    // [data-element="input-search"] button[data-icon="search"],
+    // [data-element="input-search"]:focus-within button[data-icon="close"] {
+    //     display: inline-flex;
+    // }
+
+    .inline-label {
+        @apply relative;
+
+        .placeholder {
+            @apply absolute top-2 left-4 text-lighter transition-all duration-300;
+        }
+
+        .form-input.is-sm+.placeholder {
+            @apply top-[6px];
+        }
+
+        .form-input {
+            @apply pt-2xs;
+        }
+
+        .form-input:focus+.placeholder,
+        .form-input.is-sm:focus+.placeholder {
+            @apply top-[-10px] left-xs fs-xs bg-white px-0.5 text-light;
+        }
+
+        .has-value,
+        .form-input.is-sm+.placeholder.has-value {
+            @apply top-[-8px] left-xs fs-xs bg-white px-0.5;
+        }
+    }
+
+    .is-invalid {
+        @apply border-red-300;
+    }
+
+    .border-error-inp.ng-select .ng-select-container {
+        @apply border border-red-300;
+    }
+
+}
+
+
+progress {
+    opacity: 0;
+}
+
+// label[for] {
+//     cursor: pointer;
+//   }
+
+
+[required],
+[data-required],
+label[required],
+span[required] {
+    position: relative;
+
+    &::after {
+        content: "*";
+        position: absolute;
+        right: -8px;
+        top: 0;
+        color: #e10d0d;
+        font-weight: normal;
+    }
+}
+
+.error-message {
+    color: #f20000;
+    font-size: 11px;
+    font-style: italic;
+    // bottom: calc(100% + 4px);
+    bottom: 100%;
+    right: 0;
+    position: absolute;
+    white-space: nowrap;
+    // top: -14px;
+}
+
+.transmitclaimerror .error-message {
+    position: unset;
+}
+
+
+
+.scroller {
+    max-height: 56vh;
+    overflow-y: auto;
+}
+
+
+.control {
+    position: relative;
+}
+
+.control.is-loading::after {
+    position: absolute !important;
+    right: 0.72rem;
+    top: 0.72rem;
+    z-index: 4;
+}
+
+.is-loading:has(.form-select)::after {
+    right: 2rem;
+}
+
+.button.is-loading::after,
+.control.is-loading::after,
+.loader,
+.select.is-loading::after {
+    animation: spinAround .5s infinite linear;
+    border: 1px solid hsl(var(--color-primary));
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    position: relative;
+    width: 1em;
+}
+
+/* SPINNER LOADING ANIMATION TO THE INPUT */
+@keyframes spinAround {
+    from {
+        transform: rotate(0)
+    }
+
+    to {
+        transform: rotate(359deg)
+    }
+}
+
+
+
+.img-overlap {
+    display: flex;
+    max-width: 300px;
+    padding-left: 30px;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+
+.img-overlap .img {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin-left: -15px;
+    border: 3px solid white;
+    background-color: #fff;
+    /*makes it easier to see the overlap*/
+}
+
+.call-wrapper {
+
+    @apply bg-gray-800 px-4 py-3 text-white rounded-lg max-w-fit;
+}
+
+.activity-tracker-list {
+    li {
+        position: relative;
+        cursor: pointer;
+        border-radius: 8px;
+        padding: 24px 16px;
+
+        &:hover {
+            background-color: white;
+        }
+    }
+
+}
+
+
+.trans {
+    transition: all 300ms ease;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.trans1 {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(calc(100vw - 100%));
+    transition: all 300ms ease;
+}
+
+// .child-modal-open {
+//     transform: translateX(var(--paretnt-modal-width));
+// }
+
+// .child-modal-close {
+//     transform: translateX(100%);
+// }
+
+
+// .past-medical {
+//       @apply  w-full border border-white hover:bg-slate-100 hover:border
+
+//       hover:border-blue-100 active:bg-slate-300  cursor-pointer p-2 rounded mb-3;
+// }
+
+// .trasition-width {
+//     transition: width 0.3s;
+// }
+
+
+.editable-form-row {
+    position: relative;
+    transition: background-color 0.3s ease-in;
+}
+
+.editable-form-row:hover::before {
+    position: absolute;
+    top: -8px;
+    right: -12px;
+    bottom: -8px;
+    left: -12px;
+    // inset: -8 -12px;
+    background-color: #f7f7f7;
+    content: "";
+    border-radius: 8px;
+}
+
+
+
+//   OVERRIDING DATE PICKER WIDTH DON'T REMOVE THIS CLASS, IT IS USED FOR DATE PICKER PACKAGE
+.md-drppicker,
+.md-drppicker.double {
+    width: max-content !important;
+    max-width: 600px !important;
+    top: 48px !important;
+    right: 0 !important;
+    left: auto !important;
+}
+
+.border-error {
+    // border: 1px solid hsl(0 60% 82% / 1);
+    @apply border border-red-300;
+    border-radius: 4px;
+}
+
+
+.border-match  {
+    // border: 1px solid hsl(0 60% 82% / 1);
+    @apply border border-purple-300;
+    border-radius: 4px;
+}
+
+.border-error-inp {
+    // border: 1px solid hsl(0 60% 82% / 1) !important;
+    // @apply border border-red-300;
+    // outline: none !important;
+    // border-radius: 4px !important;
+}
+
+.drawer-open {
+    overflow: hidden;
+}
+
+
+.dropdown-menu {
+    @apply border bg-white inset-x-0 rounded;
+    z-index: 9;
+
+    .ngx-select__item_active {
+        @apply bg-primary;
+    }
+}
+
+
+
+.ngb-tp-input {
+    height: 36px !important;
+    @apply border-slate-200;
+}
+
+.ngb-tp {
+    .btn {
+        padding: 0 !important;
+    }
+}
+
+.ed-drawer-close {
+    opacity: 0.5;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.avatar {
+    @apply bg-light w-10 h-10 rounded-md overflow-hidden flex items-center justify-center font-semibold;
+}
+
+// ed-avatar,
+// .avatar {
+//     @apply bg-light w-10 h-10 rounded-md overflow-hidden flex items-center justify-center font-semibold;
+// }
+
+// ed-avatar[size="base"] {
+//     @apply w-10 h-10;
+// }
+
+// ed-avatar[size="md"] {
+//     @apply w-12 h-12;
+// }
+
+// ed-avatar[size="sm"] {
+//     @apply w-8 h-8;
+// }
+
+// ed-avatar[size="xs"] {
+//     @apply w-6 h-6;
+// }
+
+
+.ed-graphs {
+
+    .plot-container {}
+
+    select {
+        left: 14px;
+        top: 12px;
+        background-color: #f2f5f7;
+        padding: 4px 8px;
+        border-radius: 4px;
+        width: 81px;
+    }
+}
+
+text.gtitle {
+    font-size: 14px !important;
+    fill: #005CF3 !important;
+}
+
+.js-plotly-plot .plotly .modebar-group {
+    display: flex !important;
+}
+
+.height-change {
+    position: relative;
+    height: auto;
+    min-height: 75vh;
+}
+
+.ccda-menu {
+    @apply px-4 py-2 cursor-pointer hover:text-primary hover:bg-lighter hover:border-l-primary hover:border-l-2 mb-1;
+}
+
+.ccda-menu-select {
+    @apply px-4 py-2 cursor-pointer hover:text-primary bg-lighter border-l-primary border-l-2 text-primary mb-1;
+}
+
+
+.view-actvie {
+    background-color: #F0FAFF;
+    border-color: #8FD8FF;
+}
+
+::-webkit-calendar-picker-indicator {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+}
+
+.bg-login {
+    background: radial-gradient(75.12% 75.08% at 44.48% 30.08%, rgba(255, 255, 255, 0) 31.92%, #D0E3FF 100%);
+}
+
+.video {
+    width: 360px;
+}
+
+.user-menu {
+    @apply absolute shadow-md rounded-md bg-white right-4 top-16 z-50 overflow-hidden w-80
+}
+
+.view-patient-label {
+    @apply w-40 shrink-0 text-light m-0;
+}
+
+.xy-center {
+    @apply w-full h-full flex flex-col items-center justify-center;
+}
+
+.y-center {
+    @apply flex items-center;
+}
+
+.intake-list {
+    @apply flex items-center justify-between px-base py-2xs rounded-md border border-transparent transition-all duration-300;
+}
+
+.intake-list:hover {
+    @apply bg-lighter cursor-move;
+}
+
+.intake-list-active {
+    @apply border-violet-600;
+}
+
+.attached-forms {
+    @apply flex items-center justify-between px-base cursor-pointer bg-lighter-2 py-xs rounded-md border mb-sm transition-all duration-300;
+}
+
+.attached-forms:hover {
+    @apply bg-lighter;
+}
+
+.attached-forms-active {
+    @apply flex items-center justify-between px-base cursor-pointer bg-light border-primary py-xs rounded-md border mb-sm
+}
+
+
+.cap-first::first-letter {
+    text-transform: uppercase;
+}
+
+
+
+
+
+[ngbDatepickerDayView].bg-primary {
+    background-color: #005CF3 !important;
+}
+
+.profile-pic {
+    @apply shrink-0 w-10 h-10 rounded-2xl overflow-hidden flex items-center justify-center;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.profile-pic[size="large"] {
+    width: 48px;
+    height: 48px;
+}
+
+.profile-pic[size="small"] {
+    width: 32px;
+    height: 32px;
+}
+
+.profile-pic[size="xs"] {
+    width: 24px;
+    height: 24px;
+}
+
+.profile-kpi {
+    @apply shrink-0 w-10 h-10 overflow-hidden rounded;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.profile-AiSuggestions {
+    @apply shrink-0 w-16 h-16 overflow-hidden rounded-full;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.profile-AiSuggestions-new {
+    @apply shrink-0 w-9 h-9 overflow-hidden rounded-2xl;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+.profile-call {
+    @apply shrink-0 w-6 h-6 overflow-hidden rounded-full;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+// [contenteditable]:focus {
+//     @apply outline-slate-300 outline-offset-2;
+// }
+
+.print-element {
+    @apply absolute;
+}
+
+.hr-lines {
+    position: relative;
+    max-width: 500px;
+    margin: 0px auto 10px auto;
+    text-align: center;
+}
+
+.hr-lines:before {
+    content: " ";
+    height: 1px;
+    width: 130px;
+    background: #e5e7eb;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+}
+
+.hr-lines:after {
+    content: " ";
+    height: 1px;
+    width: 130px;
+    background: #e5e7eb;
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 0;
+}
+
+.kpi-menu {
+    @apply relative flex gap-xs items-center rounded-md px-3 py-1 mb-1 border border-transparent hover:text-primary hover:bg-light active:bg-primary-100
+}
+
+@keyframes drawer-denyClose {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.01);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes dropdown-denyClose {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.02);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes drawer-denyClose-inner {
+    0% {
+        transform: translateX(-100%) scale(1);
+    }
+
+    50% {
+        transform: translateX(-100%) scale(1.01);
+    }
+
+    100% {
+        transform: translateX(-100%) scale(1);
+    }
+}
+
+.denyClose {
+    animation: drawer-denyClose 250ms;
+}
+
+.denyClose-inner {
+    animation: drawer-denyClose-inner 250ms;
+}
+
+.dropdown-denyClose {
+    animation: dropdown-denyClose 250ms;
+}
+
+
+.claim-sub-stage,
+.claim-stage-completed {
+    position: relative;
+    margin-left: 8px;
+    margin-bottom: 8px;
+    padding-left: 20px;
+}
+
+.claim-stage-completed::before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' class='w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    left: -21px;
+    top: -4px;
+}
+
+.claim-sub-stage::before {
+    position: absolute;
+    content: "";
+    width: 9px;
+    height: 9px;
+    border: 1px solid green;
+    border-radius: 50%;
+    left: -13px;
+    top: 6px;
+}
+
+.claim-sub-stage.error {
+    // color: red;
+    @apply text-red-400;
+}
+
+.claim-sub-stage.error::before {
+    // border: 1px solid red;
+    @apply border border-red-300;
+}
+
+
+.flex-break {
+    flex-basis: 100%;
+    height: 0;
+}
+
+
+.log-event {
+    position: relative;
+}
+
+.log-event::before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' class='w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    left: -40px;
+    top: -4px;
+}
+
+.pac-container {
+    z-index: 99999 !important;
+}
+
+.ng2-pdf-viewer-container {
+    overflow: initial !important;
+}
+
+.ed-category {
+    @apply border border-slate-100 rounded-lg cursor-pointer transition-all duration-300 hover:border-slate-300 hover:bg-lighter overflow-hidden;
+}
+
+.ed-category-video {
+    @apply border bg-slate-700 text-white rounded-lg cursor-pointer transition-all duration-300 overflow-hidden;
+}
+
+body .ng-select .ng-select-container .ng-value-container {
+    align-items: center;
+    padding-left: 0.75rem;
+    padding-top: 0;
+}
+
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    padding: 8px 12px !important;
+    font-weight: normal;
+}
+
+
+// [data-title] {
+//     white-space: nowrap;
+// }
+
+// [data-expanded="false"] [data-title]::after {
+//     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+//     background-color: #DBEAFE;
+//     color: black;
+//     content: attr(data-title);
+//     font-size: 14px;
+//     padding: 6px 8px;
+//     border-radius: 4px;
+//     position: fixed;
+//     left: 40px;
+//     visibility: hidden;
+//     opacity: 0;
+//     transition: visibility 0.3s linear, opacity 0.3s linear, left 0.2s linear;
+//     pointer-events: none;
+// }
+
+// [data-expanded="false"] .ai[data-title]::after {
+//     bottom: 16px;
+//     padding: 2px 8px;
+// }
+
+// [data-expanded="false"] [data-name="link"]:hover>[data-title]::after {
+//     visibility: visible;
+//     opacity: 1;
+//     left: 52px;
+// }
+
+.mainContainer-new {
+    @apply bg-white p-sm border rounded absolute right-0 w-[240px] z-50;
+
+    p {
+        @apply mb-2xs
+    }
+}
+
+.commentSec {
+    @apply font-semibold mb-xs mt-sm
+}
+
+.scale-rating {
+    @apply border rounded-full text-center w-8 h-8 hover:border-primary-400 hover:bg-primary-300 active:bg-primary-400 leading-8 cursor-pointer;
+}
+
+
+
+
+
+
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        scale: 0.95;
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.1s ease-in-out;
+}
+
+@keyframes exitAnimation {
+    from {
+        opacity: 1;
+        scale: 1;
+    }
+
+    to {
+        opacity: 0;
+        scale: 0.95;
+    }
+}
+
+.exit-animation {
+    animation: exitAnimation 0.1s ease-in-out forwards;
+}
+
+.task-item::before {
+    @apply bg-primary-600;
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: 50%;
+    margin-top: -4px;
+    left: -4px;
+}
+
+
+
+.message-count {
+    position: relative;
+
+    &::after {
+        @apply bg-primary-600 w-4 h-4 rounded-full absolute text-white flex items-center justify-center;
+        content: attr(data-messages);
+        line-height: 1;
+        top: -8px;
+        right: -8px;
+        font-size: 11px;
+        font-weight: 500;
+    }
+}
+
+.transition-300 {
+    @apply transition-all duration-300;
+}
+
+
+.search-input,
+.search-input-border {
+    @apply w-[86px] h-9 pr-10 rounded border border-transparent relative overflow-hidden bg-no-repeat;
+    outline: none;
+    transition: all 0.5s;
+    background-position: right 10px center;
+    background-size: 20px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-opacity='50%' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E%0A");
+
+    &:hover {
+        @apply bg-lighter-2 cursor-pointer pl-3 w-[100px];
+    }
+
+    &:focus {
+        @apply bg-lighter-2 pl-3 outline-2;
+    }
+}
+
+.search-input-border {
+    border: 1px solid #ccc;
+    background-color: #f2f5f7;
+    padding-left: 12px;
+    width: 100px;
+}
+
+
+
+
+//   Demographics Form Preview css mobile and desktop
+
+.mobile-preview {
+    @apply bg-no-repeat h-[660px] w-[320px]  flex flex-col overflow-hidden mt-base relative;
+    background-image: url('./assets/images/mobile-view-new.svg');
+    background-size: 100% 100%;
+
+    .file-name
+    {
+        @apply absolute  text-white top-14 left-8 font-semibold w-56 truncate;
+    }
+
+    .preview-content {
+        @apply mt-[100px] ml-[14px] mr-[8px] w-auto mb-[40px] flex-1 overflow-auto px-sm flex flex-col whitespace-normal;
+    }
+
+    .w-all {
+        @apply flex flex-col gap-base;
+
+        .wi-70 {
+            width: 100%;
+        }
+
+        .wi-30 {
+            width: 100%;
+        }
+    }
+
+    .body-map {
+        @apply gap-base
+    }
+
+    .desktop-view {
+        @apply hidden
+    }
+
+    .display-grid {
+        @apply grid grid-cols-1 gap-x-xl gap-y-base mb-base;
+    }
+
+    .id-card-mobile {
+        @apply bg-lighter hover:shadow p-base rounded flex justify-between items-center gap-md cursor-pointer;
+    }
+
+    .id-card-desk {
+        @apply hidden
+    }
+
+    .insurance-cad-mobile {
+        @apply bg-lighter hover:shadow p-base rounded flex justify-between items-center gap-md mt-xs cursor-pointer;
+    }
+
+    .insurance-cad-desk,
+    .desk-head {
+        @apply hidden
+    }
+
+    .insurance-card-upload-zones {
+        @apply flex flex-col gap-sm mt-xs;
+    }
+
+}
+
+
+@media only screen and (max-width: 1679px) {
+    .mobile-preview {
+        .preview-content {
+            @apply  w-auto mt-[100px]  ml-[20px] mr-[14px] mb-[40px] flex-1 overflow-auto px-sm whitespace-normal;
+        }
+        .file-name
+        {
+            @apply absolute  text-white top-12 left-8 font-semibold w-56 truncate;
+        }
+
+    }
+}
+
+.desktop-preview {
+    @apply bg-no-repeat flex-1 w-full h-full flex flex-col overflow-auto mx-auto mt-base;
+
+    .desk-head {
+        @apply mb-base mt-base
+    }
+    .file-name
+    {
+        @apply hidden
+    }
+
+    .body-map {
+        @apply gap-2xl
+    }
+
+    .w-all {
+        @apply flex gap-base;
+
+        .wi-70 {
+            width: 70%;
+        }
+
+        .wi-30 {
+            width: 30%;
+        }
+    }
+
+    .preview-content {
+        @apply w-full mb-base px-md mx-auto flex-1 overflow-auto border border-slate-300 rounded-b-xl pt-base whitespace-normal;
+    }
+
+    .display-grid {
+        @apply grid grid-cols-2 gap-base w-full;
+    }
+
+    .assigned {
+        @apply col-span-2
+    }
+
+    .id-card-mobile {
+        @apply hidden
+    }
+
+    .id-card-desk {
+        @apply bg-primary-50 border-dashed border-2 border-primary-200 rounded px-base py-sm flex gap-base items-center cursor-pointer hover:shadow;
+    }
+
+    .insurance-cad-mobile {
+        @apply hidden
+    }
+
+    .insurance-cad-desk {
+        @apply bg-primary-50 border-dashed border-2 border-primary-200 rounded px-base py-sm flex gap-sm items-center cursor-pointer hover:shadow
+    }
+
+    .insurance-card-upload-zones {
+        @apply flex flex-row gap-sm mt-xs;
+    }
+
+}
+
+.badge-warning {
+    @apply bg-amber-100 rounded-sm text-amber-700 font-semibold px-1 py-0 tracking-wide fs-xs leading-5 uppercase whitespace-nowrap
+}
+
+
+.ed-shadow {
+    border: 1px solid #CBD5E1;
+    box-shadow: 0px 205px 82px rgba(0, 0, 0, 0.01), 0px 115px 69px rgba(0, 0, 0, 0.05), 0px 51px 51px rgba(0, 0, 0, 0.09), 0px 13px 28px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+
+.max-lines2 {
+    max-lines: 2;
+}
+
+.shadow-trello {
+    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+}
+
+.container-settings {
+    max-width: 1160px;
+    margin: 0 auto;
+    // padding: 16px;
+    background-color: #fff;
+}
+
+// print css chandu
+.void-break {
+    break-inside: avoid;
+}
+
+.analytics-input {
+    @apply block w-full h-12 pl-10 rounded-lg outline-blue-300 outline-offset-1 outline-1 border;
+
+}
+
+.analytics-input-gradient {
+    border: 1px solid #0000;
+    border-radius: 8px;
+    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(var(--angle),
+            #e45e16,
+            #f1a780,
+            #88A2FF,
+            #0B1A9C) border-box;
+    animation: 4s rotate linear infinite;
+}
+
+@keyframes rotate {
+    to {
+        --angle: 360deg;
+    }
+}
+
+@property --angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+}
+
+.send-icon {
+    @apply cursor-pointer;
+    transition: all .35s;
+
+    :hover {
+        transform: translateY(-2px);
+    }
+}
+
+iframe#launcher {
+    z-index: 999 !important;
+}
+
+
+.is-invalid {
+    // border: 1px solid #fca5a5;
+    @apply border border-red-300;
+}
+
+
+
+.form-title {
+    // background-color: #E2E8F0;
+    padding: 12px 0;
+    margin-top: 16px;
+    // margin-bottom: 16px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    /* display: flex;
+    gap: 6px; */
+}
+
+.form-sub-title {
+    background-color: #E2E8F0;
+    padding: 12px;
+    // margin-top: 16px;
+    margin-bottom: 16px;
+    font-size: 20px;
+    font-weight: 600;
+    /* display: flex;
+    gap: 6px; */
+}
+
+
+
+.setting-l {
+    width: 192px;
+    position: fixed;
+    // left: 64px;
+    // top: 58px;
+    height: calc(100vh - 58px);
+
+    ul {
+        li {
+            @apply focus-visible:ring-primary
+        }
+    }
+}
+
+.setting-r {
+    position: absolute;
+    left: 192px;
+    width: calc(100% - 192px);
+    height: 1px;
+    overflow: auto;
+}
+
+@media only screen and (max-width: 1359px) {
+    .setting-r {
+        left: 194px;
+    }
+}
+
+.setting-r.settings-h {
+    height: auto;
+    min-height: 1px;
+}
+
+.search-input-billing {
+    @apply w-[100px] h-9 pr-10 pl-sm rounded border border-transparent relative overflow-hidden bg-no-repeat;
+    outline: none;
+    transition: all 0.5s;
+    &:hover {
+        @apply bg-lighter-2 cursor-pointer border-slate-200 border;
+    }
+
+    //for not closing the search input....in billing
+    &:focus,
+    &.expanded {
+        // box-shadow: 0 0 0 2px #007bff33 !important;
+        @apply bg-lighter-2 outline-2 w-72 border border-primary bg-transparent;
+    }
+}
+
+.ripple-wrapper {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+}
+
+.ripple {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin: 0 5px;
+    position: relative;
+    background-color: #fa3c16;
+    transform: scale(0.6);
+}
+
+.ripple::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: -1px;
+    background-color: inherit;
+    border-radius: 50%;
+    z-index: -1;
+    animation: ripple 1.5s ease-out infinite;
+}
+
+@keyframes ripple {
+    from {
+        opacity: 1;
+        transform: scale(0);
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(3);
+    }
+}
+
+.tbl-sort {
+    @apply flex items-center gap-2xs py-xs px-2xs rounded cursor-pointer;
+}
+
+.tbl-sort ed-icon {
+    @apply opacity-0 text-light;
+}
+
+.tbl-sort:hover {
+    @apply text-dark bg-slate-100;
+}
+
+.tbl-sort.active,
+.tbl-sort:active {
+    @apply text-dark bg-slate-100;
+}
+
+.tbl-sort:hover ed-icon {
+    @apply opacity-100 text-dark;
+}
+
+.tbl-sort.active ed-icon {
+    @apply opacity-100 text-primary;
+}
+
+.tbl-sort:focus ed-icon,
+.tbl-sort:focus {
+    @apply text-dark;
+}
+
+.action-button {
+    @apply transition-all duration-300 invisible;
+}
+
+.parent-overview:hover .action-button {
+    @apply visible;
+}
+
+.info-panel-action-button {
+    @apply transition-all duration-300 invisible;
+}
+
+.info-panel-parent:hover .info-panel-action-button {
+    @apply visible;
+}
+
+/* remove unnecessary placeholder left spacing */
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+    padding-left: 0px;
+}
+
+/* patient education summary sidepanel alignment */
+.material-summary-sidepanel h3 {
+    margin: 0;
+    font-size: 13px;
+    line-height: 24px;
+    @apply text-light;
+}
+
+.material-summary-sidepanel h5 {
+    @apply text-dark;
+}
+
+.material-summary-sidepanel p {
+    margin: 0 0 12px 0;
+    font-size: 13px;
+    @apply text-light;
+}
+
+.material-summary-sidepanel ul {
+    list-style: disc;
+    margin: -8px 0 12px 30px;
+    @apply text-light;
+}
+
+.material-summary-sidepanel ul li {
+    font-size: 13px;
+    margin: 0 0 4px;
+}
+
+.material-summary-sidepanel ul ul {
+    list-style: circle;
+    margin: 4px 0 0 20px;
+}
+
+.material-summary-sidepanel a {
+    @apply text-primary hover:underline;
+    white-space: normal;
+    word-break: break-all;
+}
+
+.material-summary-sidepanel .material-summary-table {
+    width: 100%;
+    overflow: auto;
+    height: max-content;
+    display: table;
+}
+
+.material-summary-sidepanel .material-summary-table table {
+    @apply border border-collapse;
+}
+
+.material-summary-sidepanel .material-summary-table table th,
+.material-summary-sidepanel .material-summary-table table td {
+    @apply border border-collapse p-xs;
+}
+
+
+.reportlist li {
+    @apply px-base py-xs text-dark fs-sm cursor-pointer;
+}
+
+.db-task {
+    padding: 10px;
+    @apply fs-sm border rounded-lg bg-white cursor-pointer hover:bg-blue-100 active:bg-blue-400 active:text-white hover:border-transparent transition-all duration-100 flex-1;
+    @screen below-xl {
+        @apply p-xs;
+    }
+}
+
+.db-task h6 {
+    @apply font-medium;
+}
+
+.history-item {
+    @apply flex items-start justify-start p-xs fs-sm capitalize;
+}
+
+.history-item-comments {
+    @apply flex flex-col items-start justify-start p-xs fs-sm capitalize;
+}
+
+.history-item label {
+    @apply w-28 fs-sm shrink-0 m-0 capitalize;
+}
+
+.templateBadge {
+    // background-color: #38bdf8;
+    @apply bg-lighter text-dark fs-sm font-normal
+}
+
+.status-inactive {
+    @apply border border-orange-400 rounded-lg px-2 py-1 text-orange-600 bg-orange-100 fs-sm;
+}
+
+.status-active {
+    @apply border border-green-400 rounded-lg px-2 py-1 text-green-600 bg-green-100 fs-sm;
+}
+
+.ed-menu-item {
+    border-left-style: solid;
+    border-left-width: 3px;
+    border-left-color: transparent;
+
+    &:hover {
+        background-color: rgb(241 245 249);
+        border-left-color: var(--sl-color-primary-700);
+        border-left-style: solid;
+        border-left-width: 3px;
+    }
+}
+
+
+.ed-menu-item:focus {
+    border-left-style: solid;
+    border-left-width: 3px;
+    border-left-color: var(--sl-color-primary-700);
+    background-color: var(--sl-color-neutral-100);
+    color: var(--sl-color-neutral-900);
+
+    &:hover {
+        background-color: rgb(241 245 249);
+        border-left-color: var(--sl-color-primary-700);
+    }
+}
+
+sl-button.text-icon-button::part(label) {
+    display: inline-flex;
+    align-items: center;
+}
+
+.macro-list {
+    @apply relative py-2xs flex justify-between items-center gap-base cursor-pointer;
+
+
+    border-left-style: solid;
+    border-left-width: var(--option-active-border-width);
+    border: transparent;
+    color: var(--sl-color-neutral-900);
+
+    &:hover {
+        background-color: rgb(241 245 249);
+        border-left-color: var(--sl-color-primary-700);
+        border-left-width: var(--option-active-border-width);
+    }
+}
+
+.chatlink {
+    @apply inline-flex text-primary rounded py-0 px-0.5 bg-blue-50 cursor-none;
+    pointer-events: none;
+}
+
+.text-link {
+    @apply text-primary hover:text-primary-600 transition-all duration-300 cursor-pointer p-2xs;
+}
+
+
+// INVALID INPUT ANIMATION FOR
+// INPUT TEXT, DATE, EMAIL, NG-SELECT
+.invalid-animation {
+    outline: 2px solid rgba(255, 0, 0, 0.5);
+    /* 2px outline with red color and 50% opacity */
+    outline-offset: 1px;
+    animation: fadeOutline 2500ms forwards;
+    /* Fade-out effect */
+}
+
+/* Fade-out animation for outline */
+@keyframes fadeOutline {
+    0% {
+        outline-color: rgba(255, 0, 0, 0.5);
+    }
+
+    100% {
+        outline-color: rgba(255, 0, 0, 0);
+        /* Outline color fades to transparent */
+    }
+}
+
+.skeleton {
+    background: #eee;
+    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+    border-radius: 5px;
+    background-size: 200% 100%;
+    animation: 1.5s shine linear infinite;
+}
+
+@keyframes shine {
+    to {
+        background-position-x: -200%;
+    }
+}
+
+.kpi-menu-active {
+    @apply bg-primary-50 border border-primary-300 text-primary font-medium;
+}
+.availability-active {
+    @apply bg-primary-50 rounded  text-primary font-medium;
+}
+
+.bg-anim {
+    animation: fade 3s infinite alternate;
+    border-radius: 6px;
+}
+
+@keyframes fade {
+    0% {
+        background-color: #fff;
+    }
+
+    50% {
+        background-color: #ecf5ff;
+        border: 1px solid var(--sl-color-primary-300);
+    }
+}
+
+.notetypedropdown {
+    border-left-style: solid;
+    border-left-width: var(--option-active-border-width);
+    border-left-color: transparent;
+    background-color: #FFFFFF;
+    color: var(--sl-color-neutral-900);
+
+    &:hover {
+        background-color: rgb(241 245 249);
+        border-left-color: var(--sl-color-primary-700);
+        border-left-width: var(--option-active-border-width);
+    }
+
+    &:focus {
+        background-color: rgb(241 245 249);
+        border-left-color: var(--sl-color-primary-700);
+        border-left-width: var(--option-active-border-width);
+    }
+}
+
+.normal-flag-l {
+    background: #FFE9D4;
+    color: #FF7B2E;
+}
+
+.normal-flag-ll {
+    background: #ffe0e0;
+    color: #B91C1C;
+}
+
+.normal-flag-h {
+    background: #FFE9D4;
+    color: #FF7B2E;
+}
+
+.normal-flag-hh {
+    background: #ffe0e0;
+    color: #B91C1C;
+}
+
+.normal-flag-a {
+    background: #FEF3C7;
+    color: #B45309;
+}
+
+.normal-flag-aa {
+    background: #FDE68A;
+    color: #B45309;
+}
+
+.normal-flag-n {
+    background: #D1FAE5;
+    color: #10B981;
+}
+
+.normal-flag-none {
+    background: #F3F4F6;
+    color: #6E7787;
+}
+
+.line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+
+
+.overlay-sidebar {
+    position: absolute;
+    inset: 0;
+    background-color: #1C1B1F;
+}
+
+.-translate-x-full {
+    transform: translateX(-100%);
+}
+
+.-z-10 {
+    z-index: -10;
+}
+
+.w-screen {
+    width: 100vw;
+}
+
+@media print {
+    body {
+        margin: 0 !important;
+    }
+}
+
+.main-container {
+    --ckeditor5-preview-height: 700px;
+    font-family: 'Lato';
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+.ck-balloon-panel{z-index:9999 !important}
+
+.ck-content {
+    font-family: 'Lato';
+    line-height: 1.6;
+    word-break: break-word;
+}
+
+.editor-container__editor-wrapper {
+    display: flex;
+    width: fit-content;
+}
+
+.editor-container_document-editor .editor-container__toolbar {
+    display: flex;
+    position: relative;
+}
+
+.editor-container_document-editor .editor-container__toolbar>.ck.ck-toolbar {
+    flex-grow: 1;
+    width: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
+.editor-container_document-editor .editor-container__menu-bar>.ck.ck-menu-bar {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
+.editor-container_document-editor .editor-container__editor-wrapper {
+    max-height: var(--ckeditor5-preview-height);
+    min-height: var(--ckeditor5-preview-height);
+    overflow-y: scroll;
+    background: var(--ck-color-base-foreground);
+}
+
+.editor-container_document-editor .editor-container__editor {
+    margin-top: 28px;
+    margin-bottom: 28px;
+    height: 100%;
+}
+
+.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
+    box-sizing: border-box;
+    min-width: calc(210mm + 2px);
+    max-width: calc(210mm + 2px);
+    min-height: 297mm;
+    height: fit-content;
+    padding: 20mm 12mm;
+    border: 1px hsl(0, 0%, 82.7%) solid;
+    background: hsl(0, 0%, 100%);
+    box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
+    flex: 1 1 auto;
+    margin-left: 72px;
+    margin-right: 72px;
+}
+
+.ck.ck-editor__editable {
+
+    ol,
+    ul,
+    menu {
+        margin-left: 1.5rem !important;
+    }
+}
+
+.ck.ck-editor__editable.h-80vh {
+    height: 80vh;
+}
+
+.ck.ck-editor__editable.w-57vw {
+    width: 57vw;
+}
+
+.ck.ck-editor__editable.w-50vw {
+    width: 50vw;
+}
+.w-1250 {
+    width:1250px
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.ck.ck-editor__editable.hide-scroller {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+
+    &::-webkit-scrollbar {
+        display: none;
+        /* Hide scrollbar for Chrome, Safari and Opera */
+    }
+}
+
+.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
+    border: 1px solid transparent !important;
+    box-shadow: none !important;
+}
+
+.ck.ck-toolbar {
+    border: none !important;
+}
+
+.ck-merge-field_with-warning_no-default {
+    span.ck-merge-field__icon {
+        display: none !important;
+    }
+}
+
+.ck.ck-balloon-panel.ck-balloon-panel_visible.ck-balloon-panel_with-arrow:not(.ck-toolbar-container) {
+    display: none !important;
+}
+
+.ck-merge-field_with-warning_no-default {
+    outline: 1px solid var(--ck-color-focus-border) !important;
+}
+
+.ck-merge-field-image {
+    z-index: 0 !important;
+}
+
+#editor strong {
+    font-weight: bolder !important;
+}
+
+.avs-editor .ql-editor {
+    @apply overflow-auto;
+}
+
+
+
+
+// TABLE STYLES FOR REFERRALS LIST
+
+.referral-table {
+    // COLUMN WIDTH ON SMALL SCREEN
+    $col-1-sm: 340px;
+    $col-2-sm: 280px;
+    $col-3-sm: 280px;
+    $col-4-sm: 230px;
+    $col-5-sm: 150px;
+    $col-6-sm: 160px;
+    $col-7-sm: 80px;
+    $empty-sm: 1px;
+
+
+    // COLUMN WIDTH ON LARGE SCREEN
+    // ALL COLUMNS WIDTH SHOULD BE EQUAL TO 100%
+    $col-1-xl: 17%;
+    $col-2-xl: 18%;
+    $col-3-xl: 15%;
+    $col-4-xl: 20%;
+    $col-5-xl: 15%;
+    $col-6-xl: 10%;
+    $col-7-xl: 5%;
+    $empty-xl: 0.1%;
+
+
+    // COLUMN WIDTH DEFAULT
+    .col-1 {
+        width: $col-1-sm;
+    }
+
+    .col-2 {
+        width: $col-2-sm;
+    }
+
+    .col-3 {
+        width: $col-3-sm;
+    }
+
+    .col-4 {
+        width: $col-4-sm;
+    }
+
+    .col-5 {
+        width: $col-5-sm;
+    }
+
+    .col-6 {
+        width: $col-6-sm;
+    }
+
+    .col-7 {
+        width: $col-7-sm;
+    }
+
+    .empty {
+        width: $empty-sm;
+    }
+
+    .spacer {
+        width: 0;
+    }
+
+    // COLUMN WIDTH ON LARGER SCREENS
+    @media screen and (min-width: 1600px) {
+        .col-1 {
+            width: $col-1-xl;
+        }
+
+        .col-2 {
+            width: $col-2-xl;
+        }
+
+        .col-3 {
+            width: $col-3-xl;
+        }
+
+        .col-4 {
+            width: $col-4-xl;
+        }
+
+        .col-5 {
+            width: $col-5-xl;
+        }
+
+        .col-6 {
+            width: $col-6-xl;
+        }
+
+        .col-7 {
+            width: $col-7-xl;
+        }
+
+        .empty {
+            width: $empty-xl;
+        }
+    }
+
+
+    // STICKY COLUMNS FOR MANAGE CLAIM TABLE
+    // .referral-table {
+    //   th, td {
+    //     &:first-child {
+    //       position: sticky;
+    //       left: 0;
+    //       z-index: 1;
+    //     }
+
+    //     &:nth-child(2) {
+    //       position: sticky;
+    //       left: $col-1-sm;
+    //       z-index: 1;
+    //     }
+    //   }
+    // }
+
+}
+
+
+
+// END TABLE STYLES FOR REFERRAL LIST
+
+.searchclear
+{
+    @apply absolute right-2.5 top-2.5 cursor-pointer text-red-500 hover:text-red-700
+}
+
+
+.onboarding-popover {
+    position: absolute;
+    left: 3.75rem;
+    bottom: 1.25rem;
+    width: 19.5rem;
+    min-height: 340px;
+    padding: 1.25rem;
+    border-radius: 0.5rem;
+    background-color: #fff;
+    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
+    z-index: 999;
+    transform-origin: bottom left;
+    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.1s ease-in-out;
+
+    .task-list {
+        padding-left: 1.25rem;
+        li {
+            padding-left: 0.375rem;
+        }
+        li::marker {
+            content: url('./assets/images/list-check.svg');;
+        }
+    }
+
+    .main-button {
+        background-color: #Ee6c3e;
+        padding: 0.625rem;
+        text-align: center;
+        width: 100%;
+        color: white;
+        border-radius: 0.375rem;
+
+        &:hover {
+            background-color: #da643a;
+        }
+    }
+
+    .close {
+        position: absolute;
+        padding: 0;
+        top: -0.75rem;
+        right: 0.9375rem;
+    }
+}
+
+.onboarding-popover[data-status='open'] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: scale(1);
+}
+
+.onboarding-popover[data-status='close'] {
+    opacity: 0;
+    transform: scale(0.8);
+    pointer-events: none;
+    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.1s ease-in-out;
+}
+
+.onboarding-popover[data-status='close']::after {
+    content: '';
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    transition-delay: 0.4s; /* Delay hiding to allow animation */
+}
+
+.onboarding-btn {
+    background-color: #Ee6c3e;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    border-radius: 0.375rem;
+    margin-bottom: 1.25rem;
+    position: relative;
+
+    .notification-alert {
+        display: inline-block;
+        width: 0.75rem;
+        height: 0.75rem;
+        position: absolute;
+        top: -0.375rem;
+        right: -0.25rem;
+        background-color: red;
+        border-radius: 50%;
+        border: 1px solid #fff;
+    }
+}
+
+.btn-darwin-float {
+    @apply text-primary mb-base shadow-trello rounded-full bg-white;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 20px;
+    bottom: 0;
+}
+.popover-letter-darwin {
+    visibility: visible;
+    transform: scale(1);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.popover-letter-darwin.collapsed {
+    width: 0;
+    height: 0;
+    padding: 0;
+    opacity: 0;
+    transform: scale(0.6);
+    pointer-events: none;
+  }
+
+
+
+//   steps 1 2 3
+  .steps-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+  .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    position: relative;
+  }
+  .step-number {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #e0e0e0;
+    color: var(--text-dark) ;
+    font-weight: bold;
+    position: relative;
+  }
+  .step-number::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: -1;
+  }
+  .step-number::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: -1;
+  }
+  .step-number.active {
+    @apply bg-primary text-white;
+  }
+  .step-label-active {
+    @apply mt-1 text-primary cursor-pointer;
+  }
+  .step-label {
+    @apply mt-1;
+  }
+  .step-separator {
+    flex-grow: 1;
+    height: 1px;
+    background-color: #e0e0e0;
+  }
+  .step-separator-active {
+    flex-grow: 1;
+    height: 2px;
+    @apply bg-primary
+  }
+/* Bottom Sheet Container */
+.bottom-sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: -100%;
+    width: 100%;
+    max-width: 600px;
+    margin: auto;
+    background: white;
+    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
+    border-radius:8px 8px 0 0;
+    z-index: 1061;
+
+    .header {
+        @apply flex items-center  pl-md px-md py-sm ;
+    }
+
+    .body {
+        @apply px-md py-base border-y;
+    }
+
+    .footer {
+        @apply  flex items-center justify-end gap-base px-md  py-sm;
+    }
+}
+
+/* Visible State */
+.bottom-sheet.open {
+    transition: transform 0.3s ease-in-out;
+    bottom: 0;
+}
+
+/* Overlay */
+.bottom-sheet-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease-in-out;
+    z-index: 1060;
+}
+
+/* Overlay Visible State */
+.bottom-sheet-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+
+/* Modal Container */
+.sidebar-modal {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 420px;
+    max-width: 460px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    z-index: 9;
+
+    .header {
+        @apply flex items-center pl-md pr-sm py-xs border-b;
+    }
+
+    .body {
+        @apply px-md py-base;
+    }
+
+    .footer {
+        @apply border-t flex items-center justify-end gap-base pr-base pl-base py-xs;
+    }
+
+}
+
+/* Modal Visible */
+.sidebar-modal.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, -50%) scale(1);
+    z-index: 1061;
+}
+.active-slmenu
+{
+    @apply border-l-[3px] border-primary bg-lighter;
+}
+
+.app-wrapper {
+    transition: transform 0.2s ease-in-out;
+    height: 100%;
+    border-radius: 0;
+    background-color: #fff;
+    transition: transform 0.3s ease;
+}
+
+.modal-open {
+    background-color: #686868;
+}
+.modal-open .app-wrapper {
+    transform: scale(0.985);
+    border-radius: 12px;
+}
+
+.modal-dialog {
+    transform: translateY(30px);
+    opacity: 0;
+    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+
+.modal-open .modal-dialog {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+
+.ccda-table {
+    table {
+        width: 100%;
+        background: #FFF;
+
+        >thead>tr>th {
+            @apply border-b capitalize font-semibold leading-normal p-xs text-left whitespace-nowrap;
+            font-size: 13px;
+        }
+        >tbody>tr>td {
+            @apply p-xs bg-white h-[36px];
+        }
+    }
+}
+
+// input animation style
+  @keyframes tilt-shaking {
+      0% { transform: rotate(0deg); }
+      25% { transform: rotate(2deg); }
+      50% { transform: rotate(0eg); }
+      75% { transform: rotate(-2deg); }
+      100% { transform: rotate(0deg); }
+  }
+  .shake-new {
+      animation: tilt-shaking 0.2s ease-in-out 10 forwards;
+  }
+
+
+
+
+
+// PATIENT FULL REGISTRATION FORM
+.full-reg-form {
+    @apply flex gap-md mx-auto p-md h-full;
+}
+
+@screen xl {
+    .full-reg-form {
+        width: 1480px;
+    }
+}
+.progress-bar {
+    height: 20px;
+    background-color: #e2e8f0;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    width: 100%;
+}
+.progress-fill-used {
+    height: 100%;
+    background-color: #38a169;
+    /* Green color */
+    width: 0%;
+    /* Used portion */
+    transition: width 0.4s ease;
+}
+
+.card.daterangepicker {
+  z-index: 9998 !important;
+  background-color: white;
+}
+
+.content.is-editable {
+    ul p, ol p {
+        display: inline;
+    }
+
+    ul li[data-checked] {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
+.favorite.active {
+    color: #FACC15
+}
+
+.favorite {
+    color: #D2D2D5
+}
+
+.spin { animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+
+/* 2 columns: [main] [right] */
+.encounter-flex-1 {
+  display: flex;
+  align-items: stretch;
+  /* default right width; JS will update --right-col */
+  --right-col: 620px;
+}
+
+/* 3 columns: [first: 380px] [main] [right] */
+.encounter-flex-2 {
+  display: flex;
+  align-items: stretch;
+  --right-col: 620px;
+}
+
+.encounter-first {
+  flex: 0 0 380px;      /* fixed */
+  min-width: 0;         /* allows internal overflow behavior */
+}
+
+/* Main (flexible) column always fills remaining space */
+.encounter-main {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+/* Right (resizable) column uses the CSS variable */
+.encounter-right {
+  flex: 0 0 var(--right-col);
+  width: var(--right-col);
+  min-width: 480px;
+  max-width: 960px;
+  position: relative;
+}
+
+
+
+
+// .draggable {
+//     cursor: move; /* fallback: no `url()` support or images disabled */
+//     cursor: url(images/grab.cur); /* fallback: Internet Explorer */
+// }
+
+// .draggable:active {
+//     cursor: url(images/grabbing.cur);
+// }
+
+.draggable {
+  cursor: url('/assets/icons/grab.svg') 8 8, grab; /* custom fallback to grab */
+}
+
+.draggable:active {
+  cursor: url('/assets/icons/grabbing.svg') 8 8, grabbing; /* custom fallback to grabbing */
+}
+
+/* Use FLOW mode: full gradient border that moves around */
+.ai-gradient-border {
+  --ai-gb-mode: flow;
+  --ai-gb-width: 1;
+  --ai-gb-speed: 3;
+  --ai-gb-radius: 4;
+  --ai-gb-colors: #00ffff, #ff00ff, #ff9900; /* optional */
+}
+
+
+/* host to anchor the reveal panel */
+.hover-parent {
+    position: relative; /* required for absolute children */
+  }
+
+  /* the invisible icons bar */
+  .hover-actions {
+    // position: absolute;
+    inset-block-start: 8px;      /* top */
+    inset-inline-end: 8px;       /* right (RTL-aware if using logical props) */
+    display: flex;
+    gap: 6px;
+
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .16s ease;
+  }
+
+  /* reveal on hover and when anything inside is focused (keyboard users) */
+  .hover-parent:hover .hover-actions,
+  .hover-parent:focus-within .hover-actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* optional: always show on touch devices (no hover) */
+  @media (hover: none) {
+    .hover-actions.always-visible-on-touch { opacity: 1; pointer-events: auto; }
+  }
+
+
+
+  /* Success tooltip (global, not component-scoped) */
+.tooltip-success .smart-tooltip-content {
+    @apply bg-success-600 text-white;
+  }
+  .tooltip-success .smart-tooltip-arrow {
+    @apply bg-success-600;
+  }
+
+  /* Error tooltip (global, not component-scoped) */
+  .tooltip-error .smart-tooltip-content {
+    @apply bg-danger-600 text-white;
+  }
+  .tooltip-error .smart-tooltip-arrow {
+    @apply bg-danger-600;
+  }
+
+
+.btn-switch-encounter {
+    /* Button 2.0 */
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0px;
+
+    width: 122px;
+    height: 31px;
+
+
+    /* Inside auto layout */
+    flex: none;
+    order: 1;
+    flex-grow: 0;
+}
+
+.cdk-overlay-pane.mat-mdc-dialog-panel
+{
+    max-width: 100% !important;
+    // min-width: 100% !important;
+}
+
+/* Referral v2 only: Create a Task dialog (Send for Review from referral sidescreen / fax consult report) must appear above sidebar/drawer. Panel class create-task-dialog--z9999 is only applied in v2 code paths. Single global z-index (no per-component CDK overrides). */
+.cdk-overlay-container:has(.cdk-overlay-pane.create-task-dialog--z9999) {
+  z-index: 10050 !important;
+}
+
+/* Schedule availability preview: full-app dim (nav + header); overlay pane is portaled to body. */
+.cdk-overlay-container:has(.cdk-overlay-pane.schedule-availability-preview-panel) {
+  z-index: 10050 !important;
+}
+
+.cdk-overlay-backdrop.schedule-availability-preview-backdrop {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+
+.cdk-overlay-pane.schedule-availability-preview-panel {
+  /* Keep width stable while loading vs FullCalendar; do not let content shrink or grow the pane. */
+  width: min(90vw, 72rem);
+  min-width: min(90vw, 72rem);
+  max-width: min(90vw, 72rem);
+  /* Fixed height: same before/after data so centered overlay does not jump when FC replaces skeleton. */
+  height: min(90vh, 52rem);
+  max-height: 90vh;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * ng-select dropdowns use appendTo="body", so they are not inside the CDK pane. The availability
+ * preview overlay stack is z-index 10050; default ng-dropdown-panel z-index is lower, so panels
+ * render behind the modal and clicks never reach them. Keep these class-scoped selects above the pane.
+ */
+.ng-dropdown-panel.provider-users-select,
+.ng-dropdown-panel.provider-location-select {
+  z-index: 10060 !important;
+}
+
+/*
+ * ng-select terminal selector inside the Collect Payment right sidebar: ed-overlay sits at
+ * z-index 9997 and intercepts clicks on the body-appended panel (default z-index 1050).
+ * Lift the panel above the overlay and ed-modal (9998) so options are clickable.
+ */
+.ng-dropdown-panel.terminal-select-panel {
+  z-index: 10000 !important;
+}
+
+/*
+ * Carelink "Connect to CareLink" wizard renders inside ed-modal (z-index 99999). Its body-appended
+ * ng-select panels default to a lower z-index and render behind the modal. Lift them above it.
+ */
+.ng-dropdown-panel.carelink-connect-panel {
+  z-index: 100000 !important;
+}
+
+/* Send for Review popover (referral v2): appear above view-fax drawer and referral sidescreen. */
+.cdk-overlay-container:has(.cdk-overlay-pane.send-for-review-popover) {
+  z-index: 10050 !important;
+}
+
+/* App download modal: appear above right sidebar / help drawer (ed-modal ~9998). */
+.cdk-overlay-container:has(.cdk-overlay-pane.app-download-modal-panel) {
+  z-index: 10050 !important;
+}
+
+/*
+ * Checkout credit picker: also opened from the invoice create/edit right sidebar, whose ed-modal
+ * sits at 9998 while the CDK container defaults to 1000 — the picker renders behind the drawer and
+ * its clicks land on ed-overlay (9997). Lift the container while the picker pane is mounted.
+ */
+.cdk-overlay-container:has(.cdk-overlay-pane.checkout-credit-picker-panel) {
+  z-index: 10050 !important;
+}
+
+/* Invisible backdrop for Send for Review CDK overlay (click-outside to close); used by view-fax-files-v2 and referral-sidescreen-v2. */
+.cdk-overlay-backdrop.send-for-review-popover-backdrop {
+  background: transparent !important;
+}
+
+.cdk-overlay-pane.send-for-review-popover {
+  max-width: min(90vw, 480px);
+  border-radius: 12px;
+  /* visible so sl-dropdown / sl-popup panels are not clipped */
+  overflow: visible;
+  box-shadow:
+    0 10px 40px rgba(15, 23, 42, 0.12),
+    0 2px 10px rgba(15, 23, 42, 0.08);
+}
+
+/* Send for Review: MatDialog fallback — rounded surface to match popover */
+.cdk-overlay-pane.create-task-dialog--referral-v2 .mat-mdc-dialog-surface,
+.cdk-overlay-pane.create-task-dialog--referral-v2 .mdc-dialog__surface {
+  border-radius: 12px !important;
+  overflow: visible;
+}
+
+.ed-custom-btn{
+    .btn{
+        width: 100%;
+        justify-content: flex-start !important;
+    }
+}
+.tracker {
+    .ng-dropdown-panel {
+        border: 1px solid #F3F4F6;
+        .ng-dropdown-panel-items {
+            // max-height: 480px;
+
+            .ng-option {
+                padding: 8px !important;
+                font-weight: normal;
+                border-bottom: 1px solid #F3F4F6;
+                margin: 8px 16px;
+
+                &.ng-option-selected {
+                    border-radius: 8px;
+                }
+            }
+        }
+        .ng-dropdown-header{
+            border: 0;
+            padding: 0;
+        }
+    }
+    .ng-dropdown-panel.ng-select-bottom {
+        margin-top: 4px;
+    }
+}
+sl-button.providers-filter-selected[variant="schedule"]::part(base) {
+  color: #005ef5 !important;
+}
+
+.template-details .inline-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+
+// quill-editor styles - Chandu
+
+.quill-editor, .ql-editor
+{
+    font-size: 13px !important;
+    line-height: 22px !important;
+}
+.quill-editor a {
+    color: #1c84f2 !important;
+}
+ .quill-editor ul
+{
+    margin:10px 0 10px 32px !important;
+    list-style: disc;
+    line-height: 22px !important;
+    word-break: break-word;
+    li
+    {
+        margin-bottom: 8px;
+        strong {
+            font-weight: 700 !important;
+        }
+    }
+}
+.quill-editor ol
+{
+    margin:10px 0 10px 4px !important;
+    line-height: 22px !important;
+    word-break: break-word;
+    li
+    {
+        margin-bottom: 8px;
+        strong {
+            font-weight: 700 !important;
+        }
+    }
+}
+.ql-editor ol 
+{
+    padding-left: 10px;
+    li
+    {
+        margin-bottom: 8px;
+        strong {
+            font-weight: 700 !important;
+        }
+    }
+}
+
+.ql-editor li[data-list=ordered], .ql-editor li[data-list], .ql-editor li[data-list=bullet]  {
+
+    margin-bottom: 8px;
+    
+    strong {
+        font-weight: 700 !important;
+    }
+}
+/* Level 1 */
+.ql-editor ol {
+    list-style-type: decimal !important;
+    padding-left: 24px;        /* keeps spacing clean */
+  }
+  
+  /* Level 2 */
+  .ql-editor ol ol {
+    list-style-type: lower-alpha !important;
+    padding-left: 24px;
+  }
+  
+  /* Level 3 */
+  .ql-editor ol ol ol {
+    list-style-type: lower-roman !important;
+    padding-left: 24px;
+  }
+  
+  /* Apply numbering to the LI itself (required in some PDF engines) */
+  .ql-editor ol li {
+    display: list-item !important;
+  }
+
+/* Level 1 */
+.quill-editor ol {
+    list-style-type: decimal !important;
+    padding-left: 24px;        /* keeps spacing clean */
+  }
+  
+  /* Level 2 */
+  .quill-editor ol ol {
+    list-style-type: lower-alpha !important;
+    padding-left: 24px;
+  }
+  
+  /* Level 3 */
+  .quill-editor ol ol ol {
+    list-style-type: lower-roman !important;
+    padding-left: 24px;
+  }
+  
+  /* Apply numbering to the LI itself (required in some PDF engines) */
+  .quill-editor ol li {
+    display: list-item !important;
+  }
+  
+.quill-editor p
+{
+
+    word-break: break-word;
+    min-height: 1em;
+}
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+    margin-bottom: 10px;
+}
+
+.quill-editor p span
+{
+    word-break: break-word;
+}
+
+.ql-snow .ql-editor a {
+    color: #1c84f2 !important;
+}
+
+.ql-editor p a {
+    color: #1c84f2 !important;
+}
+
+.ql-editor p strong {
+    font-weight: 700 !important;
+}
+
+p.quill-editor p strong {
+    font-weight: 700 !important;
+
+  }
+  p.quill-editor  strong {
+    font-weight: 700 !important;
+
+  }
+
+.ql-toolbar.ql-snow {
+    border: 1px solid #e5e7eb;
+    @apply bg-lighter rounded-t p-xs
+}
+
+.ql-container {
+    @apply text-sm
+}
+
+.ql-toolbar.ql-snow+.ql-container.ql-snow {
+    border: 1px solid #e5e7eb;
+    border-top: 0;
+    @apply rounded-b leading-10 text-dark;
+}
+
+.is-invalid .ql-toolbar.ql-snow+.ql-container.ql-snow,
+.is-invalid .ql-toolbar.ql-snow {
+    border: 0px solid #e5e7eb;
+}
+
+.is-invalid .ql-toolbar.ql-snow,
+.is-invalid .ql-toolbar.ql-snow+.ql-container.ql-snow {
+    border: 0px solid #e5e7eb;
+}
+
+.ql-container.ql-snow {
+    @apply border
+}
+
+.is-invalid .ql-container.ql-snow {
+    @apply border border-red-300;
+}
+
+.ql-toolbar.ql-snow .ql-formats {
+    margin-right: 0px;
+    @apply flex gap-xs
+}
+
+.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
+    @apply rounded w-6 h-6 hover:border hover:border-slate-500 hover:bg-white p-2xs
+}
+
+.variable-dropdown {
+    @apply absolute rounded w-6 h-6 hover:bg-white p-2xs cursor-pointer;
+    top: 9px;
+    left: 10px;
+}
+
+.ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0px 0px 5px #ddd;
+    color: #444;
+    padding: 5px 12px;
+    white-space: nowrap;
+    @apply rounded
+}
+
+.ql-editing {
+    left: 0px !important;
+}
+
+.ql-snow .ql-tooltip input[type=text] {
+    display: none;
+    border: 1px solid #e5e7eb;
+    font-size: 13px;
+    height: 26px;
+    margin: 0px;
+    padding: 3px 5px;
+    width: 170px;
+    @apply rounded w-[220px] shadow flex items-center border border-slate-300 px-3
+}
+
+// .quill-editor {
+//     word-break: break-all;
+// }
+.ql-size-huge {
+    font-size: 2.5rem;
+    line-height: 3rem;
+}
+.ql-size-large {
+    font-size: 1.5rem;
+    line-height: 2rem; 
+}
+.ql-size-small {
+    font-size: 0.75rem;
+    line-height: 1.1rem;
+}
+/* Heading sizes inside the editor */
+
+.quill-editor h1, .ql-snow .ql-editor h1 { 
+    font-size: 2.2rem !important; 
+    font-weight: 600; 
+    margin-bottom: 0.625rem; 
+}
+
+.quill-editor h2, .ql-snow .ql-editor h2 { 
+    font-size: 2rem !important; 
+    font-weight: 600; 
+    margin-bottom: 0.625rem; 
+}
+
+.quill-editor h3, .ql-snow .ql-editor h3 { 
+    font-size: 1.6rem !important; 
+    font-weight: 600; 
+    margin-bottom: 0.625rem; 
+}
+
+.quill-editor h4, .ql-snow .ql-editor h4 { 
+    font-size: 1.4rem !important; 
+    font-weight: 600; 
+    margin-bottom: 0.625rem; 
+}
+
+.quill-editor h5, .ql-snow .ql-editor h5 { 
+    font-size: 1.1rem !important; 
+    font-weight: 600; 
+    margin-bottom: 0.625rem; 
+}
+
+.quill-editor h6, .ql-snow .ql-editor h6 { 
+    font-size: 0.9rem !important; 
+    font-weight: 600; 
+}
+.preview-content {
+    white-space: pre-wrap;   /* keeps spaces + line breaks */
+  }
+// .appointment-details{
+//     .appointment-popup{
+//        left: -6rem;
+//        position: absolute;
+//     }
+// }
+.text-description {
+    color: #2e2c2c;
+}
+
+ng-select.diagnosis-select ng-dropdown-panel .scroll-host {
+  position: unset;
+  overflow-y: scroll !important;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+ng-select.diagnosis-select ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar {
+  width: 8px;
+}
+
+ng-select.diagnosis-select ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb {
+  background-color: rgba(136, 136, 136, 0.5) !important;
+  border-radius: 4px;
+}
+
+ng-select.diagnosis-select ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track {
+  background: rgba(136, 136, 136, 0.1);
+}
+
+// Tiptap editor height and padding
+
+.p-tiptap-title > div {
+    padding: 6.6px 12px;
+}
+
+.p-tiptap-des > div {
+    padding: 0.625rem;
+    min-height: 3.5rem;
+
+}
+
+.p-tiptap-notes > div {
+    padding: 0.625rem;
+    height: 5rem;
+}
+
+.p-tiptap-comment > div {
+    padding: 0.625rem;
+    height: 7rem;
+}
+
+// this below style are used for the tiptap editor list item (macro)
+
+.tiptap-style-for-list ol::marker,
+.tiptap-style-for-list ul::marker {
+  content: none ;
+}
+
+ .tiptap-style-for-list p,
+.tiptap-style-for-list li {
+   
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+ .tiptap-style-for-list li p {
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+ .tiptap-style-for-list ol,
+.tiptap-style-for-list ul {
+    padding-left: 1.5em;
+    margin: 0.4em 0;
+    list-style-position: outside;
+}
+
+ .tiptap-style-for-list li+li {
+    margin-top: 0.35em;
+}
+
+/* Base ordered list styles */
+.tiptap-style-for-list ol {
+    list-style-type: decimal ;
+}
+
+/* Automatic repeating style pattern */
+.tiptap-style-for-list ol ol {
+    list-style-type: lower-alpha ;
+}
+
+ .tiptap-style-for-list ol ol ol {
+    list-style-type: lower-roman ;
+}
+
+ .tiptap-style-for-list ol ol ol ol {
+    list-style-type: decimal ;
+}
+
+ .tiptap-style-for-list ol ol ol ol ol {
+    list-style-type: lower-alpha ;
+}
+
+.tiptap-style-for-list ol ol ol ol ol ol {
+    list-style-type: lower-roman ;
+}
+
+/* Repeat pattern infinitely */
+ .tiptap-style-for-list ol ol ol ol ol ol ol {
+    list-style-type: decimal ;
+}
+
+.tiptap-style-for-list ol ol ol ol ol ol ol ol {
+    list-style-type: lower-alpha ;
+}
+
+.tiptap-style-for-list ol ol ol ol ol ol ol ol ol {
+    list-style-type: lower-roman ;
+}
+
+/* Bulleted list variants */
+ .tiptap-style-for-list ul {
+    list-style-type: disc ;
+}
+
+ .tiptap-style-for-list ul ul {
+    list-style-type: circle ;
+}
+
+ .tiptap-style-for-list ul ul ul {
+    list-style-type: square ;
+}
+
+ .tiptap-style-for-list ul ul ul ul {
+    list-style-type: disc ;
+}
+
+.tiptap-style-for-list ul ul ul ul ul {
+    list-style-type: circle ;
+}
+
+ .tiptap-style-for-list ul ul ul ul ul ul {
+    list-style-type: square ;
+}
+
+.tiptap-style-for-list ul,
+.tiptap-style-for-list ol {
+    margin-left: 1em;
+}
+
+/* Headings inside rendered TipTap / ProseMirror HTML (task descriptions, etc.) */
+.tiptap-style-for-list h1,
+.tiptap-style-for-list h2,
+.tiptap-style-for-list h3,
+.tiptap-style-for-list h4,
+.tiptap-style-for-list h5,
+.tiptap-style-for-list h6 {
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0.45em 0 0.2em;
+}
+
+.tiptap-style-for-list h1:first-child,
+.tiptap-style-for-list h2:first-child,
+.tiptap-style-for-list h3:first-child,
+.tiptap-style-for-list h4:first-child,
+.tiptap-style-for-list h5:first-child,
+.tiptap-style-for-list h6:first-child {
+    margin-top: 0;
+}
+
+.tiptap-style-for-list h1 { font-size: 1.25rem; }
+.tiptap-style-for-list h2 { font-size: 1.125rem; }
+.tiptap-style-for-list h3 { font-size: 1.05rem; }
+.tiptap-style-for-list h4 { font-size: 1rem; }
+.tiptap-style-for-list h5,
+.tiptap-style-for-list h6 { font-size: 0.95rem; }
+
+.tiptap-style-for-list blockquote {
+    margin: 0.4em 0;
+    padding-left: 0.75em;
+    border-left: 3px solid #cbd5e1;
+    color: #64748b;
+}
+
+.tiptap-style-for-list a {
+    color: #2563eb;
+    text-decoration: underline;
+}
+
+/* Rich preview: tables, checkboxes, TipTap-native nodes (use with tiptap-style-for-list) */
+.tiptap-style-for-list,
+.tiptap-rich-preview {
+    .tableWrapper {
+        overflow-x: auto;
+        margin: 0.4em 0;
+    }
+
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        table-layout: fixed;
+        overflow-wrap: anywhere;
+        text-align: left;
+    }
+
+    th,
+    td {
+        border: 1px solid #090909;
+        padding: 4px;
+        vertical-align: top;
+    }
+
+    input[type="checkbox"] {
+        vertical-align: middle;
+        margin-right: 4px;
+        pointer-events: none;
+    }
+
+    .tt-checkbox {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35em;
+        vertical-align: middle;
+        margin-right: 0.25em;
+
+        .tt-checkbox-box {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1em;
+            height: 1em;
+            border: 1px solid #64748b;
+            border-radius: 2px;
+            flex-shrink: 0;
+        }
+
+        &.is-checked .tt-checkbox-box {
+            background: #2563eb;
+            border-color: #2563eb;
+        }
+    }
+}
+
+.tiptap-parent-focused {
+  border:1px solid #2563eb ;
+  box-shadow: 0 0 0 2px #007bff33 ;
+}
+.slide-in-rtl {
+  animation: slideInRTL 0.3s ease-out forwards;
+}
+
+@keyframes slideInRTL {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.slide-in-ltr {
+  animation: slideInLTR 0.3s ease-out forwards;
+}
+ 
+@keyframes slideInLTR {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.datetime-icon::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+
+.datetime-icon {
+  position: relative;
+  padding-right: 2.75rem;
+}
+
+/* Hide native calendar icon */
+.datetime-icon::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  cursor: pointer;
+}
+
+/* Base64 icon */
+.datetime-icon::after {
+  content: "";
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+
+  /* REPLACE WITH YOUR BASE64 STRING */
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzEyOV8yNDk0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiM4RTk2QTQiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzEyOV8yNDk0KSI+CjxwYXRoIGQ9Ik01LjMwNzcgMjEuNTAwMUM0LjgwMjU3IDIxLjUwMDEgNC4zNzUgMjEuMzI1MSA0LjAyNSAyMC45NzUxQzMuNjc1IDIwLjYyNTEgMy41IDIwLjE5NzUgMy41IDE5LjY5MjRWNi4zMDc4NEMzLjUgNS44MDI3MSAzLjY3NSA1LjM3NTE0IDQuMDI1IDUuMDI1MTRDNC4zNzUgNC42NzUxNCA0LjgwMjU3IDQuNTAwMTQgNS4zMDc3IDQuNTAwMTRINi42OTIzM1YyLjM4NDc3SDguMjMwNzVWNC41MDAxNEgxNS44MDc3VjIuMzg0NzdIMTcuMzA3NlY0LjUwMDE0SDE4LjY5MjNDMTkuMTk3NCA0LjUwMDE0IDE5LjYyNSA0LjY3NTE0IDE5Ljk3NSA1LjAyNTE0QzIwLjMyNSA1LjM3NTE0IDIwLjUgNS44MDI3MSAyMC41IDYuMzA3ODRWMTkuNjkyNEMyMC41IDIwLjE5NzUgMjAuMzI1IDIwLjYyNTEgMTkuOTc1IDIwLjk3NTFDMTkuNjI1IDIxLjMyNTEgMTkuMTk3NCAyMS41MDAxIDE4LjY5MjMgMjEuNTAwMUg1LjMwNzdaTTUuMzA3NyAyMC4wMDAxSDE4LjY5MjNDMTguNzY5MiAyMC4wMDAxIDE4LjgzOTcgMTkuOTY4MSAxOC45MDM4IDE5LjkwNEMxOC45Njc5IDE5LjgzOTggMTkgMTkuNzY5MyAxOSAxOS42OTI0VjEwLjMwNzhINC45OTk5N1YxOS42OTI0QzQuOTk5OTcgMTkuNzY5MyA1LjAzMjAyIDE5LjgzOTggNS4wOTYxMiAxOS45MDRDNS4xNjAyNCAxOS45NjgxIDUuMjMwNzcgMjAuMDAwMSA1LjMwNzcgMjAuMDAwMVpNNC45OTk5NyA4LjgwNzg3SDE5VjYuMzA3ODRDMTkgNi4yMzA5MSAxOC45Njc5IDYuMTYwMzggMTguOTAzOCA2LjA5NjI3QzE4LjgzOTcgNi4wMzIxNyAxOC43NjkyIDYuMDAwMTIgMTguNjkyMyA2LjAwMDEySDUuMzA3N0M1LjIzMDc3IDYuMDAwMTIgNS4xNjAyNCA2LjAzMjE3IDUuMDk2MTIgNi4wOTYyN0M1LjAzMjAyIDYuMTYwMzggNC45OTk5NyA2LjIzMDkxIDQuOTk5OTcgNi4zMDc4NFY4LjgwNzg3Wk0xMiAxNC4wNzdDMTEuNzU1MSAxNC4wNzcgMTEuNTQ2NSAxMy45OTA4IDExLjM3NCAxMy44MTg0QzExLjIwMTYgMTMuNjQ2IDExLjExNTQgMTMuNDM3MyAxMS4xMTU0IDEzLjE5MjRDMTEuMTE1NCAxMi45NDc2IDExLjIwMTYgMTIuNzM4OSAxMS4zNzQgMTIuNTY2NUMxMS41NDY1IDEyLjM5NDEgMTEuNzU1MSAxMi4zMDc4IDEyIDEyLjMwNzhDMTIuMjQ0OCAxMi4zMDc4IDEyLjQ1MzUgMTIuMzk0MSAxMi42MjU5IDEyLjU2NjVDMTIuNzk4NCAxMi43Mzg5IDEyLjg4NDYgMTIuOTQ3NiAxMi44ODQ2IDEzLjE5MjRDMTIuODg0NiAxMy40MzczIDEyLjc5ODQgMTMuNjQ2IDEyLjYyNTkgMTMuODE4NEMxMi40NTM1IDEzLjk5MDggMTIuMjQ0OCAxNC4wNzcgMTIgMTQuMDc3Wk03Ljk5OTk4IDE0LjA3N0M3Ljc1NTExIDE0LjA3NyA3LjU0NjQ2IDEzLjk5MDggNy4zNzQwMyAxMy44MTg0QzcuMjAxNTkgMTMuNjQ2IDcuMTE1MzggMTMuNDM3MyA3LjExNTM4IDEzLjE5MjRDNy4xMTUzOCAxMi45NDc2IDcuMjAxNTkgMTIuNzM4OSA3LjM3NDAzIDEyLjU2NjVDNy41NDY0NiAxMi4zOTQxIDcuNzU1MTEgMTIuMzA3OCA3Ljk5OTk4IDEyLjMwNzhDOC4yNDQ4NCAxMi4zMDc4IDguNDUzNDkgMTIuMzk0MSA4LjYyNTkzIDEyLjU2NjVDOC43OTgzNiAxMi43Mzg5IDguODg0NTggMTIuOTQ3NiA4Ljg4NDU4IDEzLjE5MjRDOC44ODQ1OCAxMy40MzczIDguNzk4MzYgMTMuNjQ2IDguNjI1OTMgMTMuODE4NEM4LjQ1MzQ5IDEzLjk5MDggOC4yNDQ4NCAxNC4wNzcgNy45OTk5OCAxNC4wNzdaTTE2IDE0LjA3N0MxNS43NTUxIDE0LjA3NyAxNS41NDY1IDEzLjk5MDggMTUuMzc0IDEzLjgxODRDMTUuMjAxNiAxMy42NDYgMTUuMTE1NCAxMy40MzczIDE1LjExNTQgMTMuMTkyNEMxNS4xMTU0IDEyLjk0NzYgMTUuMjAxNiAxMi43Mzg5IDE1LjM3NCAxMi41NjY1QzE1LjU0NjUgMTIuMzk0MSAxNS43NTUxIDEyLjMwNzggMTYgMTIuMzA3OEMxNi4yNDQ4IDEyLjMwNzggMTYuNDUzNSAxMi4zOTQxIDE2LjYyNTkgMTIuNTY2NUMxNi43OTg0IDEyLjczODkgMTYuODg0NiAxMi45NDc2IDE2Ljg4NDYgMTMuMTkyNEMxNi44ODQ2IDEzLjQzNzMgMTYuNzk4NCAxMy42NDYgMTYuNjI1OSAxMy44MTg0QzE2LjQ1MzUgMTMuOTkwOCAxNi4yNDQ4IDE0LjA3NyAxNiAxNC4wNzdaTTEyIDE4LjAwMDFDMTEuNzU1MSAxOC4wMDAxIDExLjU0NjUgMTcuOTEzOSAxMS4zNzQgMTcuNzQxNUMxMS4yMDE2IDE3LjU2OSAxMS4xMTU0IDE3LjM2MDQgMTEuMTE1NCAxNy4xMTU1QzExLjExNTQgMTYuODcwNiAxMS4yMDE2IDE2LjY2MiAxMS4zNzQgMTYuNDg5NkMxMS41NDY1IDE2LjMxNzEgMTEuNzU1MSAxNi4yMzA5IDEyIDE2LjIzMDlDMTIuMjQ0OCAxNi4yMzA5IDEyLjQ1MzUgMTYuMzE3MSAxMi42MjU5IDE2LjQ4OTZDMTIuNzk4NCAxNi42NjIgMTIuODg0NiAxNi44NzA2IDEyLjg4NDYgMTcuMTE1NUMxMi44ODQ2IDE3LjM2MDQgMTIuNzk4NCAxNy41NjkgMTIuNjI1OSAxNy43NDE1QzEyLjQ1MzUgMTcuOTEzOSAxMi4yNDQ4IDE4LjAwMDEgMTIgMTguMDAwMVpNNy45OTk5OCAxOC4wMDAxQzcuNzU1MTEgMTguMDAwMSA3LjU0NjQ2IDE3LjkxMzkgNy4zNzQwMyAxNy43NDE1QzcuMjAxNTkgMTcuNTY5IDcuMTE1MzggMTcuMzYwNCA3LjExNTM4IDE3LjExNTVDNy4xMTUzOCAxNi44NzA2IDcuMjAxNTkgMTYuNjYyIDcuMzc0MDMgMTYuNDg5NkM3LjU0NjQ2IDE2LjMxNzEgNy43NTUxMSAxNi4yMzA5IDcuOTk5OTggMTYuMjMwOUM4LjI0NDg0IDE2LjIzMDkgOC40NTM0OSAxNi4zMTcxIDguNjI1OTMgMTYuNDg5NkM4Ljc5ODM2IDE2LjY2MiA4Ljg4NDU4IDE2Ljg3MDYgOC44ODQ1OCAxNy4xMTU1QzguODg0NTggMTcuMzYwNCA4Ljc5ODM2IDE3LjU2OSA4LjYyNTkzIDE3Ljc0MTVDOC40NTM0OSAxNy45MTM5IDguMjQ0ODQgMTguMDAwMSA3Ljk5OTk4IDE4LjAwMDFaTTE2IDE4LjAwMDFDMTUuNzU1MSAxOC4wMDAxIDE1LjU0NjUgMTcuOTEzOSAxNS4zNzQgMTcuNzQxNUMxNS4yMDE2IDE3LjU2OSAxNS4xMTU0IDE3LjM2MDQgMTUuMTE1NCAxNy4xMTU1QzE1LjExNTQgMTYuODcwNiAxNS4yMDE2IDE2LjY2MiAxNS4zNzQgMTYuNDg5NkMxNS41NDY1IDE2LjMxNzEgMTUuNzU1MSAxNi4yMzA5IDE2IDE2LjIzMDlDMTYuMjQ0OCAxNi4yMzA5IDE2LjQ1MzUgMTYuMzE3MSAxNi42MjU5IDE2LjQ4OTZDMTYuNzk4NCAxNi42NjIgMTYuODg0NiAxNi44NzA2IDE2Ljg4NDYgMTcuMTE1NUMxNi44ODQ2IDE3LjM2MDQgMTYuNzk4NCAxNy41NjkgMTYuNjI1OSAxNy43NDE1QzE2LjQ1MzUgMTcuOTEzOSAxNi4yNDQ4IDE4LjAwMDEgMTYgMTguMDAwMVoiIGZpbGw9IiM4RTk2QTQiLz4KPC9nPgo8L3N2Zz4K);
+  
+  pointer-events: none;
+}
+
+.timeslot-icon {
+  position: relative;
+  padding-right: 2.75rem;
+}
+
+/* Hide native time picker icon */
+.timeslot-icon::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  cursor: pointer;
+}
+
+/* Base64 clock icon */
+.timeslot-icon::after {
+  content: "";
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxtYXNrIGlkPSJtYXNrMF8xNTMwXzU5IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjUiPg0KPHJlY3QgeT0iMC41IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNBMkE0QTYiLz4NCjwvbWFzaz4NCjxnIG1hc2s9InVybCgjbWFzazBfMTUzMF81OSkiPg0KPHBhdGggZD0iTTEzIDEyLjFWOC41QzEzIDguMjE2NjcgMTIuOTA0MiA3Ljk3OTE3IDEyLjcxMjUgNy43ODc1QzEyLjUyMDggNy41OTU4MyAxMi4yODMzIDcuNSAxMiA3LjVDMTEuNzE2NyA3LjUgMTEuNDc5MiA3LjU5NTgzIDExLjI4NzUgNy43ODc1QzExLjA5NTggNy45NzkxNyAxMSA4LjIxNjY3IDExIDguNVYxMi40NzVDMTEgMTIuNjA4MyAxMS4wMjUgMTIuNzM3NSAxMS4wNzUgMTIuODYyNUMxMS4xMjUgMTIuOTg3NSAxMS4yIDEzLjEgMTEuMyAxMy4yTDE0LjYgMTYuNUMxNC43ODMzIDE2LjY4MzMgMTUuMDE2NyAxNi43NzUgMTUuMyAxNi43NzVDMTUuNTgzMyAxNi43NzUgMTUuODE2NyAxNi42ODMzIDE2IDE2LjVDMTYuMTgzMyAxNi4zMTY3IDE2LjI3NSAxNi4wODMzIDE2LjI3NSAxNS44QzE2LjI3NSAxNS41MTY3IDE2LjE4MzMgMTUuMjgzMyAxNiAxNS4xTDEzIDEyLjFaTTEyIDIyLjVDMTAuNjE2NyAyMi41IDkuMzE2NjcgMjIuMjM3NSA4LjEgMjEuNzEyNUM2Ljg4MzMzIDIxLjE4NzUgNS44MjUgMjAuNDc1IDQuOTI1IDE5LjU3NUM0LjAyNSAxOC42NzUgMy4zMTI1IDE3LjYxNjcgMi43ODc1IDE2LjRDMi4yNjI1IDE1LjE4MzMgMiAxMy44ODMzIDIgMTIuNUMyIDExLjExNjcgMi4yNjI1IDkuODE2NjcgMi43ODc1IDguNkMzLjMxMjUgNy4zODMzMyA0LjAyNSA2LjMyNSA0LjkyNSA1LjQyNUM1LjgyNSA0LjUyNSA2Ljg4MzMzIDMuODEyNSA4LjEgMy4yODc1QzkuMzE2NjcgMi43NjI1IDEwLjYxNjcgMi41IDEyIDIuNUMxMy4zODMzIDIuNSAxNC42ODMzIDIuNzYyNSAxNS45IDMuMjg3NUMxNy4xMTY3IDMuODEyNSAxOC4xNzUgNC41MjUgMTkuMDc1IDUuNDI1QzE5Ljk3NSA2LjMyNSAyMC42ODc1IDcuMzgzMzMgMjEuMjEyNSA4LjZDMjEuNzM3NSA5LjgxNjY3IDIyIDExLjExNjcgMjIgMTIuNUMyMiAxMy44ODMzIDIxLjczNzUgMTUuMTgzMyAyMS4yMTI1IDE2LjRDMjAuNjg3NSAxNy42MTY3IDE5Ljk3NSAxOC42NzUgMTkuMDc1IDE5LjU3NUMxOC4xNzUgMjAuNDc1IDE3LjExNjcgMjEuMTg3NSAxNS45IDIxLjcxMjVDMTQuNjgzMyAyMi4yMzc1IDEzLjM4MzMgMjIuNSAxMiAyMi41Wk0xMiAyMC41QzE0LjIxNjcgMjAuNSAxNi4xMDQyIDE5LjcyMDggMTcuNjYyNSAxOC4xNjI1QzE5LjIyMDggMTYuNjA0MiAyMCAxNC43MTY3IDIwIDEyLjVDMjAgMTAuMjgzMyAxOS4yMjA4IDguMzk1ODMgMTcuNjYyNSA2LjgzNzVDMTYuMTA0MiA1LjI3OTE3IDE0LjIxNjcgNC41IDEyIDQuNUM5Ljc4MzMzIDQuNSA3Ljg5NTgzIDUuMjc5MTcgNi4zMzc1IDYuODM3NUM0Ljc3OTE3IDguMzk1ODMgNCAxMC4yODMzIDQgMTIuNUM0IDE0LjcxNjcgNC43NzkxNyAxNi42MDQyIDYuMzM3NSAxOC4xNjI1QzcuODk1ODMgMTkuNzIwOCA5Ljc4MzMzIDIwLjUgMTIgMjAuNVoiIGZpbGw9IiNBMkE0QTYiLz4NCjwvZz4NCjwvc3ZnPg0K);
+
+  pointer-events: none;
+}
+
+.dtField{
+  position: relative;
+  width: 100%;
+}
+
+.dtPh{
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 5;
+  opacity: 0.8;
+}
+
+/* show placeholder only when empty */
+.dtField.hasValue .dtPh,
+.dtField:focus-within .dtPh{
+  display: none;
+}
+
+/* hide the browser's default dd-mm-yyyy --:-- text when empty */
+.dtField.isEmpty input{
+  color: transparent;           /* hides the built-in pattern */
+  caret-color: transparent;     /* hides caret while empty */
+}
+
+/* bring text back when user focuses (so they can type) */
+.dtField.isEmpty:focus-within input{
+  color: inherit;
+  caret-color: inherit;
+}
+
+.visually-hidden {
+    display: none;
+}
+
+/* Host layout bridge for @edvak99/voice-receptionist-widget inside EHR.
+   EHR #content-area uses overflow:hidden; bound the widget flex chain so .eds-content scrolls. */
+#content-area:has(eds-app-shell) {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+#content-area:has(eds-app-shell) > #layout-header {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto !important;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#content-area:has(eds-app-shell) eds-app-shell {
+  display: flex !important;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+#content-area:has(eds-app-shell) eds-app-shell .eds-layout {
+  flex: 1 1 auto;
+  min-height: 0 !important;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+#content-area:has(eds-app-shell) eds-app-shell .eds-main {
+  min-height: 0;
+  overflow: hidden;
+}
+
+#content-area:has(eds-app-shell) eds-app-shell .eds-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}