@import url("./assets/fonts/Indivisible/stylesheet.css");
@import url("./assets/fonts/Almarai/stylesheet.css");

html[dir="ltr"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(mat-icon):not(.e-icons):not(svg) {
    font-family: "Indivisible";
}

html[dir="rtl"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(mat-icon):not(.e-icons):not(svg) {
    font-family: "Almarai", sans-serif;
}

/* App-wide height for every Stingray data table.

   --stingray-dt-height is the package's PUBLIC token (added in 1.4.0, alongside
   --stingray-dt-max-height). The component never declares the public tier — it
   only reads it, resolving into its private --_sdt-* tier — so this value wins
   regardless of stylesheet load order. Setting it here is deliberate: one house
   default for every table instead of repeating Height= on each.

   Before 1.4.0 there was no public height token and this rule had to set the
   private --_sdt-height, which only held because app.css loads after the
   package stylesheet. Do not go back to the private tier.

   An inline Height= on a table still wins over this rule (the parameter writes
   the private property inline, and inline beats any selector); Height="auto"
   opts a single table back out. */
.stingray-data-table {
    --stingray-dt-height: 38rem;
}

a,
.btn-link {
  color: #006bb7;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid #e50000;
}

.validation-message {
  color: #e50000;
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.action-btn svg {
  width: 1rem;
}

.svg-20 svg {
  width: 20px;
}

.card.col-card-input {
  border: 2px dashed lightgrey;
  border-radius: 5px;
  padding: 7px;
  margin-bottom: 7px;
}

.card.col-card {
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding: 7px;
  margin-bottom: 7px;
}

.btn-round {
  border-radius: 15px !important;
}

.chat-container {
  max-width: 1200px;
  margin: auto;
  padding: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 15px;
  font-family: "Indivisible-Regular";
}

@media (max-width: 600px) {
  .chat-container {
    padding: 1rem;
  }
}

.sailor-logo {
  max-height: 2.5rem;
  max-width: 10rem;
}

.chat-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 10px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
  max-width: 75%;
  min-width: 50%;
}

@media (max-width: 991.9px) {
  .chat-message {
    max-width: 100%;
    min-width: 100%;
  }
}

/* Hover animation for messages */
.chat-message:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* For messages from the user */
.user-message {
  -ms-flex-item-align: end;
  align-self: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* For messages from the AI */
.ai-message {
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.message-content {
  padding: 12px 18px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;  
}

.message-content pre {
    white-space: break-spaces;
}

.message-content-inner {
  line-break: auto;
}

.message-content h3,
.message-content .h3 {
  font-size: 1.25rem;
}

.message-content ul {
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.message-content p {
  margin-bottom: 0;
}

.user-message .message-content {
  background-color: #dcf8c6; /* light green */
  color: #333;
}

.ai-message .message-content {
  background-color: #ffffff; /* white */
  color: #333;
  border: 1px solid #e0e0e0;
}

.message-content .multiselect-dropdown {
  min-width: 230px;
}

@media (min-width: 769px) {
  .message-content .multiselect-dropdown {
    min-width: 350px;
  }
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ddd;
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.avatar img {
  width: 100%;
  height: 100%;
}

/* Plan progress panel — system-status UI that flows inline right after
   the last chat message. No sticky / absolute positioning: those pinned
   the panel to the bottom of the chat container even when content was
   short, leaving an awkward empty gap between the last message and the
   panel. Inline flow keeps the panel attached to the conversation so it
   appears exactly where the user is reading. The chat container's
   auto-scroll-to-bottom on new messages still keeps it visible. */
.plan-progress-panel {
  /* The chat-container is display:flex column, so without flex-shrink:0
     the panel gets squashed to a few px when the messages column is
     long. Lock the panel to its content height. */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 0.5rem 0 0.25rem 0;
  padding: 0.4rem 0.7rem;
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
  max-height: 7.5rem;
  overflow-y: auto;
}

.plan-progress-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.plan-progress-status-text {
  color: #4b5563;
  font-style: italic;
}

.plan-progress-spinner {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid #d1d5db;
  border-top-color: #2563eb;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-progress-spinner.spinning {
  -webkit-animation: plan-progress-spin 0.9s linear infinite;
  animation: plan-progress-spin 0.9s linear infinite;
}

@-webkit-keyframes plan-progress-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes plan-progress-spin { to { transform: rotate(360deg); } }

.plan-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.plan-progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-running {
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
}

.plan-progress-step-done {
  color: #047857;
}

.plan-progress-step-failed {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.05);
}

.plan-progress-step-skipped {
  opacity: 0.45;
  text-decoration: line-through;
}

.plan-progress-step-icon {
  flex-shrink: 0;
  width: 0.9rem;
  text-align: center;
  font-size: 0.72rem;
}

.plan-progress-step-body {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-title {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-progress-step-number {
  font-weight: 600;
  margin-right: 0.25rem;
}

.plan-progress-step-tool {
  display: inline;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  opacity: 0.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Live intra-call progress for the running step (issue #21) — kept on its
   own line so the action ticker doesn't clobber the step description.
   Headless tools like replay_recording would otherwise leave the user
   staring at "running" for tens of seconds with no signal. */
.plan-progress-step-progress {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #4d6273;
}

.plan-progress-step-progress.stalled {
  color: #b15a00;
  font-weight: 600;
}

/* Reason is hidden by default — too verbose for the always-visible
   panel. Power-users can still find the full plan in the diagnostic
   Logs pane. */
.plan-progress-step-reason {
  display: none;
}

.chat-form-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-form-container label {
  font-weight: 600;
  margin-bottom: 5px;
}

.chat-form-container .form-control {
  border-radius: 25px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.chat-form-container .form-control:focus {
  border-color: #80bdff;
  outline: none;
  -webkit-box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
  box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
}

.chat-form-container .btn {
  border-radius: 25px;
  padding: 10px 20px;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.ai-icon {
  width: 4rem;
  height: 4rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition:
    transform 0.3s ease,
    -webkit-transform 0.3s ease;
}

.ai-icon.thinking {
  -webkit-animation: thinkingAnimation 1s ease-in-out infinite;
  animation: thinkingAnimation 1s ease-in-out infinite;
}

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

  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

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

  25% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/* Animated Thinking Text */
.thinking-text {
  font-size: 18px;
  color: #666;
  font-style: italic;
  display: inline-block;
}

.dot {
    opacity: 0;
    animation: blink 1s infinite;
}
.dot:nth-child(1) {
    animation-delay: 0s;
}
.dot:nth-child(2) {
    animation-delay: 0.3s;
}
.dot:nth-child(3) {
    animation-delay: 0.6s;
}
@keyframes blink {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.sidebar {
  position: fixed;
  inset-inline-start: 0;
  height: calc(100% - 75px);
  overflow-y: auto;
  top: 75px;
  width: 250px;
  padding: 0.75rem;
  background-color: var(--bs-white);
  z-index: 1040;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 991.9px) {
  .sidebar {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    top: 0;
    height: 100%;
  }
}

.sidebar + main {
  width: calc(100% - 250px);
  -webkit-padding-start: 250px;
  padding-inline-start: 250px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.navbar {
  margin: 0;
  padding: 0;
  display: block;
}

@media (max-width: 991.9px) {
  .sidebar + main {
    width: 100%;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

.sidebar .nav-title {
  -webkit-padding-start: 0.5rem;
  padding-inline-start: 0.5rem;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  color: #424242;
}

.sidebar .navbar-nav.mmenu {
  margin-bottom: 1.5rem;
  width: 100%;
}

.sidebar .navbar-nav.mmenu li {
  padding: 0.25rem 0;
  display: block;
  width: 100%;
}

.sidebar .navbar-nav.mmenu li a {
  cursor: pointer;
  display: block;
  width: 100%;
  letter-spacing: -0.1px;
  overflow: hidden;
  background-size: 0.7rem;
  background-repeat: no-repeat;
  background-position: 95% 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  padding: 0.5rem;
  font-size: 0.813rem;
  position: relative;
}

.sidebar .navbar-nav.mmenu .dropdown li a {
  -webkit-padding-start: 1.5rem;
  padding-inline-start: 1.5rem;
}

.sidebar .navbar-nav.mmenu .dropdown li a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background: currentColor;
  border-radius: 50%;
}

@media (min-width: 992px) {
  .sidebar .navbar-nav.mmenu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.page {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.page .content {
  padding-inline: 1.5rem 0.75rem;
  min-height: calc(100vh - 80px);
}

@media (max-width: 578.9px) {
  .page .content {
    padding-inline: 0.75rem 0.75rem;
  }
}

.page.sidebar-expanded .overlay-btn {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  z-index: 1040;
}

@media (min-width: 991.9px) {
  .page.sidebar-expanded .overlay-btn {
    display: none;
  }
}

.page.sidebar-expanded .sidebar:hover {
  width: 250px;
  position: fixed;
  top: 75px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-border-end: 1px solid #eae8e8;
  border-inline-end: 1px solid #eae8e8;
}

.page.sidebar-expanded .sidebar + main {
  width: calc(100% - 72px);
  -webkit-padding-start: 72px;
  padding-inline-start: 72px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 991.9px) {
  .page.sidebar-expanded .sidebar + main {
    width: 100%;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

@media (max-width: 991.9px) {
  .page.sidebar-expanded .sidebar {
    width: 250px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    top: 0;
  }

  .page.sidebar-expanded .sidebar:hover {
    top: 0;
  }

  .page.sidebar-expanded .sidebar .nav-title {
    display: block;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.nav-link .text {
    display: inline-block;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.nav-link .svg-icon {
    -webkit-margin-end: 0.5rem;
    margin-inline-end: 0.5rem;
  }

  .page.sidebar-expanded .sidebar .mmenu li a.dropdown-toggle {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11.499" height="6.504" viewBox="0 0 11.499 6.504"><path id="Path_123721" data-name="Path 123721" d="M6.469-3.468a.747.747,0,0,0,1.059,0l5-5a.747.747,0,0,0,0-1.06.75.75,0,0,0-1.059,0L7-5.059,2.531-9.531a.747.747,0,0,0-1.059,0,.75.75,0,0,0,0,1.06l5,5Z" transform="translate(-1.253 9.752)" fill="rgba(0,0,0,0.5)"/></svg>');
  }
}

.top-menu {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(var(--bs-white-rgb), 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid #eae8e8;
}

.top-menu .start {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 240px;
  position: relative;
}

.top-menu .start::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 1.4rem;
  width: 1px;
  background-color: #eae8e8;
  inset-inline-end: 0;
}

.top-menu .start .logo {
  max-height: 2.5rem;
}

@media (max-width: 500px) {
  .top-menu .start .logo {
    max-height: 2rem;
  }
}

.top-menu .start .btn-menu-collapse {
  width: 48px;
  height: 48px;
  background-color: rgba(var(--bs-dark-rgb), 0.05);
  color: rgba(var(--bs-dark-rgb), 0.75);
  border-radius: 50%;
  border: none;
}

.top-menu .start .btn-menu-collapse svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 500px) {
  .top-menu .start .btn-menu-collapse {
    width: 40px;
    height: 40px;
  }

  .top-menu .start .btn-menu-collapse svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 991.9px) {
  .top-menu .start {
    min-width: auto;
    -webkit-padding-end: 0.75rem;
    padding-inline-end: 0.75rem;
    -webkit-border-end: none;
    border-inline-end: none;
  }
}

.top-menu .end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.top-menu .end .user-dropdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #eae8e8;
  gap: 0.5rem;
}
.top-menu .dropdown-menu {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.01) !important;
    border-radius: 0.5rem !important;
    -webkit-box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
    box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
}
.top-menu .dropdown-item:hover::before {
    content: none !important;
}
.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:focus {
    color: var(--bs-primary) !important;
    font-weight: bold;
}
@media (max-width: 557.9px) {
  .top-menu .end .user-dropdown {
    border: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

.top-menu .end .user-dropdown .user-image {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
}

.top-menu .end .user-dropdown .sting-logo svg {
  height: 1.5rem;
}

@media (max-width: 557.9px) {
  .top-menu .end .user-dropdown .sting-logo {
    display: none;
  }
}

@media (max-width: 500px) {
  .top-menu {
    gap: 0.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .top-menu .start {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-padding-end: 0;
    padding-inline-end: 0;
  }

  .top-menu .start::after {
    display: none;
  }
}

.top-menu .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.01) !important;
  border-radius: 0.5rem !important;
  -webkit-box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
  box-shadow: 0 3px 6px rgba(1, 1, 1, 0.05) !important;
}

.top-menu .dropdown-item:hover::before {
  content: none !important;
}

.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:focus {
  color: var(--bs-primary) !important;
  font-weight: bold;
}

.top-menu .notifcation-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  color: #56617d;
}

.top-menu .notifcation-btn .bell-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.lang-selector {
  position: relative;
  color: rgba(var(--bs-dark-rgb), 0.75);
}

.lang-selector select {
  padding-inline: 2rem 2.5rem;
  background-image: none;
  border: 0;
  background-color: transparent;
    position: relative ;
    z-index: 2;
}

@media (max-width: 500px) {
  .lang-selector .form-select {
    --bs-form-select-bg-img: none !important;
    background-image: none !important;
  }
}

.lang-selector::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 1.4rem;
  width: 1px;
  background-color: #eae8e8;
  inset-inline-end: 0;
}

.lang-selector .icon {
  position: absolute;
  z-index: -1;
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lang-selector .icon {
  position: absolute;
  z-index: 0;
  width: 1.5rem;
  height: 1.5rem;
  inset-inline-start: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.lang-selector .arrow-down svg {
  position: absolute;
  width: 1rem;
  height: 1rem;
  inset-inline-end: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 0;
}

.mmenu li a.nav-link .svg-icon svg {
  width: 1.125rem;
  height: 1.25rem;
}
.white-space-nowrap {
  white-space: nowrap;
}

.filetype-add {
  height: 30px;
  margin-top: 2px;
  white-space: nowrap;
}
/* strat table*/

.table-responsive {
  margin-bottom: 0.5rem;
}

.table-responsive.sticky-header-custom .table {
  position: relative;
}

.table-responsive.sticky-header-custom thead tr {
  background-color: var(--bs-white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-responsive.sticky-header-custom thead tr th {
  position: relative;
}

.table-responsive.sticky-header-custom thead tr th:first-child::after {
  border-start-start-radius: 0.25rem;
  border-inline-start: 1px solid #eae8e8;
}

.table-responsive.sticky-header-custom thead tr th:last-child::after {
  inset-inline-start: 1px;
  border-start-end-radius: 0.25rem;
  border-inline-end: 1px solid #eae8e8;
}

/* ================= TABLE ================= */

.table {
  margin-bottom: 0;
  background-color: transparent;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  position: relative;
  z-index: 2;
}

@media (min-width: 1366px) {
  .table .w-col-500-lg {
    width: 500px;
  }
}

.table .td-wrap-cell {
  min-width: 150px;
}

.table .td-wrap-cell.date {
  min-width: 120px;
}

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
}

.table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: transparent;
}

.table > :not(caption) > * > * {
  background-color: transparent;
}

.table .td-content .icon,
.table .td-content .title,
.table .td-content .no-desc {
  display: none;
}

.table .task-depancy-number {
  display: inline-flex;
  color: var(--dark-700);
}

.table .task-depancy-number svg {
  width: 1rem;
  height: 1rem;
}

.table .mx-w-300 {
  max-width: 300px;
}

.table .task-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  width: 300px;
}

/* ================= THEAD ================= */

.table thead th {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-800);
  white-space: nowrap;
  background-color: transparent;
  padding-top: 1rem;
  border-inline-width: 0;
  border-bottom: 0;
}

.table thead th:first-child {
  padding-inline-start: 1rem;
}

.table thead th:last-child {
  padding-inline-end: 1rem;
}

/* ================= TBODY ================= */

.table tbody {
  position: relative;
  z-index: 1;
}

.table tbody tr {
  position: relative;
}

.table tbody tr td {
  font-size: 0.875rem;
  color: var(--dark-800);
  background-color: transparent !important;
}
.btn-table-action {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.btn-table-action .action-btn {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background-color: transparent;
  border: 1px solid #eae8e8;
  color: var(--dark-800);
  transition: all 0.2s ease;
}

.btn-table-action .action-btn:hover {
  background-color: var(--light-200);
  border-color: var(--dark-300);
  color: var(--primary);
}

.table thead th {
  vertical-align: middle;
  border-bottom: 2px solid #eae8e8;
  padding: 1rem 0.5rem;
}

.table tbody td {
  vertical-align: middle;
  padding: 1rem 0.5rem;
}

.table th.actions-column,
.table td.actions-column {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 1rem !important;
}
div.dt-scroll-body {
  border-width: 1px !important ;
  border-color: #eae8e8;
  border-top-width: 0 !important ;
  border-radius: 0 0 0.375rem 0.375rem;
}
.dt-scroll-head {
  border: 1px solid #eae8e8 !important;
  border-bottom-width: 0 !important ;
  border-radius: 0.375rem 0.375rem 0 0;
}
.table tbody tr td:first-child,
.table tbody tr th:first-child {
  padding-inline-start: 1rem;
}

.table tbody tr td:last-child,
.table tbody tr th:last-child {
  padding-inline-end: 1rem;
}

.table tbody tr td,
.table tbody tr th {
  border-bottom: 0;
}

/* Ensure DataTables sort icon is always on the right */
table.dataTable thead tr th div.dt-column-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

table.dataTable thead tr th div.dt-column-header span.dt-column-title {
    flex: 1 !important;
    text-align: start !important;
}

table.dataTable thead tr th div.dt-column-header span.dt-column-order {
    margin-inline-start: auto !important;
}

/* Align length menu and pagination at the bottom end */
.dt-layout-row:last-child .dt-layout-end {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.dt-layout-row:last-child .dt-layout-end .dt-length {
    margin-bottom: 0 !important;
}

.width-2rem{
    width: 2rem;
}
.table tbody tr::after {
  content: "";
  position: absolute;
  height: 0.5px;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  background: #eae8e8;
  width: calc(100% - 2rem);
}

.table tbody tr:hover::after {
  height: 100%;
  width: calc(100% - 2px);
  background-color: var(--light-200);
}

.table tbody tr:last-child td {
  padding-bottom: 1rem;
}

.table tbody tr:last-child::after {
  display: none;
  border-end-end-radius: 0.375rem;
}

.table tbody tr:last-child:hover::after {
  display: block;
  opacity: 1;
  height: calc(100% - 1px);
  width: calc(100% - 2px);
  background-color: var(--light-200);
  top: 0;
  border-end-end-radius: 0.375rem;
  border-end-start-radius: 0.375rem;
  transform: translate(-50%, 0);
}

/* ================= SEPARATED TABLE ================= */

.table.separated-table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.table.separated-table::after {
  display: none;
}

.table.separated-table tbody tr::after,
.table.separated-table tbody tr:last-child::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  border: 1px solid #eae8e8;
}

.table.separated-table tbody tr td {
  vertical-align: middle;
}

.table.separated-table thead th {
  padding-block: 0;
}

/* end table*/
.auth-container .start {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f5fa;
    background: linear-gradient(40.9deg, #f4f5fa 0%, #f5f8fd 99.02%);
}
@media (max-width: 991.9px) {
    .auth-container .start {
        display: none;
    }
}
.auth-container .end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2rem;
    height: 100vh;
}
.auth-container .end .form-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
.auth-container .end .form-content .logo {
    max-height: 4.5rem;
    margin-bottom: 2rem;
}
.auth-container .end .form-content .heading {
    font-size: 1.5rem;
    border-bottom: 1px solid #eae8e8;
    padding-bottom: 0.5rem;
    position: relative;
}
.auth-container .end .form-content .heading:after {
    content: "";
    width: 1.5rem;
    height: 1px;
    background-color: var(--bs-primary);
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
}
.auth-container .end .form-content form {
    padding-block: 1rem;
}
.auth-container .end .form-content .form-group {
    margin-bottom: 0.75rem;
}
.auth-container .end .form-content .form-group .form-label {
    color: #757575;
    font-size: 0.875rem;
}
.auth-container .end .form-content .form-group .input-icon {
    position: relative;
}
.auth-container .end .form-content .form-group .input-icon .form-control {
    padding-block: 0.625rem;
    -webkit-padding-start: 2.85rem;
    padding-inline-start: 2.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #757575;
}
.auth-container .end .form-content .form-group .start-icon {
    position: absolute;
    width: 2.5rem;
    height: 1.5rem;
    inset-inline-start: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #757575;
    -webkit-border-end: 1px solid #757575;
    border-inline-end: 1px solid #757575;
}
.auth-container .end .form-content .form-group .start-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.auth-container .end .form-content .btn-primary {
    font-size: 0.875rem;
    padding: 0.75rem;
}

.rounded-pill, .auth-container .end .form-content .btn-primary, .auth-container .end .form-content .form-group .input-icon .form-control {
    border-radius: var(--bs-border-radius-pill) !important;
}

.w-100, .auth-container .end .form-content .btn-primary, .auth-container .end .form-content form, .auth-container .end .form-content .heading {
    width: 100% !important;
}