@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap");
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
  background-color: transparent;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button {
  padding: 0;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
  cursor: pointer;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #EBECF5;
}

::-webkit-scrollbar-track {
  background-color: #FFFFFF;
  border: 1px solid #EBECF5;
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: #CBD6E2;
  border-radius: 8px;
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
}

input:focus {
  outline: none;
}

.dm_sans_500_14 {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  /* Medium weight */
  font-size: 14px;
}

.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #3243FF;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.custom-radio:hover {
  border-color: #a3b1ff;
}

.custom-radio:checked {
  border-color: #3243FF;
}

.custom-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #3243FF;
  animation: radioFill 0.1s ease forwards;
}

/* Animation for the inner circle when checked */
@keyframes radioFill {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
}
/* Style for the labels */
label {
  cursor: pointer;
  vertical-align: middle;
  margin-right: 16px;
  transition: color 0.1s ease;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #00085A;
  font-size: 14px;
  transition: color 0.1s ease-out;
}

.custom-radio:checked {
  color: #3243FF;
  font-weight: 500;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: solid 1px #EBECF5;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: 1px;
  background-color: #B8BACC;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:focus + .slider {
  /*box-shadow: 0 0 1px #2196F3;*/
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background-color: #3243FF;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.step_condition_popover {
  background-color: white;
  border-radius: 8px;
  border: solid 1px #EBECF5;
  padding: 16px 8px 16px 8px;
  display: flex;
  gap: 16px;
  cursor: pointer;
  transition: background-color 0.1s ease-out;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  z-index: 50;
  margin-top: 3px;
  display: none;
  transform: none;
  top: anchor(--step-condition-button bottom);
  left: anchor(--step-condition-button left);
  width: fit-content;
  transition-behavior: allow-discrete;
}
.step_condition_popover:popover-open {
  animation-name: fadeInTop;
  display: block;
  animation-duration: 0.15s;
  /* Set duration */
  animation-timing-function: ease-out;
  /* Optional: add easing */
  animation-fill-mode: forwards;
  transform: translateY(0);
}
@starting-style {
  .step_condition_popover:popover-open {
    animation-name: fadeInBottom;
    animation-duration: 5.2s;
    /* Set duration */
    animation-timing-function: ease-out;
    /* Optional: add easing */
    animation-fill-mode: forwards;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(0%);
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
  }
}
.step_condition_button {
  border: solid 1px #ECEDF4;
  border-radius: 4px;
  padding: 10px 12px 10px 12px;
  gap: 8px;
  display: flex;
  align-items: center;
  background-color: transparent;
  min-width: 100%;
  justify-content: space-between;
  anchor-name: --step-condition-button;
}

.choose_linkedin_account_button {
  border: solid 1px #ECEDF4;
  margin-bottom: 24px;
  border-radius: 4px;
  padding: 10px 12px 10px 12px;
  gap: 8px;
  display: flex;
  align-items: center;
  background-color: transparent;
  width: fit-content;
  justify-content: space-between;
  anchor-name: --step-condition-button;
}

.choose_email_account_button {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #00085A;
  font-size: 14px;
  transition: color 0.2s ease-out;
  border: solid 1px #ECEDF4;
  border-radius: 4px;
  max-height: 40px;
  padding: 10px 12px 10px 12px;
  gap: 8px;
  display: flex;
  min-width: 280px;
  align-items: center;
  align-self: end;
  background-color: transparent;
  width: fit-content;
  justify-content: space-between;
  anchor-name: --email--account--button;
  flex: 1;
  outline: none;
}

.email_profiles_popover {
  top: anchor(--email--account--button bottom);
  left: anchor(--email--account--button left);
  width: fit-content;
  max-height: 280px;
  border: none;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  background-color: #FFFFFF;
  transition-behavior: allow-discrete;
  border: solid 1px #F2F3FC;
  border-radius: 8px;
  padding: 16px 8px 16px 8px;
}
.email_profiles_popover:popover-open {
  animation-name: fadeInTop;
  display: flex;
  flex-direction: column;
  animation-duration: 0.15s;
  /* Set duration */
  animation-timing-function: ease-out;
  /* Optional: add easing */
  animation-fill-mode: forwards;
  transform: translateY(0);
  padding: 3px;
}
@starting-style {
  .email_profiles_popover:popover-open {
    animation-name: fadeInBottom;
    animation-duration: 5.2s;
    /* Set duration */
    animation-timing-function: ease-out;
    /* Optional: add easing */
    animation-fill-mode: forwards;
    opacity: 1;
    transform: translateY(0);
  }
}

.email_profiles_item {
  display: flex;
  padding: 12px 16px 12px 16px;
  border: none;
  width: 100%;
}

.email_profiles_item:hover {
  background-color: #EBECF5;
  border-radius: 4px;
}

.cancel_button {
  padding: 8px 16px 8px 16px;
  border: solid 1px #FEE5EB;
  border-radius: 4px;
  display: flex;
  gap: 4px;
}

.cancel_button span {
  color: #FE1953;
  transition: color 0.2s ease;
}

.cancel_button:hover span {
  color: #E5174B;
}

.cancel_button:active span {
  color: #CC1442;
}

.edit_button {
  padding: 8px 16px 8px 16px;
  border: solid 1px #EBECF5;
  border-radius: 4px;
  display: flex;
  gap: 4px;
}

.edit_button span {
  color: #3243FF;
  transition: color 0.2s ease;
}

.edit_button svg {
  transition: color 0.2s ease;
  fill: #3243FF;
}

.edit_button:hover span {
  color: #2D3CE5;
}

.edit_button:hover svg {
  fill: #2D3CE5;
}

.edit_button:active span {
  color: #2836CC;
}

.edit_button:active svg {
  fill: #2836CC;
}

.add_new_message_button {
  padding: 8px 16px 8px 16px;
  border: solid 1px #EBECF5;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  margin-right: auto;
}

.add_new_message_button span {
  /* Default span styles here */
  color: #3243FF;
  transition: color 0.2s ease;
}

.add_new_message_button:hover span {
  color: #2D3CE5;
}

.add_new_message_button:active span {
  color: #2836CC;
}

.add_button {
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  background-color: #3243FF;
  border: none;
}

.add_button:hover {
  background-color: #2D3CE5;
}

.add_button:active {
  background-color: #2836CC;
}

.add_button:disabled {
  background-color: #C2C3CC;
}

.placeholder_button {
  border: solid 1px #ECEDF4;
  border-radius: 4px;
  padding: 10px 12px 10px 12px;
  gap: 8px;
  display: flex;
  align-items: center;
  background-color: transparent;
}

.placeholder_button span {
  color: #00085A;
}

.placeholder_button:hover span {
  color: #2D3CE5;
}

.placeholder_button:active span {
  color: #2836CC;
}

.placeholder_button:active {
  border: solid 1px #B2B9FF;
}

.linkedin_text_area {
  border: solid 1px #ECEDF4;
  border-radius: 4px;
  color: #00085A;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  padding: 12px 16px 12px 16px;
  font-size: 14px;
  max-width: 652px;
  width: 100%;
  min-height: 260px;
  margin-bottom: 16px;
}

.linkedin_text_area:focus {
  outline: solid 1px #3243FF;
}

.linkedin_text_area::placeholder {
  color: #8F92B2;
}

.regular_input {
  border: solid 1px #ECEDF4;
  border-radius: 4px;
  color: #00085A;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  padding: 12px 16px 12px 16px;
  font-size: 14px;
  max-width: 652px;
  max-height: 40px;
  margin-bottom: 16px;
}

.regular_input:focus {
  outline: solid 1px #3243FF;
}

.regular_input::placeholder {
  color: #8F92B2;
}

/* The container */
.create_message_template_container {
  display: flex;
  color: #00085A;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.create_message_template_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.create_message_template_checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 18px;
  width: 18px;
  border: solid 2px #B8BACC;
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.create_message_template_container:hover input ~ .create_message_template_checkmark {
  border: solid 2px #3243FF;
}

/* When the checkbox is checked, add a blue background */
.create_message_template_container input:checked ~ .create_message_template_checkmark {
  border: solid 2px #3243FF;
}

/* Create the checkmark/indicator (hidden when not checked) */
.create_message_template_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.create_message_template_container input:checked ~ .create_message_template_checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.create_message_template_container .create_message_template_checkmark:after {
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #3243FF;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu_item {
  display: flex;
  border-radius: 4px;
  height: 52px;
  gap: 8px;
  align-items: center;
  padding: 0px 16px 0px 16px;
  transition: color 0.2s ease;
  border: none;
}

.menu_item:hover {
  background-color: #2D3CE5;
}

.menu_item:active {
  background-color: #2836CC;
}

.search_bar_button {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: none;
  transition: color 0.2s ease;
}

.search_bar_input_container:hover {
  border: solid 1px #EBECF5;
  background-color: #F7F8FF;
}

.search_bar_input_container:focus-within {
  border: solid 1px #3243FF;
  background-color: #FFFFFF;
}

.search_bar_input_container {
  border: solid 1px #EBECF5;
  display: flex;
  border-radius: 4px;
  padding: 2px 2px 2px 2px;
  gap: 12px;
  flex: 1;
  align-items: center;
}

.search_input {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #00085A;
  height: 20px;
  border: none;
}

.search_input:placeholder {
  color: #8F92B2;
  opacity: 1;
}

.add_button_header:hover {
  background-color: #2D3CE5;
}

.add_button_header:active {
  background-color: #2836CC;
}

.add_button_header {
  display: flex;
  background-color: #3243FF;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  border: none;
  anchor-name: --create-talent-button;
}

.counter-container.minimal {
  background: white;
  border-radius: 50px;
  width: fit-content;
  gap: 12px;
  display: flex;
  padding: 4px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
}

.minimal .counter-btn {
  background: #f8f9fa;
  color: #495057;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  border: 1px solid #e9ecef;
  font-weight: 1000;
}

.minimal .counter-btn:hover {
  background: #e9ecef;
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.minimal .reset-btn {
  background: #495057;
  color: white;
  border: none;
  transition: background-color 0.2s ease;
  border-radius: 25px;
  padding: 6px 24px 6px 24px;
  box-shadow: none;
  font-size: 14px;
}

.minimal .reset-btn:hover {
  background: #343a40;
  transform: none;
}

.minimal .reset-btn:active {
  background-color: #495057;
}

.sequence_status_popover {
  top: anchor(--sequence-status-button bottom);
  left: anchor(--sequence-status-button left);
  border: none;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  background-color: #FFFFFF;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.sequence_status_popover:popover-open {
  opacity: 1;
  visibility: visible;
}

.sequence_status_trigger {
  border: none;
  padding: 0;
  anchor-name: --sequence-status-button;
}

.user_profile_popover {
  top: anchor(--profile-info-button bottom);
  left: anchor(--profile-info-button left);
  margin-left: -5%;
  border: none;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  background-color: #FFFFFF;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.user_profile_popover:popover-open {
  opacity: 1;
  display: flex;
  visibility: visible;
}

.user_profile_trigger {
  border: none;
  padding: 0;
  anchor-name: --profile-info-button;
}

.floating_group_backdrop {
  display: none;
  background-color: rgba(1, 8, 86, 0.5);
  position: absolute;
  justify-content: flex-end;
  width: 100vw;
  height: auto;
  border: none;
  padding: 0;
  z-index: 101;
  height: 100vh;
  opacity: 0;
  overflow: hidden;
  will-change: opacity;
}

/* Backdrop show animation */
.floating_group_backdrop.show {
  will-change: opacity;
  opacity: 1;
  visibility: visible;
  display: flex;
  animation: backdropFadeIn 0.3s ease-out forwards;
}

/* Backdrop hide animation */
.floating_group_backdrop.hide {
  will-change: opacity;
  animation: backdropFadeOut 0.3s ease-in forwards;
}

.floating_group_backdrop_none {
  display: none;
  position: absolute;
  justify-content: flex-end;
  width: 100vw;
  height: auto;
  border: none;
  padding: 0;
  z-index: 101;
  height: 100vh;
  opacity: 0;
  overflow: hidden;
  will-change: opacity;
}

/* Backdrop show animation */
.floating_group_backdrop_none.show {
  will-change: opacity;
  opacity: 1;
  visibility: visible;
  display: flex;
  animation: backdropFadeIn 0.3s ease-out forwards;
}

/* Backdrop hide animation */
.floating_group_backdrop_none.hide {
  will-change: opacity;
  animation: backdropFadeOut 0.3s ease-in forwards;
}

.loader {
  width: 24px;
  height: 24px;
  border: 3px solid #00085A;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.delete-button-step-condition {
  min-width: 20px;
  min-height: 20px;
  display: flex;
  border: none;
}

.delete-button-step-condition svg path {
  transition: fill 0.2s ease-in-out;
}

.delete-button-step-condition:hover svg path {
  fill: #E5174B;
}

.delete-button-step-condition:active svg path {
  fill: #CC1442;
}

.word_count {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #454973;
  font-size: 16px;
  transition: color 0.2s ease-out;
  align-self: flex-end;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}
/* Base fade-slide class */
.fade-slide {
  opacity: 0;
  transform: translateX(100px);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Show animation - slides in from right to left */
.fade-slide.show {
  animation: slideInFromRight 0.4s ease-out forwards;
}

/* Hide animation - slides out from left to right */
.fade-slide.hide {
  animation: slideOutToRight 0.3s ease-in forwards;
}

/* Backdrop fade animations */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.popover-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.popover-content {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  /* Position as needed */
}

.search_bar_item_container {
  display: flex;
  padding: 4px 4px 4px 8px;
}

.search_bar_item_container:hover {
  background-color: #1E7AA3;
}

.search_bar_item_container a {
  color: #00085A;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  width: 100%;
}

.search_bar_item_container:hover a {
  color: #FFFFFF;
}

.create_talen_client_popover {
  border: solid 1px #F2F3FC;
  border-radius: 8px;
  margin-top: 5px;
  top: anchor(--create-talent-button bottom);
  left: anchor(--create-talent-button left);
  border: none;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  background-color: #FFFFFF;
  min-width: 140px;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.create_talen_client_popover:popover-open {
  opacity: 1;
  visibility: visible;
}

.create_talen_client_trigger {
  border: none;
  padding: 0;
}

.create_talen_client_popover span {
  color: #00085A;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding-top: 1px;
}

.create_talent_item {
  display: flex;
  gap: 4px;
  border: none;
}

.create_talent_item a {
  color: #00085A;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding-top: 1px;
  text-decoration: none;
}

.create_talent_item:hover a {
  color: #2D3CE5;
}

.create_talent_item:active a {
  color: #2836CC;
}

.create_talent_item:hover svg {
  fill: #2D3CE5;
}

.create_talent_item:active svg {
  fill: #2836CC;
}

.search_template_input {
  border-radius: 4px;
  border: solid 1px #ECEDF4;
  padding: 10px 12px 10px 12px;
  color: #00085A;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 16px;
}

.search_template_input:placeholder {
  color: #8F92B2;
}

.apply_message_template {
  background-color: #3243FF;
  height: 40px;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: "DM Sans", sans-serif;
  border: none;
  padding: 8px 16px 8px 16px;
  font-weight: 500;
  font-size: 16px;
}

.apply_message_template:disabled {
  background-color: #C2C3CC;
}

.page-body {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  background-color: #f0f0f0;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dropdown-container {
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(56, 60, 102, 0.1) 4px 0px 20px 0px;
  min-width: 192px;
  max-width: 192px;
  min-height: 0px;
  height: auto;
  z-index: 2102;
  margin-right: auto;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242, 243, 252);
  border-radius: 8px;
  padding: 16px;
  opacity: 1;
}

.menu-item {
  overflow: hidden auto;
  justify-content: flex-start;
  border-radius: 0px;
  opacity: 1;
  cursor: pointer;
  align-self: flex-start;
  min-width: 49px;
  min-height: 26px;
  max-height: 26px;
  height: 26px;
  flex-grow: 1;
  width: calc(100% + 0px);
  margin: 0px;
  z-index: 8;
  display: flex;
  flex-direction: row;
  position: relative;
}

.menu-icon {
  align-self: flex-start;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  width: 16px;
  flex-grow: 1;
  height: 16px;
  margin: 4px 4px 0px 0px;
  z-index: 2;
  border-radius: 0px;
  opacity: 1;
  align-items: stretch;
  display: flex;
  flex-direction: row;
}

.menu-icon-image {
  top: 0px;
  left: 0px;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0px;
  box-sizing: inherit;
}

.menu-text {
  align-self: center;
  min-width: 49px;
  width: max-content;
  flex-grow: 0;
  height: max-content;
  margin: 0px;
  z-index: 4;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 14px;
  font-weight: 500;
  color: rgb(0, 8, 90);
  letter-spacing: -0.25px;
  line-height: 1.8;
  border-radius: 0px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.menu-text:hover {
  color: #000DA0;
}

.menu-text--archive {
  min-width: 49px;
  max-width: 49px;
  width: 49px;
  flex-grow: 1;
}

.menu-item-clickable {
  outline: 0 dotted transparent;
  touch-action: manipulation;
}

.menu-item-focus {
  outline: 0 dotted transparent;
}

.menu-item-focus-active {
  outline: 0 dotted transparent !important;
}

.page-body {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  background-color: #f0f0f0;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.modal-popup {
  box-shadow: rgba(0, 8, 90, 0.2) 4px 0px 20px 0px;
  background-color: rgb(255, 255, 255);
  top: 100px;
  position: fixed;
  left: 0px;
  right: 0px;
  z-index: 2002;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 20px);
  height: auto;
  overflow-y: auto;
  grid-template-rows: minmax(100%, max-content);
  filter: none;
  justify-content: flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242, 243, 252);
  border-radius: 4px;
  opacity: 1;
  min-width: 347px;
  max-width: 400px;
  min-height: 196px;
  overflow: visible;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
}

.modal-title {
  align-self: center;
  min-width: 299px;
  max-width: 299px;
  order: 2;
  min-height: 28px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: 299px;
  margin: 24px 24px 16px;
  z-index: 2;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 22px;
  font-weight: 500;
  color: rgb(0, 8, 90);
  text-align: center;
  line-height: 1.3;
  border-radius: 0px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.modal-description {
  align-self: center;
  min-width: 299px;
  max-width: 299px;
  order: 3;
  min-height: 28px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: 299px;
  margin: 0px 24px 24px;
  z-index: 3;
  white-space: pre-wrap;
  overflow: visible;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  color: rgb(0, 8, 90);
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 1.4;
  border-radius: 0px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.button-container {
  align-self: center;
  min-width: 180px;
  max-width: 180px;
  order: 4;
  min-height: 40px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: 180px;
  margin: 0px 0px 24px;
  z-index: 60;
  overflow: hidden auto;
  justify-content: flex-start;
  border-radius: 0px;
  opacity: 1;
  overflow: visible;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.cancel-button {
  background-color: rgb(255, 255, 255);
  align-self: flex-start;
  min-width: 84px;
  max-width: 84px;
  order: 1;
  min-height: 40px;
  width: 84px;
  flex-grow: 1;
  height: max-content;
  margin: 0px 8px 0px 0px;
  z-index: 59;
  overflow: visible;
  justify-content: flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(235, 236, 245);
  border-radius: 4px;
  opacity: 1;
  cursor: pointer;
  outline: 0 dotted transparent;
  touch-action: manipulation;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.cancel-button-text {
  align-self: flex-start;
  min-width: 52px;
  max-width: 52px;
  order: 2;
  min-height: 25px;
  width: 52px;
  flex-grow: 1;
  height: max-content;
  margin: 8px 16px 0px;
  z-index: 11;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  color: rgb(50, 67, 255);
  letter-spacing: -0.25px;
  line-height: 1.5;
  border-radius: 4px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.archive-button {
  background-color: rgb(254, 25, 83);
  align-self: flex-start;
  min-width: 88px;
  max-width: 88px;
  order: 2;
  min-height: 42px;
  width: 88px;
  flex-grow: 1;
  height: max-content;
  margin: 0px;
  z-index: 59;
  overflow: visible;
  justify-content: flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(254, 229, 235);
  border-radius: 4px;
  opacity: 1;
  cursor: pointer;
  outline: 0 dotted transparent;
  touch-action: manipulation;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.archive-button-text {
  align-self: flex-start;
  min-width: 58px;
  max-width: 58px;
  order: 2;
  min-height: 26px;
  width: 58px;
  flex-grow: 1;
  height: max-content;
  margin: 7px 15px;
  z-index: 37;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  line-height: 1.5;
  border-radius: 4px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.focus-state {
  outline: 0 dotted transparent;
}

.focus-state-active {
  outline: 0 dotted transparent !important;
}

.template-modal {
  box-shadow: rgba(0, 8, 90, 0.2) 4px 0px 20px 0px;
  background-color: rgb(255, 255, 255);
  top: 100px;
  position: fixed;
  left: 0px;
  right: 0px;
  z-index: 2002;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 20px);
  height: auto;
  overflow-y: auto;
  grid-template-rows: minmax(100%, max-content);
  filter: none;
  justify-content: flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242, 243, 252);
  border-radius: 4px;
  padding: 24px;
  opacity: 1;
  min-width: 376px;
  max-width: 376px;
  min-height: 224px;
  overflow: visible;
  align-content: stretch;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
}

.template-modal-title {
  align-self: center;
  min-width: 0px;
  order: 1;
  min-height: 31px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: calc(100% + 0px);
  margin: 0px 0px 16px;
  z-index: 15;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 22px;
  font-weight: 500;
  color: rgb(0, 8, 90);
  text-align: center;
  line-height: 1.3;
  border-radius: 0px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.template-modal-description {
  align-self: center;
  min-width: 175px;
  max-width: 299px;
  order: 3;
  min-height: 15px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
  margin: 0px 0px 24px;
  white-space: pre-wrap;
  overflow: visible;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  color: rgb(0, 8, 90);
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 1.4;
  border-radius: 0px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.template-input-field {
  transition: box-shadow 200ms;
  align-self: flex-start;
  min-width: 0px;
  order: 4;
  min-height: 40px;
  max-height: 40px;
  height: 40px;
  flex-grow: 1;
  width: calc(100% + 0px);
  margin: 0px 0px 24px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242, 243, 252);
  border-radius: 4px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  color: rgb(0, 8, 90);
  padding: 0px 12px;
  opacity: 1;
  background: none transparent;
  appearance: none;
  background-color: transparent;
  border-style: solid;
  padding: 0px 12px;
  position: relative;
}

.template-input-field::placeholder {
  color: #b5b5b5;
}

.template-input-field:focus {
  outline: 0;
}

.template-button-container {
  align-self: center;
  min-width: 0px;
  order: 5;
  min-height: 0px;
  height: max-content;
  flex-grow: 0;
  flex-shrink: 0;
  width: auto;
  margin: 0px;
  overflow: visible;
  justify-content: center;
  gap: 0px 8px;
  border-radius: 0px;
  opacity: 1;
  overflow: visible;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.template-cancel-button {
  background-color: rgb(255, 255, 255);
  align-self: center;
  min-width: 86px;
  max-width: 86px;
  order: 1;
  min-height: 40px;
  max-height: 40px;
  width: 86px;
  flex-grow: 1;
  height: 40px;
  margin: 0px;
  z-index: 59;
  overflow: visible;
  justify-content: flex-start;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(235, 236, 245);
  border-radius: 4px;
  opacity: 1;
  cursor: pointer;
  outline: 0 dotted transparent;
  touch-action: manipulation;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

.template-cancel-button-text {
  align-self: flex-start;
  min-width: 0px;
  order: 2;
  min-height: 25px;
  width: max-content;
  flex-grow: 0;
  height: max-content;
  margin: 8px 16px;
  z-index: 11;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  color: rgb(50, 67, 255);
  letter-spacing: -0.25px;
  line-height: 1.5;
  border-radius: 4px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.template-save-button {
  background-color: #3243FF;
  border: none;
  align-self: flex-start;
  min-width: 10px;
  order: 2;
  min-height: 40px;
  max-height: 40px;
  width: max-content;
  flex-grow: 0;
  height: 40px;
  margin: 0px;
  z-index: 62;
  overflow: visible;
  justify-content: flex-start;
  border-radius: 4px;
  padding: 8px 16px;
  opacity: 1;
  outline: 0 dotted transparent;
  touch-action: manipulation;
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  cursor: pointer;
}

.template-save-button:disabled {
  background-color: rgb(194, 195, 204);
}

.template-save-button:disabled span {
  color: rgb(255, 255, 255);
}

.template-save-button span {
  color: rgb(255, 255, 255);
  align-self: center;
  min-width: 63px;
  order: 2;
  min-height: 25px;
  width: max-content;
  flex-grow: 0;
  height: max-content;
  margin: 0px;
  z-index: 38;
  white-space: pre-wrap;
  overflow: visible;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 4px;
  opacity: 1;
  overflow-wrap: break-word;
  position: relative;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.focus-state {
  outline: 0 dotted transparent;
}

.focus-state-active {
  outline: 0 dotted transparent !important;
}

.input-disabled {
  -webkit-text-fill-color: currentcolor;
  opacity: 1;
}

.input-disabled-placeholder {
  -webkit-text-fill-color: currentcolor;
  opacity: 1;
}

.sequence_option_popover {
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(56, 60, 102, 0.1) 4px 0px 20px 0px;
  overflow-y: auto;
  row-gap: 16px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(242, 243, 252);
  padding: 16px;
  opacity: 1;
  border: solid 1px #F2F3FC;
  border-radius: 8px;
  margin-top: 5px;
  margin-left: revert-layer;
  top: anchor(--sequence-option-button bottom);
  left: anchor(--sequence-option-button left);
  border: none;
  box-shadow: 4px 0px 20px 0px rgba(56, 60, 102, 0.1019607843);
  background-color: #FFFFFF;
  min-width: 140px;
  margin-right: 23px;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.sequence_option_popover:popover-open {
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sequence_option_button {
  anchor-name: --sequence-option-button;
}

.vertical-line-with-arrow {
  /* This is the positioning context for the arrow */
  position: relative;
  /* This is the line itself */
  width: 1px;
  /* Line thickness */
  height: 26px;
  /* Line length */
  background-color: #B8BAD0;
  /* Line color */
  margin-bottom: 6px;
  /* Just for centering this example */
}

/* This pseudo-element creates the arrow */
.vertical-line-with-arrow::after {
  content: "";
  position: absolute;
  /* Position the arrow to be at the very bottom of the line */
  bottom: -5px;
  left: 50%;
  /* Center the arrow on the line. 
     'left: 50%' starts the element at the center, 
     'translateX(-50%)' pulls it back by half its own width. */
  transform: translateX(-50%);
  /* This is the "CSS Triangle Trick" */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  /* The visible part of the triangle */
  border-top: 6px solid #B8BAD0;
  /* This is the arrow head */
}