html,
body,
#root,
#root > div {
  width: 100%;
  height: 100%;
}
*{
  font-family: "Cairo", sans-serif;

}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.scroll-none {
  scrollbar-width: none !important;
  &::-webkit-scrollbar {
    width: 0px !important;
  }
}

.colorOption {
  padding: 8px !important;
  line-height: 0 !important;
}

.Toastify__toast-container {
  padding: 0 !important;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.Toastify__close-button {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Toastify__close-button > svg {
  width: 16px !important;
}

.error__toast .Toastify__toast-icon {
  margin-inline-end: 0px;
  width: 24px;
  height: 24px;
}

.success__toast .Toastify__toast-icon {
  margin-inline-end: 0px;
  width: 22px;
  height: 22px;
}

.Toastify__toast-body {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  font-family: "Cairo";
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}

.error__toast .Toastify__close-button {
  color: #F59E0B;
}

.success__toast .Toastify__close-button {
  display: none;
}

.success__toast .Toastify__toast-body {
  color: #000000;
}

.Toastify__toast {
  gap: 8px;
  border-radius: 8px !important;
  align-items: center;
  box-shadow: 0px 6px 15px -3px #00000026 !important;
}

.success__toast {
  min-height: 42px !important;
  padding: 9px !important;
}

.error__toast {
  min-height: 48px !important;
  padding: 12px !important;
}

.warn__toast {
  padding: 12px;
  min-height: 48px !important;
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  --toastify-color-error: #fef3c7;
  --toastify-text-color-error: #d97706;
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  --toastify-text-color-success: #000000;
  --toastify-color-success: #fff;
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  --toastify-text-color-warning: #000000;
  --toastify-color-warning: #fff;
}

.MuiTooltip-tooltip {
  padding: 0 !important;
  background-color: transparent !important;
  max-width: 335px !important;
}

.MuiTooltip-tooltipPlacementRight {
  margin: 0 !important;
}

body>iframe{
  pointer-events: none;
}

.react-flow__handle {
  background-color: #334155;
}

.primary .react-flow__handle {
  background-color: #51ABB3;
}

.primary-handle {
  background-color: #51ABB3 !important;
}

.danger-handle {
  background-color: #DC2626 !important;
}

.secondary-handle {
  background-color: #334155 !important;
}

.danger .react-flow__handle {
  background-color: #DC2626;
}

.react-flow__container .cut-smooth-dash-edge {
  display: none;
}

.danger .react-flow__handle {
  background-color: #DC2626;
}

.react-flow__container .cut-smooth-dash-edge {
  display: none;
}

.react-flow__container .react-flow__edge-path:hover{
  stroke: #51ABB3 !important;
}

.no-handle .react-flow__handle-right {
  display: none;
}

.react-flow__nodesselection-rect, .react-flow__selection {
  background: #51ABB34D !important;
  border: 3px dashed #51abb3 !important;
  border-radius: 19px;
  padding: 15px;
}

.react-flow__nodesselection-rect {
  transform: translate(-18px , -14px);
}

.react-flow__nodesselection {
  z-index: 1 !important;
}


:root {
  --rmdp-primary: #0074d9;
  --rmdp-secondary: #4ca6f5;
  --rmdp-shadow: #8798ad;
  --rmdp-today: #7fdbff;
  --rmdp-hover: #7ea6f0;
  --rmdp-border: #cfd8e2;
  --highlight-red-color: #cc0303;
  --highlight-red-color-deactive: #e08e8e;
  --highlight-red-selected: #ea0034;
  --highlight-red-selected-deactive: #e4b0ba;
  --highlight-red-hover: #ff6687;
  --highlight-green-color: #00796b;
  --highlight-green-color-deactive: #7ab3ac;
  --highlight-green-selected: #009688;
  --highlight-green-selected-deactive: #749c98;
  --highlight-green-hover: #4db6ac;
}

.rmdp-week,
.rmdp-ym {
  display: flex;
  justify-content: space-between;
}

.rmdp-calendar *:focus {
  outline-color: #00539c;
}

.rmdp-day:not(.rmdp-range):focus {
  border-radius: 50%;
}

.rmdp-ym .rmdp-day:not(.rmdp-range):focus {
  border-radius: 15px;
}



.rmdp-day span {
  position: relative;
  inset: 0 !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  font-family: Cairo;
  font-weight: 400;
  line-height: 22px;
}

.rmdp-ym .rmdp-day span {
  font-family: Inter;
}

.rmdp-day.rmdp-selected span:not(.highlight) {
  background-color: #E5F1FF !important;
  color: #51ABB3 !important;
}

.rmdp-ym .rmdp-day.rmdp-selected span:not(.highlight) {
  background-color: #E5F1FF !important;
  color: #51ABB3 !important;
  border: 1px solid #51ABB3 !important;
  font-weight: 700;
  box-shadow: none;
}

.rmdp-day.rmdp-deactive,
.rmdp-day.rmdp-disabled {
  color: #64748B !important;
  font-weight: 400 !important;
}

.rmdp-day.rmdp-deactive.rmdp-selected span {
  background-color: var(--rmdp-secondary);
  box-shadow: 0 0 3px #bac5d3;
}

.rmdp-ym .rmdp-day {
  flex: 1;
  margin: auto;
}

.rmdp-ym .rmdp-day span {
  border-radius: 6px !important;
  padding: 8px 0px !important;
  box-sizing: border-box;
  border: 1px solid #E2E8F0;
}

.rmdp-range {
  color: #0F172A !important;
  background-color: #E5EBFF !important;
  box-shadow: none !important;
}

.rmdp-range-hover {
    color: #0F172A !important;
    background-color: #E5EBFF !important;
}

.rmdp-range.start:not(.force),
.rmdp-range-hover.start:not(.force) {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  color: #51ABB3 !important;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 96%;
    height: 96%;
    border: 1px solid #51ABB3;
    border-radius: 100px;
    z-index: 5;
  }
}

.rmdp-range.end:not(.force),
.rmdp-range-hover.end:not(.force) {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  color: #51ABB3 !important;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 96%;
    height: 96%;
    border: 1px solid #51ABB3;
    border-radius: 100px;
    z-index: 5;
  }
}

@media (hover: hover) {
  .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden) span:hover {
    background-color: #E5EBFF !important;
    color: #51ABB3 !important;
  }

  .rmdp-ym .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden, .rmdp-selected) span:hover {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
  }
}



.rmdp-day-picker {
  padding: 0px !important;
  & > div {
    gap: 6px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

.rmdp-header {
  margin-top: 0px !important;
  font-size: 14px;
  padding: 3px 0 !important;
}

.rmdp-month-picker,
.rmdp-year-picker {
  background-color: white;
  position: relative !important;
  inset: 0 !important;
}

.only.rmdp-month-picker,
.only.rmdp-year-picker {
  position: static;
  height: auto !important;
  width: auto !important;
  & > div {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.rmdp-header-values {
    color: #0F172A !important;
    font-size: 14px !important;
    font-family: Cairo !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    margin: auto !important;
}

.rmdp-header-values span {
  padding: 0px !important;
}

.rmdp-day-hidden,
.rmdp-day.rmdp-disabled {
  cursor: default;
}

.rmdp-selected .highlight {
  box-shadow: 0 0 3px var(--rmdp-shadow);
}

.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) .highlight-red:hover {
  background-color: var(--highlight-red-hover);
}

.rmdp-day:not(.rmdp-deactive) .highlight-red {
  color: var(--highlight-red-color);
}

.rmdp-day.rmdp-deactive .highlight-red {
  color: var(--highlight-red-color-deactive);
}

.rmdp-day.rmdp-selected .highlight-red {
  background-color: var(--highlight-red-selected);
  color: white;
}

.rmdp-day.rmdp-deactive.rmdp-selected .highlight-red {
  background-color: var(--highlight-red-selected-deactive);
  color: white;
}

.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) .highlight-green:hover {
  background-color: var(--highlight-green-hover);
}

.rmdp-day:not(.rmdp-deactive) .highlight-green {
  color: var(--highlight-green-color);
}

.rmdp-day.rmdp-deactive .highlight-green {
  color: var(--highlight-green-color-deactive);
}

.rmdp-day.rmdp-selected .highlight-green {
  background-color: var(--highlight-green-selected);
  color: white;
}

.rmdp-day.rmdp-deactive.rmdp-selected .highlight-green {
  background-color: var(--highlight-green-selected-deactive);
  color: white;
}

.rmdp-day-hidden:hover span,
.rmdp-day-hidden {
  background-color: unset;
  color: transparent;
}

.rmdp-month-name {
  font-size: 14px;
  margin: 3px 0;
  cursor: default;
}

.rmdp-full-year {
  grid-template-columns: 1fr 1fr 1fr;
}


@keyframes fade-out {
  0% {
    bottom: 4px;
    opacity: 1;
  }
  100% {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fade-in {
  0% {
    bottom: 0;
    opacity: 0;
  }
  100% {
    /* bottom: 8px; */
    opacity: 1;
  }
}

.highlight-search {
  outline: 3px solid #FFDE59 !important;
  box-shadow: 0 0 10px rgba(255, 222, 89, 0.5);
  border-radius: 12px;
}

.chat-messages-container {
  --border-seperator: #CBD5E1;
  --header-background: #51ABB3;
  --header-text: #FFFFFF;
  --body-background: #FFFFFF;
  --card-background: #E2E8F0;
  --card-border: #E2E8F0;
  --card-text: #0F172A;
  --card-padding: 12px 14px;
  --card-button-border: #F2F2F2;
  --card-selected-button-border: #51ABB3;
  --card-button-background: #FFFFFF;
  --card-selected-button-background: #E4F1F2;
  --card-button-text: #64748B;
  --card-selected-button-text: #51ABB3;
  --chat-name-text: #94A3B8;
  --chevron-background: #475569;
  --font-size: 10px;
  --text-decoration: none;
}

.white-space-collapse {
  white-space-collapse: preserve;
}

.underline {
  text-decoration: var(--text-decoration);
}

.arial {
  font-family: Arial, sans-serif !important;
}

.chat[data-open="true"] {
  animation: fade-in .2s ease-out forwards;
}

.chat[data-open="false"] {
  animation: fade-out .2s ease-out forwards;
}

.chat * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.chat ol,
.chat ul {
  padding-left: 20px;
}

.chat .chat-header-nav {
  display: flex;
  align-items: center;
  background-color: var(--header-background);
  border-radius: 16px 16px 0px 0px;
  padding: 24px;
  gap: 12px;
  @media (max-width: 576px) {
    border-radius: 0;
  }
}

.chat .chat-header-nav .chatbot-avatar {
  width: 60px;
  height: 60px;
  background: #E2E8F0;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat .chat-header-nav h1 {
  width: 245px;
  font-family: var(--font-family, Cairo);
  font-weight: 400;
  font-size: calc(var(--font-size) * 2);
  line-height: 18px;
  color: var(--header-text);
  text-align: start;
}

.chat .chat-header-nav h1 span {
  font-weight: 700;
  display: block;
  margin-top: 5px;
  font-family: var(--font-family, Cairo);
}

.chat .chat-header-nav div {
  display: flex;
  align-items: center;
}

.chat .chat-header-nav .chatbot-accessibility {
  position: absolute;
  right: 0;
  cursor: pointer;
  color: var(--header-text);
}

@keyframes flash {
    0%  {box-shadow: 20px 0 #A9A9A9, -20px 0 #292929;background: #A9A9A9 }
    33% {box-shadow: 20px 0 #A9A9A9, -20px 0 #292929;background: #292929}
    66% {box-shadow: 20px 0 #292929,-20px 0 #A9A9A9; background: #292929}
    100%{box-shadow: 20px 0 #292929,-20px 0 #A9A9A9; background: #A9A9A9 }
}


/* ---------------------------- Quill Customizations For User Guides ---------------------------- */

/* Responsive images */
.ql-editor img { max-width: 100%; height: auto; display: block; }

/* Font families (matching Font.whitelist) - uses Google Fonts with system fallbacks */
.ql-font-cairo { font-family: 'Cairo', sans-serif; }
.ql-font-arial { font-family: 'Arimo', Arial, sans-serif; }
.ql-font-comic-sans { font-family: 'Comic Neue', 'Comic Sans MS', cursive; }
.ql-font-courier-new { font-family: 'Cousine', 'Courier New', monospace; }
.ql-font-georgia { font-family: 'Tinos', Georgia, serif; }
.ql-font-helvetica { font-family: 'Noto Sans', Helvetica, sans-serif; }
.ql-font-lucida { font-family: 'Lucida Sans Unicode', sans-serif; }
.ql-font-times-new-roman { font-family: 'Tinos', 'Times New Roman', serif; }
.ql-font-verdana { font-family: 'Noto Sans', Verdana, sans-serif; }

/* Sizes (matching Size.whitelist) */
.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-16px { font-size: 16px; }
.ql-size-18px { font-size: 18px; }
.ql-size-20px { font-size: 20px; }
.ql-size-24px { font-size: 24px; }
.ql-size-28px { font-size: 28px; }
.ql-size-32px { font-size: 32px; }
.ql-size-36px { font-size: 36px; }
.ql-size-48px { font-size: 48px; }
.ql-size-60px { font-size: 60px; }
.ql-size-72px { font-size: 72px; }

/* Alignment */
.ql-align-left { text-align: left; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Text decorations */
.ql-editor strong, .ql-editor b { font-weight: bold; }
.ql-editor em, .ql-editor i { font-style: italic; }
.ql-editor u { text-decoration: underline; }
.ql-editor s, .ql-editor strike { text-decoration: line-through; }

/* Code blocks */
.ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: auto;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Cousine', 'Courier New', monospace;
}

/* Links */
.ql-editor a {
  color: #51ABB3;
  text-decoration: underline;
}

/* Lists */
.ql-editor ol, .ql-editor ul {
  padding-left: 1.5em;
}

.ql-editor li {
  padding-left: 0.5em;
}

/* Indent classes */
.ql-editor .ql-indent-1 { padding-left: 3em; }
.ql-editor .ql-indent-2 { padding-left: 6em; }
.ql-editor .ql-indent-3 { padding-left: 9em; }
.ql-editor .ql-indent-4 { padding-left: 12em; }
.ql-editor .ql-indent-5 { padding-left: 15em; }
.ql-editor .ql-indent-6 { padding-left: 18em; }
.ql-editor .ql-indent-7 { padding-left: 21em; }
.ql-editor .ql-indent-8 { padding-left: 24em; }

/* Headers */
.ql-editor h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
.ql-editor h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; }
.ql-editor h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
.ql-editor h4 { font-size: 1em; font-weight: bold; margin: 1.33em 0; }
.ql-editor h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
.ql-editor h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }

/* Background colors need inline-block for proper display */
.ql-editor span[style*="background-color"] {
  padding: 0 2px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------------------------------- */