.conversation-container {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conversation-item {
  padding: 12px;
  border-radius: 8px;
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

.conversation-item.assistant {
  align-self: flex-start;
  background-color: #ececff;
}

.conversation-item.user {
  align-self: flex-end;
  background-color: #d4f3e2;
}

.conversation-type {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  margin-bottom: 4px;
}

.conversation-message {
  font-size: 14px;
  color: #333;
}

.conversation-timestamp {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  text-align: right;
}

.no-conversation {
  color: #888;
  text-align: center;
  margin-top: 20px;
}

.patients-list {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
}

.patients-list .top-navigation-bar-v3 {
  align-self: stretch !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.patients-list .vuesax-outline-add {
  height: 20px !important;
  position: relative !important;
  width: 20px !important;
}

.patients-list .top-navigation-bar-instance {
  align-self: stretch !important;
  position: relative !important;
  width: 100% !important;
}

.patients-list .side-nav-and-body {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.patients-list .sidebar-navigation-v3 {
  align-self: stretch !important;
  background-color: unset !important;
  height: unset !important;
}

.patients-list .icon-instance-node-3 {
  height: 20px !important;
  left: 15px !important;
  position: absolute !important;
  top: 15px !important;
  width: 20px !important;
}

.patients-list .body-patients-view {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.patients-list .info-and-filters-instance {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.patients-list .customer-list {
  align-items: flex-start;
  align-self: stretch;
  border-radius: 12px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 0px 24px;
  position: relative;
  width: 100%;
}

.patients-list .design-component-instance-node-2 {
  align-self: stretch !important;
  width: 100% !important;
}

.patients-list .load-more {
  align-self: stretch;
  height: 100px;
  position: relative;
  width: 100%;
}

.patients-list .button-load-more {
  display: flex !important;
  left: 549px !important;
  top: 25px !important;
  width: 130px !important;
}

.error {
  color: red;
  text-align: center;
}

.patients-list .no-patients-found {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  position: relative;
  width: 100%;
  font-size: 18px;
  padding: 20px;
  margin-top: 20px;
}

.button {
  overflow: hidden;
  position: relative;
  cursor: pointer; /* Add cursor change on hover */
}

.button .icon {
  height: 20px !important;
  position: relative !important;
  width: 20px !important;
}

.button .text-wrapper {
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.button .div {
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.button .text-wrapper-2 {
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.button .icon-8 {
  height: 20px !important;
  left: 15px !important;
  position: absolute !important;
  top: 15px !important;
  width: 20px !important;
}

.button.white {
  background-color: var(--primarywhite);
  border: 1px solid;
  border-color: var(--greygrey-90);
  color: var(--primarynavy); /* Ensure text color is set */
}

.button.default {
  align-items: center;
  border-radius: 70px;
  display: inline-flex;
  gap: 16px;
  justify-content: center;
  padding: 10px 24px;
}

.button.left-icon {
  align-items: center;
  border-radius: 70px;
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  padding: 10px 20px 10px 16px;
}

.button.icon-only {
  border-radius: 50px;
  height: 50px;
  width: 50px;
  display: inline-flex; /* Ensure icon is centered */
  justify-content: center; /* Center the icon horizontally */
  align-items: center; /* Center the icon vertically */
}

.button.primary {
  background-color: var(--primaryblue);
}

.button.right-icon {
  align-items: center;
  border-radius: 70px;
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  padding: 10px 16px 10px 20px;
}

.button.white .text-wrapper {
  color: var(--primarynavy);
}

.button.primary .text-wrapper {
  color: var(--primarywhite);
}

.button.white .div {
  color: var(--primarynavy);
}

.button.primary .div {
  color: var(--primarywhite);
}

.button.white .text-wrapper-2 {
  color: var(--primarynavy);
}

.button.primary .text-wrapper-2 {
  color: var(--primarywhite);
}

/* Add hover styles for the white button */
.button.white:hover {
  background-color: var(--greygrey-30); /* Gray background on hover */
  border-color: var(--greygrey-90); /* Adjust border color on hover */
  color: var(--primarynavy); /* Ensure text color remains */
}

.button.white .text-wrapper-2:hover {
  color: var(--primarynavy); /* Ensure text color remains on hover */
}

.button.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.input-with-datepicker {
  width: unset !important;
  flex: 1 !important;
  align-self: stretch !important;
  display: flex;
  gap: 12px; /* Match the gap setting in the Input component */
  position: relative;
  flex-direction: column;
}

.input-with-datepicker--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.input-with-datepicker .label {
  align-self: stretch;
  color: var(--white);
  font-family: var(--body-bold-font-family);
  font-size: var(--body-bold-font-size);
  font-style: var(--body-bold-font-style);
  font-weight: var(--body-bold-font-weight);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  margin-top: -1px;
  position: relative;
}

.input-with-datepicker .input-and-calendar {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.input-with-datepicker .input-2 {
  align-items: center;
  border: 1px solid var(--greygrey-90);
  border-radius: 8px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}

.input-with-datepicker .input-6 {
  flex: 1 !important;
  flex-grow: 1 !important;
  width: unset !important;
}

.input-with-datepicker .calendar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  margin-top: 4px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.react-datepicker {
  border: 1px solid var(--greygrey-90);
  font-family: var(--body-regular-font-family);
}

.react-datepicker__header {
  background-color: var(--greygrey-20);
}

.react-datepicker__day--selected {
  background-color: var(--primarynavy);
  color: white;
}

.react-datepicker__current-month {
  display: block; /* Ensure the current month is displayed */
  color: var(--primarynavy);
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 10px;
}

.react-datepicker__month-year-dropdowns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-with-datepicker .div-3 {
  align-items: center;
  align-self: stretch;
  background-color: #ffffff;
  border: 1px solid;
  border-color: var(--greygrey-90);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  width: 100%;
}

.input-with-datepicker .placeholder {
  background-color: #ffffff;
  color: var(--greygrey-70);
  flex: 1;
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
}

.input-with-datepicker .cancel {
  position: absolute;
  top: 17px;
  right: 16px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: var(--greygrey-70);
}

.input-with-datepicker .calendar {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  color: var(--greygrey-70);
}

.input-with-datepicker .cancel svg {
  width: 16px;
  height: auto;
}

.input-with-datepicker--disabled .cancel {
  display: none;
}

.react-datepicker__navigation {
  top: 1rem;
  line-height: 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.react-datepicker__navigation--previous {
  left: 0.5rem;
}

.react-datepicker__navigation--next {
  right: 0.5rem;
}

.react-datepicker__today-button {
  background-color: var(--greygrey-20);
  border: none;
  margin-top: 10px;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  cursor: pointer;
}

.dropdown {
  width: unset !important;
    flex: 1 !important;
    align-self: stretch !important;
  display: flex;
  gap: 12px; /* Match the gap setting in the Input component */
  position: relative;
  flex-direction: column;
}

.dropdown-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.dropdown .label {
  align-self: stretch;
  color: var(--white);
  font-family: var(--body-bold-font-family);
  font-size: var(--body-bold-font-size);
  font-style: var(--body-bold-font-style);
  font-weight: var(--body-bold-font-weight);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  margin-top: -1px;
  position: relative;
}

.dropdown .input-2 {
  align-items: center;
  border: 1px solid var(--greygrey-90);
  border-radius: 8px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}

.dropdown .input-6 {
  flex: 1 !important;
  flex-grow: 1 !important;
  width: unset !important;
}

.dropdown .div-3 {
  align-items: center;
  align-self: stretch;
  background-color: #ffffff;
  border: 1px solid;
  border-color: var(--greygrey-90);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  width: 100%;
}

.dropdown .placeholder {
  background-color: #ffffff;
  color: var(--greygrey-70);
  flex: 1;
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
}

.dropdown .input-and-options {
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
}

.dropdown-disabled .input-and-options {
  cursor: not-allowed !important;
}

.dropdown .options {
  position: absolute; /* Position the dropdown absolutely */
  top: 100%; /* Position it right below the input */
  left: 0;
  width: 100%; /* Make sure it takes the full width of the parent */
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  background-color: white;
  max-height: 200px; /* optional, for controlling max height */
  overflow-y: auto; /* optional, for scroll */
  z-index: 1000; /* Ensure it is above other content */
  border: 1px solid var(--greygrey-90); /* Add border around the options */
  border-radius: 4px; /* Optional: Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow */
}


.dropdown-disabled .option-item {
  cursor: not-allowed;
}

.dropdown .option-item {
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dropdown .option-item:hover {
  background-color: var(--greygrey-10);
}




/* Dropdown Styling
.dropdown {
  position: relative;
  width: 100%;
}

.dropdown .label {
  font-weight: bold;
  margin-bottom: 8px;
}

.dropdown .input-and-options {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}



.dropdown .icon-dropdown {
  width: 16px;
  height: 16px;
}

.dropdown .options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.dropdown .option-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown .option-item:hover {
  background-color: #f0f0f0;
}
*/

.modal-overlay-data-cell {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  background: white;
  padding: 40px;
  border-radius: 8px;
  width: 600px;
  height: 400px;
  max-width: 90%;
  max-height: 90%;
  position: relative;
  overflow-y: auto;
}

.modal-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.modal-body {
  font-size: 18px;
  margin-bottom: 20px;
}

.modal-value {
  font-size: 16px;
  color: #333;
  white-space: pre-wrap; /* Preserve line breaks and allow wrapping */
  word-wrap: break-word; /* Break long words if necessary */
}

/* Style the close button */
.modal-close-button {
  position: absolute;
  top: 10px; /* Adjusted to ensure full visibility */
  right: 10px; /* Adjusted to ensure full visibility */
  background-color: unset !important;
  border: unset !important;
  padding: 0;
}

.modal-close-button .vuesax-bold-close-circle {
  height: 36px !important; /* Slightly increased size */
  width: 36px !important; /* Slightly increased size */
}

.detail-data-cell {
  height: 60px;
  width: 254px;
  cursor: pointer;
}

.detail-data-cell:hover {
  cursor: pointer; /* Ensure pointer cursor on hover */
  background-color: #f0f0f0; /* Optional: Add a background color change on hover */
}

.detail-data-cell .overlap-group {
  height: 71px;
  left: -10px;
  position: relative;
  top: -1px;
  width: 100%;
}

.detail-data-cell .label {
  color: var(--greygrey-70);
  font-family: var(--small-regular-font-family);
  font-size: var(--small-regular-font-size);
  font-style: var(--small-regular-font-style);
  font-weight: var(--small-regular-font-weight);
  left: 10px;
  letter-spacing: var(--small-regular-letter-spacing);
  line-height: var(--small-regular-line-height);
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.detail-data-cell .frame {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 0;
  padding: 10px;
  position: absolute;
  top: 21px;
  width: 100%;
}

.detail-data-cell .appointment-date {
  color: var(--greygrey-90);
  font-family: var(--body-medium-font-family);
  font-size: var(--body-medium-font-size);
  font-style: var(--body-medium-font-style);
  font-weight: var(--body-medium-font-weight);
  letter-spacing: var(--body-medium-letter-spacing);
  line-height: var(--body-medium-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for overflow */
  width: 100%; /* Ensure the width is constrained to its container */
}

.detail-data-cell .icon-attachment {
  height: 16px !important;
  position: relative !important;
  width: 16px !important;
}

.process-step {
  align-items: center;
  display: inline-flex;
  gap: 24px;
  padding: 10px 40px;
  position: relative;
}

.process-step .vuesax-outline {
  height: 24px !important;
  position: relative !important;
  width: 24px !important;
}

.process-step .basic-requirements {
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.process-step.clicked {
  background-color: var(--greygrey-30);
}

.process-step.clicked .basic-requirements {
  color: var(--greygrey-90);
}

.process-step.default .basic-requirements {
  color: var(--greygrey-70);
}

.left-nav-items-for {
  align-items: flex-start;
  display: inline-flex;
  height: 737px;
  position: relative;
}

.left-nav-items-for .frame {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 60px 0px 40px;
  position: relative;
  width: 278px;
}

.left-nav-items-for .title {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  padding: 10px 40px;
  position: relative;
  width: 100%;
}

.left-nav-items-for .vuesax-outline-clipboard-text {
  height: 36px !important;
  position: relative !important;
  width: 36px !important;
}

.left-nav-items-for .text-wrapper {
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.left-nav-items-for .navigation-items {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 17px;
  position: relative;
  width: 100%;
}

.left-nav-items-for .process-step-instance {
  align-self: stretch !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.left-nav-items-for .design-component-instance-node {
  flex: 0 0 auto !important;
}

.left-nav-items-for .base-instance {
  align-self: stretch !important;
  height: unset !important;
  position: relative !important;
  width: 1px !important;
}

.multi-step-process {
  align-items: flex-start;
  background-color: #ffffff;
  display: inline-flex;
  height: 90%;
  position: relative;
}

.left-nav-items-for {
  align-items: flex-start;
  display: inline-flex;
  height: 737px;
  position: relative;
}

.space-for-close {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  padding: 14px 14px 14px 32px;
  position: relative;
  width: 100%;
}

.left-nav-items-for .frame {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 60px 0px 40px;
  position: relative;
  width: 278px;
}

.left-nav-items-for .title {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  padding: 10px 40px;
  position: relative;
  width: 100%;
}

.left-nav-items-for .vuesax-outline-clipboard-text {
  height: 36px !important;
  position: relative !important;
  width: 36px !important;
}

.left-nav-items-for .text-wrapper {
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.left-nav-items-for .navigation-items {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 17px;
  position: relative;
  width: 100%;
}

.left-nav-items-for .process-step-instance {
  align-self: stretch !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.process-step {
  align-items: center;
  display: inline-flex;
  gap: 24px;
  padding: 10px 40px;
  position: relative;
  cursor: pointer;
}

.process-step .vuesax-outline {
  height: 24px !important;
  position: relative !important;
  width: 24px !important;
}

.process-step .basic-requirements {
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.process-step.clicked {
  background-color: var(--greygrey-30);
}

.process-step.clicked .basic-requirements {
  color: var(--greygrey-90);
}

.process-step.default .basic-requirements {
  color: var(--greygrey-70);
}

.multi-step-process .right-section {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 60px;
  padding: 60px 40px;
  position: relative;
  max-height: 98%;
  overflow-y: auto;
}

.multi-step-process .flag-and-title {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 37px;
  position: relative;
  width: 210px;
}

.multi-step-process .vuesax-outline-flag {
  height: 24px !important;
  position: relative !important;
  width: 24px !important;
}

.multi-step-process .title-text {
  align-self: stretch;
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: relative;
  text-align: center;
}

.multi-step-process .selection-inputs {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  position: relative;
  width: 600px;
}

.multi-step-process .input-instance {
  align-self: stretch !important;
  height: 92px !important;
  width: 100% !important;
}

.multi-step-process .callout {
  align-items: center;
  display: flex;
  gap: 12px;
  height: 20px;
  justify-content: center;
  position: relative;
  width: 600px;
}

.multi-step-process .vuesax-outline-info {
  height: 16px !important;
  position: relative !important;
  width: 16px !important;
}

.multi-step-process .message {
  color: transparent;
  flex: 1;
  font-family: var(--extra-small-medium-font-family);
  font-size: var(--extra-small-medium-font-size);
  font-style: var(--extra-small-medium-font-style);
  font-weight: var(--extra-small-medium-font-weight);
  letter-spacing: var(--extra-small-medium-letter-spacing);
  line-height: var(--extra-small-medium-line-height);
  margin-top: -1px;
  position: relative;
}

.multi-step-process .span {
  color: #7e92a2;
  font-family: var(--extra-small-medium-font-family);
  font-size: var(--extra-small-medium-font-size);
  font-style: var(--extra-small-medium-font-style);
  font-weight: var(--extra-small-medium-font-weight);
  letter-spacing: var(--extra-small-medium-letter-spacing);
  line-height: var (--extra-small-medium-line-height);
}

.multi-step-process .text-wrapper {
  color: #1e88e5;
  font-family: var(--extra-small-medium-font-family);
  font-size: var(--extra-small-medium-font-size);
  font-style: var(--extra-small-medium-font-style);
  font-weight: var(--extra-small-medium-font-weight);
  letter-spacing: var(--extra-small-medium-letter-spacing);
  line-height: var(--extra-small-medium-line-height);
}

.multi-step-process .button-instance {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 389px !important;
  margin: 0 auto; /* Center the button horizontally */
}

.multi-step-process .detail-data-cell-v {
  flex: 1 !important;
  flex-grow: 1 !important;
  height: 60px !important;
  width: unset !important;
}

.multi-step-process .selection-inputs-4 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 40px;
  position: relative;
  width: 600px;
}

.multi-step-process .div-3 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  position: relative;
  width: 100%;
}

.multi-step-process .button-2 {
  position: absolute;
  top: 15px;   /* Position at the top */
  right: 15px; /* Position at the right */
  background-color: unset !important;
  border: unset !important;
  z-index: 1000; /* Ensure it stays on top */
  cursor: pointer;
}

.multi-step-process .vuesax-bold-close-circle {
  height: 20px !important;
  width: 20px !important;
  position: relative;
}

.log-activity-area {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

.log-activity-area .title {
  align-self: stretch;
  height: 78px;
  position: relative;
  width: 100%;
}

.log-activity-area .text-wrapper-4 {
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  height: 30px;
  left: 24px;
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: absolute;
  top: 23px;
  white-space: nowrap;
}

.log-activity-area .activity-field {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  padding: 0px 0px 24px;
  position: relative;
  width: 100%;
}

.log-activity-area .activity-repeat {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  padding: 0px 24px 0px 12px;
  position: relative;
  width: 100%;
}

.log-activity-area .icon-wrapper {
  height: 54px;
  position: relative;
  width: 54px;
}

.log-activity-area .icon-4 {
  background-color: var(--primarywhite);
  border: 11px solid;
  border-color: var(--primaryblue);
  border-radius: 100px;
  height: 32px;
  left: 11px;
  position: relative;
  top: 11px;
  width: 32px;
}

.log-activity-area .div-7 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  position: relative;
}

.log-activity-area .div-8 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.log-activity-area .date-time-2 {
  align-self: stretch;
  color: var(--greygrey-70);
  font-family: var(--small-regular-27-font-family);
  font-size: var(--small-regular-27-font-size);
  font-style: var(--small-regular-27-font-style);
  font-weight: var(--small-regular-27-font-weight);
  letter-spacing: var(--small-regular-27-letter-spacing);
  line-height: var(--small-regular-27-line-height);
  margin-top: -1px;
  position: relative;
}

.log-activity-area .text-wrapper-5 {
  align-self: stretch;
  color: var(--primarynavy);
  font-family: var(--small-medium-27-font-family);
  font-size: var(--small-medium-27-font-size);
  font-style: var(--small-medium-27-font-style);
  font-weight: var(--small-medium-27-font-weight);
  letter-spacing: var(--small-medium-27-letter-spacing);
  line-height: var(--small-medium-27-line-height);
  position: relative;
}

.log-activity-area .image-deal-detail {
  align-self: stretch;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.log-activity-area .activity-ignore {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 11px;
  position: relative;
  width: 100%;
}

.log-activity-area .button-load-more {
  all: unset;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 9px 14px 9px 24px;
  position: relative;
  width: 100%;
}

.log-activity-area .text-wrapper-6 {
  color: var(--primaryblue);
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

.input-for-activity {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}

.input-for-activity .label {
  align-self: stretch;
  color: var(--primarynavy);
  font-family: var(--body-bold-font-family);
  font-size: var(--body-bold-font-size);
  font-style: var(--body-bold-font-style);
  font-weight: var(--body-bold-font-weight);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  margin-top: -1px;
  position: relative;
}

.input-for-activity .input {
  align-items: flex-end;
  align-self: stretch;
  border: 1px solid;
  border-color: var(--greygrey-90);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  width: 100%;
}

.input-for-activity .placeholder {
  color: var(--greygrey-70);
  flex: 1;
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
  resize: none;
  width: 100%;
  min-height: 60px;
  overflow-y: auto;
}

.input-for-activity .vuesax-outline-arrow {
  height: 24px !important;
  position: relative !important;
  width: 24px !important;
}

.input-for-activity .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.record-activity-area {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 24px;
  position: relative;
}

.record-activity-area .record-activity-form {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--primarywhite);
  border: 1px solid;
  border-color: var(--greygrey-90);
  border-radius: 12px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.record-activity-area .title {
  align-self: stretch;
  height: 78px;
  position: relative;
  width: 100%;
}

.record-activity-area .text-wrapper-6 {
  color: var(--primarynavy);
  font-family: var(--heading-h4-bold-font-family);
  font-size: var(--heading-h4-bold-font-size);
  font-style: var(--heading-h4-bold-font-style);
  font-weight: var(--heading-h4-bold-font-weight);
  height: 40px;
  left: 24px;
  letter-spacing: var(--heading-h4-bold-letter-spacing);
  line-height: var(--heading-h4-bold-line-height);
  position: absolute;
  top: 18px;
  white-space: nowrap;
}

.record-activity-area .tabs {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 19px 24px;
  position: relative;
  width: 100%;
}

.record-activity-area .text-wrapper-7 {
  color: var(--greygrey-70);
  flex: 1;
  font-family: var(--heading-h5-medium-font-family);
  font-size: var(--heading-h5-medium-font-size);
  font-style: var(--heading-h5-medium-font-style);
  font-weight: var(--heading-h5-medium-font-weight);
  letter-spacing: var(--heading-h5-medium-letter-spacing);
  line-height: var(--heading-h5-medium-line-height);
  margin-top: -1px;
  position: relative;
}

.record-activity-area .q-a {
  color: var(--greygrey-90);
  flex: 1;
  font-family: var(--heading-h5-medium-font-family);
  font-size: var(--heading-h5-medium-font-size);
  font-style: var(--heading-h5-medium-font-style);
  font-weight: var(--heading-h5-medium-font-weight);
  letter-spacing: var(--heading-h5-medium-letter-spacing);
  line-height: var(--heading-h5-medium-line-height);
  margin-top: -1px;
  position: relative;
}

.record-activity-area .form {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  padding: 20px 24px 60px;
  position: relative;
  width: 100%;
}

.record-activity-area .input-2 {
  align-items: flex-end;
  align-self: stretch;
  border: 1px solid;
  border-color: var(--greygrey-30);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 100%;
}

.record-activity-area .p {
  color: var(--primarynavy);
  flex: 1;
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-style: var(--body-regular-font-style);
  font-weight: var(--body-regular-font-weight);
  letter-spacing: var(--body-regular-letter-spacing);
  line-height: var(--body-regular-line-height);
  margin-top: -1px;
  position: relative;
}

.record-activity-area .input-3 {
  align-items: flex-end;
  align-self: stretch;
  background-color: var(--greygrey-20);
  border: 1px solid;
  border-color: var(--greygrey-30);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 100%;
}

.record-activity-area .input-for-activity-instance {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* Add this to your style.css for the tab highlight effect */
.tab-link {
  cursor: pointer;
  text-decoration: none;
  color: #7E92A2;
  padding: 10px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-bottom-color 0.3s;
}

/* Styles for the active tab */
.tab-link.active {
  color: #1E88E5;
  border-bottom: 2px solid #1E88E5;
}


.opportunity-detail-wrapper {
  display: flex;
  flex-direction: column;
}


.opportunity-detail-wrapper .design-component-instance-node-4 {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.opportunity-detail-wrapper .icon-instance-node-6 {
  height: 20px !important;
  position: relative !important;
  width: 20px !important;
}

.opportunity-detail-wrapper .top-navigation-bar-instance {
  align-self: stretch !important;
  position: relative !important;
  width: 100% !important;
}

.opportunity-detail-wrapper .horizontal-body-side-2 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.opportunity-detail-wrapper .sidebar-navigation-instance {
  align-self: stretch !important;
  background-color: unset !important;
  height: unset !important;
}

.opportunity-detail-wrapper .icon-instance-node-7 {
  height: 20px !important;
  left: 15px !important;
  position: absolute !important;
  top: 15px !important;
  width: 20px !important;
}

.opportunity-detail-wrapper .left-area-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Consider removing or adjusting the margin-bottom if causing overlap */
  margin-bottom: 0; /* Adjust this as needed */
  overflow-y: auto; /* Ensure scrolling works for overflowing content */
  position: relative;
  width: 100%;
}

.opportunity-detail-wrapper .detail-page-header-instance {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  padding: unset !important;
  width: 100% !important;
}

.opportunity-detail-wrapper .top-navigation-bar-v3 {
  align-self: stretch !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.opportunity-detail-wrapper .body-deal-detail-2 {
  display: flex;
  flex-direction: column; /* Ensure proper stacking of children */
  flex-grow: 1;
  position: relative;
  width: 100%;
}


.opportunity-detail-wrapper .detail-page-header-3 {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  padding: unset !important;
  width: 100% !important;
}

.opportunity-detail-wrapper .detail-page-header-4 {
  margin-right: unset !important;
}

.opportunity-detail-wrapper .detail-page-instance {
  color: var(--greygrey-70) !important;
}

.opportunity-detail-wrapper .left-column-wrapper {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  padding: 24px;
  position: relative;
  width: 100%;
}

.opportunity-detail-wrapper .left-column-2 {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 40px;
  position: relative;
}

.opportunity-detail-wrapper .div-9 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
  width: 100%;
}

.opportunity-detail-wrapper .detail-data-cell-v {
  align-self: stretch !important;
  flex: 1 !important;
  flex-grow: 1 !important;
  width: unset !important;
}

.opportunity-detail-wrapper .detail-data-cell-v2 {
  flex: 1 !important;
  white-space: unset !important;
  width: unset !important;
}

.opportunity-detail-wrapper .detail-data-cell-instance {
  flex: 1 !important;
  flex-grow: 1 !important;
  width: unset !important;
}

.opportunity-detail-wrapper .base-6 {
  align-self: stretch !important;
  height: unset !important;
  position: relative !important;
  width: 1px !important;
}

.opportunity-detail-wrapper .right-area-2 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.opportunity-detail-wrapper .design-component-instance-node-3 {
  overflow-y: auto; /* Allow scrolling if content overflows */
  width: 100%; /* Ensure it takes up the full width */
  max-width: 100%; /* Prevent horizontal overflow */
}

.opportunity-detail-wrapper .sidebar-navigation-v3 {
  align-self: stretch !important;
  background-color: unset !important;
  height: unset !important;
}

.opportunity-detail-wrapper .detail-page-navigation-tabs {
  color: var(--greygrey-70) !important;
  font-family: var(--heading-h5-medium-font-family) !important;
  font-size: var(--heading-h5-medium-font-size) !important;
  font-style: var(--heading-h5-medium-font-style) !important;
  font-weight: var(--heading-h5-medium-font-weight) !important;
  letter-spacing: var(--heading-h5-medium-letter-spacing) !important;
  line-height: var(--heading-h5-medium-line-height) !important;
}

.detail-page-link {
  text-decoration: none;
  color: #7E92A2;
  padding: 10px;
  display: inline-block;
  border-bottom: 2px solid transparent;
}

.detail-page-link.active {
  color: #1E88E5;
  border-bottom: 2px solid #1E88E5;
}

.opportunity-detail-wrapper .scrollable-content-opportunity {
  width: 100%;
  height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-overlay-change-status {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Grey background */
  z-index: 999; /* Ensures it's on top of other elements */
}

.error {
  color: red;
  text-align: center;
}

.right-bar-recent {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.right-bar-recent .title {
  height: 78px;
  position: relative;
}

.right-bar-recent .text-wrapper-3 {
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  height: 30px;
  left: 24px;
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: absolute;
  top: 23px;
  white-space: nowrap;
}

.right-bar-recent .customer-deal-list {
  flex-direction: column;
  position: relative;
  width: 100%;
}


.right-bar-recent .customer-address {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  padding-left: 20px;
}

.right-bar-recent .address {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  position: relative;
  width: 100%;
}

.right-bar-recent .street {
  align-self: stretch;
  color: var(--greygrey-90);
  font-family: var(--body-bold-27-font-family);
  font-size: var(--body-bold-27-font-size);
  font-style: var(--body-bold-27-font-style);
  font-weight: var(--body-bold-27-font-weight);
  letter-spacing: var(--body-bold-27-letter-spacing);
  line-height: var(--body-bold-27-line-height);
  margin-top: -1px;
  position: relative;
  width: 164px;
}

.right-bar-recent .badge-warning {
  align-items: center;
  background-color: var(--color-primitives-yellow-300);
  border-radius: 100px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  position: relative;
}

.right-bar-recent .badge-3 {
  color: var(--primaryblue);
  font-family: var(--extra-small-bold-font-family);
  font-size: var(--extra-small-bold-font-size);
  font-style: var(--extra-small-bold-font-style);
  font-weight: var(--extra-small-bold-font-weight);
  letter-spacing: var(--extra-small-bold-letter-spacing);
  line-height: var(--extra-small-bold-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.right-bar-recent .info {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 12px;
  height: 27px;
  position: relative;
  width: 100%;
}

.right-bar-recent .text-wrapper-4 {
  color: var(--greygrey-70);
  font-family: var(--small-regular-27-font-family);
  font-size: var(--small-regular-27-font-size);
  font-style: var(--small-regular-27-font-style);
  font-weight: var(--small-regular-27-font-weight);
  letter-spacing: var(--small-regular-27-letter-spacing);
  line-height: var(--small-regular-27-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.right-bar-recent .price {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  position: relative;
}

.right-bar-recent .design-component-instance-node-2 {
  flex: 0 0 auto !important;
}

.right-bar-recent .button-load-more {
  all: unset;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 9px 14px 9px 24px;
  position: relative;
  width: 100%;
}

.right-bar-recent .text-wrapper-5 {
  color: var(--primaryblue);
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

/* Add this to your style.css */
.right-bar-recent  .deal-repeat-link {
  width: 100%;
  padding: 10px 0;
  text-decoration: none; /* Remove underline if any */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.right-bar-recent  .deal-repeat-link:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow on hover */
  cursor: pointer; /* Changes cursor to pointer on hover */
}

.right-bar-recent {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.right-bar-recent .title {
  height: 78px;
  position: relative;
}

.right-bar-recent .text-wrapper-3 {
  color: var(--primarynavy);
  font-family: var(--heading-h5-bold-font-family);
  font-size: var(--heading-h5-bold-font-size);
  font-style: var(--heading-h5-bold-font-style);
  font-weight: var(--heading-h5-bold-font-weight);
  height: 30px;
  left: 24px;
  letter-spacing: var(--heading-h5-bold-letter-spacing);
  line-height: var(--heading-h5-bold-line-height);
  position: absolute;
  top: 23px;
  white-space: nowrap;
}

.right-bar-recent .customer-deal-list {
  flex-direction: column;
  position: relative;
  width: 100%;
}


.right-bar-recent .customer-address {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  padding-left: 20px;
}

.right-bar-recent .address {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  position: relative;
  width: 100%;
}

.right-bar-recent .street {
  align-self: stretch;
  color: var(--greygrey-90);
  font-family: var(--body-bold-27-font-family);
  font-size: var(--body-bold-27-font-size);
  font-style: var(--body-bold-27-font-style);
  font-weight: var(--body-bold-27-font-weight);
  letter-spacing: var(--body-bold-27-letter-spacing);
  line-height: var(--body-bold-27-line-height);
  margin-top: -1px;
  position: relative;
  width: 164px;
}

.right-bar-recent .badge-warning {
  align-items: center;
  background-color: var(--color-primitives-yellow-300);
  border-radius: 100px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  position: relative;
}

.right-bar-recent .badge-3 {
  color: var(--primaryblue);
  font-family: var(--extra-small-bold-font-family);
  font-size: var(--extra-small-bold-font-size);
  font-style: var(--extra-small-bold-font-style);
  font-weight: var(--extra-small-bold-font-weight);
  letter-spacing: var(--extra-small-bold-letter-spacing);
  line-height: var(--extra-small-bold-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.right-bar-recent .info {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 12px;
  height: 27px;
  position: relative;
  width: 100%;
}

.right-bar-recent .text-wrapper-4 {
  color: var(--greygrey-70);
  font-family: var(--small-regular-27-font-family);
  font-size: var(--small-regular-27-font-size);
  font-style: var(--small-regular-27-font-style);
  font-weight: var(--small-regular-27-font-weight);
  letter-spacing: var(--small-regular-27-letter-spacing);
  line-height: var(--small-regular-27-line-height);
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.right-bar-recent .price {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  position: relative;
}

.right-bar-recent .design-component-instance-node-2 {
  flex: 0 0 auto !important;
}

.right-bar-recent .button-load-more {
  all: unset;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 9px 14px 9px 24px;
  position: relative;
  width: 100%;
}

.right-bar-recent .text-wrapper-5 {
  color: var(--primaryblue);
  font-family: var(--small-medium-font-family);
  font-size: var(--small-medium-font-size);
  font-style: var(--small-medium-font-style);
  font-weight: var(--small-medium-font-weight);
  letter-spacing: var(--small-medium-letter-spacing);
  line-height: var(--small-medium-line-height);
  margin-top: -1px;
  position: relative;
  text-align: right;
  white-space: nowrap;
  width: fit-content;
}

/* Add this to your style.css */
.right-bar-recent  .deal-repeat-link {
  width: 100%;
  padding: 10px 0;
  text-decoration: none; /* Remove underline if any */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.right-bar-recent  .deal-repeat-link:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow on hover */
  cursor: pointer; /* Changes cursor to pointer on hover */
}

.patient-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent overflow on the main container */
}

.patient-detail .body-customer-detail {
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden; /* Prevent overflow */
}

.patient-detail .left-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* Prevent overflow */
}

.patient-detail .design-component-instance-node-3 {
  flex: 1;
  overflow-y: auto; /* Allow scrolling if content overflows */
  width: 100%; /* Ensure it takes up the full width */
  max-width: 100%; /* Prevent horizontal overflow */
}

.patient-detail .side-nav-and-body {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.patient-detail .top-navigation-bar-v3 {
  align-self: stretch !important;
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.patient-detail .top-navigation-bar-instance {
  align-self: stretch !important;
  position: relative !important;
  width: 100% !important;
}

.patient-detail .vuesax-outline-add {
  height: 20px !important;
  position: relative !important;
  width: 20px !important;
}

.patient-detail .horizontal-side-nav {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

.patient-detail .sidebar-navigation-v3 {
  align-self: stretch !important;
  background-color: unset !important;
  height: unset !important;
}

.patient-detail .icon-instance-node-2 {
  height: 20px !important;
  left: 7px !important;
  position: absolute !important;
  top: 7px !important;
  width: 20px !important;
}

.scrollable-content {
  width: 100%;
  height: calc(100vh - 200px); /* Adjust the height as needed */
  overflow-y: auto; /* Make the demographics section scrollable */
}

.patient-detail .detail-page-header-instance {
  align-self: stretch !important;
  flex: 0 0 auto !important;
  padding: unset !important;
  width: 100% !important;
}

.patient-detail .icon-3 {
  height: 20px !important;
  left: 15px !important;
  position: absolute !important;
  top: 15px !important;
  width: 20px !important;
}

.patient-detail .detail-page-navigation-tabs {
  color: var(--greygrey-70) !important;
  font-family: var(--heading-h5-medium-font-family) !important;
  font-size: var(--heading-h5-medium-font-size) !important;
  font-style: var(--heading-h5-medium-font-style) !important;
  font-weight: var(--heading-h5-medium-font-weight) !important;
  letter-spacing: var(--heading-h5-medium-letter-spacing) !important;
  line-height: var(--heading-h5-medium-line-height) !important;
}

.patient-detail .detail-page-link {
  color: var(--greygrey-70); /* Default color for non-active links */
  font-weight: normal; /* Default font weight */
  text-decoration: none; /* Remove underline */
}

.patient-detail .detail-page-link.active {
  color: black; /* Make text black when active */
  font-weight: bold; /* Make text bold when active */
}

.patient-detail .form-for {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 24px;
  overflow: hidden;
  overflow-y: scroll;
  padding: 24px;
  position: relative;
  width: 100%;
}

.patient-detail .div-4 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  position: relative;
  width: 100%;
}

.patient-detail .input-instance {
  flex: 1 !important;
  flex-grow: 1 !important;
  width: unset !important;
}

.patient-detail .input-2 {
  flex: unset !important;
  white-space: nowrap !important;
  width: fit-content !important;
}

.patient-detail .state {
  width: 300px !important;
}

.patient-detail .zip-code {
  width: 109px !important;
}

.patient-detail .base-4 {
  align-self: stretch !important;
  height: unset !important;
  position: relative !important;
  width: 1px !important;
}

.patient-detail .right-area {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto; /* Allow vertical scrolling if needed */
  height: 100%; /* Make sure it fills the height */
}

.patient-detail .right-bar-recent-items {
  margin-bottom: -101px !important;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_P-bnTfc7AGraJwA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_G-bnTfc7AGraJwA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_B-bnTfc7AGraJwA.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_N-bnTfc7AGraJwA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_M-bnTfc7AGraJwA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE9_C-bnTfc7AGrY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

html, body, #app {
	margin: 0px;
	height: 100%;
  font-family: "Inter", Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
}

/* a blue color as a generic focus style */
button:focus-visible {
	outline: 2px solid rgb(62, 166, 108) !important;
	outline: -webkit-focus-ring-color auto 5px !important;
}
a {
	text-decoration: none;
}

:root {
  --blackblack: rgba(0, 0, 0, 1);
  --blackblack-50: rgba(0, 0, 0, 0.5);
  --body-bold-27-font-family: "Inter", Helvetica;
  --body-bold-27-font-size: 16px;
  --body-bold-27-font-style: normal;
  --body-bold-27-font-weight: 700;
  --body-bold-27-letter-spacing: 0px;
  --body-bold-27-line-height: 27px;
  --body-bold-font-family: "Inter", Helvetica;
  --body-bold-font-size: 16px;
  --body-bold-font-style: normal;
  --body-bold-font-weight: 700;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 30px;
  --body-font-family: "Roboto", Helvetica;
  --body-font-size: 12px;
  --body-font-style: normal;
  --body-font-weight: 400;
  --body-letter-spacing: 0px;
  --body-line-height: normal;
  --body-medium-font-family: "Inter", Helvetica;
  --body-medium-font-size: 16px;
  --body-medium-font-style: normal;
  --body-medium-font-weight: 500;
  --body-medium-letter-spacing: 0px;
  --body-medium-line-height: 30px;
  --body-regular-font-family: "Inter", Helvetica;
  --body-regular-font-size: 16px;
  --body-regular-font-style: normal;
  --body-regular-font-weight: 400;
  --body-regular-letter-spacing: 0px;
  --body-regular-line-height: 30px;
  --color-background-positive-secondary-hover: var(--color-primitives-green-300);
  --color-background-warning-secondary-hover: var(--color-primitives-yellow-300);
  --color-primitives-green-300: rgba(175, 244, 198, 1);
  --color-primitives-green-900: rgba(2, 64, 35, 1);
  --color-primitives-yellow-300: rgba(255, 232, 163, 1);
  --color-primitives-yellow-900: rgba(82, 37, 4, 1);
  --extra-small-bold-font-family: "Inter", Helvetica;
  --extra-small-bold-font-size: 12px;
  --extra-small-bold-font-style: normal;
  --extra-small-bold-font-weight: 700;
  --extra-small-bold-letter-spacing: 0px;
  --extra-small-bold-line-height: 20px;
  --extra-small-medium-font-family: "Inter", Helvetica;
  --extra-small-medium-font-size: 12px;
  --extra-small-medium-font-style: normal;
  --extra-small-medium-font-weight: 500;
  --extra-small-medium-letter-spacing: 0px;
  --extra-small-medium-line-height: 20px;
  --fillstertiary-dark: rgba(118, 118, 128, 0.24);
  --grey-grey-50: rgba(214, 225, 230, 1);
  --greygrey-10: #E3E3E3;
  --greygrey-20: #E3E3E3;
  --greygrey-30: #E3E3E3;
  --greygrey-70: rgba(126, 146, 162, 1);
  --greygrey-90: rgba(82, 100, 119, 1);
  --heading-h1-bold-font-family: "Inter", Helvetica;
  --heading-h1-bold-font-size: 36px;
  --heading-h1-bold-font-style: normal;
  --heading-h1-bold-font-weight: 700;
  --heading-h1-bold-letter-spacing: 0px;
  --heading-h1-bold-line-height: 60px;
  --heading-h2-bold-font-family: "Inter", Helvetica;
  --heading-h2-bold-font-size: 28px;
  --heading-h2-bold-font-style: normal;
  --heading-h2-bold-font-weight: 700;
  --heading-h2-bold-letter-spacing: 0px;
  --heading-h2-bold-line-height: 40px;
  --heading-h3-bold-font-family: "Inter", Helvetica;
  --heading-h3-bold-font-size: 24px;
  --heading-h3-bold-font-style: normal;
  --heading-h3-bold-font-weight: 700;
  --heading-h3-bold-letter-spacing: 0px;
  --heading-h3-bold-line-height: 40px;
  --heading-h4-bold-font-family: "Inter", Helvetica;
  --heading-h4-bold-font-size: 20px;
  --heading-h4-bold-font-style: normal;
  --heading-h4-bold-font-weight: 700;
  --heading-h4-bold-letter-spacing: 0px;
  --heading-h4-bold-line-height: 40px;
  --heading-h4-regular-font-family: "Inter", Helvetica;
  --heading-h4-regular-font-size: 20px;
  --heading-h4-regular-font-style: normal;
  --heading-h4-regular-font-weight: 400;
  --heading-h4-regular-letter-spacing: 0px;
  --heading-h4-regular-line-height: 40px;
  --heading-h5-bold-font-family: "Inter", Helvetica;
  --heading-h5-bold-font-size: 18px;
  --heading-h5-bold-font-style: normal;
  --heading-h5-bold-font-weight: 700;
  --heading-h5-bold-letter-spacing: 0px;
  --heading-h5-bold-line-height: 30px;
  --heading-h5-medium-font-family: "Inter", Helvetica;
  --heading-h5-medium-font-size: 18px;
  --heading-h5-medium-font-style: normal;
  --heading-h5-medium-font-weight: 500;
  --heading-h5-medium-letter-spacing: 0px;
  --heading-h5-medium-line-height: 30px;
  --labelsprimary-dark: rgba(255, 255, 255, 1);
  --primaryblue: rgb(62, 166, 108);
  --primaryblue-light: rgba(236, 236, 254, 1);
  --primarygreen: rgba(45, 200, 168, 1);
  --primarynavy: rgba(9, 44, 76, 1);
  --primarypink: rgba(254, 128, 132, 1);
  --primarywhite: rgba(255, 255, 255, 1);
  --primaryyellow: rgba(255, 195, 87, 1);
  --small-bold-27-font-family: "Inter", Helvetica;
  --small-bold-27-font-size: 14px;
  --small-bold-27-font-style: normal;
  --small-bold-27-font-weight: 700;
  --small-bold-27-letter-spacing: 0px;
  --small-bold-27-line-height: 27px;
  --small-bold-font-family: "Inter", Helvetica;
  --small-bold-font-size: 14px;
  --small-bold-font-style: normal;
  --small-bold-font-weight: 700;
  --small-bold-letter-spacing: 0px;
  --small-bold-line-height: 30px;
  --small-medium-27-font-family: "Inter", Helvetica;
  --small-medium-27-font-size: 14px;
  --small-medium-27-font-style: normal;
  --small-medium-27-font-weight: 500;
  --small-medium-27-letter-spacing: 0px;
  --small-medium-27-line-height: 27px;
  --small-medium-font-family: "Inter", Helvetica;
  --small-medium-font-size: 14px;
  --small-medium-font-style: normal;
  --small-medium-font-weight: 500;
  --small-medium-letter-spacing: 0px;
  --small-medium-line-height: 30px;
  --small-regular-27-font-family: "Inter", Helvetica;
  --small-regular-27-font-size: 14px;
  --small-regular-27-font-style: normal;
  --small-regular-27-font-weight: 400;
  --small-regular-27-letter-spacing: 0px;
  --small-regular-27-line-height: 27px;
  --small-regular-font-family: "Inter", Helvetica;
  --small-regular-font-size: 14px;
  --small-regular-font-style: normal;
  --small-regular-font-weight: 400;
  --small-regular-letter-spacing: 0px;
  --small-regular-line-height: 30px;
  --system-colors-backgrounds-grouped-secondary: rgba(44, 44, 46, 1);
  --system-colors-colors-blue: rgba(10, 132, 255, 1);
  --system-colors-fills-tertiary: rgba(120, 120, 128, 0.24);
  --system-colors-grays-white: rgba(255, 255, 255, 1);
  --system-colors-labels-primary: rgba(255, 255, 255, 1);
  --system-colors-labels-tertiary: rgba(235, 235, 245, 0.3);
  --system-colors-separators-non-opaque: rgba(84, 84, 86, 0.6);
  --textgrey: rgba(71, 71, 71, 1);
  --title3-regular-font-family: "SF Pro", Helvetica;
  --title3-regular-font-size: 20px;
  --title3-regular-font-style: normal;
  --title3-regular-font-weight: 400;
  --title3-regular-letter-spacing: -0.44999998807907104px;
  --title3-regular-line-height: 25px;
}