@edvak99/voice-receptionist-widget 1.1.13 → 1.1.15

package/src/assets/css/Ed_style.scss

@@ -0,0 +1,1034 @@
+/*-------custom color classes -----*/
+
+.highlightText {
+    background-color: rgb(139 128 233);
+    border-radius: 11px;
+    color: white;
+    padding: 0px 3px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.highlightText1{
+    background-color: rgb(52 157 89);
+    border-radius: 10px;
+    color: white;
+    padding: 0px 4px;
+  }
+/*-----custom negative margins -----*/
+
+
+/*------ custom z index ------*/
+.z-999 {
+    z-index: 999;
+}
+
+/*----- custom shadow ------*/
+
+/*----- custom active class -----*/
+
+
+/*----select dropdown ---*/
+
+.selectddwrap {
+    position: relative;
+    cursor: pointer;
+    line-height: 1.25rem;
+}
+
+.selectddwrap .svg {
+    margin-left: 5px;
+    vertical-align: middle;
+    display: inline-block;
+    float: none;
+}
+
+.selectdd_btn_wrap li {
+    cursor: pointer;
+}
+
+.selectdd_btn_wrap li:last-child {
+    border: none;
+}
+
+.selectdd_btn {
+    text-align: left;
+}
+
+.selectdd_btn_wrap {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    width: 100%;
+    z-index: 10;
+}
+.selectdd_btn_wrap.dd-max {
+    width: 160%;
+}
+ 
+.selectDd { 
+    display: none;
+} 
+.d-ne { 
+    display: block !important;
+}
+
+/*--- Incoming Call ----*/
+.bottom-boxfixed {
+    position: fixed;
+    top: 60px;
+    right: 8px;
+    z-index: 99999;
+}
+
+
+
+
+.h-screen-hdr {
+    height: calc(100vh - 64px);
+    position: relative;
+}
+
+.scroll_sm {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 10.5rem;
+}
+
+.scroll_md {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 26rem;
+}
+
+.facesheet_wrap {
+    height: calc(100vh - 16rem) !important;
+}
+.find_patient_table {
+    overflow: auto;
+    height: calc(100vh - 370px);
+}
+/*----right sidepanels body----*/
+.card_body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 165px); 
+    padding-right: 10px;
+    scroll-behavior: smooth;
+}
+
+.drag_popup {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 300px); 
+    padding-right: 10px;
+    scroll-behavior: smooth;
+}
+
+/*--- coding-reivew, review, patient-case-manager, patient-cicle-of-care, view-patient-case-manager, view-patient-circle-of-care ----*/
+.body_scroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - 17rem);
+}
+
+/*---patient-insurance, form-utils,services.ts----*/
+.insurance_card {  
+    height: 7.5rem;
+}
+
+.menu_href {
+    color: #3e3e3e;
+    font-size: 12px;
+    text-decoration: none;
+    font-weight: 400;
+    vertical-align: -webkit-baseline-middle;
+    cursor: pointer;
+}
+
+::ng-deep .ngb-dp-content .ngb-dp-weekday {
+    color: #005CF3 !important;
+    font-style: normal !important;
+}
+
+/*---- Table ------*/
+table.normal_table  {
+    border-collapse: collapse;
+    border-radius: 4px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--whitecolor);
+    font-size: 0.875rem;
+    width: 100%;
+    position: relative;
+}
+
+.normal_table thead{
+    position: sticky;
+    top: 0;
+    background-color: #f5f5f5;
+}
+
+.normal_table tr>th {
+    font-size: 14px;
+    font-weight: bold;
+    color: #7E7E7E;
+    padding: 0.75rem 1.25rem;
+    font-weight: 500;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    background-color: #f5f5f5;
+}
+
+.normal_table tr>td {
+    font-size: 12px;
+    color: #202124;
+    font-weight: 500;
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.normal_table tr:hover td {
+    background-color: #f5f5f5;
+}
+
+/*--- stepy (demographics, new-referrals, add-referral)---*/
+.stepy_wrapper.stepy_circle li .stepy_counter {
+    background-color: #C2C2C2;
+    height: 0.75rem;
+    width: 0.75rem;
+}
+
+.stepy_wrapper.stepy_circle li::after,
+.stepy_wrapper.stepy_circle li::before {
+    top: 4px;
+}
+
+.stepy_wrapper {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+    margin: 0;
+    padding: 0;
+}
+
+.stepy_wrapper li {
+    list-style: none;
+}
+
+.stepy_wrapper li {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 5px;
+    padding: 1rem 0;
+}
+.stepy_wrapper li.active .material-symbols-rounded, .stepy_wrapper li.active .stepy_name {
+    color: #005CF3;
+}
+.stepy_wrapper li.active:last-child, .stepy_wrapper li:last-child{
+    border-left:none;
+}
+.stepy_wrapper li.active::before {
+    position: absolute;
+    content: "";
+    border-left: 2px solid #005CF3;
+    width: 100%;
+    top: 24px;
+    left: 11px; 
+    padding: 26% 0;
+}
+.stepy_wrapper li:last-of-type.active::before 
+{
+    border-left: 2px solid transparent;
+}
+
+
+.stepy_wrapper li::after {
+    position: absolute;
+    content: "";
+    border-left: 2px solid #737373;
+    width: 100%;
+    top: 24px;
+    left: 11px; 
+    padding: 26% 0;
+}
+.stepy_wrapper li .stepy_counter {
+    position: relative;
+    z-index: 5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--whitecolor);
+    border: 1px solid var(--bordercolor1);
+    margin-bottom: 0.4375rem;
+    font-size: 0.7rem;
+    color: #7e7e7e;
+}
+
+.stepy_wrapper li .stepy_name {
+    font-size: 0.8rem;
+}
+
+.stepy_wrapper li.active {
+    font-weight: normal;
+}
+
+.stepy_wrapper li.completed .stepy_counter,
+.stepy_wrapper li.active .stepy_counter {
+    background-color: var(--bluecolor);
+    border-color: var(--bluecolor);
+    color: var(--whitecolor);
+}
+
+.stepy_wrapper li.completed::after {
+    position: absolute;
+    content: "";
+    border-left: 2px solid #005CF3;
+    width: 100%;
+    top: 24px;
+    left: 11px; 
+    padding: 26% 0;
+}
+
+.stepy_wrapper li:first-child::before {
+    content: none;
+}
+
+.stepy_wrapper li:last-child::after {
+    content: none;
+}
+/*-----facesheet, add-authentication-settings, add-location, add-user ----*/
+.timeline_container.w_12 li::before {
+    width: 0.75rem;
+    height: 0.75rem;
+    left: -0.5rem;
+}
+
+.timeline_container.w_12 li {
+    padding-bottom: 1.20rem;
+}
+
+.recent_activity {
+    margin: 0 0 0.9375rem;
+    padding: 0;
+    list-style: none;
+}
+
+
+
+/*------- account-activites, faacesheet.component.ts-----------*/
+.recent_activity li {
+    margin-left: 0.3125rem;
+    padding: 0px 0.625rem 0.875rem 0.9375rem;
+    position: relative;
+    border-left: 2px solid #c2c2c2;
+}
+
+.recent_activity li:before {
+    content: "";
+    background-color: #ffffff;
+    border: 2px solid #7E7E7E;
+    width: 0.75rem;
+    height: 0.75rem;
+    display: inline-block;
+    border-radius: 1.25rem;
+    left: -0.4375rem;
+    position: absolute;
+}
+
+.recent_activity li.active::before {
+    border: 3px solid #66AC7A;
+}
+
+
+/*--- right side panel classes ------*/
+.card_footer {
+    margin-top: 0.4rem;
+    color: #ffffff;
+}
+
+.color_palete {
+    padding: 0.625rem 8px 8px 0.625rem;
+    border-radius: 4px;
+    max-height: 10rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.color_p {
+    width: 16%;
+    height: 1.8rem;
+    display: flex;
+    border-radius: 4px;
+    margin: 3px;
+    display: inline-flex;
+    vertical-align: middle;
+    text-align: center;
+    justify-content: center;
+}
+
+.color_p input[type="checkbox"] {
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    opacity: 0.5;
+}
+
+.color_p>i.fa {
+    color: var(--whitecolor);
+    line-height: 2;
+}
+
+.color_circle {
+    height: 1.25rem;
+    width: 1.25rem;
+    border: none;
+    border-radius: 1.25rem;
+    vertical-align: middle;
+}
+
+.color_palete .color_p:nth-child(5n) {
+    margin-right: 0;
+}
+
+
+/*-----billing, e-m-calculator, demograhpics, facesheet, facesheet-navigtor, imaging, immunization,s lab, medication, notes, office-hours, referral-sidescreen, refferasl--------*/
+.todo_tabs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.todo_tabs.redtabs a.select_tab,
+.todo_tabs button.select_tab {
+    text-decoration: none;
+    color: #D84545 !important;
+    border: none;
+}
+
+.todo_tabs a,
+.todo_tabs button {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: #3E3E3E;
+    margin: 0.3125rem 1rem;
+    padding: 5px 0 0;
+    text-decoration: none;
+    position: relative;
+    outline: 0;
+    background-color: #ffffff;
+    border: 0;
+    border-bottom: 2px solid #ffffff;
+    line-height: 2;
+}
+
+.todo_tabs.tabs_16_3e {
+    justify-content: flex-start;
+}
+
+.todo_tabs.tabs_16_3e a,
+.todo_tabs.tabs_16_3e button {
+    font-size: 1rem;
+    font-weight: 400;
+    margin: 0.3125rem 1rem 0;
+    position: relative;
+    align-self: center;
+    border-bottom: 2px solid transparent;
+}
+
+.todo_tabs a.select_tab,
+.todo_tabs a.active,
+.todo_tabs a:hover,
+.todo_tabs.tabs_16_3e button.active,
+.todo_tabs.tabs_16_3e button:hover,
+.todo_tabs button.active {
+    border-bottom: 2px solid #005CF3;
+    align-self: center;
+}
+
+.todo_tabs a.select_tab,
+.todo_tabs a.active,
+.todo_tabs a:hover {
+    text-decoration: none;
+    color: #005CF3 !important;
+    border-bottom: 2px solid #005CF3;
+}
+
+.todo_tabs.tabs_16_3e button.active,
+.todo_tabs button.active {
+    text-decoration: none;
+    color: #005CF3 !important;
+}
+
+.todo_tabs .active_bdr,
+.todo_tabs .menu_href:hover {
+    border-bottom: 2px solid #005CF3;
+}
+
+.todo_tabs .active_bdr [class^="semb_gray_16"],
+.todo_tabs .menu_href:hover [class^="semb_gray_16"] {
+    color: #005CF3 !important;
+}
+
+.todo_tabs_content {
+    padding: 0.625rem 2.125rem;
+}
+
+.todo_tabs_content_scroller {
+    height: 15rem;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+/*------ custom dropdowns and toggles -------*/
+.drodown_btn {
+    position: relative;
+}
+
+.drodown_wrap {
+    opacity: 0;
+    display: none;
+    position: absolute;
+    top: 1.9rem;
+    right: 0.5rem;
+    z-index: 99999;
+    min-width: 10rem;
+    max-width: 500px;
+    background-color: #ffffff;
+    border: 1px solid #d5d5d5;
+    box-shadow: 0px 0px 5px #c2c2c2;
+}
+
+/*--- referral-status, visit-type ----*/
+.drodown_wrap_click {
+    position: absolute;
+    top: 2rem;
+    right: 0rem;
+    z-index: 99999;
+    min-width: 26rem;
+    max-width: 500px;
+    background-color: #ffffff;
+    border: 1px solid #d5d5d5;
+}
+
+.drodown_wrap.left {
+    left: 0;
+    right: auto;
+}
+
+.drodown_wrap button {
+    border: none;
+    outline: none;
+}
+
+.drodown_wrap .border-bottom:hover,
+.drodown_wrap .border-bottom:hover i {
+    cursor: pointer;
+    color: #005CF3;
+    background-color: #e7f0fb;
+}
+
+/*--- document ----*/
+.dd_click_wrap {
+    position: absolute;
+    top: 2.5rem;
+    right: 1rem;
+    z-index: 9999;
+    min-width: 14rem;
+    max-width: 500px;
+    background-color: #ffffff;
+    border: 1px solid #d5d5d5;
+}
+
+.drodown_wrap a,
+.dd_click_wrap a {
+    cursor: pointer;
+}
+
+/*---- allergies-----*/
+.ddToggle {
+    opacity: 1;
+    display: block;
+    position: absolute;
+    top: 1.9rem;
+    right: 0.5rem;
+    z-index: 99999;
+    min-width: 14rem;
+    max-width: 500px;
+    background-color: #ffffff;
+    border: 1px solid #d5d5d5;
+}
+
+.drodown_btn:hover>.drodown_wrap,
+.drodown_btn:hover>.dd_click_wrap {
+    opacity: 1;
+    display: block;
+}
+
+
+.drodown_wrap .radio-label,
+.dd_click_wrap .radio-label {
+    margin-left: 0 !important;
+}
+
+.drodown_wrap a:hover,
+.dd_click_wrap a:hover,
+.drodown_wrap .dashed_bdr button:hover {
+    color: var(--bluecolor) !important;
+    background-color: #e7f0fb !important;
+}
+
+.drodown_wrap a,
+.dd_click_wrap a {
+    cursor: pointer;
+}
+
+.drodown_wrap .dashed_bdr a,
+.dd_click_wrap .dashed_bdr a,
+.drodown_wrap .dashed_bdr button {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #3E3E3E;
+    border-bottom: 1px dashed #7e7e7e;
+    display: block;
+    padding: 0.3125rem 0.9375rem;
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    width: 100%;
+    background: none;
+    text-align: left;
+}
+
+.drodown_wrap .dashed_bdr a:last-child,
+.dd_click_wrap .dashed_bdr a:last-child {
+    border: none;
+}
+
+/*-----add-user, new-appointment-----*/
+.select_dd_btn {
+    position: relative;
+}
+
+.select_dd_wrap {
+    top: 1.813rem !important;
+    left: 0.688rem;
+    position: absolute;
+    padding: 0 0.75rem;
+    background-color: #ffffff;
+    border-radius: 0.3125rem;
+    border: 1px solid #7e7e7e;
+    color: #3e3e3e;
+    z-index: 9999;
+    height: 12.5rem;
+    overflow-y: auto;
+    opacity: 0;
+    display: none;
+}
+
+.select_dd_btn:hover>.select_dd_wrap {
+    display: block;
+    opacity: 1;
+}
+
+/*------patient-intake-preview----------*/
+.select_dd_wrap .dd_hdr {
+    background-color: #F2F2F2;
+    padding: 0.5rem 0.625rem 0.3125rem;
+    margin: 0 -0.625rem 0.625rem;
+    width: 107% !important;
+}
+
+.select_dd_wrap .dd_hdr .form-check {
+    margin-left: 0.625rem;
+}
+
+.select_dd_wrap .dd_hdr:first-child {
+    border-radius: 5px 5px 0 0;
+}
+
+.select_dd_wrap .form-check {
+    margin-left: 1rem;
+}
+
+.select_dd_wrap .form-check .radio-label {
+    margin-left: 0 !important;
+    margin-top: 3px;
+}
+
+/*----- imaging -----*/
+.tags_btn {
+    background-color: #3e3e3e;
+    font-size: 0.625rem;
+    color: #ffffff !important;
+    padding: 0.15rem 0.3125rem;
+    border-radius: 4px;
+    line-height: 1.8;
+}
+
+.pulse-ring {
+    content: "";
+    background: #005CF3;
+    border-radius: 50%;
+    animation: pulsate infinite 1.5s;
+}
+
+.pulse-ring-sm {
+    content: "";
+    background: #005CF3;
+    border-radius: 50%;
+    animation: pulsate infinite 1.5s;
+}
+
+.pulse-ring.delay {
+    animation-delay: 1s;
+}
+
+@keyframes pulsate {
+    0% {
+        box-shadow: 0 0 0 0 #7ca9e4;
+    }
+
+    50% {
+        box-shadow: 0 0 0 6px #7ca9e4;
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 #7ca9e4;
+    }
+}
+
+
+/*------icd, cpt,pcs codes------*/
+.circle_list {
+    list-style: circle;
+    color: #005CF3
+}
+
+/*------- Modal Window ------*/
+ 
+.customBackdrop.modal-backdrop{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    background-color: #000000;
+    opacity: 0.20;
+}
+.modal{
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    width: max-content;
+    height: fit-content;
+    z-index: 9999999 !important;
+}
+.modal-content {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    // border: 1px solid rgba(0, 0, 0, .2);
+    border-radius: .5rem;
+    outline: 0;
+}
+.modal-header {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid #e9ecef;
+    border-top-left-radius: .3rem;
+    border-top-right-radius: .3rem;
+}
+.modal-title {
+    font-size: 16px;
+    color: #3E3E3E;
+    font-weight: 500;
+    margin-bottom: 0;
+    line-height: 1.5;
+}
+
+.close {
+    padding: 1rem;
+    margin: -1rem -1rem -1rem auto;
+}
+
+
+.modal-body {
+    position: relative;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem;
+}
+
+.modal-footer {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    padding: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+.modal-footer span:first-child .btn-outline-dark{
+    background-color: #e7e7e7;
+}
+ .modal-footer span:nth-child(2) .btn-outline-dark {
+    color: #ffffff;
+     background-color: #005CF3;
+ }
+ .z-99999{
+    z-index: 99999;
+ }
+ .pagination_wrap {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+}
+
+.table_paging {
+    height: 32px;
+    line-height: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+}
+::ng-deep .ngb-tp-input-container button {
+     height: auto;
+}
+
+/* Voice receptionist — live call sentiment label */
+.vr-sentiment {
+  background: rgba(118, 118, 118, 0.12);
+  color: #53575c;
+}
+
+.vr-sentiment[data-sentiment='calm'] {
+  background: rgba(54, 129, 244, 0.1);
+  color: #2162f0;
+}
+
+.vr-sentiment[data-sentiment='neutral'] {
+  background: rgba(118, 118, 118, 0.15);
+  color: #53575c;
+}
+
+.vr-sentiment[data-sentiment='frustrated'] {
+  background: rgba(240, 55, 64, 0.1);
+  color: #e23636;
+}
+
+.vr-sentiment[data-sentiment='urgent'] {
+  background: rgba(240, 55, 64, 0.1);
+  color: #dc2626;
+}
+
+/* Voice receptionist — live monitor page */
+eds-live-monitor-page {
+  display: block;
+  height: calc(100vh - var(--eds-topbar-height, 0px));
+  box-sizing: border-box;
+}
+
+.live-monitor-page__back:hover {
+  background: var(--eds-surface-l1, #f4f4f5);
+}
+
+.live-monitor-page__header-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.live-monitor-page__header-btn--danger:hover:not(:disabled) {
+  background: #fef2f2;
+}
+
+.live-monitor-page__header-btn--primary:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.live-monitor-page__header-btn--ghost:hover:not(:disabled) {
+  background: var(--eds-bg-subtle, #f7f9fa);
+}
+
+.live-monitor-page__media-pill[data-mode='takeover'][data-state='connected'] {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.live-monitor-page__media-pill[data-mode='listen'][data-state='connected'] {
+  background: #f0fdf4;
+  border-color: #bbf7d0;
+  color: #15803d;
+}
+
+.live-monitor-page__orb {
+  color: #fff;
+  background: linear-gradient(135deg, var(--eds-brand-500), var(--eds-violet-500));
+}
+
+.live-monitor-page__ring {
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  top: calc(50% - 28px);
+  left: 50%;
+  margin-left: -18px;
+  border-radius: 50%;
+  border: 1.5px solid var(--eds-brand-400);
+}
+
+.live-monitor-page__ring--2 {
+  animation-delay: 1s;
+}
+
+.live-monitor-page__orb-wrap[data-mode='transfer'] .live-monitor-page__orb {
+  background: linear-gradient(135deg, var(--eds-amber-400), var(--eds-violet-500));
+}
+
+.live-monitor-page__confidence[data-level='high'] {
+  color: #047857;
+}
+
+.live-monitor-page__confidence[data-level='low'] {
+  color: #b45309;
+}
+
+.live-monitor-page__sentiment-fill {
+  transition: width 0.3s ease;
+}
+
+.live-monitor-page__sentiment-fill[data-sentiment='frustrated'],
+.live-monitor-page__sentiment-fill[data-sentiment='urgent'] {
+  background: var(--eds-red-500, #ef4444);
+}
+
+.live-monitor-page__sentiment-fill[data-sentiment='neutral'] {
+  background: var(--eds-amber-400, #f59e0b);
+}
+
+.live-monitor-page__tools li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  align-items: start;
+  padding: 8px 10px;
+  border-radius: var(--eds-radius-md);
+  background: var(--eds-surface-l1, #f4f4f5);
+  border-left: 2px solid var(--eds-border-default, #d4d4d8);
+}
+
+.live-monitor-page__tool--ok {
+  border-left-color: var(--eds-green-500, #22c55e);
+}
+
+.live-monitor-page__tool--warn {
+  border-left-color: var(--eds-amber-400, #f59e0b);
+}
+
+.live-monitor-page__tool--error {
+  border-left-color: var(--eds-red-500, #ef4444);
+}
+
+.live-monitor-page__tool--active {
+  border-left-color: var(--eds-brand-500);
+}
+
+.live-monitor-page__tools-empty {
+  border-left: none !important;
+  background: transparent !important;
+  padding: 4px 0 !important;
+}
+
+@media (max-width: 960px) {
+  eds-live-monitor-page {
+    height: auto;
+    min-height: calc(100vh - var(--eds-topbar-height, 0px));
+  }
+
+  .live-monitor-page {
+    height: auto;
+    overflow: visible;
+  }
+
+  .live-monitor-page__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .live-monitor-page__sidebar {
+    width: 100%;
+    max-width: none;
+    height: auto;
+  }
+
+  .live-monitor-page__orb-wrap {
+    width: 100%;
+  }
+
+  .live-monitor-page__header-actions {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+.vr-insurance-badge[data-state='covered'] {
+  background: #ecfdf5;
+  border-color: #bbf7d0;
+  color: #15803d;
+}
+
+.vr-insurance-badge[data-state='none'] {
+  background: #fef2f2;
+  border-color: #fecaca;
+  color: #b91c1c;
+}
+
+.vr-insurance-badge[data-state='unknown'] {
+  background: #f4f4f5;
+  border-color: #e4e4e7;
+  color: #71717a;
+}
+
+.vr-api-log-error {
+  background: rgba(239, 68, 68, 0.08);
+  color: #b91c1c;
+}
+
+.vr-api-log-json {
+  background: var(--eds-surface-muted, #f4f4f5);
+}
+
+