body {
  margin: 0;
  font-family: 'Poppins' !important ;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: 'Poppins';
}

.unique-sidebar-container {
  width: 70px;
  height: 100vh;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 1s ease;
  position: fixed;
  z-index: 1000;
  overflow: visible !important;
  border-radius: 10px;
  top: 5px;
  left: 5px;
  z-index: 1000;
}

.unique-sidebar-container.unique-expanded {
  width: 250px;
}

.unique-sidebar-header {
  padding: 18.5px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  position: relative;
  padding-right: 5px;
}

.unique-sidebar-logo-svg {
  width: 27px;
  height: 27px;
  top: 37px;
  left: 33px;
}

.unique-sidebar-tagline-svg {
  width: 107px;
  height: 30px;
  top: 31px;
  left: 82px;
  gap: 0px;
  opacity: 1;
}

.unique-sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.unique-sidebar-items {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  max-height: calc(100vh - 130px);
}

.unique-sidebar-items::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}

.unique-sidebar-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-wrap: nowrap;
}

.unique-module-label {
  display: none;
  font-size: 11px;
  color: white;
  text-align: center;
  margin-top: 2px;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unique-sidebar-container.unique-collapsed .unique-module-label {
  display: block;
  margin-top: 2px;
}

.unique-sidebar-main-link {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-main-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0px;
}

.unique-sidebar-icon {
  height: 22px;
  width: 22px;
  font-size: 20px;
  margin-right: 15px;
}

.unique-sidebar-title {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

.unique-expand-icon {
  position: absolute;
  right: 30px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

.unique-sidebar-item.unique-active-module {
  background-color: var(--primary-dark);
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
  margin: 0px 10px;
  width: 226px;
}

.unique-sidebar-main-link.unique-active-module {
  display: flex;
  align-items: center;
  padding: 10px 5px 5px 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  border-radius: 8px 8px 0px 0px;
}

.unique-sidebar-main-link.unique-active-module .unique-expand-icon {
  position: absolute;
  right: 6px;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

.unique-sidebar-item.unique-active-module-collapsed {
  background-color: var(--primary-dark);
  border-radius: 8px;
  padding: 0px;
  margin: 5px 5px 0px 5px;
  width: 70px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unique-sidebar-main-link.unique-active-module-collapsed {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  border-radius: 8px;
  width: 100%;
}

.unique-sidebar-sublink {
  padding: 5px 0px 5px 22px;
  font-size: 14px;
  text-decoration: none;
  color: #dfe6ed;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
  height: 30px;
}

.unique-sidebar-sublink.unique-active-screen {
  background-color: var(--primary);
  border-radius: 6px;
  padding: 5px 0px 5px 10px;
  color: white;
  position: relative;
  height: 30px;
  width: 80%;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  text-decoration-skip-ink: none;
}

.unique-sidebar-sublink.unique-active-screen::before {
  content: '';
  position: absolute;
  width: 92%;
  height: 3px;
  top: 24px;
  background-color: var(--svg-tangerine);
  border-radius: 2px;
}

.unique-sidebar-sublink:hover {
  border-radius: 6px;
  padding: 5px 0px 5px 10px;
  color: white;
  position: relative;
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  text-decoration-skip-ink: none;
}

.unique-sidebar-container.unique-expanded .unique-sidebar-sublink:hover {
  margin-left: 10px;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-sublink:hover {
  margin-left: 0;
}

.unique-screen-name {
  margin-right: auto;
  margin-left: 5px;
  text-wrap: nowrap;
}

.unique-screen-icon {
  min-width: 20px;
  min-height: 20px;
}

.unique-main-content {
  margin-left: 90px;
  transition: margin-left 0.3s ease;
  width: calc(100% - 90px);
  transition: none;
}

.unique-sidebar-container.unique-expanded ~ .unique-main-content {
  margin-left: 250px;
  width: calc(100% - 250px);
}

.unique-content-container {
  padding: 0px 10px 10px 10px;
  background-color: var(--white);
  height: 100vh;
  overflow-y: scroll;
  border-radius: 10px;
  position: fixed;
  top: 5px;
  left: 90px;
  width: calc(100% - 100px);
}

.unique-sidebar-container.unique-expanded ~ .unique-main-content .unique-content-container {
  left: 90px;
  width: calc(100% - 100px);
}

.unique-sidebar-container.unique-collapsed {
  width: 80px;
  transition: width 1s ease;
  overflow: hidden;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-header {
  padding: 20px 20px 25px 20px;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-items {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-item {
  text-align: center;
  margin-bottom: 5px;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-icon {
  font-size: 20px;
  margin: auto;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-main-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  width: 100%;
}

.unique-sidebar-container.unique-collapsed .unique-sidebar-sublink {
  display: none;
}

.unique-sidebar-footer {
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  color: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: 50px;
}

.unique-arrow-toggle {
  position: absolute;
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
  background-color: var(--svg-tangerine);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: transform 0.3s ease;
}

.unique-arrow-svg {
  width: 18px;
  height: 18px;
}

.unique-tooltip {
  position: fixed;
  left: 85px;
  background-color: var(--primary-dark);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: 500;
  pointer-events: none;
}

.unique-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: var(--primary-dark);
}

.page-container {
  min-height: 100vh;
  background-color: #ecf0f1;
  display: flex;
  flex-direction: column;
}

.unique-scroll-indicator {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin: 0 auto;
}

.unique-scroll-indicator.down-arrow {
  animation: fade-pulse-down 1.5s infinite alternate;
}

.unique-scroll-indicator.up-arrow {
  animation: fade-pulse-up 1.5s infinite alternate;
}

.unique-sidebar-container.unique-expanded .unique-scroll-indicator {
  width: 36px;
  height: 36px;
}

.unique-scroll-indicator:hover {
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.unique-scroll-indicator-svg {
  width: 22px;
  height: 22px;
}

.unique-sidebar-container.unique-expanded .unique-scroll-indicator-svg {
  width: 26px;
  height: 26px;
}

@keyframes fade-pulse-down {
  0% {
    opacity: 0.5;
    transform: translateY(-2px);
  }

  100% {
    opacity: 1;
    transform: translateY(2px);
  }
}

@keyframes fade-pulse-up {
  0% {
    opacity: 0.5;
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* Indicates clickable area */
}

.menu {
  position: absolute;
  top: calc(100% + 10px);
  /* Position the menu below the profile info */
  right: -20px;
  background-color: var(--white);
  border: 3px solid var(--gray-lightest);
  box-shadow: 0 4px 6px var(--gray);
  padding: 10px;
  z-index: 1;
  min-width: 220px;
  text-align: left;
  display: none;
  /* Initially hidden */
  border-radius: 10px;
  /* Smooth corners for a modern look */
}

.menu.menu-open {
  display: block;
  /* Show the menu when the class is added */
}

.menu a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  /* Adjust padding for better spacing */
  font-size: 14px;
  border-radius: 4px;
  /* Smooth corners on hover */
}

.menu a:hover {
  background-color: var(--gray-lightest);
  /* Change background color on hover */
}

.profile-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 5px;
}

.profile-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 8px;
}

.profile-icon-wrapper {
  background-color: var(--gray-lighter);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-text {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
  text-align: left;
  color: #000000;
}

.logout-dropdown {
  width: 100%;
  top: 127px;
  border: 1px;
  border: 1px solid #ecf0f5;
}

.menu::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 21px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--white);
  z-index: 1;
}

.menu::after {
  content: '';
  position: absolute;
  top: -12px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--gray-light);
  z-index: 1;
}

.header-container {
  background-color: #ffff;
  box-shadow: 2px 10px 5px 0px rgba(0, 0, 0, 0.16);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  width: 129px;
  height: 35px;
  margin: 0px 0px 0px 30px;
}

/* .custom-claim-edit-btn { */
.custom-header-edit-btn {
  background-color: var(--secondary-light1);
  border: none;
  color: var(--primary);
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 5px;
  height: 20px;
  width: fit-content;
  padding: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.custom-header-delete-btn {
  background-color: var(--error-light);
  border: none;
  color: var(--error);
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 5px;
  height: 20px;
  width: fit-content;
  padding: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.custom-header-icon-edit-btn {
  width: 19px;
  height: 17px;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: var(--secondary-light1);
}

.custom-header-icon-delete-btn {
  width: 19px;
  height: 17px;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: var(--error-light);
}

.custom-header-icon-delete-btn img {
  width: 12px;
  height: 12px;
  display: block;
}

.custom-header-icon-edit-btn img {
  width: 12px;
  height: 12px;
  display: block;
}

.custom-header-edit-text {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  text-align: left;
}

.custom-header-delete-text {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--error);
  text-align: left;
}

.back-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--svg-tangerine);
}

.back-icon-btn {
  width: 19px;
  height: 18px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn {
  background-color: #f9f6d0;
  border: none;
  color: var(--svg-tangerine);
  width: 20%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  width: 20px;
  gap: 5px;
  height: 20px;
  padding: 1px;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

/* .search-box-container {
  display: flex;
  align-items: center;
}

.search-box-container {
  width: auto;
  min-width: 120px;
} */
.search-box-container {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 120px;
  border: 2px solid #b9dce8;
  /* Add a light gray border */
  border-radius: 6px;
  /* Optional: Add rounded corners */
  padding: 0px;
  /* Optional: Add some spacing inside the container */
}

.search-box-container .btn {
  white-space: nowrap;
}

.box-icon-btn {
  width: 19px;
  height: 18px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-btn {
  background-color: var(--secondary-light1);
  border: none;
  color: var(--secondary);
  width: 20%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  width: 20px;
  gap: 5px;
  height: 20px;
  padding: 1px;
  border-radius: 4px;
  /* margin-right: 20px; */
  margin-left: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.search-bar-wrapper {
  display: block;
}

.search-error {
  margin-top: 4px;
  color: red;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
}

.theme-switcher {
  position: relative;
  margin-right: 12px;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-light);
  border-radius: 6px;
  background-color: var(--white);
  cursor: pointer;
  padding: 6px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.theme-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.theme-toggle-btn:hover:not(:disabled),
.theme-toggle-btn:focus-visible {
  background-color: var(--gray-lightest);
  border-color: var(--secondary-light);
  outline: none;
}

.theme-toggle-btn img {
  width: 18px;
  height: 18px;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background-color: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(18, 38, 63, 0.16);
  padding: 8px 0;
  z-index: 1050;
}

.theme-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--gray);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.theme-option:hover:not(:disabled),
.theme-option:focus-visible {
  background-color: var(--gray-lightest);
  color: var(--primary);
  outline: none;
}

.theme-option.active {
  background-color: var(--secondary-light1);
  color: var(--primary);
}

.theme-option:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.theme-option-label {
  flex: 1;
  text-align: left;
  font-weight: 500;
}

.theme-option-radio input {
  pointer-events: none;
}

.search-box {
  width: 180px;
  height: 36px;
  top: 85px;
  left: 104px;
  gap: 0px;
  border-radius: 6px;
  background: var(--gray-lightest);
  border: 1px solid var(--gray-light);
  padding-left: 10px;
  font-family: 'Inter';
  font-size: 14px;
}

.search-box::placeholder {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: left;
  color: var(--gray);
}

.search-button {
  height: 36px;
  border-radius: 6px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  margin-top: 0px;
}

.search-button:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-left: 10px;
}

.search-text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--white);
  text-align: left;
  margin-right: 10px;
}

.clear-button {
  width: 76px;
  height: 36px;
  border-radius: 6px;
  background: var(--gray-lighter);
  border: 1px solid var(--secondary-light1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  margin-left: 10px;
}

.clear-text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--primary);
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
}

.placeholder-option {
  color: var(--gray);
}

.placeholder-selected {
  color: var(--gray);
}

.search-box option:not(.placeholder-option) {
  color: var(--black);
}

.search-bar-container {
  display: inline-flex;
  align-items: center;
  background: var(--gray-lightest);
  border: 1px solid var(--gray-light);
  border-radius: 6px;
  /* margin-right: 13px; */
  height: 36px;
  padding: 0 3px;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  /* min-width: 320px; */
}

.search-bar-focused {
  border: 1px solid var(--secondary);
}

.search-select {
  border: 1px solid var(--gray-light);
  border-radius: 4px;
  background: var(--gray-lighter);
  font-size: 14px;
  color: var(--black);
  padding: 0 4px;
  height: 28px;
  width: 90px;
  outline: none;
  cursor: pointer;
}

.search-icon-box {
  display: flex;
  align-items: center;
  color: var(--gray);
  cursor: pointer;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--black);
  outline: none;
}

.search-input::placeholder {
  color: var(--gray);
}

.filter-icon-compact {
  cursor: pointer;
}

.search-filter-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 9px;
}

@media screen and (max-width: 860px) {
  .search-input {
    width: 80px;
  }
  .search-select {
    width: 70px;
  }
}

/* Compact Input Fields */
.search-box-compact {
  width: 160px;
  height: 28px;
  border-radius: 6px;
  background: var(--gray-lightest);
  border: 1px solid var(--gray-light);
  padding-left: 10px;
  font-family: 'Inter';
  font-size: 13px;
  outline: none;
  color: var(--gray);
}

.search-box-compact::placeholder {
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  color: var(--gray);
}

.search-box-compact:focus {
  border: 1px solid var(--secondary);
  color: var(--black);
}

/* Compact Search Button */
.search-button-compact {
  height: 28px;
  border-radius: 6px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0 8px;
  gap: 4px;
}

.search-button-compact:disabled {
  pointer-events: none;
  opacity: 0.65;
}

.search-button-compact .search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.search-button-compact .search-text {
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  color: var(--white);
  margin: 0;
}

/* Compact Clear Button */
.clear-button-compact {
  width: 68px;
  height: 28px;
  border-radius: 6px;
  background: var(--gray-lighter);
  border: 1px solid var(--secondary-light1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}

.clear-button-compact .clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.clear-button-compact .clear-text {
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  color: var(--primary);
  margin: 0;
}

/* Compact Multi-select */
.search-box-multi-compact {
  min-width: 180px;
}

.search-box-multi-compact .k-input {
  min-height: 28px !important;
  height: 28px !important;
  background: var(--gray-lightest);
  border: 1px solid var(--gray-light);
  border-radius: 6px;
  font-size: 13px;
}

.search-box-multi-compact .k-input-inner {
  padding: 4px 6px !important;
  min-height: 30px !important;
  font-size: 13px;
}

.search-box-multi-compact .k-chip {
  height: 20px !important;
  font-size: 12px;
  padding: 2px 6px;
  margin: 2px;
}

.multiselect-wrapper-regular {
  width: 180px !important;
  height: 36px !important;
}

.multiselect-wrapper-compact {
  width: 160px !important;
  height: 28px !important;
}

.multiselect-wrapper-regular .k-multiselect,
.multiselect-wrapper-regular .k-multiselect.k-widget {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 36px !important;
  background: var(--gray-lightest) !important;
  border: 1px solid var(--gray-light) !important;
  border-radius: 6px !important;
  font-family: 'Inter' !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

.multiselect-wrapper-compact .k-multiselect,
.multiselect-wrapper-compact .k-multiselect.k-widget {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  height: 28px !important;
  background: var(--gray-lightest) !important;
  border: 1px solid var(--gray-light) !important;
  border-radius: 6px !important;
  font-family: 'Inter' !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

.multiselect-wrapper-regular .k-multiselect .k-input,
.multiselect-wrapper-regular .k-multiselect .k-input-inner {
  height: 36px !important;
  min-height: 36px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  color: var(--gray) !important;
  line-height: 36px !important;
}

.multiselect-wrapper-compact .k-multiselect .k-input,
.multiselect-wrapper-compact .k-multiselect .k-input-inner {
  height: 28px !important;
  min-height: 28px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: var(--gray) !important;
  line-height: 28px !important;
}

.multiselect-wrapper-regular .k-multiselect .k-input-inner .k-input-value-text,
.multiselect-wrapper-regular .k-multiselect .k-placeholder {
  color: var(--gray) !important;
  font-size: 14px !important;
  font-family: 'Inter' !important;
}

.multiselect-wrapper-compact .k-multiselect .k-input-inner .k-input-value-text,
.multiselect-wrapper-compact .k-multiselect .k-placeholder {
  color: var(--gray) !important;
  font-size: 13px !important;
  font-family: 'Inter' !important;
}

.multiselect-wrapper-regular .k-multiselect .k-chip {
  height: 24px !important;
  font-size: 13px !important;
  padding: 2px 8px !important;
  margin: 2px !important;
  background: var(--secondary-light1) !important;
  border: 1px solid var(--gray-light) !important;
  border-radius: 4px !important;
  color: var(--black) !important;
}

.multiselect-wrapper-compact .k-multiselect .k-chip {
  height: 20px !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
  margin: 1px !important;
  background: var(--secondary-light1) !important;
  border: 1px solid var(--gray-light) !important;
  border-radius: 4px !important;
  color: var(--black) !important;
}

.multiselect-wrapper-regular .k-multiselect.k-focus,
.multiselect-wrapper-regular .k-multiselect:focus {
  border: 1px solid var(--secondary) !important;
}

.multiselect-wrapper-compact .k-multiselect.k-focus,
.multiselect-wrapper-compact .k-multiselect:focus {
  border: 1px solid var(--secondary) !important;
}

.multiselect-wrapper-regular .k-multiselect .k-select,
.multiselect-wrapper-compact .k-multiselect .k-select {
  border: none !important;
  background: transparent !important;
  width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gray) !important;
}

.multiselect-wrapper .k-multiselect .k-multiselect-wrap {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.multiselect-wrapper-regular,
.multiselect-wrapper-compact {
  overflow: hidden;
  box-sizing: border-box;
}

/* .react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: var(--primary);
  color: var(--white);
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: var(--primary-dark);
}

.react-datepicker__header {
  background-color: var(--primary-light);
  border-bottom: 1px solid var(--gray-light);
}

.react-datepicker__current-month {
  color: var(--primary);
}

.react-datepicker__day:hover {
  background-color: var(--secondary-light1);
}

.react-datepicker__day--today {
  background-color: var(--secondary-light);
  color: var(--white);
}

.react-datepicker__day--keyboard-selected {
  background-color: var(--secondary-light1);
  color: var(--black);
}

.react-datepicker__navigation-icon::before {
  border-color: var(--primary);
}

.react-datepicker__triangle {
  border-bottom-color: var(--primary-light);
}

.react-datepicker__day--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled='true']):hover {
  background-color: var(--primary-dark);
  color: var(--white);
} */

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: var(--primary);
  color: var(--white);
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: var(--primary-dark);
}

.react-datepicker__header {
  background-color: var(--primary-light);
  border-bottom: 1px solid var(--gray-light);
}

.react-datepicker__current-month {
  color: var(--primary);
}

.react-datepicker__day:hover {
  background-color: var(--secondary-light1);
}

.react-datepicker__day--today {
  background-color: var(--secondary-light);
  color: var(--white);
}

.react-datepicker__day--keyboard-selected {
  background-color: var(--secondary-light1);
  color: var(--black);
}

.react-datepicker__day--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled='true']):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled='true']):hover {
  background-color: var(--primary-dark);
  color: var(--white);
}

.react-datepicker__day--in-selecting-range:not(
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--in-range
),
.react-datepicker__month-text--in-selecting-range:not(
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--in-range
),
.react-datepicker__quarter-text--in-selecting-range:not(
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--in-range
),
.react-datepicker__year-text--in-selecting-range:not(
  .react-datepicker__day--in-range,
  .react-datepicker__month-text--in-range,
  .react-datepicker__quarter-text--in-range,
  .react-datepicker__year-text--in-range
) {
  background-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.react-datepicker__navigation-icon::before {
  border-color: var(--primary);
}

.react-datepicker__triangle {
  border-bottom-color: var(--primary-light);
}

.react-datepicker__day--selected:not([aria-disabled='true']):hover,
.react-datepicker__day--in-selecting-range:not([aria-disabled='true']):hover,
.react-datepicker__day--in-range:not([aria-disabled='true']):hover,
.react-datepicker__month-text--selected:not([aria-disabled='true']):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled='true']):hover,
.react-datepicker__month-text--in-range:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled='true']):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled='true']):hover,
.react-datepicker__year-text--selected:not([aria-disabled='true']):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled='true']):hover,
.react-datepicker__year-text--in-range:not([aria-disabled='true']):hover {
  background-color: var(--primary-dark);
}

.start-end-date-wrapper .start-end-date-input {
  width: 100px;
  min-width: 100px ;
}

.date-range-separator {
  font-weight: 600;
  color: var(--gray);
}

.grid-container {
  /* left: 104px; */
  gap: 0px;
  border-radius: 6px;
  opacity: 0px;
  border: none;
  margin-bottom: 10px;
  position: relative;
}

.k-grid {
  border-radius: 6px;
  overflow: hidden;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 14px;
  border: none;
  max-height: 85vh;
}

.search-grid-separator {
  height: 0px;
  margin: 10px 0px;
  border: 1px solid #ecf0f5;
}

.k-grid-header {
  left: 104px;
  border-radius: 6px 6px 0px 0px;
  opacity: 1px;
  /* padding: 0px 10px; */
  background: var(--primary-light);
}

.k-grid-header,
.k-grid-header-wrap,
.k-grouping-header,
.k-grid .k-table-th,
.k-grid td,
.k-grid .k-table-td,
.k-grid-footer,
.k-grid-footer-wrap,
.k-grid-content-locked,
.k-grid-footer-locked,
.k-grid-header-locked,
.k-filter-row > .k-table-th,
.k-filter-row > td,
.k-filter-row > .k-table-td {
  border-color: var(--primary-light);
}

.k-table-thead,
.k-grid-table-thead,
.k-table-header,
.k-table-group-sticky-header {
  background-color: var(--primary-light);
}

.k-column-title {
  height: 15px;
  left: 172px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  color: var(--primary-dark);
}

.k-grid tbody tr.k-table-row:nth-child(even),
.k-grid tbody tr.k-table-alt-row:nth-child(even) {
  background-color: #f5f7fa;
  border-radius: 6px;
}

.k-grid tbody tr.k-table-row:nth-child(odd),
.k-grid tbody tr.k-table-alt-row:nth-child(odd) {
  border-radius: 6px;
}

.k-grid .k-table-th,
.k-grid td,
.k-grid .k-table-td {
  border: none;
}

.k-grid .k-table-th {
  text-transform: none;
  letter-spacing: normal;
}

.k-grid .identity-column {
  height: 15px;
  left: 172px;
  font-family: 'Inter';
  font-size: 14px;
  /* font-weight: 600 !important; */
  line-height: 14.52px;
  text-align: left;
  color: var(--primary-dark) !important;
}

.k-grid td,
.k-grid .k-table-td {
  height: 15px;
  left: 1px;
  font-family: 'Inter';
  font-size: 14px;
  /* font-weight: 500; */
  line-height: 14.52px;
  text-align: left;
  color: #2e343b;
}

.k-grid .k-table-row {
  width: 1286px;
  height: 33px;
  left: 114px;
}

.k-table-md .k-table-th,
.k-table-md .k-table-td {
  padding-inline: 10px;
}

.k-grid-content {
  width: 100%;
  min-height: 0;
  position: relative;
  flex: 1;
  overflow: auto;
  margin: 0px 10px;
  -ms-overflow-style: none;
}

.k-grid-content::-webkit-scrollbar {
  display: none;
}

td:first-child,
.k-grid .k-table-td:first-child {
  border-inline-start-width: 0;
  border-radius: 6px 0px 0px 6px;
}

.payment-edit .k-table-tbody .k-table-row .k-master-row .k-table-td[data-field='claimId'],
.payment-edit .k-table .k-grid-table .k-table-thead[data-field='claimId'] {
  text-align: left !important;
}

.payment-edit .k-table-tbody .k-table-row .k-master-row .k-table-td,
.payment-edit .k-table .k-grid-table .k-table-thead {
  text-align: right !important;
}

td:last-child,
.k-grid .k-table-td:last-child {
  border-inline-start-width: 0;
  border-radius: 0px 6px 6px 0px;
}

/* Style for the main Kendo Grid pager container */
.k-grid-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  /* border: 1px solid #ECF0F5; */
  background-color: var(--white);
  gap: 10px;
  border: none;
  width: 100%;
  position: relative;
}

/* Ensure pager info is on the left */
.k-pager-info {
  order: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7a899e;
  margin-right: auto;
  margin-left: 10px;
  justify-content: start;
}

/* Center the pagination controls */
.k-pager-numbers-wrap {
  order: 2;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
}

/* Style for the pagination buttons */
.k-pager-numbers-wrap .k-link {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.k-pager-numbers-wrap .k-link.k-state-selected {
  background-color: #ff8c42;
  color: var(--white);
}

.k-pager-numbers-wrap .k-link:hover {
  background-color: #ecf0f5;
}

.k-pager-sizes {
  order: 3;
  width: 180px;
  min-width: fit-content;
  height: 32px;
  border-radius: 8px;
  background: #f7f9fa;
  border: 1px solid #ecf0f5;
  margin-right: 15px;
  flex-shrink: 0;
}

/* Dropdown styling */
.k-pager-sizes .k-dropdown {
  width: 60px;
  height: 32px;
}

.k-picker-solid {
  width: 44px;
  height: 24px;
  margin-left: 4px;
  border-radius: 4px;
  background: #ecf0f5;
  align-items: center;
}

.k-pager span {
  color: #8f9fb4;
  padding-right: 5px;
}

.k-pager-sizes .k-input-inner,
.k-pager-sizes .k-input-value-text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  color: var(--Dark-Cyan-Blue, var(--primary-dark));
}

.k-grid .k-grid-aria-root {
  border: 1px solid var(--primary-light);
  border-radius: 6px;
  /* overflow: scroll !important; */
}

.claims-grid-viewport-wrapper .k-grid .k-grid-aria-root,
.overflow-grid-viewport-wrapper .k-grid .k-grid-aria-root {
  border: 1px solid var(--primary-light);
  border-radius: 6px;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.k-pager .k-button-text {
  color: var(--secondary);
}

.k-pager-md .k-pager-numbers-wrap .k-button {
  min-width: none;
}

.k-button-md.k-icon-button {
  padding: 4px;
}

.k-button-icon {
  width: 20px;
}

.k-grid-norecords-template {
  border: none;
  font-family: 'Inter';
}

.k-grid-header .k-table-th.k-grid-header-sticky,
.k-grid-header td.k-grid-header-sticky,
.k-grid-header .k-table-td.k-grid-header-sticky,
.k-grid-header .k-grid-header-sticky.k-sorted {
  background-color: var(--primary-light);
}

/* .k-grid .k-table .k-grid-header-sticky,
.k-grid .k-table .k-grid-content-sticky,
.k-grid .k-table .k-grid-footer-sticky {
    border-inline-end-width: 1px;
    background-color: #5E738B0D;
} */

.custom_change_grid .k-table-md .k-table-th,
.custom_change_grid .k-table-md .k-table-td {
  padding-inline: 1px !important;
}

.status-adjustment {
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 4px;
  width: 50px;
  max-height: 19px;
}

.status-success {
  color: #1b9080;
  background-color: #d7eeeb;
  border: 1px solid #1b9080;
}

.status-error {
  color: #ce4d4d;
  background-color: #eed7d7;
  border: 1px solid #ce4d4d;
}

.k-grid:not(:has(> .k-grid-aria-root)) {
  border: 1px solid var(--primary-light);
  border-radius: 6px;
}

.grid-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c1cede;
  border-radius: 4px;
  position: relative;
  background: var(--white);
  cursor: pointer;
}

.grid-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27white%27 stroke-linecap=%27square%27 stroke-linejoin=%27square%27 stroke-width=%272%27 d=%27M3,8 l3,3 l7-7%27/%3e%3c/svg%3e");
}

.date-picker-small-placeholder::placeholder {
  font-size: 11px !important;
}

.summary-duo {
  background: var(--white);
  border: none;
}

.summary-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.summary-card {
  border: 1px solid var(--gray-lighter);
  border-radius: 8px;
  background: var(--white);
  padding: 8px;
}

.summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.summary-card-head h5 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
}

.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.metric-table {
  display: grid;
  gap: 4px;
}
.metric-head,
.metric-row {
  display: grid;
  grid-template-columns: 130px repeat(4, 1fr);
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gray-lighter);
  border-radius: 6px;
  padding: 4px;
}
.metric-head {
  font-size: 0.8rem;
  font-weight: 600;
}

.metric-label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary);
}
.metric-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .summary-duo-grid {
    grid-template-columns: 1fr;
  }
  .metric-head,
  .metric-row {
    grid-template-columns: 120px repeat(4, 1fr);
  }
}

.autocomplete-grid-row {
  transition: all 0.2s ease;
  position: relative;
}

.autocomplete-grid-row:hover {
  background-color: var(--primary-light) !important;
  transform: translateX(1px);
}

.autocomplete-grid-row:active {
  background-color: var(--secondary-light1) !important;
}

.k-list-item:nth-child(even) .autocomplete-grid-row {
  background-color: var(--secondary-light3);
}

.k-list-item.k-focus .autocomplete-grid-row {
  background-color: var(--secondary-light1) !important;
  box-shadow: 0 2px 8px rgba(13, 115, 104, 0.2) !important;
  transform: translateX(2px);
}

.k-list-item.k-focus .grid-cell {
  color: var(--primary-dark) !important;
}

.k-list-item.k-selected .autocomplete-grid-row {
  background-color: var(--primary) !important;
  color: var(--white);
  transform: translateX(2px);
}

.k-list-item.k-selected .grid-cell {
  color: var(--white) !important;
}

.autocomplete-grid-row.highlighted-keyboard {
  background-color: var(--secondary-light1) !important;
  transform: translateX(2px);
  position: relative;
  z-index: 2;
}

.autocomplete-grid-row.highlighted-keyboard .grid-cell {
  color: var(--primary-dark) !important;
  font-weight: 500;
}

.autocomplete-grid-row.highlighted-keyboard:hover {
  transform: translateX(4px);
  background-color: var(--secondary-light1) !important;
}

.autocomplete-grid-header {
  background: linear-gradient(to bottom, var(--gray-lightest), var(--gray-lighter));
  font-size: 12px;
  letter-spacing: 0.5px;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.grid-enabled-popup::-webkit-scrollbar {
  width: 8px;
}

.grid-enabled-popup::-webkit-scrollbar-track {
  background: var(--gray-lighter);
}

.grid-enabled-popup::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 4px;
}

.grid-enabled-popup::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

.grid-enabled-popup:focus-within {
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px var(--secondary-light1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-enabled-popup.k-animation-container-shown {
  animation: slideDown 0.2s ease-out;
}

.grid-cell {
  font-size: 14px;
  line-height: 1.5;
  min-height: 20px;
}

@media (max-width: 768px) {
  .grid-enabled-popup {
    width: 100% !important;
    max-width: calc(100vw - 20px);
    max-height: 300px;
  }

  .autocomplete-grid-row,
  .autocomplete-grid-header {
    font-size: 12px;
  }

  .grid-cell {
    padding: 0 4px !important;
    min-height: 18px;
  }
}
.grid-enabled-popup {
  scroll-behavior: smooth;
}

.k-animation-container .k-list-container {
  scroll-behavior: smooth;
}

.autocomplete-search-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-search-wrapper .autocomplete-input {
  padding-right: 30px;
}

.autocomplete-search-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
  font-size: 14px;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.autocomplete-search-icon:hover {
  color: var(--primary);
}

.autocomplete-search-icon:active {
  color: var(--primary-dark);
}

.autocomplete-search-icon svg {
  width: 14px;
  height: 14px;
}

.autocomplete-input.with-search-icon {
  padding-right: 32px;
}

.autocomplete-enhanced-popup .k-animation-container .k-list-container {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.autocomplete-enhanced-popup .k-animation-container .k-list-scroller {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.autocomplete-enhanced-popup.grid-enabled-popup .k-list-container {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.autocomplete-enhanced-popup.grid-enabled-popup .k-list-scroller {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.autocomplete-enhanced-popup .autocomplete-grid-row.highlighted-keyboard {
  background-color: #d4f4f1 !important;
  position: relative !important;
  z-index: 1 !important;
}

.center-header {
  justify-content: center;
}

.end-header {
  justify-content: end;
  margin-right: 2px;
}
.overflow-grid-viewport-wrapper .k-grid .k-grid-aria-root {
  border: 1px solid var(--primary-light);
  border-radius: 6px;
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.overflow-grid-viewport-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  position: relative;
}
.overflow-grid-viewport-wrapper .overflow-grid-container {
  flex: 1;
  overflow: visible !important;
  height: 100%;
  margin-bottom: 0;
  position: relative;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-track {
  background: var(--gray-lighter);
  border-radius: 4px;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 4px;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}

.overflow-grid-viewport-wrapper .k-grid {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.overflow-grid-viewport-wrapper .k-grid-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.overflow-grid-viewport-wrapper .k-grid-content {
  flex: unset;
  overflow: visible;
  min-height: auto;
  margin: 0 !important;
}

.overflow-grid-viewport-wrapper .k-grid-header {
  z-index: 10;
  background: var(--primary-light);
  min-width: 0;
  overflow: visible !important;
}

.overflow-grid-viewport-wrapper .k-grid-header-wrap {
  overflow: visible !important;
  min-width: 0;
}

.overflow-grid-viewport-wrapper .k-grid-footer-wrap {
  overflow: visible !important;
}

.overflow-grid-viewport-wrapper .k-grid-pager {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background-color: var(--white);
  z-index: 1;
  border-top: 1px solid var(--gray-lighter);
}
@media screen and (min-width: 1400px) {
  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid {
    min-width: 100% !important;
  }

  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid-content table,
  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid-header table {
    min-width: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-height: 768px) {
  .overflow-grid-viewport-wrapper {
    min-height: 300px;
  }
}
.overflow-grid-container {
  gap: 0px;
  border-radius: 6px;
  opacity: 0px;
  border: none;
  margin-bottom: 10px;
  position: relative;
}

.overflow-grid-viewport-wrapper .overflow-grid-container {
  flex: 1;
  overflow: visible !important;
  height: 100%;
  margin-bottom: 0;
  position: relative;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-track {
  background: var(--gray-lighter);
  border-radius: 4px;
}

.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 4px;
}
.overflow-grid-viewport-wrapper .overflow-grid-container::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}
.overflow-grid-scrolling {
  overflow-x: auto !important;
}
.overflow-grid-container.overflow-grid-scrolling {
  scrollbar-width: thin;
  scrollbar-color: var(--gray) var(--gray-lighter);
}

@media screen and (min-width: 1400px) {
  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid {
    min-width: 100% !important;
  }

  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid-content table,
  .overflow-grid-viewport-wrapper .overflow-grid-container .k-grid-header table {
    min-width: 100% !important;
    width: 100% !important;
  }
}

.overflow_table_container .k-column-title {
  height: fit-content !important;
}

.overflow_table_container .k-column-title span {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
}

.search-container {
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The filter icon stays in place and is always visible */
.filter-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: var(--gray-lightest);
  border-radius: 4px;
  z-index: 2;
  margin-right: 8px;
  /* Space between icon and inputs */
}

/* Only the input fields animate now */
.search-fields-wrapper {
  display: flex;
  gap: 8px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.search-fields-wrapper.open {
  width: auto;
  max-width: 1000px;
  /* Large value to accommodate all inputs */
  opacity: 1;
  transform: translateX(0);
}

.search-fields-wrapper.closed {
  width: 0;
  max-width: 0;
  opacity: 0;
  transform: translateX(100%);
  margin: 0;
  padding: 0;
}

.search-box {
  padding: 6px 12px;
  border: 1px solid 'var(--gray-lightest)';
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  min-width: 120px;
  /* Ensure inputs have a minimum width */
}

/* Staggered animation for each input field */
.search-fields-wrapper.open .search-box:nth-child(1) {
  transition-delay: 0.05s;
}

.search-fields-wrapper.open .search-box:nth-child(2) {
  transition-delay: 0.1s;
}

.search-fields-wrapper.open .search-box:nth-child(3) {
  transition-delay: 0.15s;
}

.id-value {
  color: var(--primary-dark) !important;
  font-weight: 600 !important;
}

/* Ambulance Calculation Formula Styles */
.ambulance-formula-heading {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary);
}

.ambulance-formula-text {
  font-size: 14px;
  color: var(--black);
}

.ambulance-formula-box {
  height: 100%;
  background-color: var(--gray-lightest);
  border: 1px solid var(--gray-light);
  border-radius: 4px;
  padding: 12px;
}

.ambulance-formula-code {
  font-family: monospace;
  margin-left: 12px;
  color: var(--black);
}

.ambulance-formula-code-indent {
  font-family: monospace;
  margin-left: 24px;
  color: var(--black);
}

.ambulance-formula-condition {
  margin-left: 12px;
  color: var(--primary);
}

.ambulance-formula-muted {
  color: var(--gray);
}

/* Anesthesia Formula Modal Styles */
.anesthesia-formula-heading {
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.anesthesia-formula-container {
  background-color: var(--gray-lightest);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--gray-light);
}

.anesthesia-formula-text {
  margin-bottom: 8px;
  font-weight: 500;
}

.anesthesia-formula-note {
  font-size: 0.9rem;
  color: var(--gray);
  margin-top: 8px;
}

.anesthesia-formula-note p {
  margin-bottom: 4px;
}

.anesthesia-formula-note p:last-child {
  margin-bottom: 0;
}

.anesthesia-formula-section {
  margin-bottom: 16px;
}

.anesthesia-formula-section:last-child {
  margin-bottom: 0;
}

.anesthesia-modifier-list {
  margin-bottom: 8px;
  padding-left: 20px;
}

.anesthesia-final-calculation {
  margin-bottom: 4px;
  margin-top: 12px;
}

/* General Formula Modal Styles for All Fee Schedule Types */
.formula-heading {
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.formula-container {
  background-color: var(--gray-lightest);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--gray-light);
}

.formula-text {
  margin-bottom: 8px;
  font-weight: 500;
}

.formula-note {
  font-size: 0.9rem;
  color: var(--gray);
  margin-top: 8px;
}

.formula-note p {
  margin-bottom: 4px;
}

.formula-note p:last-child {
  margin-bottom: 0;
}

.formula-section {
  margin-bottom: 16px;
}

.formula-section:last-child {
  margin-bottom: 0;
}

.formula-code-indent {
  margin-left: 24px;
  font-family: monospace;
  color: var(--black);
}

.grid-settings-drawer .k-drawer-wrapper {
  background: transparent;
  margin-top: 20px;
  padding: 13px;
}

.grid-settings-drawer .k-drawer {
  border: none;
  background: var(--white);
  width: auto;
  max-width: none;
  height: 100vh;
}

.grid-settings-drawer .k-drawer-content {
  padding: 24px;
  background: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-settings-drawer .k-drawer-items {
  padding: 0;
  border: 1px solid var(--secondary-light1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  margin: 0 auto 24px;
  width: 100%;
  max-width: 360px;
}

.grid-settings-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--secondary-light1);
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-bottom: 1px solid var(--white);
}

.grid-settings-drawer__header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grid-settings-drawer__header-title .k-svg-icon {
  color: var(--primary-dark);
}

.grid-settings-drawer__header-title span {
  font-family: 'Inter', sans-serif;
}

.grid-settings-drawer__header.k-drawer-item {
  border-left: none;
  margin: 0;
}

.grid-settings-drawer__close {
  color: var(--gray);
}

.grid-settings-drawer__close:hover {
  color: var(--primary-dark);
}

.grid-settings-drawer__item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--white);
  transition: background 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.grid-settings-drawer__item.k-drawer-item {
  border-left: none;
  margin: 0;
}

.grid-settings-drawer__item:last-child {
  border-bottom: none;
}

.grid-settings-drawer__item--base {
  background: var(--white);
}

.grid-settings-drawer__item--alt {
  background: var(--white);
}

.grid-settings-drawer__item--hidden .k-checkbox-label {
  color: var(--gray);
  font-weight: 400;
}

.grid-settings-drawer__item--selected .k-checkbox-label {
  color: var(--primary-dark);
  font-weight: 400;
}

.grid-settings-drawer__item .k-checkbox {
  margin: 0;
}

.grid-settings-drawer__item .k-checkbox-wrap {
  display: inline-flex;
  align-items: center;
}

.grid-settings-drawer__item .k-checkbox-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}

.grid-settings-drawer__item:hover {
  background: var(--secondary-light1);
}

.loader-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-overlay.loader-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--loader-bg);
  z-index: 9999;
}

.loader-overlay.loader-inline {
  position: static;
  width: 100%;
  min-height: 200px;
  padding: 40px 20px;
  background: var(--loader-bg);
  opacity: 0.9;
}

.loader-overlay.loader-minimal {
  background: transparent;
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loader-container-minimal {
  gap: 16px;
}

.loader-default {
  width: 60px;
  height: 60px;
}

.loader-default .spinner {
  width: 100%;
  height: 100%;
  border: 3px solid var(--secondary);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}

.loader-default-small {
  width: 40px;
  height: 40px;
}

.loader-default-large {
  width: 80px;
  height: 80px;
}

.loader-modern {
  width: 60px;
  height: 60px;
  position: relative;
}

.modern-spinner {
  width: 100%;
  height: 100%;
  position: relative;
}

.spinner-blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 30%;
  background: linear-gradient(to bottom, var(--primary), transparent);
  border-radius: 3px;
  transform-origin: center -15px;
  opacity: 0;
  animation: blade-fade 1.2s linear infinite;
}

.spinner-blade:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: 0s;
}

.spinner-blade:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: 0.1s;
}

.spinner-blade:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: 0.2s;
}

.spinner-blade:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: 0.3s;
}

.spinner-blade:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: 0.4s;
}

.spinner-blade:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: 0.5s;
}

.spinner-blade:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: 0.6s;
}

.spinner-blade:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: 0.7s;
}

.spinner-blade:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: 0.8s;
}

.spinner-blade:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: 0.9s;
}

.spinner-blade:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: 1s;
}

.spinner-blade:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 1.1s;
}

.loader-modern-small {
  width: 40px;
  height: 40px;
}

.loader-modern-large {
  width: 80px;
  height: 80px;
}

.loader-dots {
  display: flex;
  gap: 8px;
}

.loader-dots .dot {
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite both;
}

.loader-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loader-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.loader-dots .dot:nth-child(3) {
  animation-delay: 0;
}

.loader-dots .dot:nth-child(4) {
  animation-delay: 0.16s;
}

.loader-dots-small .dot {
  width: 8px;
  height: 8px;
}

.loader-dots-large .dot {
  width: 16px;
  height: 16px;
}

.loader-infinity {
  width: 80px;
  height: 40px;
}

.infinity-shape {
  width: 100%;
  height: 100%;
  position: relative;
}

.infinity-shape::before,
.infinity-shape::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid var(--primary);
  border-radius: 50%;
  animation: infinity-loop 2s ease-in-out infinite;
}

.infinity-shape::before {
  left: 0;
}

.infinity-shape::after {
  right: 0;
  animation-delay: 1s;
}

.loader-infinity-small {
  width: 60px;
  height: 30px;
}

.loader-infinity-large {
  width: 100px;
  height: 50px;
}

.loader-ring {
  position: relative;
  width: 60px;
  height: 60px;
}

.loader-ring .ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: ring-rotate 2s linear infinite;
}

.loader-ring .ring:nth-child(2) {
  animation-delay: 0.2s;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-top-color: var(--primary);
  opacity: 0.8;
}

.loader-ring .ring:nth-child(3) {
  animation-delay: 0.4s;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  border-top-color: var(--primary);
  opacity: 0.6;
}

.loader-ring .ring:nth-child(4) {
  animation-delay: 0.6s;
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  border-top-color: var(--primary);
  opacity: 0.4;
}

.loader-ring-small {
  width: 40px;
  height: 40px;
}

.loader-ring-large {
  width: 80px;
  height: 80px;
}

.loader-text {
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: text-fade 0.4s ease-out;
  margin-top: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes blade-fade {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dot-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes infinity-loop {
  0%,
  100% {
    transform: translateX(0) scale(0.8);
  }

  50% {
    transform: translateX(20px) scale(1);
  }
}

@keyframes ring-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes text-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .loader-text {
    font-size: 14px;
  }
}

body.theme-blue {
  --primary: #277198;
  --primary-dark: #134e6c;
  --secondary: #3799be;
  --secondary-light: #bae2ec;
  --secondary-light1: #cbeaf2;
  --primary-light: #f6fbfd;
  --success: #36998b;
  --success-light: #bae4df;
  --warning: #f5bd3c;
  --warning-dark: #ca5d32;
  --error: #ce4d4d;
  --error-light: #fcb6b6;
  --black: #000000;
  --white: #ffffff;
  --gray-lighter: #ecf0f5;
  --gray: #607082;
  --gray-lightest: #f6f8fb;
  --gray-light: #d8e1ed;

  --female: #ce5b95;
  --male: #3272bb;
  --grid-green: #d2f2df;
  --grid-red: #f2dad2;

  --loginbg-primary: #134e6c;
  --loginbg-paint1: #134772;
  --loginbg-paint3: #97b8e4;
  --loginbg-paint2: #2569a4;
  --loginbg-bg: #f5f5f5;
  --svg-opt-bg: #42b6d1;
  --svg-opt-female: #96dff1;

  --svg-ir-inside: #16749d;
  --svg-ir: #04628b;
  --svg-tp-bars: #35b3de;
  --svg-tp-header: #489ac4;
  --svg-tp-dollarbg: #1593be;
  --svg-ir-dots: #5696b7;
  --svg-ir-bars: #04628b;
  --svg-ir-pie: #1e99bf;
  --svg-msg: #3799be;

  --svg-blue-dark: #237daa;
  --svg-blue-mid: #489ac4;
  --svg-opt-inside: #5ed8ef;
  --svg-card-bg: #ace4f4;
  --svg-opt-bar: #8aecff;
  --svg-light-bar: #a3f0ff;
  --mask-fill: #d9d9d9;
  --svg-tangerine: #ff8928;
  --rowclick-link: #2e343b;

  --status-active-text: #369988;
  --status-active-border: #8ae4df;
  --status-active-bg: #e6f4f3;

  --status-inactive-text: #ce424d;
  --status-inactive-border: #fbaeae;
  --status-inactive-bg: #fef4f3;

  --status-scheduled-text: #ce742d;
  --status-scheduled-border: #fbbf8f;
  --status-scheduled-bg: #fef9f3;
}

body.theme-green {
  --primary: #0d7368;
  --primary-dark: #06494e;
  --secondary: #44aea8;
  --secondary-light: #90e0df;
  --secondary-light1: #c1e7e3;
  --primary-light: #e6f4f3;
  --success: #36998b;
  --success-light: #bae4df;
  --warning: #f5bd3c;
  --warning-dark: #ca5d32;
  --error: #ce4d4d;
  --error-light: #fcb6b6;
  --black: #000000;
  --white: #ffffff;
  --gray-lighter: #ecf0f5;
  --gray: #607082;
  --gray-lightest: #f6f8fb;
  --gray-light: #d8e1ed;

  --female: #ce5b95;
  --male: #3272bb;
  --grid-green: #d2f2df;
  --grid-red: #f2dad2;

  --loginbg-primary: #015c66;
  --loginbg-paint1: #054d43;
  --loginbg-paint3: #228179;
  --loginbg-paint2: #25a492;
  --loginbg-bg: #f5f5f5;
  --svg-opt-bg: #21a39e;
  --svg-opt-female: #3fd1c5;
  --svg-ir-inside: #0e676e;
  --svg-ir: #055157;
  --svg-tp-bars: #50b7c2;
  --svg-tp-header: #1e9590;
  --svg-tp-dollarbg: #27828c;
  --svg-ir-dots: #00979f;
  --svg-ir-bars: #044d52;
  --svg-ir-pie: #238376;
  --svg-msg: #008e9e;

  --svg-blue-dark: #1e7079;
  --svg-blue-mid: #4fa99a;
  --svg-opt-inside: #0ebdae;
  --svg-card-bg: #b4efe7;
  --svg-opt-bar: #9cf4e9;
  --svg-light-bar: #74efe4;
  --mask-fill: #d9d9d9;
  --svg-tangerine: #ff8928;
  --rowclick-link: #2e343b;

  --status-active-text: #369988;
  --status-active-border: #8ae4df;
  --status-active-bg: #e6f4f3;

  --status-inactive-text: #ce424d;
  --status-inactive-border: #fbaeae;
  --status-inactive-bg: #fef4f3;

  --status-scheduled-text: #ce742d;
  --status-scheduled-border: #fbbf8f;
  --status-scheduled-bg: #fef9f3;
}

body.theme-magenta {
  --primary: #903b7b;
  --primary-dark: #520646;
  --secondary: #d894c8;
  --secondary-light: #e3c2db;
  --secondary-light1: #ecd5e6;
  --primary-light: #faf3f8;
  --success: #36998b;
  --success-light: #bae4df;
  --warning: #f5bd3c;
  --warning-dark: #ca5d32;
  --error: #ce4d4d;
  --error-light: #fcb6b6;
  --black: #000000;
  --white: #ffffff;
  --gray-lighter: #ecf0f5;
  --gray: #607082;
  --gray-lightest: #f6f8fb;
  --gray-light: #d8e1ed;

  --female: #ce5b95;
  --male: #3272bb;
  --grid-red: #f2dad2;
  --grid-green: #d2f2df;

  --loginbg-primary: #5e0451;
  --loginbg-paint1: #6c1d5c;
  --loginbg-paint3: #81227e;
  --loginbg-paint2: #500f44;
  --loginbg-bg: #f5f5f5;
  --svg-opt-bg: #a0438f;
  --svg-opt-female: #d36cc0;
  --svg-ir-inside: #771a68;
  --svg-ir: #5e0451;
  --svg-tp-bars: #5a034d;
  --svg-tp-header: #a55398;
  --svg-tp-dollarbg: #8c2f7a;
  --svg-ir-dots: #9f4090;
  --svg-ir-bars: #5a034d;
  --svg-ir-pie: #9c348b;
  --svg-msg: #9c3288;

  --svg-blue-dark: #701b60;
  --svg-blue-mid: #a55398;
  --svg-opt-inside: #ba52a7;
  --svg-card-bg: #e8a2db;
  --svg-opt-bar: #e379cf;
  --svg-light-bar: #d36cc0;
  --mask-fill: #d9d9d9;
  --svg-tangerine: #ff8928;
  --rowclick-link: #2e343b;

  --status-active-text: #369988;
  --status-active-border: #8ae4df;
  --status-active-bg: #e6f4f3;

  --status-inactive-text: #ce424d;
  --status-inactive-border: #fbaeae;
  --status-inactive-bg: #fef4f3;

  --status-scheduled-text: #ce742d;
  --status-scheduled-border: #fbbf8f;
  --status-scheduled-bg: #fef9f3;
}

body.theme-purple {
  --primary: #691ea3;
  --primary-dark: #320c57;
  --secondary: #dd81ec;
  --secondary-light: #e5cef8;
  --secondary-light1: #efe1fb;
  --primary-light: #f9f4fd;
  --success: #36998b;
  --success-light: #bae4df;
  --warning: #f5bd3c;
  --warning-dark: #ca5d32;
  --error: #ce4d4d;
  --error-light: #fcb6b6;
  --black: #000000;
  --white: #ffffff;
  --gray-lighter: #ecf0f5;
  --gray: #607082;
  --gray-lightest: #f6f8fb;
  --gray-light: #d8e1ed;

  --female: #ce5b95;
  --male: #3272bb;
  --grid-green: #d2f2df;
  --grid-red: #f2dad2;

  --loginbg-primary: #430b6f;
  --loginbg-paint1: #562083;
  --loginbg-paint3: #541487;
  --loginbg-paint2: #4c107c;
  --loginbg-bg: #f5f5f5;
  --svg-opt-bg: #7f36b0;
  --svg-opt-female: #a75fde;
  --svg-ir-inside: #592084;
  --svg-ir: #3d0d62;
  --svg-tp-bars: #8447b1;
  --svg-tp-header: #732aa4;
  --svg-tp-dollarbg: #61278c;
  --svg-ir-dots: #6a259e;
  --svg-ir-bars: #3d0d62;
  --svg-ir-pie: #733a9f;
  --svg-msg: #73399f;

  --svg-blue-dark: #520d81;
  --svg-blue-mid: #732aa4;
  --svg-opt-inside: #9850c9;
  --svg-card-bg: #cba5f2;
  --svg-opt-bar: #ba68f1;
  --svg-light-bar: #b165e4;
  --mask-fill: #d9d9d9;
  --svg-tangerine: #ff8928;
  --rowclick-link: #2e343b;

  --status-active-text: #369988;
  --status-active-border: #8ae4df;
  --status-active-bg: #e6f4f3;

  --status-inactive-text: #ce424d;
  --status-inactive-border: #fbaeae;
  --status-inactive-bg: #fef4f3;

  --status-scheduled-text: #ce742d;
  --status-scheduled-border: #fbbf8f;
  --status-scheduled-bg: #fef9f3;
}

body.theme-red {
  --primary: #bd3131;
  --primary-dark: #761818;
  --secondary: #e8b3b3;
  --secondary-light: #f2dddd;
  --secondary-light1: #f9f0f0;
  --primary-light: #fefdfd;
  --success: #36998b;
  --success-light: #bae4df;
  --warning: #f5bd3c;
  --warning-dark: #ca5d32;
  --error: #ce4d4d;
  --error-light: #fcb6b6;
  --black: #000000;
  --white: #ffffff;
  --gray-lighter: #ecf0f5;
  --gray: #607082;
  --gray-lightest: #f6f8fb;
  --gray-light: #d8e1ed;

  --female: #ce5b95;
  --male: #3272bb;
  --grid-green: #d2f2df;
  --grid-red: #f2dad2;

  --loginbg-primary: #660103;
  --loginbg-paint1: #ad2a26;
  --loginbg-paint3: #6d0906;
  --loginbg-paint2: #a01914;
  --loginbg-bg: #030000;
  --svg-opt-bg: #cc443f;
  --svg-opt-female: #d15a5c;
  --svg-ir-inside: #832325;
  --svg-ir: #660103;
  --svg-tp-bars: #d15a5c;
  --svg-tp-header: #b53430;
  --svg-tp-dollarbg: #ad2521;
  --svg-ir-dots: #c76d6f;
  --svg-ir-bars: #660103;
  --svg-ir-pie: #b83436;
  --svg-msg: #d15a5c;

  --svg-blue-dark: #981b17;
  --svg-blue-mid: #dc7e80;
  --svg-opt-inside: #e25b57;
  --svg-card-bg: #ffb5b2;
  --svg-opt-bar: #ff7874;
  --svg-light-bar: #fe6a65;
  --mask-fill: #d9d9d9;
  --svg-tangerine: #ff8928;
  --rowclick-link: #2e343b;

  --status-active-text: #369988;
  --status-active-border: #8ae4df;
  --status-active-bg: #e6f4f3;

  --status-inactive-text: #ce424d;
  --status-inactive-border: #fbaeae;
  --status-inactive-bg: #fef4f3;

  --status-scheduled-text: #ce742d;
  --status-scheduled-border: #fbbf8f;
  --status-scheduled-bg: #fef9f3;
}

.featured-image {
  width: 250px;
}

body {
  overflow: hidden;
  overflow-y: auto;
}

.menu-item-text {
  font-size: 18px;
  margin: 8px 0px;
}

.main-content {
  /* max-width: calc(100vw - 200px); */
  width: 80%;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}

.main-body {
  /* max-width: calc(100vw - 200px); */
  /* width: 100%; */
  /* margin-left: auto; */
  overflow: auto;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  /* Allows scrolling within the main body if content overflows */
  flex-grow: 1;
  /* Allows this element to grow and fill available space, pushing the footer down */
}

.main-body.main-body-collapsed {
  max-width: calc(100vw - 50px);
  width: 100%;
}

.sidebar {
  transition: width 0.3s ease-in-out;
  /* min-width: 250px; */
  background-color: var(--primary);
  height: 100vh;
  /* width: 250px; */
  width: 20%;
}

.content-container {
  background: var(--Page-BG, #eeeef5);
  padding: 5px 0px 0px 0px;
  /*5px 22px 39px 29px;*/
}

.custom-content-container {
  background-color: var(--white);
}

.content-container .breadcrumb-item a,
.content-container .breadcrumb-item.active {
  text-decoration: none;
  color: var(--secondary-darker, #586277);
  /* font-family: Poppins; */
  font-size: 14px;
  font-style: normal;
  line-height: 30px;
  /* 214.286% */
  text-transform: uppercase;
}

.content-container .breadcrumb-item a {
  font-weight: 700;
}

.main-body .container:nth-child(1) {
  display: none;
}

.test-heading {
  color: var(--secondary-darker, #586277);
  font-family: Inter;
  /* Headline/H3 */
  /* font-family: Poppins; */
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  margin: 0;
  /* 115.385% */
}

.update-content-container,
.create-content-container {
  border-radius: 4px;
  background: #d7e8ec;
  box-shadow: 0px 10px 20px 0px rgba(18, 38, 63, 0.16);
  padding: 18px;
  margin-top: 5px;
  overflow: visible;
}

.claim-content-container {
  border-radius: 4px;
  background: #d7e8ec;
  box-shadow: 0px 10px 20px 0px rgba(18, 38, 63, 0.16);
  /* padding: px; */
  margin-top: 5px;
  overflow: visible;
}

.input-form-control,
.select-height,
.react-datepicker__view-calendar-icon input {
  border: 1px solid #c1cede;
  /* height: 48px; */
  font-family: 'Inter';
  height: 36px;
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 1px;
  color: #5e738b;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  /* border-color: #7d837f; */
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 30px !important;
}

.k-grid .k-table-row.k-table-alt-row {
  background-color: var(--white);
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
  top: 7px;
}

p {
  margin-bottom: 0;
}

.create-user .col {
  position: relative;
}

.create-user .error {
  position: absolute;
  bottom: -19px;
  font-size: 12px;
  color: #e12f2f;
}

.error-message {
  color: #e12f2f;
  line-height: 1.2;
  font-size: 12px;
}

.k-panelbar {
  border: 0px;
}

.k-panelbar > .k-item + .k-item,
.k-panelbar > .k-panelbar-header + .k-panelbar-header {
  border: 0px;
}

.btn-link {
  --bs-btn-font-weight: bold;
  --bs-btn-color: hsl(0, 22%, 96%);
  --bs-btn-hover-color: hsl(0, 22%, 96%);
  --bs-btn-active-color: hsl(0, 22%, 96%);
}

.sidebar .k-link {
  min-height: 30px;
}

.panel-bar-container {
  border-bottom: 1px solid white;
  height: 100%;
}

.panel-bar-custom-style {
  cursor: pointer;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

.k-panelbar-item-text {
  font-weight: bold;
  font-size: 1.1em;
}

.k-content {
  font-size: 1.1em;
}

.k-panelbar .k-panelbar-header {
  background-color: var(--primary);
  padding-bottom: 5px;
}

.k-panelbar .k-panelbar-header .k-link {
  color: white;
  border: 10px;
  background-color: var(--primary);
  cursor: pointer;
  padding: 0px 10px;
  /* padding-top: 0px;
  padding-bottom: 0px; */
}

.k-panelbar > .k-panelbar-header .k-link .k-svg-icon {
  color: white;
}

.k-panel .k-content {
  padding-block: 0px;
  padding-inline: 25px;
  font-weight: 100;
}

/* .k-panelbar-item-icon {
  margin-right: 5px;
} */

.k-panelbar .k-panelbar-header .k-link .k-panelbar-item-icon {
  margin-right: 5px;
  margin-left: 5px;
  color: white;
}

.k-panelbar .k-panelbar-header .k-link.k-selected {
  /* color: black; */
  background-color: rgb(72, 160, 192);
  border-radius: 4px;
  margin-bottom: 5px;
}

.k-panelbar-group {
  display: flex !important;
  gap: 5px;
  flex-direction: column;
}

.k-panelbar-group .k-panelbar-content.k-content {
  border-radius: 4px;
  background-color: var(--secondary-regular, var(--primary));
  color: var(--grayscale-white, #fff);
}

.k-panelbar .k-panelbar-header .k-link.k-selected:hover {
  /* background-color: #e5124b; */
  /* background-color: #e5124b; */
  background-color: var(--white);
  /* color: var(--white); */
  color: black;
}

.k-panelbar .k-panelbar-header .k-link:hover {
  background-color: white;
  /* color: black; */
  color: var(--primary);
  border-radius: 4px;
}

.k-panelbar .k-panelbar-header .k-link:hover .k-panelbar-item-icon {
  /* background-color: white; */
  color: black;
  cursor: pointer;
}

.k-panelbar .k-panelbar-header .k-link:hover .k-svg-icon {
  color: black;
}

.sidebar.collapsed {
  min-width: 50px;
}

.sidebar.collapsed .k-panelbar-item-text {
  display: none;
}

.collapse-toggle {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  cursor: pointer;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
}

.logout-text {
  color: #ff6358;
  padding-left: 4px;
}

.toggle-button {
  min-height: 38px;
  display: flex;
  justify-content: flex-end;
}

.gradient-navbar {
  /* background-color: #e5124b; */
  background-color: var(--primary);
  /* background: linear-gradient(to right, #ff6b6b, #ffa26b); */
}

.navbar-brand {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-inline-end: auto;
}

.navbar-brand.active {
  color: var(--white);
  /* font-weight: 700; */
  font-weight: bold;
  font-size: 1.1em;
  transition: none !important;
}

/* Define a style for the icon */
.navbar-brand i {
  display: none;
  /* Initially hide the icon */
}

/* Define a style for the icon when the parent has the "active" class */
.navbar-brand.active i {
  display: inline-block;
  /* Display the icon when the parent has the "active" class */
  /* Add any additional styling for the icon here */
}

.error {
  color: #e12f2f;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 12.1px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.error-border {
  border: 1px solid #e12f2f !important;
}

.btn.btn-danger {
  /* background-color: #f26f43; */
  border-radius: 6px;
  height: 36px;
  font-family: 'Inter';
  background: var(--primary-regular, var(--primary));
  border-color: var(--primary);
  --bs-btn-active-bg: var(--primary) !important;
  --bs-btn-active-border-color: var(--primary) !important;
}

.btn.btn-ruleClose {
  /* background-color: #f26f43; */
  border-radius: 6px;
  height: 30px;
  font-family: 'Inter';
  background: var(--primary-regular, var(--primary));
  border-color: var(--primary);
  --bs-btn-active-bg: var(--primary) !important;
  --bs-btn-active-border-color: var(--primary) !important;
}

.custom-Add-button {
  border-radius: 6px;
  height: 36px;
  font-family: 'Inter';
  background: var(--primary-light);
  border-color: var(--primary);
  border-radius: 6px;
  color: var(--primary);
  border: 1px solid #c1e1ed;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.94px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  --bs-btn-active-bg: var(--primary) !important;
  --bs-btn-active-border-color: var(--primary) !important;
}

.icon_button {
  margin-right: 4px;
  align-items: center;
}

.btn.btn-danger-claim {
  /* background-color: #f26f43; */
  border-radius: 4px;
  height: 40px;
  font-size: 12px;
  /* line-height: 0; */
  min-width: 125px;
  color: white;
  background: var(--primary-regular, var(--primary));
  border-color: var(--primary);
  --bs-btn-active-bg: var(--primary) !important;
  --bs-btn-active-border-color: var(--primary) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 8px;
  white-space: normal;
}

.btn.btn-danger-claim .shortcut-text {
  font-size: 10px;
  opacity: 0.9;
  white-space: nowrap;
}

.btn.btn-dangerRed {
  border-radius: 10px;
  background: var(--primary-regular, #d84455);
  border-color: #d84455;
  --bs-btn-active-bg: #d84455 !important;
  --bs-btn-active-border-color: #d84455 !important;
  --bs-btn-color: white;
  --bs-btn-hover-color: white;
  color: white;
}

.btn-small {
  padding: 0.25rem 0.5rem;
  /* Smaller padding */
  font-size: 0.75rem;
  /* Smaller font size */
  line-height: 1.5;
  /* Adjust line height as necessary */
}

.btn-outline-secondary {
  height: 36px;
  color: white;
  background-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}

.btn-outline-secondary-claim {
  height: 30px;
  color: white;
  background-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}

.btn.btn-dangerRed:hover,
.btn.btn-dangerRed:active,
.btn.btn-dangerRed:focus {
  background: var(--primary-dark, #b73443);
  /* Darker shade for hover */
  border-color: var(--primary-dark, #c13b4a);
  color: white;
  /* Keep text color white on hover, active, and focus states */
}

.table-data {
  width: 100%;
  border-collapse: collapse;
}

.k-table,
.k-data-table {
  color: #777777;
}

tr {
  cursor: pointer;
}

/* src/ProfileMenu.css */
.profile-menu {
  position: relative;
  margin-right: 10px;
}

.profile-icon {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.profile-icon .bi-person-circle {
  color: var(--primary);
}

.profile-icon img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 5px;
}

.icon-margin {
  margin-right: 5px;
}

.menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background-color: var(--white);
  border: 1px solid var(--gray-light);
  box-shadow: 0 4px 6px var(--gray);
  padding: 10px;
  z-index: 9999999;
  min-width: 220px;
  text-align: left;
  display: none;
  /* Initially hide the menu */
}

.menu a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 5px 15px;
  font-size: 14px;
}

.menu a:hover {
  background-color: var(--gray-lightest);
  /* Change background color on hover */
}

/* Show the menu when .active is added to .profile-icon */
.profile-icon.active + .menu {
  display: block;
}

/* src/MobileMenu.css */
.mobile-menu {
  background-color: var(--white);
  border: 1px solid 'var(--gray-lightest)';
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1;
  text-align: right;
  display: none;
  /* Initially hide the mobile menu */
}

.mobile-menu a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
}

/* Show the mobile menu when .active is added to .profile-icon */
.profile-icon.active + .mobile-menu {
  display: block;
}

/* Media query for mobile screens */
@media (max-width: 767px) {
  .profile-icon img {
    width: 30px;
    /* Adjust the image size for smaller screens */
    height: 30px;
  }

  .profile-menu {
    text-align: right;
    /* Right-align the profile icon on mobile screens */
  }

  .menu {
    top: 100%;
    /* Display the menu below the profile icon on mobile screens */
    right: 0;
    min-width: 130px;
    /* Adjust the menu width for smaller screens */
  }

  .sidebar-mobile {
    position: fixed;
  }

  .panel-bar-height {
    height: 100%;
  }
}

.input-box {
  width: 50%;
  /* Adjust the width as per your preference */
  margin: 0;
  /* Center the input boxes horizontally */
  margin-bottom: 10px;
}

.password-requirements {
  list-style: none;
  padding: 0;
  color: #e12f2f;
  /* Initial color in red */
}

.margin-right-15 {
  margin-right: 15px;
}

/* footer.css */
.footer {
  display: flex;
  justify-content: center;
  font-size: 12px;
}

.icon {
  margin-right: 20px;
  font-size: 30px;
  cursor: pointer;
}

.buttonMargin {
  margin-left: 300px;
}

.btn-min-width {
  min-width: 80px;
  /* Adjust the value to your preferred minimum width */
}

.custom-btn {
  background-color: var(--white);
  color: var(--primary);
  border: 1px solid var(--primary);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.custom-btn:hover {
  background-color: var(--primary);
  color: var(--white);
}

.small-font {
  font-size: 12px;
}

.k-content .k-active .k-animation-container,
.k-animation-container-relative {
  width: 100% !important;
}

.label-width {
  width: 10%;
}

.k-link {
  font-weight: bold;
}

.k-tabstrip-items .k-link {
  color: var(--primary);
  background-color: #d7e8ec;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid 'var(--gray-lightest)';
  padding: 20px;
  background: rgb(49, 9, 9);
  z-index: 1;
}

.popup-content {
  text-align: center;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.react-datepicker-wrapper {
  width: 100%;
}

.homecompany {
  font-weight: bold;
}

.customCellAddress {
  white-space: pre-line;
}

.control-label {
  white-space: nowrap;
  overflow: initial;
  text-overflow: ellipsis;
  max-width: inherit;
  /* font-weight: 600; */
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: left;
  color: #2e343b;
}

.custom-label {
  font-weight: 600;
}

.btn-custom-width {
  margin-left: 5px;
}

.custom-label {
  font-weight: 600;
}

.btn-custom-width {
  margin-left: 5px;
}

.main-body::-webkit-scrollbar {
  width: 0.5em;
}

/* styles.css or your stylesheet file */
.bold-title {
  font-weight: 700;
}

/* Default styles */
.react-datepicker {
  width: 300px;
  height: 250px;
}

div.react-datepicker__header {
  background-color: #e5e9eb;
  width: 300px;
}

div.react-datepicker__header .react-datepicker__current-month {
  font-weight: bold;
  font-size: 15px;
  margin-left: 10px;
  height: 30px;
}

.react-datepicker__header .react-datepicker__day-names {
  display: flex;
  justify-content: space-evenly;
}

.react-datepicker__header .react-datepicker__day-name {
  font-size: 13px;
}

.react-datepicker__week {
  display: flex;
  flex-wrap: wrap;
  /* Allow flex items to wrap to the next line */
  justify-content: space-around;
}

.react-datepicker__day {
  flex: 0 0 calc(14.28% - 10px);
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;
  height: 20px;
  /* Adjust the height as needed */
  line-height: 20px;
  /* Adjust the line height as needed */
}

/* Responsive styles */
@media screen and (max-width: 600px) {
  .react-datepicker {
    width: 100%;
    /* Make the calendar container full width */
    height: auto;
    /* Allow the height to adjust based on content */
  }

  div.react-datepicker__header {
    width: 100%;
    /* Make the header full width */
  }

  .react-datepicker__week {
    flex-wrap: wrap;
    /* Allow day cells to wrap onto the next line */
  }

  .react-datepicker__day {
    flex: 1;
    /* Make day cells take equal width within the row */
    font-size: 12px;
    /* Adjust the font size for smaller screens */
    margin-bottom: 10px;
    /* Add spacing between day cells */
  }
}

.ruleGroup {
  background-color: var(--white) !important;
  border-radius: 3px;
  padding: 0.2rem !important;
  gap: 0.2rem !important;
  font-family: Inter;
}

.btn-ruleGroupButton {
  background: var(--primary-light);
  border: 1px solid #c1e1ed;
  width: auto;
  height: 25px;
  border-radius: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  font-family: 'Inter';
}

.combinator-container {
  width: auto;
  padding: 2px;
  height: 25px;
  border-radius: 6px;
  background: #f5f7fa;
  border: 1px solid #c1cede;
}

.combinator-button {
  border: 1px solid 'var(--gray-lightest)';
  padding: 5px 16px;
  border: none;
  background-color: #f5f7fa;
  color: #2e343b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1px;
}

.combinator-button.active {
  background-color: var(--primary);
  /* Active background */
  color: var(--white);
  /* Active text color */
  border-color: var(--primary);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}

/*
.queryBuilder-branches .rule:after,
.queryBuilder-branches .rule:before,
.queryBuilder-branches .ruleGroup:after,
.queryBuilder-branches .ruleGroup:before {
  border-color: #E12F2F !important;
}

.queryBuilder-branches .rule[data-level="1"]:after,
.queryBuilder-branches .rule[data-level="1"]:before,
.queryBuilder-branches .ruleGroup[data-level="1"]:after,
.queryBuilder-branches .ruleGroup[data-level="1"]:before {
  border-color: rgb(85, 85, 204) !important;
}

.queryBuilder-branches .rule[data-level="2"]:after,
.queryBuilder-branches .rule[data-level="2"]:before,
.queryBuilder-branches .ruleGroup[data-level="2"]:after,
.queryBuilder-branches .ruleGroup[data-level="2"]:before {
  border-color: green !important;
}

.queryBuilder-branches .rule[data-level="3"]:after,
.queryBuilder-branches .rule[data-level="3"]:before,
.queryBuilder-branches .ruleGroup[data-level="3"]:after,
.queryBuilder-branches .ruleGroup[data-level="3"]:before {
  border-color: rgb(192, 186, 22) !important;
}

.queryBuilder-branches .rule[data-level="4"]:after,
.queryBuilder-branches .rule[data-level="4"]:before,
.queryBuilder-branches .ruleGroup[data-level="4"]:after,
.queryBuilder-branches .ruleGroup[data-level="4"]:before {
  border-color: rgb(255, 0, 174) !important;
} */

.ruleGroup.queryBuilder-invalid {
  border-radius: 10px;
  border-color: var(--primary);
}

.queryBuilder-branches .rule,
.queryBuilder-branches .ruleGroup .ruleGroup {
  margin-top: 2px;
  position: relative;
}

.ruleGroup-header {
  padding: 2px;
  border-radius: 9px;
  border: 1.5px;
  gap: 8px;
  width: 99%;
}

.ruleGroup .ruleGroup-body {
  gap: 0rem !important;
}

.ruleGroup-combinators {
  /* border-radius: 10px; */
  color: var(--primary);
  border-color: #696874;
  width: 100px;
}

.justifiedLayout .queryBuilder .ruleGroup-addGroup + button.ruleGroup-remove {
  margin-left: auto !important;
}

.ruleGroup-addRule,
.ruleGroup-addRule:active,
.ruleGroup-addRule:hover {
  background-color: var(--primary) !important;
  border-radius: 8px;
  border-color: var(--primary) !important;
  /* width: 75px; */
}

.ruleGroup-addRule,
.ruleGroup-addGroup {
  display: none;
}

.ruleGroup-header {
  padding: 0px;
}

.btn-sm {
  --bs-btn-padding-y: 0.02rem;
}

.form-select {
  line-height: 1 !important;
}

.ruleGroup-addGroup,
.ruleGroup-addGroup:hover {
  background-color: var(--white) !important;
  border-radius: 8px;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  width: 75px;
}

.ruleGroup-remove,
.rule-remove,
.rule-remove:hover,
.ruleGroup-remove:hover {
  color: var(--primary) !important;
  font-size: 20px;
  font-weight: lighter;
  border-radius: 0px;
  border-color: white !important;
  background-color: var(--white) !important;
}

.bi-x::before {
  content: '\f62a';
  border: 1px solid #d8e1ed;
  background: #f5f7fa;
  border-radius: 50%;
}

.rule-operators {
  width: 160px;
  font-family: 'Inter';
}

.rule-fields {
  width: 250px;
  font-family: 'Inter';
}

.rule-value {
  font-family: 'Inter';
  height: 36px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid #c1cede;
}

.custom-ndc-input {
  width: 100%;
  display: flex;
  gap: 5px;
  font-family: 'Inter';
  box-sizing: border-box;
}

.custom-ndc-input select {
  /* width: 430px; */
  height: 30px;
  font-size: 0.9rem;
  /* Set font size for select */
  line-height: 1;
  color: #212529;
}

.custom-ndc-input input {
  width: 10%;
  height: 30px;
}

.custom-ndc-input input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.custom-multi {
  font-family: 'Inter';
  width: 100%;
  font-size: 0.875rem;
  font-style: #212529;
}

select.rule-value.form-control.form-control-sm {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.29rem;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter' !important;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--white);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 6px;
  border: 1px solid #c1cede;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.date-form-control {
  display: block;
  width: 100%;
  padding: 0.29rem;
  font-family: 'Inter';
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.custom-button-container {
  margin-left: -190px;
  /* Adjust the margin as needed */
}

.k-button-flat-primary {
  color: var(--primary);
}

.k-checkbox:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white;
  width: 16px;
  height: 16px;
}

.k-rating-item.k-selected {
  color: var(--primary) !important;
}

.k-checkbox:checked:focus {
  box-shadow: 0 0 0 2px rgb(11 10 10 / 30%);
}

.modal-title-custom {
  /* background-color: #eeeef5; */
  background-color: var(--white);
  border: none;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  padding: 20px 0 9px 25px;
  border-radius: 10px;
  /* Add other styles if needed, such as padding, margin, etc. */
}

.modal-heading {
  color: var(--secondary-darker, #586277);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  /* 115.385% */
}

.modal-body {
  background-color: var(--white);
  padding: 0 24px 23px 24px;
  border-radius: 10px;
  /* overflow: scroll;
  max-height: 70vh; */
}

.modal-body p,
.modal-body h2 {
  font-family: Inter, 'serif';
}

.breadcrumb {
  margin-bottom: 0%;
}

.k-chip-label {
  font-family: Inter, 'serif';
}

.k-chip-solid-info.k-selected {
  background-color: var(--primary) !important;
  color: var(--white);
}

.k-chip-solid-info {
  color: var(--primary);
  border-color: var(--primary-light);
}

.k-chip-outline-base:hover {
  background-color: var(--primary);
  color: var(--white);
}

.k-chip-outline-base:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.k-chip-solid-info:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.k-switch-on .k-switch-track {
  background-color: var(--primary) !important;
  color: var(--white);
  border-color: var(--primary);
}

.k-switch-on:focus .k-switch-track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
  outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.k-list-item-text {
  font-family: Inter, 'serif';
}

.k-time-list .k-item:hover {
  color: var(--primary);
}

.k-time-header .k-time-now:hover {
  color: var(--primary);
}

.k-time-header .k-time-now {
  color: var(--primary);
}

.form-multi-select-box {
  height: 36px;
  top: -1px;
  width: 100%;
  font-family: Inter, serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.94px;
  text-align: left;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid #c1cede;
  outline: none;
  box-shadow: none !important;
}

.form-multi-select-box-readonly {
  opacity: 1;
  background-color: var(--gray-lighter);
}

.form-multi-select-box-readonly > .k-input-values > .k-input-inner {
  opacity: 1;
  background-color: var(--gray-lighter);
}

.k-list-item.k-selected {
  background: var(--primary-light) !important;
  color: black;
}

.k-list-item.k-selected:hover {
  color: black;
}

.k-list-item {
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  max-width: 100%;
  display: block;
}

.form-label {
  margin-bottom: 0%;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  color: #4c4b4b;
}

.azeret-mono-input {
  font-family: 'Inter';
}

.icon-style {
  color: var(--primary);
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.react-datepicker__input-container .react-datepicker__calendar-icon {
  padding: 0.5rem;
  top: 2px;
}

/* .input-form-control,
.select-height,
.react-datepicker__view-calendar-icon input {
  height: 35px;
  border-color: #7d837f;
} */

.form-select-search {
  height: 37px;
}

.css-13cymwt-control {
  padding-top: 0;
  border-radius: 6px;
  border: 1px solid #c1cede !important;
  padding-bottom: 0;
  background: var(--white) !important;
  font-size: 14px;
  transform: translateY(-1px);
  min-height: 36px !important;
  max-height: 36px !important;
  overflow-y: scroll;
}

.css-1jqq78o-placeholder {
  font-weight: 500;
  font-family: Inter;
  color: #5f7798 !important;
}

.css-qbdosj-Input {
  padding-top: 0;
  padding-bottom: 0;
}

.css-hlgwow {
  font-family: Inter;
  font-size: 14px;
}

.css-hlgwow {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: grid;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overflow: hidden;
  padding: 0px !important;
  box-sizing: border-box;
}

.css-1wy0on6 {
  height: 34px;
}

.select__menu .css-1nmdiq5-menu {
  line-height: 1.5;
  padding: 0;
}

.css-3w2yfm-ValueContainer {
  padding: 2px 2px;
}

.date-col {
  padding-right: 0px;
}

.endReason-col {
  padding-right: 0.5px;
}

.custom-spacing > .col {
  padding-right: 0px;
  /* Add space to the right of each column */
  padding-left: 25px;
}

.paddingEnd {
  padding-right: 0px;
  /* Ensures no padding on the right */
  margin-right: 100px;
}

.paddingEnd > * {
  margin: 0px 1px 1px 1px;
  /* Extends children slightly to the right */
  padding-right: 0px;
}

.text-between {
  margin: 3px 1px 1px 1px;
  font-size: 15px;
  white-space: nowrap;
}

.search-message {
  display: flex;
  justify-content: center;
  font-family: 'Inter';
  align-items: center;
  height: 200px;
  /* Adjust based on your preference */
  font-size: 18px;
  font-weight: 600;
  /* Larger font size */
  text-align: center;
}

.json-view-dark-style .json-view-lite {
  background-color: #333;
  color: var(--white);
}

._11RoI {
  background: rgb(0, 43, 54);
  font-weight: 500;
  font-size: 14px;
  font-family: 'Inter' !important;
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  height: 36px;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--white);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #c1cede;
  border-radius: 6px;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* HeaderStyles.css */

.header-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.heading {
  max-width: 70%;
  flex: 1 1 auto;
  color: var(--secondary-darker, #586277);

  /* Headline/H3 */
  /* font-family: Poppins; */
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  /* 115.385% */
}

.button-group {
  flex: 0 1 auto;
}

.green-row {
  background-color: var(--grid-green);
}

.k-grid .k-table-tbody tr.green-row,
.k-grid tbody tr.green-row {
  background-color: var(--grid-green) !important;
}

.red-row {
  background-color: var(--grid-red);
}

.k-grid .k-table-tbody tr.red-row,
.k-grid tbody tr.red-row {
  background-color: var(--grid-red) !important;
}

.rxclaim-red-row {
  background-color: #fff0ef;
  position: relative;
}

/* Add border to all cells in the row */
.rxclaim-red-row td,
.rxclaim-red-row .k-table-td {
  border-top: 1px solid #ffd3d1 !important;
  border-bottom: 1px solid #ffd3d1 !important;
}

/* Add left border to the first cell */
.rxclaim-red-row td:first-child,
.rxclaim-red-row .k-table-td:first-child {
  border-left: 1px solid #ffd3d1 !important;
}

/* Add right border to the last cell */
.rxclaim-red-row td:last-child,
.rxclaim-red-row .k-table-td:last-child {
  border-right: 1px solid #ffd3d1 !important;
}

.blue-row {
  background-color: rgba(153, 153, 153, 0.3);
}

.yellow-row {
  background-color: rgba(204, 255, 102, 0.3);
}

/* styles.css or a similar file */
.input-readonly {
  background-color: #f5f7fa !important;
  color: black;
  cursor: not-allowed;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-end;
}

.search-field {
  flex: 1 1 22%;
  /* Slightly less than 25% to account for gaps */
}

.action-buttons {
  flex: 1 1 100%;
  /* Ensure the button row spans the full width */
  display: flex;
  justify-content: flex-end;
  /* Align buttons to the right */
}

.row-search {
  margin-left: 0% !important;
  margin-right: 0% !important;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  grid-gap: 10px !important;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row-search-16 {
  margin-left: 0% !important;
  margin-right: 0% !important;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16%, 1fr));
  grid-gap: 10px !important;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/* Style for "Matched" */
.action-matched {
  color: var(--success);
  font-weight: bold;
}

/* Style for "Did not match" */
.action-not-matched {
  color: var(--error);
  font-weight: bold;
}

/* app.css */

/* Highlight the selected row */
.selected-row {
  background-color: rgba(130, 204, 81, 0.3);
}

/* .tooltip-content {
  top: 100%;
  left: 0;
  z-index: 100;
  padding: 8px;
  background-color: #333;
  color: var(--white);
  border-radius: 4px;
  font-size: 0.85em;
  margin-top: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} */

.tooltip-wrapper {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: 70%;
  z-index: 1000;
  right: -10px;
  padding: 8px;
  background-color: var(--primary-dark);
  color: var(--white);
  border: 1px solid var(--secondary-light);
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* white-space: nowrap; */
  overflow: visible;
  visibility: hidden;
  text-overflow: ellipsis;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 35px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--primary-dark) transparent transparent transparent;
  z-index: 1000;
}

.tooltip-heading {
  font-size: 14px;
}

.tooltip-description {
  font-size: 12px;
}

.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
}

/* .custom-tooltip {
  background-color: black;
  font-size: 14px;
  max-width: 500px;
} */

/* Ensure this is loaded globally or imported in the component */
.autocomplete-container .k-list-container {
  z-index: 1200 !important;
}

.custom-list-popup {
  z-index: 1200 !important;
  min-width: 500px !important;
  /* Adjust this value as needed */
}

.k-treeview .k-in {
  white-space: normal;
  /* Allows text to wrap */
}

.autocomplete-container {
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  height: auto;
  /* padding: .375rem .75rem; */
}

.k-input-inner {
  flex: 1;
  /* margin: 0 5px;  */
  font-weight: 600;
  color: #000;
  font-size: 14px;
  font-family: Inter;
  background: var(--white);
  height: 100%;
}

.k-input-inner::placeholder {
  flex: 1;
  /* margin: 0 5px;  */
  font-weight: 500;
  color: #5f7798 !important;
  font-size: 14px;
  font-family: Inter;
  /* background: var(--white); */
  height: 100%;
}

.k-autocomplete .k-input {
  width: 100%;
  box-sizing: border-box;
}

/* .bottom-1 {
  bottom: 1px;
} */

.input {
  font-family: 'Inter' !important;
}

.k-treeview-toggle .k-icon {
  box-sizing: content-box;
}

.k-treeview .k-in,
.k-treeview .k-treeview-node {
  white-space: normal;
  /* This will allow text to wrap */
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: white;
}

.k-treeview-item {
  white-space: normal;
  outline-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-width: 0;
  display: block;
  font-size: 0.9rem;
  font-family: 'Inter';
}

.k-treeview-leaf:hover {
  border: none;
  background-color: white;
  box-shadow: none;
  border-color: white;
}

.k-treeview-leaf:focus,
.k-treeview-leaf.k-focus {
  box-shadow: none;
  border: none !important;
}

.success {
  color: green;
}

.failed {
  color: red;
}

.k-treeview-leaf {
  border-radius: 4px;
  padding-block: 4px;
  padding-inline: 8px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  /* line-height: 14.52px; */
  text-align: left;
  color: #4c4b4b;
  /* border: 0px solid transparent; */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  align-content: center;
  vertical-align: middle;
  position: relative;
}

.amount-cell {
  text-align: right !important;
  font-weight: bold;
}

.level-heading {
  font-weight: bold;
  font-size: 20px;
}

.log-text {
  font-family: 'Inter';
  font-size: 0.9rem;
  margin-top: 2px;
}

.log-heading {
  font-weight: bold;
  font-size: 16px;
  width: 10%;
}

.json-heading {
  font-weight: bold;
  font-size: 16px;
}

.ellipsis-cell {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* Custom styles for dropdown options */
.select__option {
  font-size: 12px;
  /* Decrease the font size */
  line-height: 15px;
  padding: 4px 10px;
  /* Decrease the vertical padding to reduce gap */
}

.css-1nmdiq5-menu {
  font-size: 14px;
  line-height: 10px;
  margin-top: 0px !important;
}

.react-datepicker-popper {
  z-index: 1000;
}

.modal-custom-style {
  position: fixed;
  /* Use fixed or absolute positioning */
  bottom: 30%;
  /* Adjust this value to move the modal up to your desired position */
  left: 50%;
  /* Centers the modal horizontally */
  transform: translate(-50%, -10%);
  /* Adjusts the position offset, keeping modal centered horizontally and moving it up slightly */
}

.ruleGroup-header:has(.collapser:checked) + .ruleGroup-body {
  display: none;
}

.collapser {
  margin-bottom: 5px;
  width: 0;
  font-size: 15px;
  color: var(--primary);
  margin-left: auto;

  &:not(:checked) {
    &::after {
      content: '▼';
    }
  }

  &:checked {
    &::after {
      content: '▲';
    }
  }
}

body {
  margin: 0;
  font-family: '"Inter"', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: '"Inter"', monospace;
}

.flex-container {
  display: flex;
  align-items: center;
  flex-wrap: no-wrap;
}

.flex-heading {
  flex-grow: 1;
  min-width: 0;
}

.flex-buttons {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.alert {
  font-family: Inter;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 5px;
  margin-top: 3px;
  /* --bs-alert-margin-bottom: 1rem; */
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.k-grid td.k-selected,
.k-grid .k-table-row.k-selected > td,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > .k-table-td {
  background-color: #d6f0fc;
}

.end-node {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e36554;
  font-size: 15px bold;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 6px #aaa;
}

.start-node {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #82da68;
  font-size: 15px bold;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 6px #aaa;
}

.edgebutton {
  width: 20px;
  height: 20px;
  background: #eee;
  border: 1px solid var(--white);
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.edgebutton:hover {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
}

.zoomed {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

.missing-parameter {
  transition: transform 0.3s ease-in-out;
}

.missing-parameter.zoomed {
  transform: scale(1.1);
}

.diamond-node {
  position: relative;
  width: 120px;
  height: 120px;
  background-color: #f1da55;
  border: 1px solid black;
  transform: rotate(45deg);
  display: flex;
  /* Corrected */
  justify-content: center;
  /* Corrected */
  align-items: center;
  /* Corrected */
  border-radius: 10px;
}

.diamond-node-content {
  transform: rotate(-45deg);
  text-align: center;
}

.hexagon-node {
  position: relative;
  width: 200px;
  height: 110px;
}

.hexagon-node svg {
  width: 100%;
  height: 100%;
}

.hexagon-node text {
  font-size: 10px;
  fill: #000;
}

.react-flow__controls {
  bottom: unset !important;
  z-index: 5;
}

.react-flow__controls-button {
  align-items: center;
  background: var(--primary) !important;
  border-bottom: 1px solid #eee;
  box-sizing: content-box;
  cursor: pointer;
  display: flex;
  height: 30px !important;
  justify-content: center;
  padding: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 30px !important;
}

.react-flow__controls-button svg {
  fill: white;
}

/* .k-list-container .k-list .k-list-item.k-focus,
.k-list-container .k-list .k-list-item.k-state-focused {
  background-color: var(--primary);
} */

.td-name {
  text-align: left;
  white-space: nowrap;
  padding-left: 10px !important;
  color: var(--primary) !important;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
}

.td-cost-share-name {
  text-align: left;
  white-space: nowrap;
  padding-left: 8px !important;
  width: 10px;
}

/* .table-bordered>:not(caption)>*>* {
  border-radius: 6px;
  border: 5px solid var(--secondary-light1)
} */

.table-heading {
  line-height: 20px !important;
}

.table > :not(caption) > * > * {
  padding: 0%;
  top: 311px;
  left: 2px;
  height: 46px;
  /* border-radius: 6px; */
  background: var(--primary-light);
  /* border: 1px solid var(--secondary-light1); */
  font-family: Inter;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  color: black;
}

.table td {
  padding: 1px !important;
  align-content: center;
}

.table {
  /* border-radius: 6px; */
  background: var(--primary-light);
  border: 1px solid var(--secondary-light1);
  margin-bottom: 5px;
}

.table thead th {
  padding: 0%;
  height: 30px !important;
  background: var(--primary-light);
  /* border: 1px solid var(--secondary-light1); */
  font-family: Inter;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  color: var(--primary-dark);
}

.table {
  /* height: 356px; */
  top: 311px;
  left: 2px;
  /* border-radius: 6px; */
  background: var(--primary-light);
  border: 1px solid var(--secondary-light1);
}

.table-bordered .form-input-box {
  background: var(--primary-light);
  border: 1px solid var(--secondary-light1);
}

.table-row-error td {
  height: 18px !important;
}

.css-1dyz3mf .css-tj5bde-Svg {
  background-color: var(--primary);
  color: var(--white);
  border-radius: 20px;
}

.hide-spinner::-webkit-outer-spin-button,
.hide-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hide-spinner {
  -moz-appearance: textfield;
}

input::placeholder,
.numeric-format::placeholder {
  text-align: left;
}

.right-justified-input {
  text-align: right !important;
}

input {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.k-tabstrip-top > .k-content,
.k-tabstrip-top > .k-tabstrip-content {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-width: 1px;
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
  border-color: rgb(30 29 29);
  color: #424242;
  background-color: #d7e8ec;
}

.k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected {
  border-color: rgb(28 26 26);
  color: #424242;
  background-color: #d7e8ec;
}

.k-tabstrip-items-wrapper {
  border-color: rgb(12, 12, 12);
  color: #424242;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
  margin-bottom: -1px;
  border-bottom-color: #d7e8ec !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
  border-top-left-radius: 1px !important;
  border-top-right-radius: 1px !important;
  border-bottom-width: 0;
}

.k-treeview-leaf:hover {
  background-color: #d7e8ec;
}

.queryBuilder-branches .rule::before,
.queryBuilder-branches .ruleGroup .ruleGroup::before {
  top: -0.2rem !important;
  height: calc(50% + 0.5rem);
  border-width: 0 0 1px 1px;
}

.queryBuilder-branches .ruleGroup .ruleGroup::after {
  height: calc(50% + 1px);
}

.position-relative {
  position: relative;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
}

.tooltip-content-autocomplete {
  position: absolute;
  top: 110%;
  z-index: 99999;
  padding: 8px;
  font-weight: 400;
  background-color: var(--primary-dark);
  color: var(--white);
  border: 1px solid var(--secondary-light);
  border-radius: 4px;
  font-size: 14px;
  font-family: Inter;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* white-space: nowrap; */
  overflow: visible;
  text-overflow: ellipsis;
  pointer-events: none;
  width: 170px;
  /* word-break: break-all; */
}

.tooltip-content-autocomplete::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--primary-dark) transparent;
  z-index: 1000;
}

.autocomplete-input.with-search-button {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-top: 4px;
}

.accept-button {
  height: 36px;
  border-radius: 6px;
  background: #44aea8;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  margin-top: 0px;
  font-size: 14px;
}

.decline-button {
  height: 36px;
  border-radius: 6px;
  background: #ce4d4d;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  margin-top: 0px;
  font-size: 14px;
}

.right-0 {
  right: 0;
}

.required {
  color: #e12f2f !important;
}

.rjsf-error-list {
  list-style: none;
  padding-left: 0;
}

/* Reduce the padding and height for the filter row */
.k-filter-row th {
  padding: 2px;
  /* reduce padding */
  margin: 0;
  /* remove margin */
  padding-block: 4px !important;
  padding-inline: 4px !important;
}

/* Reduce the input box size within the filter row */
.k-filter-row input,
.k-filter-row select,
.k-filter-row .k-dropdown {
  height: 24px;
  /* decrease input height */
  padding: 2px 5px;
  /* adjust padding */
}

.k-dropdown-operator.k-picker-md .k-input-button {
  padding: 4px;
  height: 20px;
}

/* .k-picker-solid {
  border-color: rgba(0, 0, 0, 0.08);
  color: white;
  background-color: var(--primary);
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
}
  */

.k-button-solid-base {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.k-button-solid-base:hover {
  color: var(--white);
  background-color: var(--primary);
}

.custom-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c1cede;
  border-radius: 4px;
  position: relative;
  background: var(--white);
  margin-top: 8px;
  cursor: pointer;
}

.k-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #c1cede;
  border-radius: 4px;
  position: relative;
  background: var(--white);
  margin-top: 4px;
  cursor: pointer;
}

.custom-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27white%27 stroke-linecap=%27square%27 stroke-linejoin=%27square%27 stroke-width=%272%27 d=%27M3,8 l3,3 l7-7%27/%3e%3c/svg%3e");
}

.custom-checkbox:disabled {
  /* background-color: #8696a6; */
  background-color: var(--gray);
  opacity: 0.75;
}

.custom-checkbox-claim {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #c1cede;
  border-radius: 4px;
  position: relative;
  background-color: var(--white);
  margin-top: 4px;
  cursor: pointer;
}

.custom-checkbox-claim:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27white%27 stroke-linecap=%27square%27 stroke-linejoin=%27square%27 stroke-width=%272%27 d=%27M3,8 l3,3 l7-7%27/%3e%3c/svg%3e");
}

.custom-checkbox-claim:disabled {
  /* background-color: #8696a6; */
  background-color: var(--gray-lighter);
  opacity: 1;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary);
  --bs-gradient: none;
}

.t-grid {
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-collapse: separate !important;
}

.table-box-width-date {
  width: 140px;
}

.table-box-width-id {
  width: 150px;
}

.table-box-width-checkbox {
  display: flex;
  justify-content: center;
  /* height: calc(1.89em + 0.4rem + 2px); */
  max-height: 100px;
  align-items: center;
  vertical-align: middle;
  padding: 0;
  width: 100%;
}

.table-box-width-checkbox-big {
  display: flex;
  justify-content: center;
  /* height: calc(1.89em + 0.4rem + 2px); */
  max-height: 100px;
  align-items: center;
  vertical-align: middle;
  padding: 0;
}

.table-box-width-line {
  width: 5px;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.input-group .btn {
  position: relative;
  z-index: 0;
}

.custom-date-picker .date-form-control[disabled] {
  opacity: 0.9;
  border: 1px solid #ecf1f9;
  color: #000 !important;
  background-color: #d7dce2;
}

/* .custom-date-picker-claim {
  margin-top: 2px;
} */

.custom-date-picker-claim::placeholder {
  font-weight: 500;
}

.claim-date {
  margin-top: -2px !important;
}

.thin-border {
  border-bottom: 1px solid #718d9d;
  /* This adds a thin black border */
  margin-bottom: 20px;
  /* Optional: Adds space between the tables */
}

.accumulator-box {
  padding: 5px 5px 5px 3px;
  border-radius: 5px;
  /* background: #F5F7FA; */
  margin-bottom: 5px;
  position: relative;
  border: 1px solid #e0e7f2;
}

.provider-box {
  /* border: 1px solid #718d9d; */
  padding: 5px;
  border-radius: 5px;
  background-color: var(--gray-lighter);
  margin-bottom: 0px;
  position: relative;
}

.form-check {
  margin-top: 2px;
  font-size: 18px;
}

.shift-right {
  margin-left: 17px;
  /* Adjust the value as needed */
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: black;
}

.accumulator-box-dark-background {
  border: 1px solid #718d9d;
  padding: 5px;
  border-radius: 5px;
  background-color: #bbd1dd;
  margin-bottom: 10px;
}

/* .td-name-height {
  height: 40px;
} */

.table-center {
  text-align: center !important;
  vertical-align: middle;
}

.noMrgin {
  margin: 0px;
}

.bold-row {
  font-weight: bold;
  color: #4e4e4e;
}

.k-filtercell-operator {
  display: none;
}

.up-down-buttons {
  font-size: 12px;
}

.clear {
  font-size: 8px;
  size: 10px;
}

.btn-link {
  color: var(--primary);
  margin-right: 5px;
  margin-top: 3px;
}

.btn-link:hover {
  color: #000;
}

.mdclose {
  background-color: #e12f2f;
  color: white;
  border-radius: 50%;
  width: 15px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: auto;
}

.k-grid td.k-selected,
.k-grid .k-table-row.k-selected > td,
.k-grid .k-table-td.k-selected,
.k-grid .k-table-row.k-selected > .k-table-td {
  background-color: #cfe2ec;
}

.from-thru-width {
  width: 70px;
}

.percent {
  width: 60px !important;
}

.limit {
  width: 100px !important;
}

.cost-share-checkbox {
  vertical-align: middle;
  text-align: center;
  width: 83px;
}

.k-stepper .k-step-current .k-step-indicator {
  border-color: var(--primary-dark);
  /* color: white; */
  background-color: var(--primary-dark);
}

.k-stepper .k-step-done .k-step-indicator {
  border-color: #786d6d;
  color: transparent !important;
  background-color: var(--primary-dark);
}

.k-stepper .k-step.k-focus .k-step-indicator::after,
.k-stepper .k-step-link:focus .k-step-indicator::after {
  display: none !important;
}

.k-stepper .k-step-done .k-step-indicator:hover {
  border-color: #786d6d !important;
  /* color: white !important; */
  background-color: var(--primary-dark) !important;
}

.k-stepper .k-step-indicator {
  border-color: var(--gray-light);
  color: #424242;
  background-color: var(--gray-light);
}

.k-stepper .k-step-indicator::before {
  color: transparent !important;
  outline: none;
}

.k-stepper .k-step-indicator::after {
  border-style: none !important;
  color: transparent !important;
}

.k-progressbar {
  top: 27px !important;
  height: 3px !important;
}

.k-stepper:not(.k-step-current) .k-step-indicator:hover {
  border-color: var(--gray-light);
  /* color: #424242; */
  background-color: #f5f6f8;
  cursor: pointer;
}

.k-stepper .k-step-current:hover .k-step-indicator,
.k-stepper .k-step-current.k-hover .k-step-indicator,
.k-stepper .k-step-current.k-step-hover .k-step-indicator {
  background-color: var(--primary-dark);
}

.k-stepper {
  border-width: 0px;
  border-style: solid;
  box-sizing: border-box;
  outline: 0;
  font-size: 14px;
  line-height: 1.4285714286;
  font-family: inherit;
  display: block;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
  background: none;
}

.k-stepper .k-step-indicator {
  width: 48px;
  height: 48px;
}

.k-progressbar .k-selected {
  border-color: var(--primary-dark);
  color: white;
  background-color: var(--primary-dark);
}

.k-stepper .k-step-done:hover .k-step-indicator,
.k-stepper .k-step-done.k-hover .k-step-indicator,
.k-stepper .k-step-done.k-step-hover .k-step-indicator {
  background-color: var(--primary-dark);
}

/* .k-grid-norecords-template {
  background-color: var(--white);
  border-color: rgba(0, 0, 0, 0.08);
  font-family: "Inter";

} */

.female {
  color: var(--female);
}

.male {
  color: var(--male);
}

.btn-confirm {
  background-color: #62d384 !important;
}

.btn-cancel {
  background-color: #e28c6b !important;
}

.eligibility-divider {
  border: none;
  border-top: 1px solid #ddd;
  /* Light gray line */
  margin: 10px 0;
  /* Add some spacing above and below */
}

.age {
  width: 120px !important;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  cursor: default;
  /* opacity: .5; */
}

.react-tel-input .form-control {
  position: relative;
  font-family: 'Inter';
  font-size: 14px;
  letter-spacing: 0.01rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
  margin-left: 0;
  font-weight: 600;
  color: #000;
  border: 1px solid #c1cede !important;
  border-radius: 6px;
  line-height: 25px;
  height: 36px;
  width: 100% !important;
  outline: none;
  box-shadow: none !important;
}

.phone-input-default {
  height: 36px !important;
}

.phone-input-small {
  height: 30px !important;
}

.react-tel-input .form-control:focus {
  border: 1px solid var(--secondary) !important;
  color: #2e343b;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
  outline: none;
}

.button-table-container {
  margin-top: 5px;
  display: flex;
  flex-direction: row-reverse;
}

.table-add-button {
  border: none;
  display: flex;
  background-color: var(--gray-lighter);
  justify-content: end;
  align-items: center;
  padding: 2px;
  cursor: pointer;
}

.entry-add-button {
  border: none;
  display: flex;
  /* background-color: var(--white); */
  background-color: transparent;
  justify-content: end;
  align-items: center;
  padding: 2px;
  cursor: pointer;
}

.table-add-button:disabled,
.table-add-button:disabled .addLine {
  cursor: not-allowed !important;
}

.card-body {
  padding: 2px;
  background: #f5f7fa;
}

.card-header {
  padding: 5px;
  height: 35px;
  background: #dee6f1;
}

.claim-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  /* column-gap: 6px; */
  row-gap: 8px;
  justify-content: space-between;
}

.claim-row.row-1-create {
  /* grid-template-columns: 9% 17% 16% 15% 9% 10% 10% 10%; */
  grid-template-columns: 12% 14% 14% 14% 9% 9% 9% 9%;
}

.claim-row.row-1-create-prof {
  /* grid-template-columns: 9% 17% 16% 15% 9% 10% 10% 10%; */
  grid-template-columns: 12.5% 14% 12% 11% 7% 7% 8% 10% 11%;
}

.claim-row.row-3-create-prof {
  grid-template-columns: 12.5% 14% 12% 11% 7% 7% 8% 22%;
}

.claim-row.custom-space-row {
  width: 100%;
  max-width: 100%;
  position: static;
}

.claim-row.row-4-create-prof {
  grid-template-columns: 7% 7% 8% 9% 8% 15% 15% 5.5% 9.5% 6% 7%;
}

.claim-row.row-5-create-prof {
  grid-template-columns: 70.5% 6% 7% 6% 7%;
}

.claim-row.row-8-create-prof {
  grid-template-columns: 20% 14% 6% 7% 20% 14% 6% 7%;
}

.claim-row.row-1-create-dent {
  grid-template-columns: 4% 23% 7% 7% 6% 8% 6% 8% 3% 8% 5% 7%;
}

.claim-row.row-3-create-dent {
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10%;
}

.claim-row.row-2-create-dent {
  /* grid-template-columns: 33% 10% 10% 10% 10% 10% 10%; */
  grid-template-columns: auto;
}

.checkbox-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90vw;
  /* Stretch across 90% of the viewport width */
  margin: auto;
}

.checkbox-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: 5px;
  overflow-x: auto;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  width: 100%;
}

.checkbox-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.checkbox-row {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 5px;
}

.checkbox-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 calc(100% / 52);
  min-width: 20px;
}

.checkbox-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
}

.custom-checkbox-claim {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff;
  border: 1px solid 'var(--gray-lightest)';
  border-radius: 4px;
}

.claim-row.row-1-create-inst {
  /* grid-template-columns: 8% 10% 10% 10% 7% 7% 8% 5% 7% 7% 10%; */
  grid-template-columns: 4% 12% 9% 3% 5% 5% 3.5% 5% 40% 5%;
}

.claim-row.row-2-create-inst {
  /* grid-template-columns: 10% 12% 12% 15% 10% 10% 10% 10%; */
  /* grid-template-columns: 8% 8% 13% 11% 11% 11% 11% 11% 11%; */
  grid-template-columns: 6.7% 11% 81%;
}

.claim-row.row-3-create-inst {
  grid-template-columns: 5% 20% 73%;
}

.claim-row.row-4-create-inst {
  /* grid-template-columns: 13.5% 13.5% 13.5% 13.5% 13.5% 13.5% 13.5%; */
  grid-template-columns: 14% 85%;
}

.claim-row.row-extended-create-inst {
  grid-template-columns: 6.7% 11% 81%;
}

.claim-row.row-extended1-create-inst {
  grid-template-columns: 14% 85%;
}

.inst-col-wrap {
  display: flex;
  justify-content: space-between;
}

.claim-row.row-2-create {
  /* grid-template-columns: 16% 20% 20% 20% 20%; */
  grid-template-columns: 12.5% 14% 12% 11% 15% 20% 10%;
}

.claim-row.row-3-create {
  grid-template-columns: 15% 20% 20% 20% 10% 11%;
}

.claim-row.row-4-create {
  /* grid-template-columns: 10% 15% 13% 10% 8% 8% 10% 22%; */
  grid-template-columns: 28% 20% 20% 15% 14%;
}

.claim-row.row-5-create {
  grid-template-columns: 36% 22% 20% 10% 10%;
}

.claim-row.row-6-create {
  grid-template-columns: 13% 12% 8% 8% 8% 9% 14% 20%;
}

.claim-row.row-7-create {
  grid-template-columns: 13% 12% 12% 11% 10% 10% 10% 14%;
}

.claim-row.row-8-create {
  grid-template-columns: 10% 10% 12% 12% 7% 7% 7% 10% 8% 8%;
}

.claim-page-header-with-checkbox {
  display: grid;
  /* align-items: center; */
  justify-content: space-between;
  grid-template-columns: 15% 68%;
}

.small-select {
  width: 50px !important;
}

.claim-row.row-2 {
  grid-template-columns: 16% 15% 12% 17% 16% 10% 10%;
}

.claim-row.row-3 {
  grid-template-columns: 16% 20% 20% 21% 10% 10%;
}

.claim-row.row-4 {
  grid-template-columns: 16% 19% 19% 14% 8% 10% 10%;
}

.claim-row.row-5 {
  grid-template-columns: 28% 25% 14% 10% 10% 10%;
}

.claim-row.row-6 {
  grid-template-columns: 10% 10% 12% 11% 10% 10% 10% 10% 10%;
}

.claim-row.row-7 {
  grid-template-columns: 10% 10% 12% 11% 10% 10% 10% 10% 10%;
}

.claim-row.row-7 .checkbox-col,
.claim-row.row-7 .claim-col-last {
  grid-column: span 2;
}

.claim-row.row-8 {
  grid-template-columns: 15% 15% 15% 15%;
}

.claim-row.row-9 {
  grid-template-columns: 21% 35% 21% 21%;
}

.claim-row.row-10 {
  grid-template-columns: 30% 30% 15% 5% 7%;
}

.claim-row.row-11 {
  grid-template-columns: 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5% 7.5%;
}

.provider-row.billing-provider {
  grid-template-columns: 15% 53% 15% 15%;
}

.provider-row.rendering-provider {
  grid-template-columns: 15% 53% 15% 15%;
}

.provider-row.address-row {
  grid-template-columns: 35% 33% 15% 4.5% 10%;
}

.claim-col,
.claim-col-last {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.claim-col strong,
.claim-col-last strong,
.provider-col strong {
  font-weight: 500;
  font-size: 12px;
  color: black;
}

.input-like {
  padding: 2px 3px;
  background: var(--white);
  border: 1px solid #c1cede;
  border-radius: 4px;
  display: inline-block;
  height: 30px !important;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter';
}

.date-small {
  padding: 2px 3px;
  background: var(--white);
  border: 1px solid #c1cede;
  border-radius: 4px;
  display: inline-block;
  height: 22px;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter';
}

.date-small::placeholder {
  font-size: 12px;
  font-weight: 500;
  color: #5f7798;
}

.input-like::placeholder {
  font-size: 14px;
  font-weight: 500;
  color: #5f7798;
}

.date-small:focus {
  outline: none;
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  outline: none;
  box-shadow: none;
}

.input-like:focus {
  outline: none;
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  outline: none;
  box-shadow: none;
}

.date-small:disabled {
  cursor: not-allowed;
  border: 1px solid #c1cede;
  color: #000 !important;
  background: var(--gray-lighter);
}

.input-like:disabled {
  cursor: not-allowed;
  border: 1px solid var(--gray-light);
  color: #000 !important;
  background: var(--gray-lighter);
}

.claim {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
}

.claim + strong,
.claim strong {
  display: block;
  margin-bottom: 0;
}

.claim .input-group {
  display: block;
}

.provider-row {
  display: grid;
  column-gap: 6px;
  row-gap: 8px;
  grid-template-columns: 10% 10% 47% 15.5% 15%;
}

.provider-row-create {
  display: grid;
  column-gap: 6px;
  row-gap: 8px;
  grid-template-columns: 12.5% 66% 10% 10%;
}

.rendering-row-create {
  display: grid;
  column-gap: 6px;
  row-gap: 8px;
  grid-template-columns: 12.5% 38% 27.5% 10% 10%;
}

.referring-row-create {
  display: grid;
  column-gap: 6px;
  row-gap: 8px;
  grid-template-columns: 12.5% 38% 27.5% 21%;
}

.provider-name-group {
  display: grid;
  grid-column: span 1;
  grid-template-columns: 43% 39% 15%;
  column-gap: 6px;
}

.table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow: visible;
  max-height: none;
}

.compact-table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid var(--primary-light);
  border-radius: 6px 6px 0px 0px;
}

.compact-table th,
.compact-table td {
  /* border: 1px solid #ddd; */
  padding: 2px;
  text-align: left;
  /* font-family: "Inter"; */
  font-size: 14px;
  height: 24px;
  text-wrap: wrap;
}

.compact-table tr {
  align-items: center;
}

.compact-table .k-input-md .k-input-inner,
.compact-table .k-picker-md .k-input-inner {
  height: 23px;
}

.compact-table th {
  font-weight: bold;
  white-space: nowrap;
  text-wrap: wrap;
  text-align: center;
  color: var(--secondary);
  /* border: 1px solid var(--white); */
  border: 1px solid var(--secondary-light1);
}

.compact-table thead {
  background-color: var(--primary-light);
}

/* .compact-table tr {
  background-color: #bbd1dd;
} */

/* .compact-table tr:hover {
  background-color: #bbd1dd;
} */

.checkbox-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.checkbox-col strong {
  font-weight: 600;
  font-size: 12px;
}

.checkbox-col .custom-checkbox,
.claim-col .custom-checkbox {
  margin-top: 0px;
}

/* .checkbox-input {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  background-color: var(--white);
  position: relative;
}

.checkbox-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.checkbox-input:checked::after {
  content: '';
  position: absolute;
  top: 43%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
} */

.dropdown {
  width: 100%;
  height: 23px;
  padding: 2px 2px;
  font-size: 12px;
  /* font-family: "Inter", monospace; */
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #ececec;
  color: #333;
  cursor: not-allowed;
}

.dropdown:disabled {
  background-color: #f5f5f5;
}

/* .form-separator {
  width: 100%;
  border-top: 1px dashed #888;
  margin-top: 1px;
} */

.claim-tabstrip .k-tabstrip-content,
.claim-tabstrip .k-tabstrip > .k-content {
  padding-block: 2px;
  padding-inline: 2px;
}

.bi-arrows-expand-vertical::before {
  content: '\f695';
  font-weight: bold !important;
}

.bi-arrows-collapse-vertical::before {
  content: '\f690';
  font-weight: bold !important;
}

/* .auto-complete-height {
  height: 24px;
  margin-top: -2px;
} */

.text-search-svg {
  margin-bottom: 10px;
  vertical-align: middle;
}

.text-muted {
  font-size: 10px;
  color: black;
}

.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
  padding-block: 4px;
  padding-inline: 1px;
  /* height: 36px; */
}

.auto-complete-height-table {
  margin-top: 0px !important;
}

.claim-page-header {
  font-size: 14px;
  font-weight: 500;
  color: black;
}

.checkbox-heading {
  font-weight: 500;
  color: black;
}

.form-check-claim {
  margin-top: 0 !important;
  font-size: 12px;
}

.compact-hours-table {
  width: 100%;
}

.time {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  border-radius: 5px;
  line-height: inherit;
  border: 1px solid #7d837f;
  height: 24px;
}

.compact-table .input-like {
  font-size: 14px;
}

.claim-row-institutional {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  column-gap: 6px;
  /* row-gap: 8px; */
  /* justify-content: space-between; */
}

.claim-row-diag {
  display: grid;
  grid-template-columns: repeat(12, minmax(80px, auto));
  gap: 10px;
  align-items: center;
}

.claim-row-diag:not(.expanded) {
  grid-template-columns: repeat(9, minmax(80px, auto)) 20px;
}

.expand-icon,
.collapse-icon {
  font-size: 17px;
  margin-left: 60px;
  cursor: pointer;
  color: #333;
  line-height: 1;
}

.expand-icon {
  position: absolute;
}

.collapse-icon {
  position: absolute;
}

.claim-row.institutional-header-row-1 {
  /* grid-template-columns: 16% 10% 10% 20% 10% 10%; */
  /* grid-template-columns: 12% 12% 10% 10% 10% 10% 10% 10% 10%; */
  grid-template-columns: 14% 14% 11% 11% 6% 6% 6% 6% 5% 4% 10%;
}

.claim-row.institutional-header-row-2 {
  /* grid-template-columns: 12% 12% 13% 14% 14% 10% 10% 10%; */
  grid-template-columns: 14% 14% 11% 6.5% 9.5% 9.5% 9.5% 9.5% 14%;
}

.claim-row.institutional-header-row-3 {
  /* grid-template-columns: 12% 12% 12% 14% 10% 10%; */
  grid-template-columns: 14% 18% 18% 11% 11.5% 9% 9% 5%;
}

.claim-row.institutional-header-row-4 {
  /* grid-template-columns: 12% 12% 12% 10% 4% 8% 10%; */
  grid-template-columns: 14% 15% 15% 10% 3% 8% 3% 28%;
}

.claim-row.institutional-header-row-5 {
  grid-template-columns: 32% 28% 12% 10% 4%;
}

.claim-row-institutional.institutional-row-1 {
  grid-template-columns: 4% 9% 9% 9% 3.5% 5.5% 8% 3.5% 3.5% 4% auto;
}

.claim-row-institutional.institutional-row-2 {
  grid-template-columns: 5% 5% 5% 5% 5% 5% 5% 5% 5% 5% 5%;
}

.claim-row-institutional.institutional-row-3 {
  grid-template-columns: 15% 10% 6%;
}

.claim-row-institutional.institutional-row-4 {
  grid-template-columns: 11% 11% auto;
}

.claim-row-institutional.institutional-row-5 {
  /* grid-template-columns: 6.5% 9% 6.5% 9% 6.5% 9% 6.5% 9% 6.5% 9% 6.5% 9%; */
  grid-template-columns: 16.5% auto;
}

.claim-row-institutional.institutional-row-6 {
  grid-template-columns: 5% 10% 19% auto;
}

.claim-row-institutional.row-otherdiag {
  grid-template-columns: 6% 3% 50%;
}

.external-cause-group,
.visit-reason-group {
  display: flex;
  gap: 6px;
}

.diagnosis-group {
  display: flex;
  gap: 6px;
}

.procedure-group {
  display: flex;
  gap: 7px;
}

.input-width1 {
  width: 86px;
}

.input-width2 {
  width: 29px;
}

.input-width3 {
  width: 65px;
}

.input-width4 {
  /* width: 35px; */
  width: 40px !important;
}

.input-width5 {
  width: 55px;
}

.input-width6 {
  width: 70px;
}

.diagnosis-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.procedure-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.diagnosis-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 7px;
}

.procedure-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}

/* Table code: start */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 5px 0;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
}

.styled-table th,
.styled-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}

.styled-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.styled-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.styled-table tr:hover {
  background-color: #e2e2e2;
}

.input-group .prefix-textbox {
  height: 36px;
  border-radius: 5px;
  line-height: 36px;
  color: var(--secondary);

  background: var(--secondary-light1);

  display: inline-block;
  width: 12%;
  text-align: center;
  vertical-align: middle;
}

.input-group .prefix-textbox-claim {
  height: 30px;
  border-radius: 5px;
  line-height: 30px;
  color: #212529;
  border: 1px solid #c1cede !important;
  background-color: var(--white);
  display: inline-block;
  width: 18px !important;
  text-align: center;
  vertical-align: middle;
}

.cost-share-td {
  width: 250px;
  text-align: right;
  display: inline-block;
}

.sub-table-heading {
  text-align: left;
  white-space: nowrap;
  padding-left: 8px !important;
}

.padding-0 {
  padding: 0px !important;
}

.table-heading-middle {
  background-color: var(--primary-light);
  text-align: center;
  padding: 0%;
  height: 30px !important;
  background: var(--primary-light);
  /* border: 1px solid var(--secondary-light1); */
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  color: var(--primary);
  vertical-align: middle;
}

/* Button styling */
.create-button {
  height: 36px;
  border-radius: 6px;
  background-color: var(--primary);
  border: 1.5px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

/* Icon styling */
.create-icon {
  width: 12.25px;
  height: 12.04px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  margin-left: 10px;
}

/* Text styling */
.create-button .create-text {
  color: var(--white);
  /* Ensures text remains white */
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  margin-right: 10px;
}

.create-button-link {
  text-decoration: none;
}

.import-button {
  width: 84px;
  height: 36px;
  border-radius: 6px;
  background: var(--gray-lighter);
  border: 1px solid #e5ecf6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.import-icon {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.import-text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--primary);
  text-align: center;
}

.top-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-container .breadcrumb {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  line-height: 14.52px;
  color: #8091a8;
  margin-bottom: 0;
}

.heading-container {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Space between icon and text */
}

.icon-container {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-heading {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 700;
  line-height: 19.36px;
  color: var(--primary);
  margin: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 3px;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 3px;
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-container {
  height: 36px;
  border-radius: 6px;
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 5px;
}

.alphabet-box {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alphabet-initials {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  line-height: 19.36px;
  color: var(--white);
  text-align: center;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.profile-name {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600 !important;
  line-height: 16.94px;
  text-wrap: nowrap;
  color: #2e343b;
  text-align: left;
}

.professional {
  width: 140px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf9f7;
  border: 1px solid #bde6e1;
  border-radius: 4px;
}

.professional-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--success);
  text-transform: uppercase;
}

.claim-type-cell {
  text-align: center;
}

.institutional {
  width: 140px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px;
  background: #fceadc;
  border: 1px solid #ffdbbf;
}

.institutional-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--warning-dark);
  text-transform: uppercase;
}

.dental {
  width: 140px;
  height: 20.59px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px;
  background: #fff8e2;
  border: 1px solid #ffe1b5;
}

.dental-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--warning);
  text-transform: uppercase;
}

.outpatient {
  width: 140px;
  height: 20.59px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px;
  background: #e9c6c6;
  border: 1px solid #dda5a5;
}

.outpatient-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #923636;
  text-transform: uppercase;
}

.pharmacy {
  width: 140px;
  height: 20.59px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px;
  background: #dcf7fc;
  border: 1px solid #c7edf5;
}

.pharmacy-text {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #24a1b9;
  text-transform: uppercase;
}

a {
  color: var(--primary);
  text-decoration: underline;
}

/* Main Container */
.custom-claim-info-container {
  background-color: #f6f8fb;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  padding: 5px;
  font-family: Arial, sans-serif;
  color: #333;
}

.invalid-drop {
  border: 1px solid #e12f2f;
}

.custom-claim-info-container2 {
  background-color: #f6f8fb;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  padding: 5px;
  font-family: Arial, sans-serif;
  color: #333;
  height: 50px;
}

/* Header Container */
.contract-info-header {
  align-items: center;
  margin-bottom: 5px;
  gap: 10px;
}

/* Title Styling */
.custom-claim-title {
  color: var(--primary);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  /* line-height: 16.94px; */
  line-height: 20px;
  text-align: left;
  /* text-decoration: underline; */
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

/* Edit Button Container */
.custom-claim-edit-btn {
  /* background-color: var(--secondary-light1); */
  background-color: #f5f7fa;
  border: 1px solid #dee6f1;
  border: none;
  color: var(--secondary);
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 5px;
  width: fit-content;
  height: 20px;
  padding: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  letter-spacing: 0.2em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.custom-claim-edit-btn:hover {
  background-color: #c3e4f1;
}

.custom-icon-edit-btn {
  width: 19px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: var(--white);
}

.custom-icon-edit-btn img {
  width: 12px;
  height: 12px;
  display: block;
}

.custom-claim-edit-text {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 12.1px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--secondary);
  text-align: left;
}

.custom-claims-row {
  display: flex;
}

.custom-claim-col {
  box-sizing: border-box;
  padding: 4px;
}

.custom-claim-col-withoutmaxwidth {
  flex: 1 1 11%;
  min-width: 140px;
  box-sizing: border-box;
  padding: 4px;
}

.custom-claim-col-withoutmaxwidth strong {
  display: block;
  font-size: 12px;
  font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 12.1px;
  letter-spacing: 0.08em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #607082;
}

.custom-claim-col-withoutmaxwidth span {
  font-family: Inter;
  font-size: 12px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #2e343b;
}

.custom-claim-col-withoutmaxwidth .completed {
  color: #00c851;
}

.custom-claim-col strong {
  display: block;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 12.1px;
  letter-spacing: 0.08em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #607082;
}

.custom-claim-col span {
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

  color: #2e343b;
}

.custom-claim-col .completed {
  color: #00c851;
}

.divider-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #d7e1f0;
  border: none;
  margin: 2px 0;
}

.delete-icon {
  margin-left: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon:hover {
  color: #b02a37;
  /* Darker red on hover */
}

.base-icon-delete:hover {
  color: #b02a37;
}

.edit-icon,
.cursor-pointer {
  cursor: pointer;
}

.grip-icon {
  margin-right: 10px;
  cursor: grab;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #6c757d;
  /* Muted color for grip icon */
}

.grip-icon:hover {
  color: #495057;
  /* Darker on hover */
}

.row-index {
  cursor: grab;
  display: flex;
  align-items: center;
  font-family: Inter;
  font-size: 14;
}

.frame {
  top: 89px;
  left: 102px;
  padding: 0px 21px 0px 0px;
}

.input-name {
  /* height: 15px; */
  top: 29px;
  left: 1px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  /* line-height: 14.52px; */
  text-align: left;
  color: #4c4b4b;
  text-wrap: nowrap;
}

.form-input-box {
  height: 36px;
  width: 100%;
  left: 1px;
  padding-left: 5px !important;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.94px;
  text-align: left;
  border-radius: 6px;
  border: 1px;
  background: var(--white);
  border: 1px solid #c1cede;
  outline: none;
  box-shadow: none !important;
}
.form-input-textarea {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.94px;
  border-radius: 6px;
  border: 1px;
  background: var(--white);
  border: 1px solid #c1cede;
  outline: none;
  box-shadow: none !important;
  padding: 5px !important;
  font-family: Inter;
  resize: none;
}
.form-input-box:focus,
.form-input-box:focus-within {
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.form-input-box:disabled {
  color: #000 !important;
  cursor: not-allowed;
  border: 1px solid var(--gray-light);
  background: var(--gray-lighter);
}

.form-input-box::placeholder {
  color: #5f7798;
  font-weight: 500;
}

.description-box {
  top: 52px;
  width: 100%;
  left: 1px;
  border-radius: 6px;
  font-family: 'Inter';
  font-weight: 600;
  border: 1px;
  font-size: 14px;
  background: var(--white);
  border: 1px solid #c1cede;
  resize: none;
  outline: none;
  /* color: #5E738B; */
}

.description-box::placeholder {
  color: #5f7798;
  font-weight: 500;
}

.description-box:focus {
  border: 1px solid var(--secondary) !important;
  color: #2e343b;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  box-shadow: none;
}

input::placeholder,
textarea::placeholder,
.numeric-format::placeholder {
  text-align: left;
  top: 62px;
  left: 267px;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: left;
  color: #5e738b;
}

select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  text-align: left;
  border: 1px solid 'var(--gray-lightest)';
  background-color: var(--white);
}

.placeholder {
  color: #5e738b !important;
  opacity: none !important;
}

select option {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  text-align: left;
}

select option:disabled {
  color: grey;
}

select option[value=''] {
  color: #5e738b;
  cursor: default;
}

select:hover {
  border-color: #999;
}

/* Focus styling */
select:focus {
  outline: none;
  border: 1px solid var(--secondary);
  /* border-color: #5E738B; */
  /* box-shadow: 0 0 5px rgba(94, 115, 139, 0.5); */
}

.placeholder-option {
  font-family: 'Inter', sans-serif;
  color: #5f7798;
  font-weight: 500;
}

.marginbottom-heading {
  margin-bottom: 6px;
}

.placeholder-option {
  color: #5e738b;
}

.table-input-box {
  height: 36px;
  top: 350px;
  left: 674px;
  width: 100%;
  border-radius: 4px;
  border: 1px;
  background: var(--primary-light);
  border: 1px solid var(--secondary-light1);
  outline: none;
}

.label-font {
  font-family: Inter;
  font-size: 15px;
  font-weight: 600;
  /* line-height: 16.94px; */
  text-align: left;
  color: black;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
  background: var(--white);
  border-color: 1px solid #c1cede;
}

.form-check-input:checked {
  background-color: #f5f7fa;
  border-color: var(--primary);
}

.form-check-input:checked[type='radio'] {
  background-color: #f5f7fa;
  border-color: var(--primary);
  border-width: 5px;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e");
}

.addLine {
  font-family: Inter, 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: left;
  color: var(--svg-tangerine);
  margin-left: 5px;
  cursor: pointer;
}

.search-grid-separator {
  height: 0px;
  margin: 10px 0px;
  border: 1px solid #ecf0f5;
}

.profile-container-dashboard {
  height: 36px;
  border-radius: 6px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  height: 36px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.search-box {
  width: 200px;
  height: 36px;
  top: 85px;
  left: 104px;
  gap: 0px;
  border-radius: 6px;
  background: #f5f7fa;
  border: 1px solid #d8e1ed;
  padding-left: 10px;
  font-family: 'Inter';
  font-size: 14px;
  outline: none;
  color: #5e738b;
  /* Add padding for better text alignment */
}

.search-box:focus {
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.search-box-alt {
  border: none !important;
  border-radius: 6px;
  background: #f5f7fa !important;
}

.k-input-solid:focus {
}

.search-box-alt > input {
  width: 180px;
  height: 36px;
  border-radius: 6px;
  background: #f5f7fa;
  border: 1px solid #d8e1ed !important;
  padding-left: 6px !important;
  font-family: Inter, 'serif';
  font-size: 14px;
  font-weight: 400 !important;
  outline: none;
  color: #5e738b;
}

.search-box-alt > input:focus {
  border: none !important;
  color: #2e343b;
  font-family: Inter, 'serif';
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.search-box-alt > .k-input-inner::placeholder {
  background-color: transparent !important;
  font-weight: 400;
}

.search-box-alt > .k-clear-value {
  background: #f5f7fa;
}

.header-search-button {
  height: 36px;
  border-radius: 6px 0px 0px 6px;
  background: #f5f7fa;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 5px;
  width: 30px;
}

.header-search-input-box {
  height: 36px;
  top: 52px;
  width: auto;
  font-family: 'Inter';
  font-size: 14px;
  left: 1px;
  border-radius: 0px;
  border: 1px;
  background: #f5f7fa;
}

.header-search-box {
  width: 234px;
  height: 36px;
  top: 85px;
  left: 104px;
  color: #5e738b;
  gap: 0px;
  border-radius: 0px;
  background: #f5f7fa;
  border: none;
  padding-left: 10px;
  font-family: 'Inter';
  font-size: 14px;
  outline: none;
}

.header-search-box:focus {
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.header-filter {
  border-radius: 0px 6px 6px 0px;
  height: 36px;
  background: #f5f7fa;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 5px;
  width: 30px;
}

.custom-label-date {
  margin-top: 2px;
  margin-bottom: 0px;
}

.custom_width_200 {
  max-width: 200px;
}

.custom_width_300 {
  max-width: 300px;
}

.custom_width_600 {
  max-width: 600px;
}

.custom_height_60 {
  height: 60px;
  width: 100%;
  border: 1px solid #d8e1ed;
  border-radius: 6px;
  background: #f5f7fa;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  margin-top: 10px;
}

.Custom_save_button {
  width: 87px;
  height: 36px;
  border-radius: 6px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  margin-top: 0px;
}

.Custom_clear_button {
  width: 87px;
  height: 36px;
  border-radius: 6px;
  background: var(--gray-lighter);
  border: 1px solid #e5ecf6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.Custom_clear_text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--primary);
  text-align: center;
  text-decoration: none;
  padding: 10px;
}

.Custom_search_text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  line-height: 14.52px;
  color: var(--white);
  text-align: left;
  padding: 10px;
}

.modal-content {
  background-color: white;
  overflow: visible;
  /* min-height: 80vh !important;
  max-height: 80vh !important; */
}

.fixed-height-modal {
  background-color: white;
  overflow: visible;
  min-height: 80vh !important;
  max-height: 80vh !important;
}

.btn-delete {
  background-color: rgb(240 63 63 / 90%);
  color: white;
}

.btn-delete:hover {
  background-color: rgb(240 63 63 / 90%);
  color: white;
}

.border-radius-right {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.border-radius-left {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.header-searchicon {
  color: black;
}

.center-aligned-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-corner {
  display: flex;
  justify-content: flex-end;
}

.active-dependent {
  color: green;
}

.inactive-dependent {
  color: red;
}

.card-title {
  margin-bottom: 0px;
}

.timestamp-container {
  /* width: 100%; */
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  /* margin: 1rem 0; */
  font-family: 'Inter';
  border: 1px solid #e9eff6;
  border-radius: 8px;
  overflow: hidden;
}

.timestamp-header {
  background-color: var(--white);
  font-size: 10px;
  color: #607082;
  font-weight: 400;
}

.timestamp-row {
  background-color: #f6f8fb;
}

.timestamp-cell {
  padding: 8px;
  border-bottom: 1px solid #e9eff6;
  vertical-align: middle;
  font-size: 10px;
  font-family: 'Inter';
  font-weight: 400;
}

.timestamp-cell:last-child {
  border-right: none;
}

.timestamp-cell:not(:first-child) {
  border-left: 1px solid #e9eff6;
}

.timestamp-createdby {
  font-weight: 700;
  font-size: 12px;
  color: #000000;
}

.timestamp-date {
  font-size: 10px;
  color: #2e343b;
  margin-left: 10px;
}

.my-toast-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.my-toast-icon-success {
  width: 16px;
  height: 16px;
}

.my-toast-icon-failure {
  font-size: 16px;
  color: #e67777;
}

.my-toast-title-success {
  margin: 0;
  font-size: 16px;
  color: var(--secondary-light);
}

.my-toast-title-failure {
  margin: 0;
  font-size: 16px;
  color: var(--error-light);
}

.my-toast-title-warning {
  margin: 0;
  font-size: 16px;
  color: var(--warning);
}

.my-toast-message {
  margin: 0;
  color: #f9fbfe;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.my-toast-success {
  background-color: var(--primary-dark) !important;
  border-radius: 8px;
  padding: 12px;
}

.my-toast-failure {
  background-color: var(--primary-dark) !important;
  border-radius: 8px;
  padding: 12px;
}

.my-toast-warning {
  background-color: var(--primary-dark) !important;
  border-radius: 8px;
  padding: 12px;
}

.my-close-button {
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 0;
}

.k-stepper .k-step-error .k-step-label {
  color: #000;
}

.k-stepper .k-step-error:hover .k-step-label,
.k-stepper .k-step-error.k-hover .k-step-label,
.k-stepper .k-step-error.k-step-hover .k-step-label {
  color: #000;
}

.css-10wo9uf-option {
  padding: 4px 6px;
}

.checkmark {
  position: absolute;
  top: -3px;
  right: -5px;
  width: 18px;
  height: 18px;
}

.table-time-box {
  height: 28px;
  /* width: 100px !important; */
  border-radius: 4px;
  border: 1px;
  background: var(--primary-light);
  border: 1px solid var(--secondary-light1);
}

.btn-previous {
  width: 120px;
  background: #ecf0f5;
  color: var(--primary);
  font-family: Inter;
  font-weight: 600;
}

.btn-previous:hover {
  background: #ecf0f5;
  color: var(--primary);
  font-family: Inter;
  font-weight: 600;
}

.btn-next {
  width: 120px;
  background: var(--primary);
  color: var(--white);
  font-family: Inter;
  font-weight: 600;
}

.btn-next:hover {
  background: var(--primary);
  color: var(--white);
  font-family: Inter;
  font-weight: 600;
}

.next-icon {
  margin-bottom: 3px;
}

.prev-icon {
  margin-bottom: 3px;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  /* width: 120px; */
  background: var(--primary);
  color: var(--white);
  font-family: Inter;
  font-weight: 600;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background: #ecf0f5;
  color: var(--primary);
  font-family: Inter;
  font-weight: 600;
}

.k-disabled,
.k-widget[disabled] {
  outline: none;
  cursor: default;
  /* background: #8696a6 !important;
  opacity: 0.6;
  filter: grayscale(0.1); */
  opacity: 1;
  pointer-events: none;
  box-shadow: none;
  background: var(--gray-lighter);
}

.k-no-data,
.k-nodata {
  min-height: 140px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  font-weight: lighter;
  text-align: center;
  white-space: normal;
  font-family: Inter;
  font-size: 14px;
}

.btn.add-button,
.btn.request-absence-btn {
  border-radius: 6px;
  color: white;
  font-family: 'Inter';
  background: var(--primary-regular, var(--primary));
  border-color: var(--primary);
  --bs-btn-active-bg: var(--primary) !important;
  --bs-btn-active-border-color: var(--primary) !important;
  font-size: 14px;
  font-family: Inter;
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.main-container {
  border-radius: 14px;
  background: var(--gray-lightest);
  padding: 10px;
}

.sticky-header-tabs-container {
  position: sticky;
  padding-top: 10px;
  top: 0;
  z-index: 20;
  background-color: var(--white);
}

.sticky-tabs {
  overflow-x: auto;
}

.custom-tabs-content {
  flex: 1;
}

.top-up {
  top: -1px;
}

.react-tel-input .flag-dropdown {
  position: absolute;
  top: -1px !important;
  bottom: 0;
  height: 100%;
  padding: 0;
  background-color: #f5f5f5;
  border: 1px solid #cacaca;
  border-radius: 3px 0 0 3px;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
  font-family: Inter;
  font-size: 16px;
  font-weight: 600;
  line-height: 19.36px;
  color: var(--primary);
}

.btn-close-custom {
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 8px;
}

.btn-close-custom img {
  width: 30px;
  /* Adjust size as needed */
  height: 30px;
}

.filter-icon {
  background-color: #d8e1ed;
  padding: 5px;
  border-radius: 6px;
  height: 36px;
  cursor: pointer;
}

.filter-dropdown-container {
  position: relative;
  display: inline-block;
}

.filter-dropdown {
  position: absolute;
  top: 40px;
  right: 5px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  z-index: 1000;
}

.filter-header {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.filter-content label {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.filter-content select,
.filter-content input {
  padding: 5px;
  border: 1px solid #d7e1f0;
  border-radius: 4px;
  margin-top: 5px;
}

.filter-actions {
  display: flex;
  justify-content: space-between;
}

.filter-actions button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* .filter-actions .btn-primary {
  background-color: #007bff;
  color: var(--white);
} */

.btn-primary {
  background-color: var(--primary) !important;
  color: var(--primary-light);
}

.filter-actions .btn-secondary {
  background-color: #f8f9fa;
  color: #000000;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 3 fields in a row */
  gap: 20px;
  /* Space between fields */
}

.css-1p3m7a8-multiValue {
  max-width: 400px;
  background-color: var(--primary-light) !important;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.css-10wo9uf-option {
  font-family: Inter;
  font-size: 14px;
  padding: 6px 12px !important;
}

.claimstatus-processed {
  color: green !important;
  /* font-weight: bold; */
}

.claimstatus-declined {
  color: red !important;
  /* font-weight: bold; */
}

.claimstatus-pending {
  /* color: yellow !important; */
  color: var(--warning) !important;
  /* font-weight: bold; */
}

.status-default {
  color: black;
}

/* Common styling for the claim status container */
.claim-status {
  width: 120px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Specific styles for different statuses */
/* .status-processed {
  background: #eaf9f7;
  border: 1px solid #bde6e1;
}

.status-declined {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

.status-pending {
  background: #fff8e2;
  border: 1px solid #ffe1b5;
} */

/* Common styling for the claim status container */
.claim-status-wrapper {
  /* width: 120px; */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  padding: 0px 4px;
  letter-spacing: 0.15em;
}

.claim-status-wrapper-small {
  /* width: 120px; */
  width: 30px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  padding: 0px 4px;
  letter-spacing: 0.15em;
}

/* Specific styles for different statuses */
.status-processed {
  background-color: #eaf9f7;
  border: 1px solid #bde6e1;
  color: var(--success);
}

.status-declined {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.status-pending {
  background-color: #fff8e2;
  border: 1px solid #ffe1b5;
  color: var(--warning);
}

.claim-status-cell {
  text-align: center;
}

.claim-id-input {
  padding: 2px 3px;
  background: var(--white);
  border: 1px solid #c1cede;
  border-radius: 4px;
  display: inline-block;
  height: 20px;
  width: 150px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter';
}

.claim-id-input:focus {
  outline: none;
  border: 1px solid var(--secondary);
  color: #2e343b;
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 14.52px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  outline: none;
  box-shadow: none;
}

.claimtag-heading {
  color: #607082;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.header_buttons .create-button {
  height: 24px;
  border-radius: 6px;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header_buttons .create-text {
  color: var(--white);
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  line-height: 14.52px;
  text-align: center;
  padding: 1px 10px;
  margin-right: 0px;
}

.header_buttons {
  gap: 5px;
  align-items: center;
}

.header_buttons .create-button:disabled {
  cursor: not-allowed;
}

.container-claim .tooltip-content-autocomplete {
  position: absolute;
  top: 110%;
  z-index: 99999;
  padding: 8px;
  font-weight: 400;
  background-color: var(--primary-dark);
  color: var(--white);
  border: 1px solid var(--secondary-light);
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* white-space: nowrap; */
  overflow: visible;
  text-overflow: ellipsis;
  width: 250px;
  /* word-break: break-all; */
}

.container-claim .tooltip-content-autocomplete::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--primary-dark) transparent;
  z-index: 1000;
}

.tooltip-content-kendo-autocomplete,
.tooltip-content-kendo-top-autocomplete {
  position: absolute;
  z-index: 99999;
  padding: 8px;
  background-color: var(--primary-dark);
  color: var(--white);
  border-radius: 4px;
  border: 1px solid var(--secondary-light);
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 170px;
  word-break: normal;
  pointer-events: none;
}

.tooltip-content-kendo-autocomplete::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 10px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--secondary-light) transparent;
  z-index: 1000;
}

.tooltip-content-kendo-top-autocomplete {
  bottom: 100%;
  margin-bottom: 8px;
}

.tooltip-content-kendo-top-autocomplete::after {
  content: '';
  position: absolute;
  bottom: -10px;
  /* Arrow points downward */
  left: 5px;
  /* Arrow appears at the start */
  border-width: 5px;
  border-style: solid;
  border-color: var(--secondary-light) transparent transparent transparent;
  z-index: 9999;
}

.tooltip-icon {
  height: 15px;
  width: 15px;
}

.claim_table_container .k-grid .k-grid-md td,
.claim_table_container .k-grid .k-grid-md .k-table-td,
.claim_table_container .k-grid-md td,
.claim_table_container .k-grid-md .k-table-td {
  padding-block: 8px;
  padding-inline: 4px;
}

.claim_table_container .k-grid .k-grid-md .k-table-th > .k-cell-inner > .k-link,
.claim_table_container .k-grid-md .k-table-th > .k-cell-inner > .k-link {
  padding-block: 8px;
  padding-inline: 4px;
}

.claim_table_container .k-grid-header,
.claim_table_container .k-grid-content {
  padding: 0px;
  margin: 0px;
}
.k-grid-content {
  margin: 0px !important;
}
.k-grid-header {
  padding: 0px !important;
}
.claim_table_container .k-grid .k-table {
  border-collapse: unset;
}

.custom-kendo-table .custom-header1 {
  border-right: 1px solid var(--secondary-light1) !important;
  border-left: 1px solid var(--secondary-light1) !important;
}

.custom-kendo-table .k-input-spinner .k-spin-button {
  display: none !important;
}

.claim_table_container .custom-header1 {
  border-right: 1px solid var(--secondary-light1) !important;
}

.claim_page .search-box {
  width: 180px;
  height: 36px;
  top: 85px;
  left: 104px;
  gap: 0px;
  border-radius: 6px;
  background: #f5f7fa;
  border: 1px solid #d8e1ed;
  padding-left: 5px;
  font-family: 'Inter';
  font-size: 14px;
}

.header-right {
  text-align: right !important;
}

.label-render {
  display: block;
  font-family: Inter;
  font-size: 10px;
  font-weight: 400;
  line-height: 12.1px;
  letter-spacing: 0.08em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #607082;
}

.custom-modal-overlay {
  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: 9999;
}

.custom-modal-container {
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.3s ease-in-out;
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.custom-modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.custom-modal-close {
  cursor: pointer;
  height: 25px;
  width: 25px;
  transition: transform 0.2s ease-in-out;
}

.custom-modal-close:hover {
  transform: scale(1.1);
}

.custom-modal-body {
  margin: 15px 0;
  font-size: 16px;
  color: #555;
}

.custom-select-box-container {
  margin-top: 10px;
}

.custom-select-box-container .form-input-box {
  width: unset;
}

.custom-select-box-label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #444;
  margin-bottom: 5px;
}

.custom-modal-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.custom-btn {
  padding: 10px 18px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.1s ease-in-out;
}

.custom-confirm-btn {
  color: white;
}

.custom-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.custom-cancel-btn {
  background: var(--gray-lighter);
  border: 1px solid #e5ecf6;
  color: var(--primary);
}

.custom-btn:active {
  transform: scale(0.95);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-claim-info-container .select__control.css-13cymwt-control {
  min-height: 25px !important;
  max-height: 25px !important;
  display: flex;
  align-items: flex-start;
  margin-top: 3px;
}

.custom-claim-info-container .css-t3ipsp-control {
  min-height: 30px !important;
  max-height: 30px !important;
}

.css-t3ipsp-control {
  border-color: #c1cede !important;
  min-height: 36px !important;
  box-shadow: none !important;
}

.custom-claim-info-container .css-19bb58m {
  padding-bottom: 0px;
  padding-top: 0px;
}

.custom-claim-info-container .css-1xc3v61-indicatorContainer {
  margin-bottom: 5px;
}

.custom-claim-info-container .css-1u9des2-indicatorSeparator {
  margin-bottom: 11px;
  margin-top: 6px;
}

.custom-claim-info-container .css-1dyz3mf {
  padding: 0px !important;
  margin-top: -1px !important;
  max-height: 30px !important;
}

.custom-claim-info-container .css-1wy0on6 {
  align-items: center;
  max-height: 30px;
}

.custom-claim-info-container .css-3iigni-container {
  max-height: 25px !important;
}

.custom-claim-info-container .css-16xfy0z-control {
  max-height: 25px !important;
  min-height: 25px !important;
  background-color: var(--gray-lighter);
  border: 1px solid #c1cede;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  cursor: default;
  opacity: 0.9;
}

.claim-custom-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px;
  border-radius: 8px;
  background: #f5f7fa;
  color: #59687c;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2eaf4;
  width: 175px;
  height: 57px;
  text-align: left;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  font-family: Inter;
  font-size: 14px;
  text-wrap: nowrap;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.claim-custom-tab:hover {
  background-color: #d0e7ff;
}

.claim-custom-tab.active {
  background: linear-gradient(79.01deg, var(--secondary-light) 7.66%, var(--primary) 103.93%);
  color: white;
  font-weight: bold;
  box-shadow: 0px 4px 6px rgba(0, 123, 255, 0.3);
  backdrop-filter: blur(11.4px);
  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.claim-custom-tab.active .custom-tab-icon {
  background-color: var(--secondary);
  color: white;
}

.dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.dropdown-icon {
  cursor: pointer;
  width: 16px;
  margin-left: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: white;
  height: 40px;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  z-index: 9999;
}

.dropdown-option {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease-in-out;
}

.dropdown-option:hover {
  background-color: #e3f2fd;
  border-radius: 4px;
}

.btn {
  font-family: Inter, sans-serif !important;
}

.lead-heading {
  height: 42px;
  background: var(--primary-light);
  font-family: Inter, sans-serif !important;
  width: auto;
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
}

.lead-heading-alt {
  height: 35px;
}

.lead-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-dark);
}

.lead-action {
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  min-height: 22px;
  min-width: 85px;
}

.lead-action-view_eob {
  background: var(--primary-dark);
}

.lead-action-view_eop {
  background: var(--primary);
}

.lead-body {
  background: var(--primary-light);
  border: 1px solid var(--primary-light);
  width: auto;
  border-radius: 0 0 6px 6px;
}

.lead-body-section {
  padding: 15px;
}

.lead-body-section-2 {
  padding: 8px 15px;
}

.lead-divider {
  padding: 0 15px;
  width: 98%;
  margin: 0 auto;
  color: var(--primary-light);
  opacity: 1;
}

.lead-divider-alt {
  width: 100%;
  margin: 0 auto;
  color: #ecf0f5;
  opacity: 1;
}

.lead-body-element {
  display: flex;
  flex-direction: column;
  font-family: Inter, sans-serif !important;
}

.lead-body-title {
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  color: #607082;
}
.lead-body-title-custom-spacing {
  letter-spacing: 0.6px;
  word-spacing: normal;
}
.lead-body-value {
  font-weight: 500;
  font-size: 14px;
  text-transform: capitalize;
  color: #2e343b;
}

.lead-pill {
  min-height: 22px;
  border-radius: 6px;
  background-color: var(--secondary-light1);
  color: var(--primary-dark);
  padding: 0 7px 0 6px;
  font-weight: 600;
  width: fit-content;
}

.lead-link {
  font-weight: 700;
  color: var(--primary-dark);
  cursor: pointer;
  text-decoration: underline;
}

.grid-border-color {
  border: 1px solid var(--primary-light) !important;
}

.text-small {
  font-size: 10px;
}

.text-normal {
  font-size: 12px !important;
}

.text-large {
  font-size: 14px !important;
}

.tcBtn {
  background-color: var(--gray-lighter);
  color: var(--primary);
  height: 36px;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 0 14px;
  border-radius: 6px;
}

.tcBtn:hover {
  background-color: var(--primary);
  color: var(--white);
}

.headerActionBtn {
  background-color: var(--primary-light);
  color: var(--primary);
  height: 30px;
  font-weight: 600;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 0 14px;
  border-radius: 6px;
}

.headerActionBtn:hover {
  background-color: var(--primary);
  color: var(--white);
}
.grid-btn-primary {
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

.grid-btn-primary:hover {
    color: var(--primary);
}
.grid-btn {
  color: var(--svg-tangerine);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.grid-btn:hover {
  color: var(--primary);
}

.grid-btn-dec {
    color: #721c24;;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
}

.grid-btn-dec:hover {
    color: var(--primary);
}
.status-base {
  height: 22px;
  padding: 5px 7px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
}

.status-processed-alt {
  background-color: #eaf9f7;
  border: 1px solid #bde6e1;
  color: var(--success);
}

.status-declined-alt {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.status-pending-alt {
  background-color: #fff8e2;
  border: 1px solid #ffe1b5;
  color: var(--warning);
}

.tc-box {
  border-radius: 14px;
  background-color: var(--gray-lighter);
  padding: 15px;
  margin: 0;
}

.history-scroll {
  overflow-y: auto;
  flex: 1;
}

.tc-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.tc-label-value {
  font-weight: 600;
}

.k-multiselect.k-disabled {
  cursor: not-allowed;
  border: 1px solid #ecf1f9 !important;
  color: #000 !important;
  background: var(--gray-lighter) !important;
  border: 1px solid #c1cede !important;
}

.k-multiselect.k-disabled .k-input-inner {
  background: var(--gray-lighter) !important;
  color: #000 !important;
  cursor: not-allowed;
}

.k-window-title {
  text-decoration: none;
  color: var(--secondary-darker, var(--primary));
  font-size: 14px;
  font-style: normal;
  line-height: 30px;
}

.customcol-1 {
  flex: 0 0 auto;
  width: 12.666667%;
  padding-right: 1px;
}

.customcol-2 {
  flex: 0 0 auto;
  width: 16.666667%;
  padding-right: 1px;
}

.customcol-4 {
  flex: 0 0 auto;
  width: 44.3%;
  padding-right: 1px;
}

.loading .main-container {
  visibility: hidden;
}

.k-tooltip {
  background-color: var(--primary-dark);
  border-color: var(--secondary-light);
  color: var(--white);
  border: 1px solid var(--secondary-light);
  padding: 0;
  box-shadow: 0px 4px 10px 0px #0d374d42;
  border-radius: 6px;
}

.k-tooltip-content {
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
}

.k-animation-container .custom-tooltip-popup,
.k-animation-container .k-tooltip.custom-tooltip-popup {
  background-color: var(--primary-dark);
  border-color: var(--secondary-light);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0px 4px 10px 0px #0d374d42;
  max-width: 300px;
  z-index: 10000;
}

.k-animation-container.custom-tooltip {
  z-index: 9999 !important;
}

.custom-tooltip-content {
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  white-space: pre-line;
  word-wrap: break-word;
  padding: 5px;
  max-width: 170px;
}

.k-tooltip .k-callout-n,
.k-tooltip .k-callout-s,
.k-tooltip .k-callout-w,
.k-tooltip .k-callout-e,
.k-animation-container .custom-tooltip-popup .k-callout-n,
.k-animation-container .custom-tooltip-popup .k-callout-s,
.k-animation-container .custom-tooltip-popup .k-callout-w,
.k-animation-container .custom-tooltip-popup .k-callout-e {
  border-color: transparent;
  /* border-width: 12px; */
}

.k-tooltip .k-callout-n,
.k-animation-container .custom-tooltip-popup .k-callout-n {
  border-bottom-color: var(--primary-dark);
}

.k-tooltip .k-callout-s,
.k-animation-container .custom-tooltip-popup .k-callout-s {
  border-top-color: var(--primary-dark);
}

.k-tooltip .k-callout-w,
.k-animation-container .custom-tooltip-popup .k-callout-w {
  border-right-color: var(--primary-dark);
}

.k-tooltip .k-callout-e,
.k-animation-container .custom-tooltip-popup .k-callout-e {
  border-left-color: var(--primary-dark);
}

.k-tooltip.black-tooltip,
.k-animation-container .black-tooltip-popup {
  background-color: rgba(0, 0, 0, 0.8);
  border: none;
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
}

/* .k-tooltip .k-callout {
  margin: -12px;
} */

.tooltip-wrapper {
  position: relative;
  cursor: pointer;
}

.tooltip-wrapper-addressautocomplete {
  position: relative;
  cursor: pointer;
}

.tooltip-content-wrapper {
  pointer-events: none !important;
}

.tooltip-target:hover {
  opacity: 0.9;
  cursor: pointer;
}

.number-col-header .k-cell-inner .k-link {
  justify-content: flex-end;
}

.center-col-header .k-cell-inner .k-link {
  justify-content: center;
}

.rounded-table {
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

.rounded-table th:first-child {
  border-top-left-radius: 8px;
}

.rounded-table th:last-child {
  border-top-right-radius: 8px;
}

.rounded-table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.rounded-table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.required-date-status {
  white-space: nowrap;
  width: 98px;
  text-align: center;
  cursor: pointer;
  padding: 3px 0;
  border-radius: 2px;
}

.refresh-button {
  width: 70px;
  background: var(--secondary);
  color: white;
  font-size: 12px;
  height: 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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

.nv-workflowContainer {
  display: none;
}

button.nv-preferences__button {
  display: none !important;
}

.nt-text-stripes {
  display: none !important;
}

a[href*='go.novu.co/powered'] {
  display: none !important;
}

.k-disabled [disabled] {
  background-color: var(--gray-lighter);
}

.nv-bellIcon {
  height: 20px !important;
  width: 20px !important;
}

.nv-bellDot {
  height: 10px !important;
  width: 10px !important;
}

.custom-tab-item {
  z-index: 99 !important;
}

.nv-popoverContent {
  z-index: 100 !important;
}

.nv-inboxContent {
  font-family: Inter, sans-serif !important;
}

.nv-inboxContent > :nth-child(3) {
  display: none;
}

.nv-notificationPrimaryAction__button {
  background-color: #134e6c !important;
  box-shadow: none !important;
}

.nv-dropdownContent {
  z-index: 101 !important;
  font-family: Inter, sans-serif !important;
}
.no-records-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem; /* py-12 */
  padding-bottom: 3rem; /* py-12 */
  text-align: center;
  color: var(--primary); /* text-muted-foreground */
}

.no-records-icon {
  height: 3rem; /* h-12 */
  width: 3rem; /* w-12 */
  margin-bottom: 1rem; /* mb-4 */
  color: var(--primary);
}

.no-records-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}

.two-box {
  line-height: 2.5;
  font-size: 14px;
}

.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
  color: var(--primary);
}

.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
  color: var(--primary);
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: var(--secondary-light);
  color: rgb(0, 0, 0);
}
.absence-request-custom-header-p {
  padding-left: 23px;
  padding-bottom: 9px;
}
.h-100vh {
  height: 100vh;
}
.cost-share-details-tbl {
  border-spacing: 2px;
  border-collapse: separate;
}
.cost-share-w-105 {
  width: 105px;
}
.cost-share-w-150 {
  width: 150px;
}
.cost-share-w-145 {
  width: 145px;
}
.cost-share-line-adding-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.cost-share-line-adding-enabled {
  pointer-events: auto;
  opacity: 1;
}

.build_ver_label {
  font-size: 0.5rem !important;
}

.font-inter {
  font-family: Inter;
}

.k-button-solid-primary,
.k-button.k-button-solid-primary:hover,
.k-button.k-button-solid-primary:focus {
  border-color: var(--primary);
  color: var(--primary-light);
  background-color: var(--primary);
}
.custom-date-picker .react-datepicker__input-container input::placeholder,
.custom-date-picker-claim::placeholder {
  font-size: 14px !important;
  line-height: 14.52px;
}

.rowclick-link {
  color: var(--rowclick-link);
  cursor: pointer;
  text-decoration: underline;
}
.feeschedule-body {
  background: var(--primary-light);
  border: 1px solid var(--primary-light);
  width: auto;
  border-radius: 6px;
}

.color-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.react-pdf__Page__textContent.textLayer,
.react-pdf__Page__annotations.annotationLayer,
#pdf-controls {
  display: none !important;
}

#msdoc-iframe {
  min-height: 600px;
  width: 100% !important;
}

.custom-masked-input input {
  letter-spacing: 0.5px;
}

.default-text-color {
  color: var(--primary-dark);
}
.radio-button-label {
  font-size: 14px;
}

.esrd-btn {
  height: 20px;
  border-radius: 4px;
  background: #ce4d4d;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0 6px;
  margin-top: 0;
  font-size: 14px;
}

.pill-style{
  border-radius: 50rem;
  background: var(--primary-regular, var(--primary));
  width: 4px;
  height: 16px;
  display: inline-block;
}

body {
   --nv-color-background: oklch(from #FCFCFC l c h);
    --nv-color-foreground: oklch(from #1A1523 l c h);
    --nv-color-primary: oklch(from #7D52F4 l c h);
    --nv-color-primary-foreground: oklch(from white l c h);
    --nv-color-secondary: oklch(from #FFFFFF l c h);
    --nv-color-secondary-foreground: oklch(from #646464 l c h);
    --nv-color-counter: oklch(from #FB3748 l c h);
    --nv-color-counter-foreground: oklch(from white l c h);
    --nv-color-shadow: oklch(from rgb(0, 0, 0) l c h);
    --nv-color-ring: oklch(from #E1E4EA l c h);
    --nv-color-stripes: oklch(from #FF9A68 l c h);
    --nv-color-background-alpha-25: oklch(from #FCFCFC l c h / 0.025);
    --nv-color-background-alpha-50: oklch(from #FCFCFC l c h / 0.05);
    --nv-color-background-alpha-100: oklch(from #FCFCFC l c h / 0.1);
    --nv-color-background-alpha-200: oklch(from #FCFCFC l c h / 0.2);
    --nv-color-background-alpha-300: oklch(from #FCFCFC l c h / 0.3);
    --nv-color-background-alpha-400: oklch(from #FCFCFC l c h / 0.4);
    --nv-color-background-alpha-500: oklch(from #FCFCFC l c h / 0.5);
    --nv-color-background-alpha-600: oklch(from #FCFCFC l c h / 0.6);
    --nv-color-background-alpha-700: oklch(from #FCFCFC l c h / 0.7);
    --nv-color-background-alpha-800: oklch(from #FCFCFC l c h / 0.8);
    --nv-color-background-alpha-900: oklch(from #FCFCFC l c h / 0.9);
    --nv-color-foreground-alpha-25: oklch(from #1A1523 l c h / 0.025);
    --nv-color-foreground-alpha-50: oklch(from #1A1523 l c h / 0.05);
    --nv-color-foreground-alpha-100: oklch(from #1A1523 l c h / 0.1);
    --nv-color-foreground-alpha-200: oklch(from #1A1523 l c h / 0.2);
    --nv-color-foreground-alpha-300: oklch(from #1A1523 l c h / 0.3);
    --nv-color-foreground-alpha-400: oklch(from #1A1523 l c h / 0.4);
    --nv-color-foreground-alpha-500: oklch(from #1A1523 l c h / 0.5);
    --nv-color-foreground-alpha-600: oklch(from #1A1523 l c h / 0.6);
    --nv-color-foreground-alpha-700: oklch(from #1A1523 l c h / 0.7);
    --nv-color-foreground-alpha-800: oklch(from #1A1523 l c h / 0.8);
    --nv-color-foreground-alpha-900: oklch(from #1A1523 l c h / 0.9);
    --nv-color-primary-25: oklch(from #7D52F4 min(1, calc(l + 0.475 * (1 - l))) c h);
    --nv-color-primary-50: oklch(from #7D52F4 min(1, calc(l + 0.45 * (1 - l))) c h);
    --nv-color-primary-100: oklch(from #7D52F4 min(1, calc(l + 0.4 * (1 - l))) c h);
    --nv-color-primary-200: oklch(from #7D52F4 min(1, calc(l + 0.3 * (1 - l))) c h);
    --nv-color-primary-300: oklch(from #7D52F4 min(1, calc(l + 0.2 * (1 - l))) c h);
    --nv-color-primary-400: oklch(from #7D52F4 min(1, calc(l + 0.1 * (1 - l))) c h);
    --nv-color-primary-500: oklch(from #7D52F4 l c h);
    --nv-color-primary-600: oklch(from #7D52F4 max(0, calc(l * (1 + -0.1))) c h);
    --nv-color-primary-700: oklch(from #7D52F4 max(0, calc(l * (1 + -0.2))) c h);
    --nv-color-primary-800: oklch(from #7D52F4 max(0, calc(l * (1 + -0.3))) c h);
    --nv-color-primary-900: oklch(from #7D52F4 max(0, calc(l * (1 + -0.4))) c h);
    --nv-color-primary-alpha-25: oklch(from #7D52F4 l c h / 0.025);
    --nv-color-primary-alpha-50: oklch(from #7D52F4 l c h / 0.05);
    --nv-color-primary-alpha-100: oklch(from #7D52F4 l c h / 0.1);
    --nv-color-primary-alpha-200: oklch(from #7D52F4 l c h / 0.2);
    --nv-color-primary-alpha-300: oklch(from #7D52F4 l c h / 0.3);
    --nv-color-primary-alpha-400: oklch(from #7D52F4 l c h / 0.4);
    --nv-color-primary-alpha-500: oklch(from #7D52F4 l c h / 0.5);
    --nv-color-primary-alpha-600: oklch(from #7D52F4 l c h / 0.6);
    --nv-color-primary-alpha-700: oklch(from #7D52F4 l c h / 0.7);
    --nv-color-primary-alpha-800: oklch(from #7D52F4 l c h / 0.8);
    --nv-color-primary-alpha-900: oklch(from #7D52F4 l c h / 0.9);
    --nv-color-primary-foreground-alpha-25: oklch(from white l c h / 0.025);
    --nv-color-primary-foreground-alpha-50: oklch(from white l c h / 0.05);
    --nv-color-primary-foreground-alpha-100: oklch(from white l c h / 0.1);
    --nv-color-primary-foreground-alpha-200: oklch(from white l c h / 0.2);
    --nv-color-primary-foreground-alpha-300: oklch(from white l c h / 0.3);
    --nv-color-primary-foreground-alpha-400: oklch(from white l c h / 0.4);
    --nv-color-primary-foreground-alpha-500: oklch(from white l c h / 0.5);
    --nv-color-primary-foreground-alpha-600: oklch(from white l c h / 0.6);
    --nv-color-primary-foreground-alpha-700: oklch(from white l c h / 0.7);
    --nv-color-primary-foreground-alpha-800: oklch(from white l c h / 0.8);
    --nv-color-primary-foreground-alpha-900: oklch(from white l c h / 0.9);
    --nv-color-secondary-25: oklch(from #FFFFFF min(1, calc(l + 0.475 * (1 - l))) c h);
    --nv-color-secondary-50: oklch(from #FFFFFF min(1, calc(l + 0.45 * (1 - l))) c h);
    --nv-color-secondary-100: oklch(from #FFFFFF min(1, calc(l + 0.4 * (1 - l))) c h);
    --nv-color-secondary-200: oklch(from #FFFFFF min(1, calc(l + 0.3 * (1 - l))) c h);
    --nv-color-secondary-300: oklch(from #FFFFFF min(1, calc(l + 0.2 * (1 - l))) c h);
    --nv-color-secondary-400: oklch(from #FFFFFF min(1, calc(l + 0.1 * (1 - l))) c h);
    --nv-color-secondary-500: oklch(from #FFFFFF l c h);
    --nv-color-secondary-600: oklch(from #FFFFFF max(0, calc(l * (1 + -0.1))) c h);
    --nv-color-secondary-700: oklch(from #FFFFFF max(0, calc(l * (1 + -0.2))) c h);
    --nv-color-secondary-800: oklch(from #FFFFFF max(0, calc(l * (1 + -0.3))) c h);
    --nv-color-secondary-900: oklch(from #FFFFFF max(0, calc(l * (1 + -0.4))) c h);
    --nv-color-secondary-alpha-25: oklch(from #FFFFFF l c h / 0.025);
    --nv-color-secondary-alpha-50: oklch(from #FFFFFF l c h / 0.05);
    --nv-color-secondary-alpha-100: oklch(from #FFFFFF l c h / 0.1);
    --nv-color-secondary-alpha-200: oklch(from #FFFFFF l c h / 0.2);
    --nv-color-secondary-alpha-300: oklch(from #FFFFFF l c h / 0.3);
    --nv-color-secondary-alpha-400: oklch(from #FFFFFF l c h / 0.4);
    --nv-color-secondary-alpha-500: oklch(from #FFFFFF l c h / 0.5);
    --nv-color-secondary-alpha-600: oklch(from #FFFFFF l c h / 0.6);
    --nv-color-secondary-alpha-700: oklch(from #FFFFFF l c h / 0.7);
    --nv-color-secondary-alpha-800: oklch(from #FFFFFF l c h / 0.8);
    --nv-color-secondary-alpha-900: oklch(from #FFFFFF l c h / 0.9);
    --nv-color-secondary-foreground-alpha-25: oklch(from #646464 l c h / 0.025);
    --nv-color-secondary-foreground-alpha-50: oklch(from #646464 l c h / 0.05);
    --nv-color-secondary-foreground-alpha-100: oklch(from #646464 l c h / 0.1);
    --nv-color-secondary-foreground-alpha-200: oklch(from #646464 l c h / 0.2);
    --nv-color-secondary-foreground-alpha-300: oklch(from #646464 l c h / 0.3);
    --nv-color-secondary-foreground-alpha-400: oklch(from #646464 l c h / 0.4);
    --nv-color-secondary-foreground-alpha-500: oklch(from #646464 l c h / 0.5);
    --nv-color-secondary-foreground-alpha-600: oklch(from #646464 l c h / 0.6);
    --nv-color-secondary-foreground-alpha-700: oklch(from #646464 l c h / 0.7);
    --nv-color-secondary-foreground-alpha-800: oklch(from #646464 l c h / 0.8);
    --nv-color-secondary-foreground-alpha-900: oklch(from #646464 l c h / 0.9);
    --nv-color-neutral-alpha-25: oklch(from #525252 l c h / 0.025);
    --nv-color-neutral-alpha-50: oklch(from #525252 l c h / 0.05);
    --nv-color-neutral-alpha-100: oklch(from #525252 l c h / 0.1);
    --nv-color-neutral-alpha-200: oklch(from #525252 l c h / 0.2);
    --nv-color-neutral-alpha-300: oklch(from #525252 l c h / 0.3);
    --nv-color-neutral-alpha-400: oklch(from #525252 l c h / 0.4);
    --nv-color-neutral-alpha-500: oklch(from #525252 l c h / 0.5);
    --nv-color-neutral-alpha-600: oklch(from #525252 l c h / 0.6);
    --nv-color-neutral-alpha-700: oklch(from #525252 l c h / 0.7);
    --nv-color-neutral-alpha-800: oklch(from #525252 l c h / 0.8);
    --nv-color-neutral-alpha-900: oklch(from #525252 l c h / 0.9);
    --nv-font-size-xs: calc(1rem * 0.65625);
    --nv-line-height-xs: calc(1rem * 0.65625 * 1.33);
    --nv-font-size-sm: calc(1rem * 0.765625);
    --nv-line-height-sm: calc(1rem * 0.765625 * 1.33);
    --nv-font-size-base: calc(1rem * 0.875);
    --nv-line-height-base: calc(1rem * 0.875 * 1.33);
    --nv-font-size-lg: calc(1rem * 0.984375);
    --nv-line-height-lg: calc(1rem * 0.984375 * 1.33);
    --nv-font-size-xl: calc(1rem * 1.09375);
    --nv-line-height-xl: calc(1rem * 1.09375 * 1.33);
    --nv-font-size-2xl: calc(1rem * 1.3125);
    --nv-line-height-2xl: calc(1rem * 1.3125 * 1.33);
    --nv-font-size-3xl: calc(1rem * 1.640625);
    --nv-line-height-3xl: calc(1rem * 1.640625 * 1.33);
    --nv-font-size-4xl: calc(1rem * 1.96875);
    --nv-line-height-4xl: calc(1rem * 1.96875 * 1.33);
    --nv-radius-none: 0px;
    --nv-radius-xs: calc(0.375rem * 0.333);
    --nv-radius-sm: calc(0.375rem * 0.667);
    --nv-radius-md: calc(0.375rem * 1);
    --nv-radius-lg: calc(0.375rem * 1.333);
    --nv-radius-xl: calc(0.375rem * 2);
    --nv-radius-2xl: calc(0.375rem * 2.667);
    --nv-radius-3xl: calc(0.375rem * 4);
    --nv-radius-full: 9999px;
}
.novu {
  scrollbar-color: var(--nv-color-secondary-foreground-alpha-300) #0000;

  :where(*),
  :where(*) :after,
  :where(*) :before,
  :where(*):after,
  :where(*):before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box
  }

  :where(html, :host) {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent
  }

  :where(body) {
    line-height: inherit;
    margin: 0
  }

  :where(hr) {
    border-top-width: 1px;
    color: inherit;
    height: 0
  }

  :where(abbr:where([title])) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit
  }

  :where(a) {
    color: inherit;
    text-decoration: inherit
  }

  :where(b, strong) {
    font-weight: bolder
  }

  :where(code, kbd, samp, pre) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-size: 1em;
    font-variation-settings: normal
  }

  :where(small) {
    font-size: 80%
  }

  :where(sub, sup) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: initial
  }

  :where(sub) {
    bottom: -.25em
  }

  :where(sup) {
    top: -.5em
  }

  :where(table) {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
  }

  :where(button, input, optgroup, select, textarea) {
    color: inherit;
    font-family: inherit;
    font-feature-settings: inherit;
    font-size: 100%;
    font-variation-settings: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0
  }

  :where(button, select) {
    text-transform: none
  }

  :where(button, input:where([type=button]), input:where([type=reset]), input:where([type=submit])) {
    -webkit-appearance: button;
    background-color: initial;
    background-image: none
  }

  :where(:-moz-focusring) {
    outline: auto
  }

  :where(:-moz-ui-invalid) {
    box-shadow: none
  }

  :where(progress) {
    vertical-align: initial
  }

  :where(*)::-webkit-inner-spin-button,
  :where(*)::-webkit-outer-spin-button {
    height: auto
  }

  :where([type=search]) {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }

  :where(*)::-webkit-search-decoration {
    -webkit-appearance: none
  }

  :where(*)::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }

  :where(summary) {
    display: list-item
  }

  :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
    margin: 0
  }

  :where(fieldset) {
    margin: 0;
    padding: 0
  }

  :where(legend) {
    padding: 0
  }

  :where(ol, ul, menu) {
    list-style: none;
    margin: 0;
    padding: 0
  }

  :where(dialog) {
    padding: 0
  }

  :where(textarea) {
    resize: vertical
  }

  :where(input)::placeholder,
  :where(textarea)::placeholder {
    color: #9ca3af;
    opacity: 1
  }

  :where(button, [role=button]) {
    cursor: pointer
  }

  :where(:disabled) {
    cursor: default
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle
  }

  :where(img, video) {
    height: auto;
    max-width: 100%
  }

  :where([hidden]) {
    display: none
  }

  :where(*),
  :where(*) :after,
  :where(*) :before,
  :where(*):after,
  :where(*):before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  :where(*) ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  ::-webkit-scrollbar {
    height: .5rem;
    width: .5rem
  }

  ::-webkit-scrollbar-thumb {
    background-clip: "padding-box";
    background-color: var(--nv-color-secondary-foreground-alpha-300);
    border-radius: .25rem
  }

  ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-track {
    background-color: initial
  }

  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
  }

  input[type=number] {
    -moz-appearance: textfield
  }
}

.nt-sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  white-space: nowrap
}

.\!nt-pointer-events-auto {
  pointer-events: auto !important
}

.nt-invisible {
  visibility: hidden
}

.nt-absolute {
  position: absolute
}

.nt-relative {
  position: relative
}

.nt-inset-0 {
  inset: 0
}

.nt-inset-2 {
  inset: .5rem
}

.nt-left-0\.5 {
  left: .125rem
}

.nt-right-0 {
  right: 0
}

.nt-right-3 {
  right: .75rem
}

.nt-top-0 {
  top: 0
}

.nt-top-0\.5 {
  top: .125rem
}

.nt-top-3 {
  top: .75rem
}

.nt-z-10 {
  z-index: 10
}

.nt-z-\[-1\] {
  z-index: -1
}

.nt-mx-auto {
  margin-left: auto;
  margin-right: auto
}

.nt--mt-\[50px\] {
  margin-top: -50px
}

.nt-mb-1 {
  margin-bottom: .25rem
}

.nt-mb-2 {
  margin-bottom: .5rem
}

.nt-mb-4 {
  margin-bottom: 1rem
}

.nt-mb-\[0\.625rem\] {
  margin-bottom: .625rem
}

.nt-ml-1 {
  margin-left: .25rem
}

.nt-ml-2 {
  margin-left: .5rem
}

.nt-ml-auto {
  margin-left: auto
}

.nt-mr-2 {
  margin-right: .5rem
}

.nt-mr-auto {
  margin-right: auto
}

.nt-mt-1 {
  margin-top: .25rem
}

.nt-mt-auto {
  margin-top: auto
}

.nt-block {
  display: block
}

.nt-flex {
  display: flex
}

.nt-inline-flex {
  display: inline-flex
}

.nt-grid {
  display: grid
}

.nt-hidden {
  display: none
}

.nt-aspect-square {
  aspect-ratio: 1/1
}

.nt-size-1\.5 {
  height: .375rem;
  width: .375rem
}

.nt-size-2 {
  height: .5rem;
  width: .5rem
}

.nt-size-2\.5 {
  height: .625rem;
  width: .625rem
}

.nt-size-3 {
  height: .75rem;
  width: .75rem
}

.nt-size-3\.5 {
  height: .875rem;
  width: .875rem
}

.nt-size-4 {
  height: 1rem;
  width: 1rem
}

.nt-size-5 {
  height: 1.25rem;
  width: 1.25rem
}

.nt-size-8 {
  height: 2rem;
  width: 2rem
}

.nt-size-fit {
  height: fit-content;
  width: fit-content
}

.nt-size-full {
  height: 100%;
  width: 100%
}

.nt-h-2 {
  height: .5rem
}

.nt-h-3 {
  height: .75rem
}

.nt-h-4 {
  height: 1rem
}

.nt-h-5 {
  height: 1.25rem
}

.nt-h-7 {
  height: 1.75rem
}

.nt-h-8 {
  height: 2rem
}

.nt-h-9 {
  height: 2.25rem
}

.nt-h-\[600px\] {
  height: 600px
}

.nt-h-fit {
  height: fit-content
}

.nt-h-full {
  height: 100%
}

.nt-min-h-0 {
  min-height: 0
}

.nt-w-1\/3 {
  width: 33.333333%
}

.nt-w-2\/3 {
  width: 66.666667%
}

.nt-w-5 {
  width: 1.25rem
}

.nt-w-7 {
  width: 1.75rem
}

.nt-w-8 {
  width: 2rem
}

.nt-w-\[260px\] {
  width: 260px
}

.nt-w-\[400px\] {
  width: 400px
}

.nt-w-\[60px\] {
  width: 60px
}

.nt-w-\[calc\(2ch\+2rem\)\] {
  width: calc(2ch + 2rem)
}

.nt-w-fit {
  width: fit-content
}

.nt-w-full {
  width: 100%
}

.nt-w-max {
  width: max-content
}

.nt-min-w-52 {
  min-width: 13rem
}

.nt-flex-1 {
  flex: 1 1 0%
}

.nt-shrink-0 {
  flex-shrink: 0
}

.nt-translate-x-1\/2 {
  --tw-translate-x: 50%
}

.nt-transform,
.nt-translate-x-1\/2 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.nt-cursor-default {
  cursor: default
}

.nt-cursor-not-allowed {
  cursor: not-allowed
}

.nt-cursor-pointer {
  cursor: pointer
}

.nt-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.nt-flex-row {
  flex-direction: row
}

.nt-flex-col {
  flex-direction: column
}

.nt-flex-wrap {
  flex-wrap: wrap
}

.nt-flex-nowrap {
  flex-wrap: nowrap
}

.nt-items-start {
  align-items: flex-start
}

.nt-items-center {
  align-items: center
}

.nt-justify-end {
  justify-content: flex-end
}

.nt-justify-center {
  justify-content: center
}

.nt-justify-between {
  justify-content: space-between
}

.nt-gap-0\.5 {
  gap: .125rem
}

.nt-gap-1 {
  gap: .25rem
}

.nt-gap-1\.5 {
  gap: .375rem
}

.nt-gap-2 {
  gap: .5rem
}

.nt-gap-3 {
  gap: .75rem
}

.nt-gap-4 {
  gap: 1rem
}

.nt-gap-6 {
  gap: 1.5rem
}

.nt-gap-8 {
  gap: 2rem
}

.nt-self-stretch {
  align-self: stretch
}

.nt-overflow-auto {
  overflow: auto
}

.nt-overflow-hidden {
  overflow: hidden
}

.nt-overflow-y-auto {
  overflow-y: auto
}

.nt-truncate {
  overflow: hidden;
  text-overflow: ellipsis
}

.nt-truncate,
.nt-whitespace-nowrap {
  white-space: nowrap
}

.nt-whitespace-pre-wrap {
  white-space: pre-wrap
}

.nt-rounded {
  border-radius: var(--nv-radius-base)
}

.nt-rounded-full {
  border-radius: var(--nv-radius-full)
}

.nt-rounded-lg {
  border-radius: var(--nv-radius-lg)
}

.nt-rounded-md {
  border-radius: var(--nv-radius-md)
}

.nt-rounded-sm {
  border-radius: var(--nv-radius-sm)
}

.nt-rounded-xl {
  border-radius: var(--nv-radius-xl)
}

.nt-border {
  border-width: 1px
}

.nt-border-b {
  border-bottom-width: 1px
}

.nt-border-t {
  border-top-width: 1px
}

.nt-border-background {
  border-color: var(--nv-color-background)
}

.nt-border-border {
  border-color: var(--nv-color-neutral-alpha-100)
}

.nt-border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229/var(--tw-border-opacity, 1))
}

.nt-border-neutral-alpha-100 {
  border-color: var(--nv-color-neutral-alpha-100)
}

.nt-border-neutral-alpha-200 {
  border-color: var(--nv-color-neutral-alpha-200)
}

.nt-border-neutral-alpha-400 {
  border-color: var(--nv-color-neutral-alpha-400)
}

.nt-border-neutral-alpha-50 {
  border-color: var(--nv-color-neutral-alpha-50)
}

.nt-border-t-neutral-alpha-200 {
  border-top-color: var(--nv-color-neutral-alpha-200)
}

.nt-bg-\[oklch\(from_var\(--nv-color-stripes\)_l_c_h_\/_0\.1\)\] {
  background-color: oklch(from var(--nv-color-stripes) l c h/.1)
}

.nt-bg-background {
  background-color: var(--nv-color-background)
}

.nt-bg-counter {
  background-color: var(--nv-color-counter)
}

.nt-bg-foreground {
  background-color: var(--nv-color-foreground)
}

.nt-bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23/var(--tw-bg-opacity, 1))
}

.nt-bg-neutral-alpha-100 {
  background-color: var(--nv-color-neutral-alpha-100)
}

.nt-bg-neutral-alpha-25 {
  background-color: var(--nv-color-neutral-alpha-25)
}

.nt-bg-neutral-alpha-300 {
  background-color: var(--nv-color-neutral-alpha-300)
}

.nt-bg-neutral-alpha-50 {
  background-color: var(--nv-color-neutral-alpha-50)
}

.nt-bg-primary {
  background-color: var(--nv-color-primary)
}

.nt-bg-primary-alpha-300 {
  background-color: var(--nv-color-primary-alpha-300)
}

.nt-bg-primary-alpha-400 {
  background-color: var(--nv-color-primary-alpha-400)
}

.nt-bg-secondary {
  background-color: var(--nv-color-secondary)
}

.nt-bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.nt-bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.nt-bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.nt-from-foreground-alpha-50 {
  --tw-gradient-from: var(--nv-color-foreground-alpha-50) var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.nt-from-primary-foreground-alpha-200 {
  --tw-gradient-from: var(--nv-color-primary-foreground-alpha-200) var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.nt-from-transparent {
  --tw-gradient-from: #0000 var(--tw-gradient-from-position);
  --tw-gradient-to: #0000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.nt-from-20\% {
  --tw-gradient-from-position: 20%
}

.nt-to-background {
  --tw-gradient-to: var(--nv-color-background) var(--tw-gradient-to-position)
}

.nt-to-transparent {
  --tw-gradient-to: #0000 var(--tw-gradient-to-position)
}

.nt-object-cover {
  object-fit: cover
}

.nt-p-0 {
  padding: 0
}

.nt-p-0\.5 {
  padding: .125rem
}

.nt-p-1 {
  padding: .25rem
}

.nt-p-2 {
  padding: .5rem
}

.nt-p-2\.5 {
  padding: .625rem
}

.nt-p-3 {
  padding: .75rem
}

.nt-p-4 {
  padding: 1rem
}

.nt-px-1 {
  padding-left: .25rem;
  padding-right: .25rem
}

.nt-px-2 {
  padding-left: .5rem;
  padding-right: .5rem
}

.nt-px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}

.nt-px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.nt-px-8 {
  padding-left: 2rem;
  padding-right: 2rem
}

.nt-px-\[6px\] {
  padding-left: 6px;
  padding-right: 6px
}

.nt-py-1 {
  padding-bottom: .25rem;
  padding-top: .25rem
}

.nt-py-2 {
  padding-bottom: .5rem;
  padding-top: .5rem
}

.nt-py-3 {
  padding-bottom: .75rem;
  padding-top: .75rem
}

.nt-py-3\.5 {
  padding-bottom: .875rem;
  padding-top: .875rem
}

.nt-py-4 {
  padding-bottom: 1rem;
  padding-top: 1rem
}

.nt-py-px {
  padding-bottom: 1px;
  padding-top: 1px
}

.nt-pb-2 {
  padding-bottom: .5rem
}

.nt-pb-\[0\.625rem\] {
  padding-bottom: .625rem
}

.nt-pr-0 {
  padding-right: 0
}

.nt-pt-2\.5 {
  padding-top: .625rem
}

.nt-text-center {
  text-align: center
}

.nt-text-start {
  text-align: start
}

.nt-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

.nt-text-\[0\.8rem\] {
  font-size: .8rem
}

.nt-text-\[12px\] {
  font-size: 12px
}

.nt-text-base {
  font-size: var(--nv-font-size-base);
  line-height: var(--nv-line-height-base)
}

.nt-text-sm {
  font-size: var(--nv-font-size-sm);
  line-height: var(--nv-line-height-sm)
}

.nt-text-xl {
  font-size: var(--nv-font-size-xl);
  line-height: var(--nv-line-height-xl)
}

.nt-text-xs {
  font-size: var(--nv-font-size-xs);
  line-height: var(--nv-line-height-xs)
}

.nt-font-medium {
  font-weight: 500
}

.nt-font-normal {
  font-weight: 400
}

.nt-font-semibold {
  font-weight: 600
}

.nt-leading-none {
  line-height: 1
}

.nt-text-\[\#000000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.nt-text-background {
  color: var(--nv-color-background)
}

.nt-text-counter-foreground {
  color: var(--nv-color-counter-foreground)
}

.nt-text-foreground {
  color: var(--nv-color-foreground)
}

.nt-text-foreground-alpha-300 {
  color: var(--nv-color-foreground-alpha-300)
}

.nt-text-foreground-alpha-400 {
  color: var(--nv-color-foreground-alpha-400)
}

.nt-text-foreground-alpha-600 {
  color: var(--nv-color-foreground-alpha-600)
}

.nt-text-foreground-alpha-700 {
  color: var(--nv-color-foreground-alpha-700)
}

.nt-text-primary-foreground {
  color: var(--nv-color-primary-foreground)
}

.nt-text-secondary-foreground {
  color: var(--nv-color-secondary-foreground)
}

.nt-text-stripes {
  color: var(--nv-color-stripes)
}

.nt-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.nt-underline {
  text-decoration-line: underline
}

.nt-opacity-0 {
  opacity: 0
}

.nt-opacity-20 {
  opacity: .2
}

.nt-opacity-50 {
  opacity: .5
}

.nt-shadow {
  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-\[0_0_0_0\.5px_var\(--nv-color-primary-600\)\] {
  --tw-shadow: 0 0 0 0.5px var(--nv-color-primary-600);
  --tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-\[0_0_0_0\.5px_var\(--nv-color-secondary-600\)\] {
  --tw-shadow: 0 0 0 0.5px var(--nv-color-secondary-600);
  --tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-\[0px_1px_2px_0px_rgba\(10\,13\,20\,0\.03\)\] {
  --tw-shadow: 0px 1px 2px 0px #0a0d1408;
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color)
}

.nt-shadow-\[0px_1px_2px_0px_rgba\(10\,13\,20\,0\.03\)\],
.nt-shadow-dropdown {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-dropdown {
  --tw-shadow: 0px 12px 16px -4px oklch(from var(--nv-color-shadow) l c h/0.08), 0px 4px 6px -2px oklch(from var(--nv-color-shadow) l c h/0.03);
  --tw-shadow-colored: 0px 12px 16px -4px var(--tw-shadow-color), 0px 4px 6px -2px var(--tw-shadow-color)
}

.nt-shadow-lg {
  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}

.nt-shadow-lg,
.nt-shadow-none {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000
}

.nt-shadow-popover {
  --tw-shadow: 0px 8px 26px 0px oklch(from var(--nv-color-shadow) l c h/0.08), 0px 2px 6px 0px oklch(from var(--nv-color-shadow) l c h/0.12);
  --tw-shadow-colored: 0px 8px 26px 0px var(--tw-shadow-color), 0px 2px 6px 0px var(--tw-shadow-color)
}

.nt-shadow-popover,
.nt-shadow-sm {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-shadow-sm {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}

.nt-shadow-tooltip {
  --tw-shadow: 0 5px 20px 0 oklch(from var(--nv-color-shadow) l c h/0.08);
  --tw-shadow-colored: 0 5px 20px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.nt-outline-none {
  outline: 2px solid #0000;
  outline-offset: 2px
}

.nt-backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.nt-transition {
  transition-duration: .15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.nt-transition-all {
  transition-duration: .15s;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.nt-transition-colors {
  transition-duration: .15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.nt-duration-100 {
  transition-duration: .1s
}

.nt-duration-200 {
  transition-duration: .2s
}

.nt-ease-out {
  transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

@keyframes enter {
  0% {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
  }
}

.nt-animate-in {
  animation-duration: .15s;
  animation-name: enter;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial
}

.nt-fade-in {
  --tw-enter-opacity: 0
}

.nt-slide-in-from-top-2 {
  --tw-enter-translate-y: -0.5rem
}

.nt-duration-100 {
  animation-duration: .1s
}

.nt-duration-200 {
  animation-duration: .2s
}

.nt-ease-out {
  animation-timing-function: cubic-bezier(0, 0, .2, 1)
}

.\[interpolate-size\:allow-keywords\] {
  interpolate-size: allow-keywords
}

.\[scrollbar-gutter\:stable\] {
  scrollbar-gutter: stable
}

.\[word-break\:break-word\] {
  word-break: break-word
}

.before\:nt-absolute:before {
  content: var(--tw-content);
  position: absolute
}

.before\:nt-inset-0:before {
  content: var(--tw-content);
  inset: 0
}

.before\:-nt-right-\[calc\(0\+var\(--stripes-size\)\)\]:before {
  content: var(--tw-content);
  right: calc(var(--stripes-size)*-1)
}

@keyframes nt-stripes {
  0% {
    content: var(--tw-content);
    transform: translateX(0)
  }

  to {
    content: var(--tw-content);
    transform: translateX(calc(var(--stripes-size)*-1))
  }
}

.before\:nt-animate-stripes:before {
  animation: nt-stripes 1s linear infinite paused;
  content: var(--tw-content)
}

.before\:nt-rounded-lg:before {
  border-radius: var(--nv-radius-lg);
  content: var(--tw-content)
}

.before\:nt-rounded-md:before {
  border-radius: var(--nv-radius-md);
  content: var(--tw-content)
}

.before\:nt-rounded-xl:before {
  border-radius: var(--nv-radius-xl);
  content: var(--tw-content)
}

.before\:nt-border:before {
  border-width: 1px;
  content: var(--tw-content)
}

.before\:nt-border-primary-foreground-alpha-100:before {
  border-color: var(--nv-color-primary-foreground-alpha-100);
  content: var(--tw-content)
}

.before\:nt-border-secondary-foreground-alpha-100:before {
  border-color: var(--nv-color-secondary-foreground-alpha-100);
  content: var(--tw-content)
}

.before\:nt-bg-dev-stripes-gradient:before {
  background-image: repeating-linear-gradient(135deg, oklch(from var(--nv-color-stripes) l c h/.1) 25%, oklch(from var(--nv-color-stripes) l c h/.1) 50%, oklch(from var(--nv-color-stripes) l c h/.2) 50%, oklch(from var(--nv-color-stripes) l c h/.2) 75%);
  content: var(--tw-content)
}

.before\:nt-bg-\[length\:var\(--stripes-size\)_var\(--stripes-size\)\]:before {
  background-size: var(--stripes-size) var(--stripes-size);
  content: var(--tw-content)
}

.before\:nt-content-\[\"\"\]:before {
  --tw-content: "";
  content: var(--tw-content)
}

.before\:\[mask-image\:linear-gradient\(transparent_0\%\2c black\)\]:before {
  content: var(--tw-content);
  -webkit-mask-image: linear-gradient(#0000, #000);
  mask-image: linear-gradient(#0000, #000)
}

.after\:nt-absolute:after {
  content: var(--tw-content);
  position: absolute
}

.after\:nt-inset-0:after {
  content: var(--tw-content);
  inset: 0
}

.after\:-nt-top-12:after {
  content: var(--tw-content);
  top: -3rem
}

.after\:nt-bottom-0:after {
  bottom: 0;
  content: var(--tw-content)
}

.after\:nt-left-0:after {
  content: var(--tw-content);
  left: 0
}

.after\:nt-left-0\.5:after {
  content: var(--tw-content);
  left: .125rem
}

.after\:nt-top-0\.5:after {
  content: var(--tw-content);
  top: .125rem
}

.after\:nt-size-3:after {
  content: var(--tw-content);
  height: .75rem;
  width: .75rem
}

.after\:nt-h-\[2px\]:after {
  content: var(--tw-content);
  height: 2px
}

.after\:nt-w-full:after {
  content: var(--tw-content);
  width: 100%
}

.after\:nt-translate-x-1\/2:after {
  --tw-translate-x: 50%
}

.after\:nt-translate-x-1\/2:after,
.after\:nt-translate-x-full:after {
  content: var(--tw-content);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.after\:nt-translate-x-full:after {
  --tw-translate-x: 100%
}

.after\:nt-rounded-full:after {
  border-radius: var(--nv-radius-full);
  content: var(--tw-content)
}

.after\:nt-rounded-lg:after {
  border-radius: var(--nv-radius-lg);
  content: var(--tw-content)
}

.after\:nt-rounded-md:after {
  border-radius: var(--nv-radius-md);
  content: var(--tw-content)
}

.after\:nt-rounded-xl:after {
  border-radius: var(--nv-radius-xl);
  content: var(--tw-content)
}

.after\:nt-border-b-2:after {
  border-bottom-width: 2px;
  content: var(--tw-content)
}

.after\:nt-border-background:after {
  border-color: var(--nv-color-background);
  content: var(--tw-content)
}

.after\:nt-border-b-primary:after {
  border-bottom-color: var(--nv-color-primary);
  content: var(--tw-content)
}

.after\:nt-border-b-transparent:after {
  border-bottom-color: #0000;
  content: var(--tw-content)
}

.after\:nt-bg-background:after {
  background-color: var(--nv-color-background);
  content: var(--tw-content)
}

.after\:nt-bg-\[linear-gradient\(180deg\2c transparent\2c oklch\(from_var\(--nv-color-background\)_l_c_h_\/_0\.9\)_55\%\2c transparent\)\]:after {
  background-image: linear-gradient(180deg, #0000, oklch(from var(--nv-color-background) l c h/.9) 55%, #0000);
  content: var(--tw-content)
}

.after\:nt-bg-\[linear-gradient\(180deg\2c transparent\2c oklch\(from_var\(--nv-color-stripes\)_l_c_h_\/_0\.07\)_55\%\2c transparent\)\2c linear-gradient\(180deg\2c transparent\2c oklch\(from_var\(--nv-color-background\)_l_c_h_\/_0\.9\)_55\%\2c transparent\)\]:after {
  background-image: linear-gradient(180deg, #0000, oklch(from var(--nv-color-stripes) l c h/.07) 55%, #0000), linear-gradient(180deg, #0000, oklch(from var(--nv-color-background) l c h/.9) 55%, #0000);
  content: var(--tw-content)
}

.after\:nt-bg-gradient-to-b:after {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  content: var(--tw-content)
}

.after\:nt-from-primary-foreground-alpha-50:after {
  content: var(--tw-content);
  --tw-gradient-from: var(--nv-color-primary-foreground-alpha-50) var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:nt-from-secondary-foreground-alpha-50:after {
  content: var(--tw-content);
  --tw-gradient-from: var(--nv-color-secondary-foreground-alpha-50) var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.after\:nt-to-transparent:after {
  content: var(--tw-content);
  --tw-gradient-to: #0000 var(--tw-gradient-to-position)
}

.after\:nt-opacity-0:after {
  content: var(--tw-content);
  opacity: 0
}

.after\:nt-transition-all:after {
  content: var(--tw-content);
  transition-duration: .15s;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.after\:nt-transition-opacity:after {
  content: var(--tw-content);
  transition-duration: .15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.after\:nt-duration-200:after {
  transition-duration: .2s
}

.after\:nt-content-\[\"\"\]:after,
.after\:nt-content-\[\'\'\]:after {
  --tw-content: "";
  content: var(--tw-content)
}

.after\:nt-duration-200:after {
  animation-duration: .2s;
  content: var(--tw-content)
}

.hover\:nt-bg-neutral-alpha-100:hover {
  background-color: var(--nv-color-neutral-alpha-100)
}

.hover\:nt-bg-neutral-alpha-50:hover {
  background-color: var(--nv-color-neutral-alpha-50)
}

.hover\:nt-bg-primary-600:hover {
  background-color: var(--nv-color-primary-600)
}

.hover\:nt-bg-primary-alpha-25:hover {
  background-color: var(--nv-color-primary-alpha-25)
}

.hover\:nt-bg-primary-alpha-400:hover {
  background-color: var(--nv-color-primary-alpha-400)
}

.hover\:nt-text-foreground-alpha-800:hover {
  color: var(--nv-color-foreground-alpha-800)
}

.before\:hover\:\[animation-play-state\:running\]:hover:before {
  animation-play-state: running;
  content: var(--tw-content)
}

.hover\:after\:nt-opacity-100:hover:after {
  content: var(--tw-content);
  opacity: 1
}

.focus\:nt-outline-none:focus {
  outline: 2px solid #0000;
  outline-offset: 2px
}

.focus-visible\:nt-rounded-lg:focus-visible {
  border-radius: var(--nv-radius-lg)
}

.focus-visible\:nt-rounded-md:focus-visible {
  border-radius: var(--nv-radius-md)
}

.focus-visible\:nt-rounded-xl:focus-visible {
  border-radius: var(--nv-radius-xl)
}

.focus-visible\:nt-bg-neutral-alpha-50:focus-visible {
  background-color: var(--nv-color-neutral-alpha-50)
}

.focus-visible\:nt-outline-none:focus-visible {
  outline: 2px solid #0000;
  outline-offset: 2px
}

.focus-visible\:nt-ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-visible\:nt-ring-primary:focus-visible {
  --tw-ring-color: var(--nv-color-primary)
}

.focus-visible\:nt-ring-ring:focus-visible {
  --tw-ring-color: var(--nv-color-ring)
}

.focus-visible\:nt-ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px
}

.disabled\:nt-pointer-events-none:disabled {
  pointer-events: none
}

.disabled\:nt-opacity-20:disabled {
  opacity: .2
}

.disabled\:nt-opacity-50:disabled {
  opacity: .5
}

.nt-group:focus-within .group-focus-within\:nt-opacity-100,
.nt-group:hover .group-hover\:nt-opacity-100 {
  opacity: 1
}

.data-\[open\=true\]\:nt-rotate-180[data-open=true] {
  --tw-rotate: 180deg
}

.data-\[open\=true\]\:nt-rotate-180[data-open=true],
.data-\[open\=true\]\:nt-transform[data-open=true] {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[disabled\=true\]\:nt-text-foreground-alpha-400[data-disabled=true] {
  color: var(--nv-color-foreground-alpha-400)
}

.data-\[disabled\=true\]\:nt-text-foreground-alpha-600[data-disabled=true] {
  color: var(--nv-color-foreground-alpha-600)
}

.data-\[state\=active\]\:nt-text-foreground[data-state=active] {
  color: var(--nv-color-foreground)
}

.data-\[state\=active\]\:after\:nt-border-b-2[data-state=active]:after {
  border-bottom-width: 2px;
  content: var(--tw-content)
}

.data-\[state\=active\]\:after\:nt-border-primary[data-state=active]:after {
  border-color: var(--nv-color-primary);
  content: var(--tw-content)
}

.data-\[state\=active\]\:after\:nt-opacity-100[data-state=active]:after {
  content: var(--tw-content);
  opacity: 1
}

.\[\&\:not\(\:first-child\)\]\:nt-border-t:not(:first-child) {
  border-top-width: 1px
}

.\[\&_\.nv-notificationList\]\:nt-pb-4 .nv-notificationList {
  padding-bottom: 1rem
}

.\[\&_\.nv-notificationList\]\:nt-pb-8 .nv-notificationList {
  padding-bottom: 2rem
}

.\[\&_\.nv-preferencesContainer\]\:nt-pb-4 .nv-preferencesContainer {
  padding-bottom: 1rem
}

.\[\&_\.nv-preferencesContainer\]\:nt-pb-8 .nv-preferencesContainer {
  padding-bottom: 2rem
}

.\[\&_svg\]\:nt-pointer-events-none svg {
  pointer-events: none
}

.\[\&_svg\]\:nt-shrink-0 svg {
  flex-shrink: 0
}
.css-fyq6mk-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.css-7pg0cj-a11yText {
  display: none;
}

.css-1f43avz-a11yText-A11yText {
  z-index: 9999;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

.css-13cymwt-control {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: default;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 38px;
  outline: 0 !important;
  position: relative;
  -webkit-transition: all 100ms;
  transition: all 100ms;
  background-color: hsl(0, 0%, 100%);
  border-color: hsl(0, 0%, 80%);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}

.css-13cymwt-control:hover {
  border-color: hsl(0, 0%, 70%);
}

.css-hlgwow {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: grid;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overflow: hidden;
  padding: 2px 8px;
  box-sizing: border-box;
}

.css-1jqq78o-placeholder {
  grid-area: 1/1/2/3;
  color: hsl(0, 0%, 50%);
  margin-left: 2px;
  margin-right: 2px;
  box-sizing: border-box;
}

.css-19bb58m {
  visibility: visible;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: inline-grid;
  grid-area: 1/1/2/3;
  grid-template-columns: 0 min-content;
  margin: 2px;
  padding-bottom: 2px;
  padding-top: 2px;
  color: hsl(0, 0%, 20%);
  box-sizing: border-box;
}

.css-19bb58m:after {
  content: attr(data-value) ' ';
  visibility: hidden;
  white-space: pre;
  grid-area: 1/2;
  font: inherit;
  min-width: 2px;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

.css-1wy0on6 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.css-1u9des2-indicatorSeparator {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  width: 1px;
  background-color: hsl(0, 0%, 80%);
  margin-bottom: 8px;
  margin-top: 8px;
  box-sizing: border-box;
}

.css-1xc3v61-indicatorContainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: color 150ms;
  transition: color 150ms;
  color: hsl(0, 0%, 80%);
  padding: 8px;
  box-sizing: border-box;
}

.css-1xc3v61-indicatorContainer:hover {
  color: hsl(0, 0%, 60%);
}

.css-tj5bde-Svg {
  display: inline-block;
  fill: currentColor;
  line-height: 1;
  stroke: currentColor;
  stroke-width: 0;
}

.css-1dyz3mf {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overflow: hidden;
  padding: 2px 8px;
  box-sizing: border-box;
}

.css-1p3m7a8-multiValue {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  background-color: hsl(0, 0%, 90%);
  border-radius: 2px;
  margin: 2px;
  box-sizing: border-box;
}

.css-9jq23d {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 2px;
  color: hsl(0, 0%, 20%);
  font-size: 85%;
  padding: 3px;
  padding-left: 6px;
  box-sizing: border-box;
}

.css-v7duua {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-radius: 2px;
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box;
}

.css-v7duua:hover {
  background-color: #ffbdad;
  color: #de350b;
}

.css-t3ipsp-control {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: default;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 38px;
  outline: 0 !important;
  position: relative;
  -webkit-transition: all 100ms;
  transition: all 100ms;
  background-color: hsl(0, 0%, 100%);
  border-color: #2684ff;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 0 0 1px #2684ff;
  box-sizing: border-box;
  z-index: 1;
}

.css-t3ipsp-control:hover {
  border-color: #2684ff;
}

.css-15lsz6c-indicatorContainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: color 150ms;
  transition: color 150ms;
  color: hsl(0, 0%, 40%);
  padding: 8px;
  box-sizing: border-box;
}

.css-15lsz6c-indicatorContainer:hover {
  color: hsl(0, 0%, 20%);
}

.css-1nmdiq5-menu {
  top: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
  background-color: hsl(0, 0%, 100%);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px hsla(0, 0%, 0%, 0.1),
    0 4px 11px hsla(0, 0%, 0%, 0.1);
  margin-bottom: 8px;
  margin-top: 8px;
  box-sizing: border-box;
}

.css-qr46ko {
  max-height: 300px;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  padding-top: 4px;
  box-sizing: border-box;
}

.css-9x5mqu {
  text-align: center;
  color: hsl(0, 0%, 60%);
  padding: 8px 12px;
  box-sizing: border-box;
}

.css-b62m3t-container {
  position: relative;
  box-sizing: border-box;
}

.css-1cfo1cf {
  visibility: visible;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: inline-grid;
  grid-area: 1/1/2/3;
  grid-template-columns: 0 min-content;
  margin: 2px;
  padding-bottom: 2px;
  padding-top: 2px;
  color: hsl(0, 0%, 20%);
  box-sizing: border-box;
}

.css-1cfo1cf:after {
  content: attr(data-value) ' ';
  visibility: hidden;
  white-space: pre;
  grid-area: 1/2;
  font: inherit;
  min-width: 2px;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

.css-d7l1ni-option {
  cursor: default;
  display: block;
  font-size: inherit;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
  padding: 8px 12px;
  box-sizing: border-box;
}

.css-d7l1ni-option:active {
    background-color: var(--primary-light) !important;
}

.css-d7l1ni-option {
    background-color: var(--primary-light) !important;
}

.css-10wo9uf-option {
  cursor: default;
  display: block;
  font-size: inherit;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: transparent;
  color: inherit;
  padding: 8px 12px;
  box-sizing: border-box;
}

.css-10wo9uf-option:active {
  background-color: #b2d4ff;
}

.css-1dimb5e-singleValue {
  grid-area: 1/1/2/3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(0, 0%, 20%);
  margin-left: 2px;
  margin-right: 2px;
  box-sizing: border-box;
}