/*------------------------------------*
  IMPORTED FONTS
*------------------------------------*/
@import url("bootstrap.min.css");
@import url("animate.min.css");
@import url("light-theme.css");

:root {
  --bs-alert-success-background: #003B12;
  --bs-alert-success-border: #00981F;
  --bs-alert-danger-background: #54141F;
  --bs-alert-danger-border: #B20000;
  --bs-alert-info-background: #023867;
  --bs-alert-info-border: #047AE2;
  --bs-alert-warning-background: #433B08;
  --bs-alert-warning-border: #fe9b07;
}

/*------------------------------------*
  PRESET
*------------------------------------*/
* {
  list-style-type: none;
  outline: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  transition: all 0.3s ease-in-out;
  font-family: calibri, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  position: relative;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  color: #D6D6DA;
}

.small,
small {
  font-size: 0.9rem;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
dfn,
th,
var {
  font-style: normal;
  font-weight: normal;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
}

p {
  font-size: 1rem;
  line-height: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

a {
  color: #E41165;
  text-decoration: none;
}

a:hover {
  color: rgb(150, 10, 66);
  text-decoration: none;
}

.card-content div {
  font-size: 1.25rem;
  line-height: 1.625rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.badge-secondary {
  background-color: #E41165;
  font-size: 1.2rem;
  font-weight: 400;
  color: #ffffff;
}

.text-grey {
  color: #D6D6DA !important;
}

/*------------------------------------*
  HEADINGS
*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1.5rem;
  font-family: houschka-rounded, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #D6D6DA;
}

h1 {
  font-size: 4rem;
  line-height: 4rem;
}

h2 {
  font-size: 3rem;
  line-height: 3rem;
}

h3 {
  font-size: 2rem;
  line-height: 2rem;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

h5.block-headline,
h6.block-headline {
  font-size: 0.8rem !important;
  color: #00EBFF !important;
  letter-spacing: 0.96px;
  font-family: calibri, sans-serif;
  text-transform: uppercase;
  line-height: 0.9rem;
  margin-bottom: 1rem !important;
}

/*------------------------------------*
  FIXES
*------------------------------------*/
.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.no-shadow {
  box-shadow: none !important;
}

.no-focus:focus {
  box-shadow: none !important;
}

.no-bg {
  background: transparent !important;
}

.no-before::before {
  display: none !important;
}

.no-after::after {
  display: none !important;
}

.no-shrink {
  flex-shrink: 0;
}

.no-border {
  border: none !important;
}


.no-radius {
  border-radius: 0 !important;
}

.radius-1 {
  border-radius: 0.25rem !important;
}

.radius-2 {
  border-radius: 0.5rem !important;
}

.radius-3 {
  border-radius: 1rem !important;
}

.no-click {
  pointer-events: none;
}

.gap-1 {
  gap: 1rem;
}

.line-limit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-limit-1 {
  -webkit-line-clamp: 1;
}

.line-limit-2 {
  -webkit-line-clamp: 2;
}

.line-limit-3 {
  -webkit-line-clamp: 3;
}

.line-limit-4 {
  -webkit-line-clamp: 4;
}

.line-limit-5 {
  -webkit-line-clamp: 5;
}

.line-limit-6 {
  -webkit-line-clamp: 6;
}

.no-resize {
  resize: none;
}

.m-auto {
  margin: 0 auto !important;
}

hr {
  background-color: #323b57;
  opacity: 1;
}

.whitespace-unset {
  white-space: unset !important;
}

.position-absolute {
  position: absolute !important;
}

.t-0 {
  top: 0 !important;
}

.r-0 {
  right: 0 !important;
}

.b-0-5 {
  bottom: .5rem !important;
}


.b-0 {
  bottom: 0 !important;
}

.b-1 {
  bottom: 1rem !important;
}

.l-0 {
  left: 0 !important;
}

.t-1 {
  top: 1rem !important;
}

.r-1 {
  right: 1rem !important;
}

.t-2 {
  top: 2rem !important;
}

.r-2 {
  right: 2rem !important;
}

.top-1rem {
  top: 1rem !important;
}

.right-1rem {
  right: 1rem !important;
}

.top-n-1 {
  top: -1rem !important;
}

.z-index999 {
  z-index: 999 !important;
}

.z-index-1 {
  z-index: 1;
}

.border-bottom {
  border-color: #4c537d !important;
}

.border-top {
  border-color: #4c537d !important;
}

.border-start {
  border-color: #4c537d !important;
}

.border-end {
  border-color: #4c537d !important;
}

.h-6rem {
  height: 6rem !important;
}

.h-12rem {
  height: 12rem !important;
}

.h-100-17rem {
  height: calc(100vh - 17rem) !important;
}

.h-100vh-8rem {
  height: calc(100vh - 8rem);
}

.max-h-35rem {
  max-height: 35rem !important;
}

.w-28rem {
  width: 28rem !important;
}

.w-30rem {
  width: 30rem !important;
}

.w-11rem {
  width: 11rem !important;
}

.w-6rem {
  width: 6rem !important;
}

.w-20rem {
  width: 20rem !important;
}

.w-25rem {
  width: 25rem !important;
}

.fs-dot8 {
  font-size: .8rem !important;
}

.gap-dot1 {
  gap: .1rem !important;
}

.h-6rem {
  height: 6rem !important;
}

.h-12rem {
  height: 12rem !important;
}

.h-100-4rem {
  height: calc(100% - 4rem) !important;
}

.h-100-16dot5rem {
  height: calc(100vh - 16.5rem) !important;
}

.w-20rem {
  width: 20rem !important;
}

hr.or-devider {
  position: relative;
  overflow: visible;
  margin: 0.5rem 0;
}

hr.or-devider::after {
  content: "OR";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.8rem;
  background: #2a2c3e;
}

.custom-border {
  border-color: #3e4571 !important;
}

.h-80vh {
  height: 80vh;
}

.scale-1 {
  transform: scale(1);
}

.position-fixed {
  position: fixed;
}

.ng-dropdown-panel {
  opacity: 1;
  padding: 1rem;
  padding-right: 0;
  left: 0;
  background: #272b41;
  border: 1px solid #6776ce;
  top: 2.7rem;
  border-radius: 0.3rem;
}

.ansi2html-content {
  font-size: 1rem;
  line-height: normal;
}

/*Content for modal confirmation box*/
.min-height-8 {
  min-height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.min-height-8 p {
  text-align: center;
  font-size: 1.5rem;
}

.nowrap {
  white-space: nowrap;
}

.word-wrap {
  word-break: break-word;
}

.h-90vh .modal-content {
  height: 90vh !important;
}

/* NG Multi select Dropdown */
.drop-up .dropdown-list {
  bottom: calc(100% + 0.5rem) !important;
}

.multiselect-dropdown .dropdown-btn .selected-item-container .selected-item {
  max-width: fit-content !important;
}

.w-5 {
  width: 5%;
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-55 {
  width: 55%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.mt-dot3 {
  margin-top: -0.3rem !important;
}

.mt-dot125 {
  margin-top: -0.125rem !important;
}

.mt-dot5 {
  margin-top: -0.5rem !important;
}

.top-dot-5rem {
  top: -0.5rem !important;
}

.fs-dot9rem {
  font-size: 0.9rem !important;
}

.color-red {
  color: red !important;
}

.color-white {
  color: #ffffff !important;
}

.top-dot3rem {
  top: 0.3rem !important;
}

.c-pointer {
  cursor: pointer !important;
}

.c-auto {
  cursor: auto !important;
}

.w-13rem {
  width: 13rem;
}

pre,
code {
  white-space: pre-wrap !important;
  /* Force line break */
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.text-capitalize {
  text-transform: capitalize !important;
}



/*------------------------------------*
  SCROLL BAR
*------------------------------------*/
.scroll-box {
  margin: 0;
  overflow: auto;
}

.scroll-box::-webkit-scrollbar {
  width: 0.5rem;
}

.scroll-box::-webkit-scrollbar-track {
  background: #272d48;
  border-radius: 10px;
}

.scroll-box.no-scrollbar::-webkit-scrollbar {
  display: none;
  position: relative;
}

.scroll-box.no-scrollbar.no-scrollbar-y::after {
  content: "";
  width: 100%;
  bottom: 0;
  position: absolute;
  height: 4rem;
  background: linear-gradient(360deg, #2a2c40, #272b4200);
}

/* Handle */

.scroll-box::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

/* Handle on hover */

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #515f9a;
}

/*------------------------------------*
  TOOLTIP
*------------------------------------*/
.tool-tip {
  position: relative;
}

.tool-tip:before {
  content: attr(data-text);
  position: absolute;
  width: max-content;
  max-width: 15rem;
  padding: 0.2rem 0.5rem 0.3rem;
  border-radius: 0.4rem;
  background: #000000e9;
  color: #e3e3e3;
  font-size: 0.9rem !important;
  text-align: left;
  line-height: normal;
  display: none;
  z-index: 99;
  text-indent: 0;
  line-height: 1.1rem;
}

.tool-tip::after {
  content: "";
  position: absolute;
  border: 0.625rem solid #000000e9;
  display: none;
  z-index: 99;
}

.tool-tip.tool-tip-bottom:before {
  left: 50%;
  top: calc(100% + 0.4rem);
  transform: translateX(-50%);
}

.tool-tip.tool-tip-bottom:after {
  left: 50%;
  top: calc(100% - 0.5rem);
  transform: translateX(-50%);
  border-color: transparent transparent #000000e9 transparent;
}

.tool-tip.tool-tip-top:before {
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%);
}

.tool-tip.tool-tip-top:after {
  left: 50%;
  bottom: calc(100% - 0.5rem);
  transform: translateX(-50%);
  border-color: #000000e9 transparent transparent transparent;
}

.tool-tip.tool-tip-left:before {
  top: 50%;
  right: calc(100% + 0.4rem);
  transform: translateY(-50%);
}

.tool-tip.tool-tip-left:after {
  top: 50%;
  right: calc(100% - 0.5rem);
  transform: translateY(-50%);
  border-color: transparent transparent transparent #000000e9;
}

.tool-tip.tool-tip-right:before {
  top: 50%;
  left: calc(100% + 0.4rem);
  transform: translateY(-50%);
}

.tool-tip.tool-tip-right:after {
  top: 50%;
  left: calc(100% - 0.5rem);
  transform: translateY(-50%);
  border-color: transparent #000000e9 transparent transparent;
}

.tool-tip:hover:before,
.tool-tip:hover:after {
  display: block;
}

/*------------------------------------*
  BULLET STYLE
*------------------------------------*/
ul.generic-list {
  padding-left: 1.3rem;
}

ul.generic-list li {
  color: #ffffff;
  list-style-type: circle;
  margin-bottom: 0.5rem;
}

ul.generic-list.generic-list-md li {
  font-size: 1.3rem;
}

/*------------------------------------*
  BUTTONS
*------------------------------------*/
.btn.btn-thin {
  border-radius: 0.5rem;
  letter-spacing: 0.96px;
  color: #FFFFFF;
  text-transform: uppercase;
  border: 1px solid #ffffff40;
  padding: 0.3rem 1rem !important;
  white-space: nowrap;
}

.btn.btn-thin.btn-sm {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem !important;
  border-radius: 0.3rem;
}

.btn.btn-sm {
  font-size: .875rem;
  padding: .25rem .75rem !important;
  height: 2rem !important;
}

.btn.btn-xsm {
  font-size: .813rem;
  padding: .25rem 1rem !important;
  height: 2rem !important;
}

.btn.btn-sm.btn.btn-outline-secondary {
  border: 1px solid #1465ff !important;
  color: #ffffff !important;
}

.btn.btn-sm.btn.btn-outline-secondary:hover {
  background-color: #1465ff !important;
}

.btn.btn-thin:active {
  box-shadow: none;
  transform: scale(0.97);
}

.btn.btn-thin.btn-thin-small {
  text-transform: unset;
}

.btn.btn-thin:hover,
.btn.btn-thin.active {
  background: #25284a;
}

.btn.btn-primary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-transparenr,
.btn.btn-dark {
  background: #1465ff;
  border-radius: 100vw;
  height: 3rem;
  border: transparent;
  padding: 0 1.5rem;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
}

.btn.btn-primary:active,
.btn.btn-success:active,
.btn.btn-danger:active,
.btn.btn-warning:active,
.btn.btn-dark:active {
  box-shadow: inset 0 0.2rem 0 #00000073;
}

.upload-file:active .btn.btn-primary {
  box-shadow: inset 0 0.2rem 0 #00000073;
  cursor: pointer;
}

.btn.btn-success {
  background: #198754;
  color: #ffffff;
}

.btn.btn-danger {
  background: transparent linear-gradient(129deg, #E22759 0%, #d93f22 100%) 0% 0% no-repeat padding-box;
}

.btn.btn-warning {
  background: #e86600;
  color: #ffffff;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  opacity: 0.35;
}

.btn.btn-transparenr {
  background: transparent;
  height: auto;
  color: #ffffff;
}

.btn.btn-transparenr:active {
  transform: scale(0.8);
}

.btn.btn-dark {
  background: transparent linear-gradient(129deg, #2a3148 0%, #3a4767 100%) 0% 0% no-repeat padding-box;
}

.btn.btn-icon {
  border: none;
  text-indent: -999px;
  font-size: 0;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.btn.btn-icon.btn-floating {
  position: absolute;
  z-index: 1020;
  right: 2rem;
  bottom: 2.5rem;
  width: 3rem !important;
  height: 3rem !important;
  background-color: #373d5d;
  border: 2px solid #8994d1;
  background-size: 60% !important;
  border-radius: 50%
}

.btn.btn-icon-bg {
  border: none;
  text-indent: -999px;
  font-size: 0;
  padding: 0;
  flex-grow: 0;
  flex-shrink: 0;
  background-color: #2A2F55 !important;
  background-size: 0.8rem !important;
  padding: 0.3rem;
  border-radius: 4px;
}

.btn.btn-icon:active {
  transform: scale(0.8);
}

.btn.btn-icon.btn-icon-14 {
  width: 0.8rem;
  height: 0.8rem;
}

.btn.btn-icon.btn-icon-16 {
  width: 1rem;
  height: 1rem;
}

.btn.btn-icon.btn-icon-20 {
  width: 1.25rem;
  height: 1.25rem;
}

.btn.btn-icon.btn-icon-22 {
  width: 1.375rem;
  height: 1.375rem;
}


.btn.btn-icon.btn-icon-24 {
  width: 1.5rem;
  height: 1.5rem;
}

.btn.btn-icon.btn-icon-32 {
  width: 2rem;
  height: 2rem;
}

.btn.btn-icon.btn-icon-text {
  text-indent: unset;
  font-size: 1rem;
  width: auto;
  padding: unset;
  padding-left: 1.5rem;
  background-size: 1rem;
  color: #ffffff;
  background-position: 0 50% !important;
}

.btn.btn-icon.btn-icon-text.icon-on-right {
  padding-right: 1.5rem;
  padding-left: 0 !important;
  background-position: 100% 50% !important;
}

.btn.btn-icon.btn-icon-16.btn-icon-text {
  background-size: 1rem;
}

.btn.btn-icon.btn-icon-20.btn-icon-text {
  background-size: 1.5rem;
}

.btn.btn-icon.btn-icon-24.btn-icon-text {
  background-size: 1.5rem;
  padding-left: 1.5rem;
}

.btn.btn-icon.btn-icon-24.btn-icon-text.btn-outline {
  border: 1px solid #cccccc;
  padding-block: 0.5rem;
  border-radius: 100vw;
  padding-right: 1rem;
  padding-left: 2.5rem;
  height: auto;
  background-position: 0.5rem !important;
}

.btn.btn-link {
  color: #ffffff !important;
}

.btn.btn-top-prompt {
  background: url(../images/icon__top-prompt.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-home {
  background: url(../images/icon-home.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-back {
  background: url(../images/icon-back.svg) no-repeat 50% 50%;
  background-size: 80%;
}

.btn.btn-all-usecases {
  background: url(../images/icon-all-usecases.svg) no-repeat 50% 50%;
  background-size: 80%;
}

.btn.btn-edit {
  background: url(../images/edit_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-edit-white {
  background: url(../images/edit_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-ai {
  background: url(../images/icon-ai.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-delete {
  background: url(../images/icon-delete.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-add {
  background: url(../images/icon-add.svg) no-repeat 50% 50% !important;
  background-size: 100%;
}

.btn.btn-top-user {
  background: url(../images/icon__top-user.svg) no-repeat 50% 50% !important;
  background-size: 100%;
}

.btn.btn-add-circle {
  background: url(../images/add_circle_outline_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-extract {
  background: url(../images/ios_share_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-download {
  background: url(../images/icon__download.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-word-download {
  background: url(../images/icon-word-download.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-pdf-download {
  background: url(../images/icon-pdf-download.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-pdf {
  background: url(../images/icon-pdf.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-prompt {
  background: url(../images/icon-prompt.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-prompt-blue {
  background: url(../images/icon-prompt-blue.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-view {
  background: url(../images/icon-view.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-save {
  background: url(../images/icon-save.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-more-vert {
  background: url(../images/icon-more-vert.svg) no-repeat 50% 50%;
}

/******************************/
.btn.btn-zoom-in {
  background: url(../images/icon-zoom-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-zoom-out {
  background: url(../images/icon__zoom-out.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-download-white {
  background: url(../images/icon-download-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-edit-white {
  background: url(../images/icon-edit-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-variant-white {
  background: url(../images/icon-variant-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-delete-white {
  background: url(../images/icon-delete-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-save-white {
  background: url(../images/icon-save-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-flowchart {
  background: url(../images/icon-flowchart.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-pdf-solid {
  background: url(../images/icon-pdf-solid.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-flowchart {
  background: url(../images/icon-flowchart-solid.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-settings {
  background: url(../images/icon-settings.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-settings-white {
  background: url(../images/icon-settings-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-save {
  background: url(../images/icon-save-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-translate {
  background: url(../images/translate_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-play {
  background: url(../images/play_circle_outline_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-dashboard {
  background: url(../images/dashboard_white_24dp.svg) no-repeat 50% 50%;
}

.btn.btn-sync {
  background: url(../images/icon-sync.svg) no-repeat 50% 50%;
}

.btn.btn-close-white {
  background: url(../images/close_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
  filter: invert(0);
}

.btn.btn-list {
  background: url(../images/icon-list-data.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-minimize {
  background: url(../images/icon_minimize.svg) no-repeat 50% 50%;
  background-size: 100%;
  filter: invert(0);
}

.btn.btn-tick {
  background: url(../images/done_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-toggle-log {
  background: url(../images/icon-log-arrow.svg) no-repeat 50% 50%;
  background-size: 80%;
}


.btn.btn-prev {
  background: url(../images/icon-prev.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-next {
  background: url(../images/icon-next.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-load-more {
  background: url(../images/icon-load-more.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-more-options {
  background: url(../images/icon-more-options.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-generate-pdf {
  background: url(../images/icon-generate-pdf.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-clear-history {
  background: url(../images/icon-clear-history.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-restart {
  background: url(../images/icon-restart.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-copy {
  background: url(../images/icon-copy.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn-copy:focus:not(:focus-visible).tool-tip:before {
  content: attr(data-text-end);
}

.btn.btn-settings-outline {
  background: url(../images/icon-settings-outline.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-folder {
  background: url(../images/icon__folder.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-prompt-library {
  background: url(../images/icon__prompt__library.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-trending-prompt {
  background: url(../images/icon__trending__prompt.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-view-document {
  background: url(../images/icon__view__document.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-info {
  background: url(../images/icon__info.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-enlarge {
  background: url(../images/icon__enlarge.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-go {
  background: url(../images/icon__go.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-map {
  background: url(../images/icon-map-new.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-sun {
  background: url(../images/icon-sun.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-sun.light {
  background: url(../images/icon-moon.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-settings-outline-blue {
  background: url(../images/icon-settings-outline-blue.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-right {
  background: url(../images/icon-right.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-cross {
  background: url(../images/icon-cross.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-log {
  background: url(../images/icon-history.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-test-bed {
  background: url(../images/icon-test-bed.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-details {
  background: url(../images/icon-details.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-show-left-panel {
  background: url(../images/icon__left-sidebar.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-show-right-panel {
  background: url(../images/icon__right-sidebar.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-new-chat {
  background: url(../images/icon__new-chat.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn.btn-icon-send-file {
  background: url(../images/icon__send-file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-icon-attach-file {
  background: url(../images/icon__attach-file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-icon-attach-file-light {
  background: url(../images/icon__attach-file-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-prompt-library-new {
  background: url(../images/icon__book-white.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-icon-prompt-library-dark {
  background: url(../images/icon__book-black.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-proceed {
  background: url(../images/icon__proceed.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-beautify {
  background: url(../images/icon__beautify.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-input {
  background: url(../images/icon__input.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-output {
  background: url(../images/icon__output.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-associate-with-api {
  background: url(../images/icon__associate-api.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-evaluate {
  background: url(../images/icon__evaluate-chat.svg) no-repeat 50% 50%;
  background-size: 100%;
}
.btn.btn-summarize {
  background: url(../images/icon__summarize--report.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-proceed {
  background: url(../images/icon__proceed.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-tick-mark {
  background: url(../images/icon__tick-mark.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-paste {
  background: url(../images/icon__paste.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn-check-parameter {
  background: url(../images/icon__parameters.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn-evaluation {
  background: url(../images/icon__prompt--evaluation.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-associate-with-api {
  background: url(../images/icon__associate-api.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.process-flow::before {
  background: url(../images/Icon-process-flow.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-qa::before {
  background: url(../images/icon-qa.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-report::before {
  background: url(../images/icons-report.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-config-nav::before {
  background: url(../images/icon-config-nav.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-create-template::before {
  background: url(../images/icon__create_template.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-template-action::before {
  background: url(../images/icon__template_action.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-template-state::before {
  background: url(../images/icon__template_state.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.btn-template-flow::before {
  background: url(../images/icon__template_flow.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-image-upload {
  background: url(../images/icon-image-search.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-enduser-view {
  background: url(../images/icon-enduser-view.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-file-generic {
  background: url(../images/icon-file-generic.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-import {
  background: url(../images/icon__import.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-export {
  background: url(../images/icon__export.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn-export:focus:not(:focus-visible).tool-tip:before {
  content: attr(data-text-end);
}

.btn.btn-guardrail-status {
  background: url(../images/icon__guardrail-status.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-test-connection {
  background: url(../images/icon__test-connection.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-verified {
  background: url(../images/icon__verified.svg) no-repeat 50% 50% !important;
  background-size: 100% !important;
}

.btn.btn-archive {
  background: url(../images/icon__archive.svg) no-repeat 50% 50%;
  background-size: 100% !important;
}


.btn.btn-help {
  background: url(../images/icon-help.svg) no-repeat 50% 50%;
  background-size: 100% !important;
}

.btn.btn-configure-agent {
  background: url(../images/icon__agent-configuration.svg) no-repeat 50% 50%;
  background-size: 100% !important;
}

.btn.btn-redirect {
  background: url(../images/icon__redirect.svg) no-repeat 50% 50%;
  background-size: 100%;
}


.btn.btn-solid-icon {
  width: 3rem !important;
  position: relative;
  text-indent: -999px;
  font-size: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.btn.btn-solid-icon::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn.btn-tag::after {
  background: url(../images/icon-tag.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-send::after {
  background: url(../images/icon-send.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-auto-discover {
  background: url(../images/icon__auto-discover.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-filter {
  background: url(../images/icon__filter.svg) no-repeat 50% 50%;
  background-size: 100%;
}


ul.nav-menu li .btn-side-nav.btn-all-files {
  opacity: 1;
}

ul.nav-menu li .btn-side-nav.btn-all-files.collapsed::before {
  background: url(../images/icon__all__files.svg) no-repeat 50% 0;
  background-size: 100%;
}

ul.nav-menu li .btn-side-nav.btn-all-files::before {
  background: url(../images/icon__all__files.svg) no-repeat 50% 100%;
  background-size: 100%;
}


.btn-holder {
  display: flex;
  gap: 1rem;
}

.btn-holder-home {
  height: 100%;
  border-right: 1px solid #2e3353;
  padding: 1.8rem 1.22rem;
  position: absolute;
  inset: 0;
  right: unset;
  cursor: pointer;
}

.btn-holder-home:active .btn {
  transform: scale(0.9);
}

.btn-holder-home .btn:focus {
  box-shadow: none;
}

.btn-holder .btn {
  width: -webkit-fill-available;
}

.btn.btn-dotted-more {
  width: 2rem;
  padding: 0 !important;
  margin-left: -0.3rem;
}

.btn-logout {
  margin: 0.4rem;
  border-radius: 0.2rem;
  background: transparent linear-gradient(129deg, #E22759 0%, #d93f22 100%) 0% 0% no-repeat padding-box;
  width: calc(100% - 0.8rem);
  padding-bottom: 0.6rem;
  box-shadow: inset 0 -0.2rem 0px #00000045;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.7rem;
}

/* UPLOAD FILE BUTTON */
.upload-file {
  position: relative;
  overflow: hidden;
}

.upload-file input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3rem;
  opacity: 0;
  cursor: pointer;
}

.btn.btn-outline-secondary,
.btn.btn-outline-danger,
.btn.btn-outline-light {
  background: #00000036;
  border-radius: 100vw;
  height: 3rem;
  border: 2px solid #5b94ff;
  color: #5b94ff;
  padding: 0 1rem;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
  transition: all 0.1s ease-in-out;
}

.btn.btn-outline-danger {
  border: 2px solid #eb3131;
  color: #eb3131;
}

.btn.btn-outline-light {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn.btn-outline-secondary:active,
.btn.btn-outline-danger:active,
.btn.btn-outline-light:active {
  transform: scale(0.97);
}

.upload-file:active .btn.btn-outline-secondary,
.upload-file:active .btn.btn-outline-danger,
.upload-file:active .btn.btn-outline-light {
  transform: scale(0.97);
}

.btn.w-min {
  width: 8rem;
}

.btn-clear.btn-back {
  color: #ffffff;
  background-image: url(../images/icon__back.svg);
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding-left: 1.5rem;
  background-size: 1rem;
  margin: 0 !important;
  height: 3rem;
}

.btn-clear.btn-back:active {
  box-shadow: none;
  transform: scale(0.97);
}

.btn-collapse {
  background-image: url(../images/icon-accordion-minus.svg);
  background-color: transparent;
  background-position: 98% 50%;
  background-repeat: no-repeat;
  text-align: left;
}

.btn-collapse.collapsed {
  background-image: url(../images/icon-accordion-add.svg);
  background-color: transparent;
}





.btn-collapse:hover {
  background-color: #25284a;
  background: inherit;
}

.btn-collapse:focus {
  box-shadow: none;
}

.btn-custom-dropup-group .upload-file {
  width: calc(100% - 1.5rem);
}

.btn-custom-dropup-group .upload-file .btn {
  border-radius: 0.5rem 0 0 0.5rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
}

.btn-custom-dropup-group .dropdown-toggle {
  padding: 0 !important;
  width: 1.5rem !important;
}

/*------------------------------------*
  CUSTOM ACCORDION
*------------------------------------*/

.custom-accordion .accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url(../images/icon-accordion-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  transition: transform .2s ease-in-out;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
  background-image: url(../images/icon-accordion-minus.svg);
}

/*------------------------------------*
  ALERT
*------------------------------------*/
.alert-box {
  position: absolute;
  top: 5rem;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem;
}

.alert {
  border-radius: 0.4rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
  opacity: 0.5;
  filter: invert(1);
}

.alert {
  padding-right: 1rem !important;
}

.alert.alert-dismissible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.alert.alert-dismissible p {
  font-weight: 500;
  margin-bottom: 0;
}

.alert-danger p {
  color: red;
}

.alert button.close {
  background: transparent;
  border: none;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/Icon-close.svg) no-repeat 50% 50%;
  filter: invert(1);
  background-size: 50%;
  position: relative;
}

.alert button.close span {
  display: none;
}

.generic-alert {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1B1D2B 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 1rem;
}

.generic-alert .generic-alert-body {
  padding: 1rem;
}


.generic-alert-backdrop {
  width: 100vw;
  height: calc(100vh - 5rem);
  background: #000000b6;
  position: absolute;
  inset: 5rem 0 0;
  z-index: 9999;
}

:root {
  --bs-alert-success-background: #003B12;
  --bs-alert-success-border: #00981F;
  --bs-alert-danger-background: #54141F;
  --bs-alert-danger-border: #B20000;
  --bs-alert-info-background: #023867;
  --bs-alert-info-border: #047AE2;
  --bs-alert-warning-background: #433B08;
  --bs-alert-warning-border: #fe9b07;
}

/* CUSTOM ALERT SCETION START */
.top-left {
  top: 1rem !important;
  left: 1rem !important;
}

.top-center {
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.top-right {
  top: 1rem !important;
  right: 1rem !important;
}

.bottom-left {
  bottom: 1rem !important;
  left: 1rem !important;
}

.bottom-center {
  bottom: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.bottom-right {
  bottom: 1rem !important;
  right: 1rem !important;
}

.center-center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.alert-container.blocker {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #00000077;
}

.alert-container.blocker.blocker-allow-header {
  height: calc(100vh - 5rem);
  top: 5rem;
}

.alert-container.blocker.blocker-allow-content {
  position: absolute;
  background: none;
  width: 40%;
  height: max-content;
  inset: auto;
}

.alert-container .message-box {
  border-radius: 0.5rem;
  background: #0000002a;
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
}

.alert-container .message-box span.text-link {
  text-decoration: underline;
  cursor: pointer;
}

.alert-container .message-box:last-child {
  margin-bottom: 0;
}

:root {
  --bs-alert-success-background: #003B12;
  --bs-alert-success-border: #00981F;
  --bs-alert-danger-background: #54141F;
  --bs-alert-danger-border: #B20000;
  --bs-alert-info-background: #023867;
  --bs-alert-info-border: #047AE2;
  --bs-alert-warning-background: #433B08;
  --bs-alert-warning-border: #fe9b07;
}

/* CUSTOM ALERT SCETION START */
.top-left {
  top: 1rem !important;
  left: 1rem !important;
}

.top-center {
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.top-right {
  top: 1rem !important;
  right: 1rem !important;
}

.bottom-left {
  bottom: 1rem !important;
  left: 1rem !important;
}

.bottom-center {
  bottom: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.bottom-right {
  bottom: 1rem !important;
  right: 1rem !important;
}

.center-center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.alert-container.blocker {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #00000077;
}

.alert-container.blocker.blocker-allow-header {
  height: calc(100vh - 5rem);
  top: 5rem;
}

.alert-container.blocker.blocker-allow-content {
  position: absolute;
  background: none;
  width: 40%;
  height: max-content;
  inset: auto;
}

.custom-alert {
  width: 40%;
  position: relative;
  padding: 0.3rem 1rem 0.7rem;
  padding: 0.3rem 1rem 0.7rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  padding-left: 5rem;
  z-index: 999;
  isolation: isolate !important;
}

.custom-alert .btn-close {
  filter: invert(0);
  opacity: 1;
  background-size: 50%;
  transition: all 0.1s ease-in-out;
  right: .5rem;
  top: .5rem;
}

.custom-alert .btn-close:active {
  transform: scale(.90);
}

.custom-alert span {
  font-size: 1.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #ffffff;
  color: #ffffff;
}

.custom-alert p {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
  color: #ffffff;
  color: #ffffff;
}

.custom-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4rem;
  height: 100%;
  border-radius: .4rem 0 0 .4rem;
}

.custom-alert-success {
  color: #fff;
  background-color: var(--bs-alert-success-background);
  border: 1px solid var(--bs-alert-success-border);
}

.custom-alert-success::before {
  background: url(../images/icon-success.svg) no-repeat 50% 1.2rem;
  background: url(../images/icon-success.svg) no-repeat 50% 1.2rem;
  background-size: 50%;
  background-color: var(--bs-alert-success-border);
}

.custom-alert-danger {
  color: #fff;
  background-color: var(--bs-alert-danger-background);
  border: 1px solid var(--bs-alert-danger-border);
}

.custom-alert-danger::before {
  background: url(../images/icon-error.svg) no-repeat 50% 1.2rem;
  background: url(../images/icon-error.svg) no-repeat 50% 1.2rem;
  background-size: 50%;
  background-color: var(--bs-alert-danger-border);
}

.custom-alert-info {
  color: #fff;
  background-color: var(--bs-alert-info-background);
  border: 1px solid var(--bs-alert-info-border);
}

.custom-alert-info::before {
  background: url(../images/icon-info.svg) no-repeat 50% 1.2rem;
  background: url(../images/icon-info.svg) no-repeat 50% 1.2rem;
  background-size: 50%;
  background-color: var(--bs-alert-info-border);
}

.custom-alert-warning {
  color: #fff;
  background-color: var(--bs-alert-warning-background);
  border: 1px solid var(--bs-alert-warning-border);
}

.custom-alert-warning::before {
  background: url(../images/icon-warning.svg) no-repeat 50% 1.2rem;
  background: url(../images/icon-warning.svg) no-repeat 50% 1.2rem;
  background-size: 50%;
  background-color: var(--bs-alert-warning-border);
}

.alert-container.blocker .custom-alert.top-left {
  top: 6rem !important;
  left: 1rem !important;
}

.alert-container.blocker .custom-alert.top-center {
  top: 6rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.alert-container.blocker .custom-alert.top-right {
  top: 6rem !important;
  right: 1rem !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-left {
  top: 1rem !important;
  left: 1rem !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-center {
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-right {
  top: 1rem !important;
  right: 1rem !important;
}

.alert-container.blocker.blocker-allow-content .custom-alert {
  width: 100% !important;
  position: relative !important;
  inset: unset !important;
  transform: unset !important;
}

/* CUSTOM ALERT SCETION END */
.alert-container.blocker .custom-alert.top-left {
  top: 6rem !important;
  left: 1rem !important;
}

.alert-container.blocker .custom-alert.top-center {
  top: 6rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.alert-container.blocker .custom-alert.top-right {
  top: 6rem !important;
  right: 1rem !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-left {
  top: 1rem !important;
  left: 1rem !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-center {
  top: 1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.alert-container.blocker.blocker-allow-header .custom-alert.top-right {
  top: 1rem !important;
  right: 1rem !important;
}

.alert-container.blocker.blocker-allow-content .custom-alert {
  width: 100% !important;
  position: relative !important;
  inset: unset !important;
  transform: unset !important;
}

.custom-alert.custom-alert-danger .alert-danger,
.custom-alert.custom-alert-warning .alert-warning,
.custom-alert.custom-alert-success .alert-success {
  color: unset;
  background-color: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  padding-top: 1rem;
  align-items: start;
}

.custom-alert button.close {
  filter: unset !important;
  right: 0;
  top: 0;
  flex-shrink: 0;
}

.alert-show {
  display: block;
}

.alert-hide {
  display: none;
}

/* CUSTOM ALERT SCETION END */



/*------------------------------------*
  TABLE
*------------------------------------*/
.table-responsive {
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #3e438ab2;
  border-radius: 0;
  opacity: 1;
  width: -webkit-fill-available;
}

.table-responsive.full-height {
  height: calc(100vh - 16.5rem);
}

.table-responsive .table {

  margin: 0;
}

.table tr:last-child td,
.table tr:last-child th {
  border: none;
}

.table thead {
  background: #16192E 0% 0% no-repeat padding-box;
  border: 1px solid #434991;
  opacity: 1;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  width: -webkit-fill-available;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
}

.table thead th {
  background: transparent;
  font-size: 0.9rem !important;
  color: #c9c9c9 !important;
  /* letter-spacing: 0.96px; */
  font-family: calibri, sans-serif;
  /* text-transform: uppercase; */
  font-weight: bold;
}

.table>:not(:first-child) {
  border-top: 1px solid #ffffff17;
}

.table tr td,
.table tr th {
  border-color: #434991;
  color: #cacce2;
}

.table-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.3rem 0;
}

.table-responsive::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.table-responsive::-webkit-scrollbar-track {
  background: #1d2136;
  border-radius: 10px;
}

/* Handle */

.table-responsive::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

/* Handle on hover */

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #515f9a;
}

.table-bordered>:not(caption)>* {
  border-width: 0;
  border-bottom: 1px solid #2f3150;
}

.table.table-bordered thead {
  border: none;
}

.table-bordered tr td,
.table-bordered tr th {
  border-color: #303250;
}

.table-bordered tr:last-child td,
.table-bordered tr:last-child th {
  border: 1px solid #313350;
  border-bottom: 0;
  border-top: 0;
}

.table-bordered tr:last-child {
  border-bottom: none;
}

.table-bordered tr td:last-child,
.table-bordered tr th:last-child {
  border-left: none;
}

.table-bordered tr td:last-child {
  border-right: none;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table.table-bordered tbody tr td:first-child {
  border-left: none;
}

.table.table-bordered tbody tr td:last-child {
  border-right: none;
}

.table.table-bordered thead tr th:last-child {
  border-right: none;
}

/*------------------------------------*
  ICONS
*------------------------------------*/
span.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  font-size: 0;
  text-indent: -999px;
  flex-shrink: 0;
}

span.icon.icon-20 {
  width: 1.25rem;
  height: 1.25rem;
}

span.icon.icon-24 {
  width: 1.5rem;
  height: 1.5rem;
}

span.icon.icon-32 {
  width: 2rem;
  height: 2rem;
}

span.icon.icon-40 {
  width: 2.5rem;
  height: 2.5rem;
}

span.icon.icon-48 {
  width: 3rem;
  height: 3rem;
}

span.icon.icon-24 {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-success-file {
  background: url(../images/icon__success-file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-failed-file {
  background: url(../images/icon__failed-file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.tag-icon {
  background: url(../images/icon-tag.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-flowchart {
  background: url(../images/icon-flowchart.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-workflow-new {
  background: url(../images/icon-workflow-new.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent {
  background: url(../images/icon-agent-listing.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent-decision {
  background: url(../images/icon__agent-decision.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent-extractor {
  background: url(../images/icon__agent-extraction.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent-humanInLoop {
  background: url(../images/icon__human.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent-loop {
  background: url(../images/icon__loop-agent.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-agent-flow {
  background: url(../images/icon-agent.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-db-load-success {
  background: url(../images/icon__database-load-success.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon-db-load-failed {
  background: url(../images/icon__database-load-failed.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.icon__file{
  background: url(../images/icon__file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

/*------------------------------------*
  CARDS
*------------------------------------*/
.card {
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
}

.card .card-header {
  border: none;
  position: relative;
  padding: 1rem 2rem 1rem 1rem;
  background: transparent;
}

.card .card-header h5 {
  margin: 0 !important;
}

.card .card-header .card-actions {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.card .card-body {
  padding-top: 0;
}

.card .card-body .card-scroll {
  padding: 0 0.5rem 0 0.2rem;
  max-height: 10rem;
}

.card .card-footer {
  border: none;
  padding: 0 1rem 1rem;
}

.card.card-transparent {
  padding: 0;
  background: transparent;
  border-radius: 0.5rem;
  border: none;
}



/*------------------------------------*
  DROPDOWNS
*------------------------------------*/
.dropdown-menu {
  z-index: 1000;
  min-width: 10rem;
  padding: 0 0;
  margin: 0;
  font-size: 1rem;
  color: #ffffff;
  text-align: left;
  list-style: none;
  background-color: #0d0c0cb3;
  background-clip: padding-box;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 30px #00000040;
  padding: 0.1rem;
  backdrop-filter: blur(40px);
  border-color: rgb(66 76 129);
}

.dropdown-item,
.dropdown-item:hover {
  color: #cccccc;
}

.dropdown-menu li {
  padding: 0.1rem;
}

.dropdown-menu li:last-child {
  border: none !important;
}

.dropdown-menu .btn {
  border-radius: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: 0.5rem;
  color: #ffffff !important;
}

.dropdown-menu .btn .material-icons {
  font-size: 0.97rem;
  color: #ffffff;
}


.dropdown-item {
  border-radius: 0.3rem;
  transition: all 0.2s ease-in-out;
  color: #d8d8d8;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #203482;
}

.dropdown-menu .form-check {
  padding: 0.5rem 1rem 0.5rem 2rem;
}

.dropdown-menu .form-check .form-check-label {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.btn .material-icons {
  font-size: 1rem;
}

.dropdown-menu li {
  position: relative;
}

.dropdown-menu .dropdown-submenu {
  position: absolute;
  left: 100%;
  top: -3px;
  opacity: 1;
  background: #151419;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
  display: block;
}

.dropdown-menu.dropdown-submenu-custom .btn {
  background: transparent;
  border: none;
  color: #c6c6c6 !important;
  padding: .25rem 1rem;
  height: auto;
  width: 100% !important;
  justify-content: flex-start;
  border-radius: 0.3rem;
}

.dropdown-menu.dropdown-submenu-custom .btn:hover {
  background-color: #203482;
}

  .dropdown-menu li:has(ul.dropdown-submenu) > button,
  .dropdown-menu li:has(ul.dropdown-submenu) > a {
    background-image: url(../images/icon-next.svg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: 1.5rem;
  }

/*------------------------------------*
  FORM
*------------------------------------*/
.form-control,
.form-control:focus {
  background: #272B41 0% 0% no-repeat padding-box;
  border: 1px solid #6776ce;
  border-radius: 5px;
  color: #D6D6DA;
}

.form-control::placeholder {
  color: #a7b2f3d5;
}

.form-control:disabled,
.form-control[readonly] {
  background: #272b41cb 0% 0% no-repeat padding-box;
  border: 1px solid #3e4674bd;
  opacity: 0.6;
  color: #ffffff;
}

select.form-control,
select.form-control:focus {
  background: url(../images/user-dropdown-arrow.svg) no-repeat 98% 50% #272B41;
  background-size: 1.3rem;
  padding-right: 3rem;
}


input[type="search"].form-control {
  background: url(../images/icon-search.svg) no-repeat 0.5rem 50%;
  background-size: 1rem;
  padding-left: 2rem;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

.input-group .form-control:first-child {
  background-color: #3f4670;
  text-transform: uppercase;
  font-weight: 600;
}

.form-group-editable {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-group-editable .actions {
  flex-shrink: 0;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #272b41cb;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 2px solid #5664b0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-check.select-all {
  border-bottom: 1px solid #2e3453;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
}

.form-check.select-all .form-check-label {
  color: #f2bb0d;
}

.form-check-label {
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #1C8DFF;
  border: 5px solid #ffffff;
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  transform: translateY(-15%);
}

.radio.horizontal {
  display: flex;
  width: auto;
  gap: 1.5rem;
}

.radio.vertical {
  display: flex;
  width: auto;
  gap: 0.2rem;
  flex-direction: column;
}

label.all-caps {
  font-size: 0.8rem !important;
  color: #f4f7f7 !important;
  letter-spacing: 0.96px;
  font-family: calibri, sans-serif;
  text-transform: uppercase;
  line-height: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.form-check-input.input-check-select-file {
  flex-shrink: 0;
  border-radius: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  border-color: #0d6efd;
  border-width: 2px;
  margin: 0;
}

.form-check-input.input-check-select-file:checked[type=radio],
.form-check-input.input-check-select-file:checked[type=checkbox] {
  background-image: url(../images/icon-tick-done.png);
  background-size: 80%;
  box-shadow: none;
}

.form-check-input.input-check-select-file {
  flex-shrink: 0;
  border-radius: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  border-color: #0d6efd;
  border-width: 2px;
  margin: 0;
}

.form-check-input.input-check-select-file:checked[type=radio],
.form-check-input.input-check-select-file:checked[type=checkbox] {
  background-image: url(../images/icon-tick-done.png);
  background-size: 80%;
  box-shadow: none;
}

.table .form-control {
  border: none;
  background-color: #333959;
}

.table .form-control:focus {
  box-shadow: none;
}

/***** SLIDER STYLE ******/

.ngx-slider .ngx-slider-bar {
  height: 0.7rem !important;
  border-radius: 0.3rem !important;
  background: #181a2d !important;
  border: 1px solid #2e3258 !important;
}

.ngx-slider .ngx-slider-pointer {
  top: -0.5rem !important;
}

.ngx-slider .ngx-slider-bubble {
  color: #acbddd !important;
  font-size: 1rem !important;
}

.ngx-slider-span.ngx-slider-bubble.ngx-slider-model-value {
  background: #ffffff1f;
  padding: 0.1rem 0.9rem;
  border-radius: 0.4rem;
  color: #ffffff !important;
  font-weight: bold;
  bottom: 1.4rem;
}

.ngx-slider .ngx-slider-pointer {
  width: 1.7rem !important;
  height: 1.7rem !important;
  background: transparent linear-gradient(112deg, #076ed9 0%, #0db1f0 100%) 0% 0% no-repeat padding-box;
}

.ngx-slider .ngx-slider-pointer:after {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

.ngx-slider .ngx-slider-pointer.ngx-slider-active:after {
  background-color: #ffffff !important;
}

/***** RADIO SWITCH ******/

.radio-switch-holder {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.radio-switch {
  position: relative;
  gap: 0 !important;
  background: #101221;
  border-radius: 1rem;
  border: 1px solid #2b2e4d;
  padding: 0.2rem;
}

.radio-switch__item {
  position: relative;
  z-index: 2;
  padding: 0;
  margin: 0 !important;
  /* margin-left: -0.5rem; */
}

.radio-switch__item .form-check-label {
  text-align: center;
  width: 100%;
  padding: 0.2rem 1rem;
  line-height: 0;
  z-index: 1;
  cursor: pointer;
  opacity: 0.5;
}

.radio-switch__item .form-check-label::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: transparent linear-gradient(104deg, #1C94D3 0%, #0552FF 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.radio-switch__item .form-check-input:checked~label {
  color: #ffffff;
  z-index: 3;
  opacity: 1;
}

.radio-switch__item .form-check-input:checked~label::before {
  opacity: 1;
}

.radio-switch__item .form-check-input {
  display: none;
}

/* Multi Select */

.multiselect-dropdown .dropdown-btn {
  border: 1px solid #3e4674 !important;
  background: #272b41 !important;
  padding-right: 2rem !important;
  padding-left: 0.5rem !important;
}

.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
  border: none !important;
  display: block;
  width: 1.3rem;
  height: 1rem;
  background: url(../images/user-dropdown-arrow.svg) no-repeat 0 0 #272B41 !important;
  background-size: 1.3rem !important;
  top: unset !important;
  left: 0.5rem;
}

.multiselect-dropdown .dropdown-btn .selected-item {
  margin: 0.05rem;
  margin-right: 0.1rem !important;
}

.dropdown-list {
  border: 1px solid #4c5585 !important;
  border-radius: 6px !important;
  background: #353b5a !important;
  margin-top: 5px !important;
  box-shadow: 0 1px 5px #4040409c !important;
}

.multiselect-item-checkbox input[type=checkbox]+div {
  color: #ffffff !important;
}

.dropdown-list .filter-textbox input {
  background: #2b304d !important;
}

.dropdown-list .filter-textbox {
  border-bottom: 1px solid #475081 !important;
  background: #2b304d !important;
}

.dropdown-list li {
  border-bottom: 1px solid #475081 !important;
}

.dropdown-list li:last-child {
  border: none !important;
}

.multiselect-item-checkbox:hover {
  background-color: #454d77 !important;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label.label {
  font-size: 0.875rem;
  font-family: calibri, sans-serif;
  color: #e5e5e5;
  margin-bottom: 0.2rem;
}

label.label-bold {
  font-size: 1rem !important;
  font-weight: 600;
}

.form-control.form-control-prompt {
  background: #191A26 0% 0% no-repeat padding-box;
}

/* CHECKBOX AND RADIO BAR */
.form-check.form-check-bar {
  padding-left: 0;
  position: relative;
}

.form-check.form-check-bar input {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  margin-left: 0;
}

.form-check.form-check-bar label {
  padding: 0.5rem 1rem 0.5rem 2rem;
  border-radius: 0.3rem;
  background: #2d3348;
  width: 100%;
  cursor: pointer;
}

.form-check.form-check-bar input:checked {
  box-shadow: none;
}

.form-check.form-check-bar input:checked~label {
  background: #0d6efd;
}


/*------------------------------------*
  CUSTOM ACCORDION
*------------------------------------*/
.select-models .radio.horizontal {
  gap: 0.5rem;
}

.custom-accordion .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 0.7px solid #3d4570;
}

.custom-accordion .accordion-item:last-child {
  border: none;
}

.custom-accordion .accordion-header {
  line-height: normal;
  padding: 0.8rem 0;
}

.custom-accordion .accordion-button:focus {
  box-shadow: none;
}

.custom-accordion .accordion-item:first-of-type,
.custom-accordion .accordion-item:last-of-type {
  border-radius: 0;
}

.custom-accordion .accordion-button {
  background-color: transparent;
  color: #ffffff;
  padding: 0;
}

.custom-accordion .accordion-button.accordion-button-icon-first {
  padding-left: 2rem !important;
}

.custom-accordion .accordion-button.accordion-button-icon-first::after {
  margin-left: unset;
  position: absolute;
  left: 0;
  top: 0;
}

.custom-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #ffffff;
  box-shadow: none;
}

.custom-accordion .accordion-body {
  padding: 0.5rem 0;
}

.custom-accordion .accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url(../images/icon-accordion-add.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0.8rem;
  transition: transform .2s ease-in-out;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
  background-image: url(../images/icon-accordion-minus.svg);
}

.custom-accordion .accordion-body.scroll-box {
  max-height: 25rem;
  padding-right: 1rem;
  margin-bottom: 1rem;
}

.custom-accordion .sub-item {
  padding: 0 1rem;
  border: none !important;
  background: #1b1e20;
  border-radius: 0.5rem !important;
  margin-bottom: 0.3rem;
}

.custom-accordion .sub-item .show {
  padding-bottom: 0.3rem;
}

.custom-accordion .sub-item .accordion-body {
  max-height: 15rem;
}

.custom-accordion.tag-accordion .accordion-item button.accordion-button {
  margin: 0.3rem 0;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
}

.custom-accordion.tag-accordion .accordion-item button.accordion-button span.tag-title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 75%;
}

.custom-accordion.tag-accordion .accordion-item.active button.accordion-button {
  color: #ffffff;
  background: #4B538D;
}

.custom-accordion.tag-accordion .accordion-body {
  padding: 0.5rem 0.5rem;
}

.custom-accordion.tag-accordion .accordion-footer {
  padding: 0 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-accordion.history-accordion .accordion-footer {
  padding: 0.5rem 0 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.custom-accordion.tag-accordion .accordion-body p {
  font-size: 0.9rem;
}

.modal-accordion-container {
  max-height: 18rem;
  overflow: auto;
  padding-right: 0.5rem;
}

.accordion-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/*------------------------------------*
  CUSTOM TAB
*------------------------------------*/

.nav-tabs {
  border-bottom: 1px solid #2E3353;
}

.nav-tabs .nav-link {
  color: #ffffff;
  opacity: 0.5;
  padding: 0 1rem 1rem;
  position: relative;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  opacity: 1;
  color: #ffffff !important;
  background: transparent;
  border: 1px solid transparent;
}

/* .light-mode .nav-tabs .nav-item.show .nav-link,
.light-mode .nav-tabs .nav-link.active{
  color: #000000 !important;
} */

.nav-tabs .nav-link.active::after {
  content: "";
  width: 100%;
  height: 0.3rem;
  background: transparent linear-gradient(104deg, #0679eb 0%, #29d8ff 100%) 0% 0% no-repeat padding-box;
  position: absolute;
  left: 0;
  bottom: 0;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border: 1px solid transparent;
}

/*------Scrollable Tabs--------*/
.nav-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 1rem;
}

.nav-tabs__scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  /* IE */
  scrollbar-width: none;
  /* Firefox */
}

.nav-tabs__scroll::-webkit-scrollbar {
  display: none;
  /* Chrome */
}

.nav-tabs__scroll .nav-link {
  white-space: nowrap;
  flex: 0 0 auto;
}

.nav-tabs__arrow {
  border: none;
  width: 2rem !important;
  color: #333;
  cursor: pointer;
  z-index: 1;
  position: absolute !important;
  /* top: 50%; */
  transform: translateY(-50%);
  background-color: #292c3e !important;
  height: 2rem !important;
  border-radius: 0;
  background-size: unset !important;
}

.nav-tabs__arrow:active,
.nav-tabs__arrow:focus {
  box-shadow: none;
  transform: scale(1) translateY(-50%) !important;
}

.nav-tabs__arrow--left {
  left: 0;
}

.nav-tabs__arrow--right {
  right: 0;
}

.nav-tabs__arrow.is-hidden {
  display: none;
}

/*------------------------------------*
  HEADER START
*------------------------------------*/
.navbar {
  background: #16192E 0% 0% no-repeat padding-box;
  border-bottom: 1px solid #2E3353;
  height: 5rem;
  padding: 0;
}

.navbar .container-fluid {
  padding-right: 0;
  padding-left: 5rem;
}


.navbar-brand {
  font-size: 0;
  text-indent: -9999px;
  line-height: 0;
  width: 15rem;
  height: 2rem;
  background: url(../images/tcs-AI-WisdomNext-logo.svg) no-repeat 0 50%;
  background-size: contain;
}

.logo-holder {
  width: auto;
  display: flex;
  align-items: center;
}

.org-logo {
  width: 7.5rem;
  padding-right: 0.5rem;
  border-right: 1px solid #313869;
  margin-right: 0.5rem;
}

.org-logo img {
  width: 100%;
}

.logo-pwb {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.logo-pwb .navbar-brand {
  width: 10rem;
  margin-top: -0.3rem;
}

.btn.btn-hamburger {
  font-size: 0;
  text-indent: -9999px;
  line-height: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/icon-menu.svg) no-repeat 0 0;
  background-size: 100%;
}

.nav-left-wrapper,
.nav-right-wrapper {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.tag-line {
  position: relative;
  line-height: 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #F03782;
}

.tag-line::before {
  content: "";
  width: 1px;
  height: 110%;
  background: #3F435D;
  position: absolute;
  left: -1rem;
}

.user-info {
  cursor: pointer;
  width: auto;
  max-width: 20rem;
  height: 5rem;
  border-left: 1px solid #70707046;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 0 1rem 0 2rem;
  transition: all 0.3s ease-in-out;
}

.user-profile {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.user-profile .industry-name {
  position: relative;
  color: #ffffffa8;
  line-height: 120%;
}

.user-profile .industry-name::before {
  content: "";
  width: 1px;
  height: 70%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -0.7rem;
  background: #666992;
}

.user-profile .industry-name:first-child:before {
  display: none;
}

.user-info::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/user-dropdown-arrow.svg) no-repeat 0 0;
  background-size: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  transition: all 0.3s ease-in-out;
}

.user-info.show,
.user-info:hover {
  background: #2e33533a;
}

.user-info.show::after {
  transform: rotate(180deg);
}

.user-info figure.user-img {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: 1.5rem;
  border: 4px solid #7785e054;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
}

.user-info figure.user-img img {
  width: 100%;
}

.user-info .info {
  width: -webkit-fill-available;
}

.user-info .info h5.user-name {
  color: #ffffff;
  margin: 0;
  font-size: 1.2rem;
}

.user-info .info span.user-designation {
  text-transform: uppercase;
  color: #46ADDD;
  font-size: 0.8rem;
}

body:has(.content-end-user) .platform-usage-container {
  display: none !important;
}

/*------------------------------------*
  CONTENT WRAPPER START
*------------------------------------*/
.content-wrapper {
  max-width: 100%;
  height: calc(100vh - 5rem);
  background: #1A1D2F;
  display: flex;
  position: relative;
  /* padding: 0 3rem; */
}

/* .content-wrapper:has(aside) {
  padding: 0;
} */

/*------------------------------------*
  INTRO SECTION START
*------------------------------------*/

.intro-section {
  width: 24rem;
  margin: 3rem 0 0 5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.intro-section h1 {
  font-family: 'Calibri', sans-serif;
  color: #ffffff;
  font-style: italic;
  font-size: 2.25rem;
  line-height: 3.4rem;
}

.intro-section h1 mark {
  background: transparent;
  color: #ffffff;
  padding: 0;
}

.intro-section h1 mark.text-highlight {
  color: #2DFED3;
  font-size: 4rem;
  font-style: normal;
}

.intro-section h1 mark.large-text {
  font-size: 3rem;
}

/*------------------------------------*
  INTERSECTION CONTAINER START
*------------------------------------*/
.intersected-container {
  width: -webkit-fill-available;
  margin: 2rem;
  height: calc(100% - 4rem);
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.container-header {
  /* display: flex; */
  padding: 1rem;
  background: #1d1f32 0% 0% no-repeat padding-box;
  border-bottom: 1px solid #2E3353;
  /* gap: 1rem; */
}

.container-header .slick-track {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.slick-prev:before {
  content: "";
  width: 2rem;
  height: 1rem;
  background: url("../images/carousel-left-arrow.svg") no-repeat 0 50%;
  background-size: 100%;
  display: block;
  position: absolute;
  left: 7px;
  top: 5px;
}

.slick-next:before {
  content: "";
  width: 2rem;
  height: 1rem;
  background: url("../images/carousel-right-arrow.svg") no-repeat 0 50%;
  background-size: 100%;
  display: block;
  position: absolute;
  right: 7px;
  top: 5px;
}

.card.card-parent-stream {
  border: none;
  border-radius: 0.5rem;
  width: -webkit-fill-available;
  background: #666dbf80;
  transition: all 0.3s ease-in-out;
  height: unset;
  min-height: 5rem;
}

.card.card-parent-stream:hover,
.card.card-parent-stream.active {
  background: transparent linear-gradient(110deg, #8448F5 0%, #D128D8 100%) 0% 0% no-repeat padding-box;
  cursor: pointer;
}

.card.card-child-stream {
  border: none;
  border-radius: 0.5rem;
  width: -webkit-fill-available;
  background: #666dbf3b;
  transition: all 0.3s ease-in-out;
}

.card.card-child-stream:hover,
.card.card-child-stream.active {
  background: transparent linear-gradient(129deg, #A62192 0%, #E68F29 100%) 0% 0% no-repeat padding-box;
  cursor: pointer;
}

.card.card-parent-stream .card-body,
.card.card-child-stream .card-body {
  padding: 0.7rem 1rem;
}

.card.card-parent-stream .card-body h5,
.card.card-child-stream .card-body h5 {
  margin-bottom: 0;
  color: #ffffff;
}

.card.card-parent-stream .card-body p,
.card.card-child-stream .card-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.2rem;
}

.container-body {
  display: flex;
  height: 100%;
}

.container-sidebar {
  width: 15rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  gap: 1rem;
  border-right: 1px solid #2E3353;
  height: calc(100% - 7rem);
  overflow: auto;
}

.container-footer {
  padding: 1rem 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  border-top: 1px solid #2e3453;
}

.usecase-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  width: calc(100% - 14rem);
}

.usecase-header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
  flex-grow: 0;
  /* width: calc(100% - 25.5rem); */
}

.usecase-header h5 {
  margin-bottom: 0.3rem;
}

.usecase-header p {
  margin: 0;
}

.usecase-header .header-left {
  width: -webkit-fill-available;
}

.usecase-header .header-right {
  width: 24rem;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.usecase-list {
  height: calc(100% - 10rem);
  overflow: auto;
  margin-bottom: 1rem;
  padding-right: 0.5rem;
  flex-shrink: 0;
  flex-grow: 0;
}

.card.card-usecase {
  background: #292f48 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #2E3353;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

figure.usecase-graphic {
  width: 100%;
  display: none;
  position: absolute;
  inset: 0;
}

figure.usecase-graphic img {
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: all 0.3s ease-in-out;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.usecase-list.usecase-list-grid-view .card.card-usecase figure.usecase-graphic {
  display: block;
}

.card.card-usecase p {
  font-size: 1rem;
  line-height: 1.2rem;
  color: #b6bbcf;
  margin-bottom: 0.5rem;
}

.card.card-usecase:hover {
  cursor: pointer;
  background: #333c5e 0% 0% no-repeat padding-box;
  border: 1px solid #5e6dd0;
}

.card.card-usecase .card-body {
  padding: 0.7rem 1rem 0.3rem;
  position: relative;
  overflow: hidden;
}

.card.card-usecase .card-body:after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent linear-gradient(180deg, #ffffff00 0%, #000000 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
}

.usecase-list.usecase-list-grid-view .card.card-usecase .card-body {
  min-height: 12rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.card.card-usecase h5,
.card.card-sub-usecase h6 {
  margin-bottom: 0.3rem;
  color: #ffffff;
}

.card.card-usecase .card-footer {
  border-top: 1px solid #39436a;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: #2d3554;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  min-height: 2.5rem;
  justify-content: space-between;
}

.card.card-usecase .card-footer span.star {
  display: block;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background: url(../images/icon-star-filled.svg) no-repeat 50% 50%;
  background-size: 100%;
  line-height: 0;
  font-size: 0;
  text-indent: -9999px;
}

.card.card-usecase .card-footer p {
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.card.card-usecase .card-footer p strong {
  color: #ffffff;
  font-size: 1rem;
  text-transform: capitalize;
  font-weight: normal;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tech-tags .badge {
  border-radius: 100vw;
  background: #404e86;
  font-weight: 400;
}

.card-sub-usecase {
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}

.card-sub-usecase:hover {
  background: #252c46 0% 0% no-repeat padding-box;
  border: 1px solid #44509b;
}

.usecase-list.usecase-list-grid-view {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1rem;
}

.usecase-list.usecase-list-grid-view .card.card-usecase {
  width: calc(33.3333% - 0.69rem);
  margin: 0;
  background: transparent;
}

.usecase-list.usecase-list-grid-view .card.card-usecase .card-footer {
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding-bottom: 0.7rem;
}

.card.card-usecase .card-footer .btn-group {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  transform: translateY(-50%);
}

.nomodule-nostream .container-header,
.nomodule-nostream .container-sidebar,
.nomodule .container-header {
  display: none;
}

.nomodule-nostream .usecase-container {
  width: 100%;
}

.nomodule-nostream .usecase-list,
.nomodule .usecase-list {
  height: calc(100% - 3rem);
}

.nomodule .container-sidebar {
  height: 100%;
}

/********************/

.toggle-view {
  display: flex;
  gap: 0;
  padding-left: 1rem;
  position: relative;
}

.toggle-view::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  left: 0;
  top: 0;
  background: #5966AD;
}

.toggle-view .view input[type="radio"] {
  appearance: none;
  width: 2rem;
  height: 2rem;
  background: #282C4A;
  border: 1px solid #5d6dc9;
  cursor: pointer;
  position: relative;
  z-index: 1;
  opacity: 0.5;
  background-size: 70% !important;
}

.toggle-view .view {
  line-height: 0;
}

.toggle-view .view input[type="radio"]:checked {
  background-color: #475083 !important;
  border: 1px solid #5966AD;
  z-index: 2;
  opacity: 1;
}

.toggle-view .view input[type="radio"].toggle-view-row {
  background: url(../images/icon-row-view.svg) no-repeat 50% 50% #282C4A;
  border-radius: 0 0.3rem 0.3rem 0;
  margin-left: -1px;
}

.toggle-view .view input[type="radio"].toggle-view-grid {
  background: url(../images/icon-grid-view.svg) no-repeat 50% 50% #282C3A;
  border-radius: 0.3rem 0 0 0.3rem;
}

.toggle-view .view label {
  display: none;
}

/*------------------------------------*
  LEFT MENU BAR START
*------------------------------------*/
aside.left-menu-bar {
  width: 4rem;
  height: 100%;
  background: #16192E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  padding: 0.9rem 0 2rem;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

ul.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}

ul.nav-menu li {
  text-align: center;
  transition: all 0.3s ease-in-out;
}

ul.nav-menu li.active,
ul.nav-menu li:hover,
ul.nav-menu li.opacity-1 {
  opacity: 1;
}

ul.nav-menu li.active a.menu-item {
  opacity: 1;
}

ul.nav-menu li .btn {
  padding: 0;
}

ul.nav-menu li a.menu-item,
ul.nav-menu li .btn-side-nav {
  display: block;
  position: relative;
  padding-top: 1.7rem;
  color: #ffffff;
  font-size: 0.7rem;
  opacity: 0.5;
}

ul.nav-menu li a.menu-item::before,
ul.nav-menu li .btn-side-nav::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #2E3353;
}

ul.nav-menu li .btn-side-nav:focus {
  box-shadow: none;
}

ul.nav-menu li.uc-suit-container {
  background: #1b1e3b;
  position: relative;
  padding: 1rem 0.5rem;
  border-radius: 1.5rem;
  border: 2px solid #465086;
}

ul.nav-menu li.uc-suit-container:hover li a {
  opacity: 0.5 !important;
}

ul.nav-menu li.uc-suit-container:hover li.active,
ul.nav-menu li.uc-suit-container:hover li.active a {
  opacity: 1 !important;
}

ul.nav-menu li.uc-suit-container span {
  position: absolute;
  bottom: -1.3rem;
  width: 100%;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
}

ul.nav-menu li.uc-suit-container ul.uc-suit-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

ul.nav-menu li.uc-suit-container ul.uc-suit-list li {
  position: relative;
  width: 1.5rem;
}

ul.nav-menu li.uc-suit-container ul.uc-suit-list a {
  font-size: 0;
}

ul.nav-menu li a.menu-item.personal::before {
  background: url(../images/icon-personal.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.business::before {
  background: url(../images/icon-business.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-side-nav.show {
  opacity: 1 !important;
}

.dropdown-menu-primary-nav.show {
  left: 1.3rem !important;
}

.dropdown-menu-primary-nav li a {
  text-align: left;
  opacity: 1;
}

ul.nav-menu li a.menu-item.home::before {
  background: url(../images/icon-home.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.add ::before {
  background: url(../images/icon-add.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.metric::before {
  background: url(../images/icon-nav-metric.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.role-module::before {
  background: url(../images/icon-nav-role-module.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.delete::before {
  background: url(../images/icon-delete.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.explorer::before {
  background: url(../images/icon-explorer.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.history::before {
  background: url(../images/icon-history.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.logout::before {
  background: url(../images/icon-logout.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li .btn-side-nav.btn-process::before {
  background: url(../images/icon-map.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li .btn-side-nav.btn-spotlight::before {
  background: url(../images/icon-spotlight.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.report::before {
  background: url(../images/icon-report.svg) no-repeat 50% 50%;
  background-size: 100%;
}


ul.nav-menu li .btn-side-nav.btn-prompt-library::before {
  background: url(../images/chat_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.advisory::before {
  background: url(../images/icon-advisory.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.pattern::before {
  background: url(../images/icon-pattern.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li .btn-side-nav.btn-tools::before {
  background: url(../images/icon-tools.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li .btn-side-nav.btn-advisory::before {
  background: url(../images/icon-advisory.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.console::before {
  background: url(../images/icon-console.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.configure::before {
  background: url(../images/icon-configure-nav.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.pipeline::before {
  background: url(../images/icon-pipeline.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.config::before {
  background: url(../images/icon-config-nav.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.requests::before {
  background: url(../images/icon-requests.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.tag-list::before {
  background: url(../images/icon-tag-list.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.image-generation::before {
  background: url(../images/icon-image-generation.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.image-gallery::before {
  background: url(../images/icon-image-gallery.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.workflow::before {
  background: url(../images/icon-workflow-configure.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.agents::before {
  background: url(../images/icon-agent-listling.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.apis::before {
  background: url(../images/icon-api-listing.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.evaluate-agent::before {
  background: url(../images/icon-evaluate.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.process-evaluate::before {
  background: url(../images/icon__process-evaluate.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.business-process-list::before {
  background: url(../images/icon__business-process.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-evaluate {
  background: url(../images/icon-evaluate.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-toggle-collapse {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  background: #292c3e;
  bottom: 6rem;
  font-size: 0;
  text-indent: -99px;
  visibility: visible;
  transition: all 0.3s ease-in-out;
}

.btn.btn-toggle-collapse:focus {
  box-shadow: none;
}

.btn.btn-toggle-collapse.btn-toggle-collapse-left {
  border-radius: 0 0.4rem 0.4rem 0;
  right: -2rem;
}

.btn.btn-toggle-collapse.btn-toggle-collapse-right {
  border-radius: 0.4rem 0 0 0.4rem;
  left: -2rem;
}

.offcanvas.offcanvas-mapping.offcanvas-start .btn-toggle-collapse {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.offcanvas.offcanvas-mapping.offcanvas-start.show .btn-toggle-collapse {
  display: none;
  opacity: 0;
}

.btn.btn-toggle-collapse.btn-process-flow {
  background: url(../images/Icon-process-flow.svg) no-repeat 50% 50% #1465ff;
  background-size: 1.5rem;
}

.btn.btn-toggle-collapse.btn-usecase-list {
  background: url(../images/icon-usecase-list.svg) no-repeat 50% 50% #1465ff;
  background-size: 1.1rem;
}

.btn.btn-upload {
  background: url(../images/icon-upload-arrow.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-notification {
  background: url(../images/icon-notification.svg) no-repeat 50% 50%;
  background-size: 100%;
}

/*------------------------------------*
  LEFT STEPPER PANEL
*------------------------------------*/
.left-stepper-panel {
  width: 20rem;
  background: #16192E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.left-stepper-panel-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #323b57;
}

.left-stepper-panel .btn-holder {
  margin-bottom: 1rem;
  gap: 0.5rem
}

.left-stepper-panel .btn-holder .btn {
  margin: 0;
}

/*------------------------------------*
  OFFCANVAS
*------------------------------------*/
.offcanvas.offcanvas-start {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  width: 16rem;
  max-width: 100%;
  visibility: hidden;
  background: #292C3E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  background-clip: padding-box;
  outline: 0;
  transition: transform .3s ease-in-out;
}

.offcanvas.offcanvas-end {
  background: #292C3E 0% 0% no-repeat padding-box;
  border-left: 1px solid #2E3353;
}

.offcanvas.offcanvas-bottom {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  max-width: 100%;
  visibility: hidden;
  background: #292C3E 0% 0% no-repeat padding-box;
  border-top: 1px solid #2E3353;
  background-clip: padding-box;
  outline: 0;
  transition: transform .3s ease-in-out;
  height: 18rem;
}

.offcanvas-header .block-headline {
  margin: 0 !important;
}

.btn-close {
  background: url(../images/Icon-close.svg) no-repeat 50% 50% !important;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-size: 45% !important;
  padding: 0 !important;
}

.process-map {
  height: 90%;
  overflow: auto;
  padding: 1rem 0.5rem 0 0;
}

.process-map ul {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.process-map ul li.step-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
}

.process-map ul li.step-item::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 97%;
  left: 1.3rem;
  top: 2rem;
  border-left: 1px dashed #636DA8;
}

.process-map ul li.step-item:last-child:before {
  display: none;
}

.process-map ul li.step-item span.step-count {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-align: center;
  border-radius: 1.25rem 1.25rem 0 1.25rem;
  flex-shrink: 0;
  margin-top: -0.8rem;
  font-weight: 600;
  color: #ffffff;
}

.process-map ul li.step-item:nth-child(1n) span.step-count {
  background: transparent linear-gradient(138deg, #252DFD 0%, #19a1ea 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #00D8FF33;
}

.process-map ul li.step-item:nth-child(2n) span.step-count {
  background: transparent linear-gradient(138deg, #FD2525 0%, #6c61f1 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #FF62AB33;
}

.process-map ul li.step-item:nth-child(3n) span.step-count {
  background: transparent linear-gradient(138deg, #ff8400 0%, #EA1919 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #FFA93433;
}

.process-map ul li.step-item:nth-child(4n) span.step-count {
  background: transparent linear-gradient(138deg, #08d66f 0%, #0066bd 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #69FFB433;
}

.process-map ul li.step-item:nth-child(5n) span.step-count {
  background: transparent linear-gradient(138deg, #04780f 0%, #fd7915 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #71E54E33;
}

.process-map ul li.step-item:nth-child(6n) span.step-count {
  background: transparent linear-gradient(139deg, #FF00A7 0%, #ff5800 100%) 0% 0% no-repeat padding-box;
  border: 5px solid #F25F5F33;
}

.process-map ul li.step-item h5 {
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.process-map ul li.step-item p {
  color: #9BACDE;
  font-size: 0.8rem;
  line-height: 1.1rem;
  margin: 0;
}

.offcanvas.offcanvas-tag {
  width: 22rem !important;
}

/*------------------------------------*
  MODAL
*------------------------------------*/
.modal-content {
  background: #272b4154 0% 0% no-repeat padding-box;
  border: 1px solid #323b57;
  border-radius: 1.3rem;
  opacity: 1;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  overflow: hidden !important;
  box-shadow: 0 0 20px #000000;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  background: #ffffff0f 0% 0% no-repeat padding-box;
  opacity: 1;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid #323b57;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.modal-header .btn-close {
  background: none;
}

.modal-header .btn-close .material-icons {
  font-size: 1rem;
  padding: 0;
  color: #ffffff;
}

.modal-title {
  color: #ffffff;
}

.modal-body {
  color: #ffffffb3;
}

.modal-body label {
  color: #D6D6DA;
}

.modal-body h5 {
  color: #ffffff;
  font-size: 1.3rem;
}

.modal-body h5.block-headline {
  margin: 0 !important;
}

.modal-footer {
  border-top: 1px solid #323b57;
}

/* .modal-footer.items-2 .btn {
  width: 16% !important;
} */

/*------------------------------------*
  MAIN CONTAINER START
*------------------------------------*/
.main-container {
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.main-g-container {
  background: #292C3E 0% 0% no-repeat padding-box;
  border-radius: 1rem;
  padding: 1rem;
  width: 100%;
  height: 100%;
}

.main-g-container-header {
  border-bottom: 1px solid #41466E;
  padding-bottom: 1rem;
}

.main-g-container-body {
  padding: 1rem 0;
  height: 100%;
}

.main-g-container-footer {
  padding-top: 1rem;
  border-top: 1px solid #41466E;
}

.container.two-col {
  display: flex;
  padding: 0;
  max-width: 100%;
  height: calc(100% - 6rem);
  display: flex;
  gap: 0.5rem;
}

.container.two-col.h-100 {
  height: 100%;
}

.container.two-col.h-100per-5rem {
  height: calc(100% - 5rem);
}

.container.two-col.h-100per-6rem {
  height: calc(100% - 6rem);
}

.usecase-details {
  height: 6rem;
  padding: 1rem;
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
  opacity: 1;
  display: flex;
  gap: 1rem;
}

.btn.btn-back {
  align-self: flex-start;
  margin-top: 1rem;
}

.btn.btn-all-usecases {
  align-self: flex-start;
  margin-left: auto;
  margin-top: 1rem;
}

.usecases {
  display: flex;
  gap: 1rem;
}

.usecase-intersection {
  flex-shrink: 0;
}

ul.intersection {
  display: flex;
  margin-top: 0.5rem;
}

.usecase-intersection.vertical ul.intersection {
  flex-direction: column;
  gap: 0.3rem;
}

ul.intersection li {
  padding: 0.3rem 2.5rem;
  border-radius: 1.3rem;
  margin-left: -2rem;
  position: relative;
  font-size: 1rem;
  color: #ffffff;
}

.usecase-intersection.vertical ul.intersection li {
  margin-left: 0;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 0;
}

ul.intersection li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: url(../images/icon-intersection.svg) no-repeat 50% 50%;
}

.usecase-intersection.vertical ul.intersection li::before {
  top: -0.9rem;
  left: 50%;
  background: url(../images/icon-intersection.svg) no-repeat 50% 50% #16182e;
  background-size: 0.7rem;
  padding: 0.75rem;
  z-index: 1;
  border-radius: 50%;
  transform: scale(0.8) translateX(-50%);
}

ul.intersection li:first-child {
  margin-left: 0;
  padding-right: 2.5rem;
  padding-left: 1rem;
}

ul.intersection li:first-child::before {
  display: none;
}

ul.intersection li:last-child {
  padding-left: 2.5rem;
  padding-right: 1rem;
}

ul.intersection li:nth-child(1) {
  background: transparent linear-gradient(112deg, #8548f5bd 0%, #d228d8b6 100%) 0% 0% no-repeat padding-box;
}

ul.intersection li:nth-child(2) {
  background: transparent linear-gradient(110deg, #a62192af 0%, #e68e29c0 100%) 0% 0% no-repeat padding-box;
}

ul.intersection li:nth-child(3) {
  background: transparent linear-gradient(110deg, #0194b9c1 0%, #003efaad 100%) 0% 0% no-repeat padding-box;
}

.usecase-description-list {
  border-left: 1px solid #2E3353;
  padding-left: 1rem;
}

.container>.container {
  width: 100% !important;
}

/*------------------------------------*
  LEFT PANEL START
*------------------------------------*/
.left-panel {
  width: 25rem;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.left-panel-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
  gap: 1rem;
  height: -webkit-fill-available;
  padding-right: 0.5rem;
}

.file-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.file-list ul li {
  display: flex;
  gap: 1rem;
  padding: 0.3rem;
  align-items: center;
  background: #1d2138 0% 0% no-repeat padding-box;
  border: 1px dashed #778bff;
  border-radius: 4px;
}

.file-list ul li:has(input[type="radio"]:checked),
.file-list ul li:has(input[type="checkbox"]:checked) {
  background: #0753c3 0% 0% no-repeat padding-box;
  border: 1px solid #0d6efd;
}

.file-list ul li:has(input[radio]:checked) span.file-name,
.file-list ul li:has(input[checkbox]:checked) span.file-name {
  color: #ffffff !important;
  font-weight: bold;
}

.file-list ul li .file-details span {
  display: inline-block;
}

.file-list ul li .file-details span.file-name {
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.file-list ul li .file-details {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  min-width: 0;
}

.file-list ul li .btn {
  margin-left: auto;
}

.file-list.file-list-lg ul li {
  padding: 0.8rem 0.5rem;
}

.file-icon {
  width: 1rem;
  height: 1rem;
  font-size: 0;
  text-indent: -999px;
  flex-shrink: 0;
}

.file-list.file-list-lg .file-icon {
  width: 2rem;
  height: 2rem;
  background-size: 100%;
}

.file-list.file-list-lg .badge-custom {
  font-size: 1rem;
}

.file-icon.file-format-pdf {
  background: url(../images/icon-file-generic.svg) no-repeat 50% 50%;
  background-size: 1.2rem;
}

.file-icon.file-format-csv {
  background: url(../images/icon-csv.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.file-icon.file-format-generic {
  background: url(../images/icon-file.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.file-icon.file-format-audio {
  background: url(../images/headphones_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.file-icon.file-format-web {
  background: url(../images/icon-globe.svg) no-repeat 50% 50%;
  background-size: 1.2rem;
}

.file-icon.file-format-image {
  background: url(../images/icon-img-outline.svg) no-repeat 50% 50%;
  background-size: 1.2rem;
}

.left-panel-footer {
  padding-right: 0.5rem !important;
  flex-shrink: 0;
  padding: 0 0 1rem;
}

.left-panel-footer .btn-holder .btn {
  padding-left: 0;
  padding-right: 0;
}

/*------------------------------------*
  RIGHT PANEL START
*------------------------------------*/
.right-panel {
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  gap: 1rem;
}

.right-panel-full-height {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-panel-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-panel-bottom {
  display: flex;
  padding: 1rem 0;
  justify-content: flex-end;
  border-top: 1px solid #2F3351;
  gap: 1rem;
}

.ai-playground {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
}

.ai-playground.ai-playground-transparent {
  background: transparent;
  padding: 0;
  border: none;
}

.ai-playground.ai-playground-transparent.min-width {
  background: transparent;
  padding: 0;
  border: none;
  max-width: 70rem;
  margin: 0 auto;
}

.ai-playground.ai-playground-reverse {
  flex-direction: column-reverse;
}

.ai-playground .gpt-area {
  height: -webkit-fill-available;
  overflow: auto;
  padding: 1rem;
}

.ai-playground .gpt-area *,
.ai-playground .gpt-area {
  color: #efefef;
}


.ai-playground .gpt-area .gpt-result {
  white-space: pre-wrap;
  padding: 1rem 0;
}

.ai-playground .gpt-area .gpt-result .textarea-editable {
  white-space: pre-wrap;
  border: none;
  width: 100%;
  height: 36vh;
  background: transparent;
  resize: none;
  color: #ffffff;
}

.ai-playground .gpt-area .gpt-result .textarea-editable::-webkit-scrollbar-thumb {
  background: rgb(0, 231, 154);
}

textarea::-webkit-scrollbar {
  width: 0.3125rem;
}

textarea::-webkit-scrollbar-track {
  background: #272d48;
  border-radius: 10px;
}

textarea.auto-height {
  field-sizing: content;
}

textarea.auto-height.on-focus-large {
  min-height: 5rem;
  max-height: unset !important;
}

textarea.auto-height.on-focus-large:focus {
  min-height: 30rem;
}


.ai-playground .gpt-area .table-responsive {
  background: #3c3f55 0% 0% no-repeat padding-box;
  border: 1px solid #5b6188;
  border-radius: 0.5rem;
  width: -webkit-fill-available;
}

.ai-playground .gpt-area .table-responsive.position-absolute {
  height: calc(100% - 2rem);
  width: calc(100% - 2rem);
}

/* welcome chat window style */

.welcome-chat-window {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
}

.welcome-chat-window .welcome-chat-header,
.welcome-chat-window .welcome-chat-body {
  width: 35rem;
  display: flex;
  justify-content: center;
}

.ai-heading {
  font-weight: 400;
  font-family: calibri, sans-serif;
  line-height: normal;
  background: linear-gradient(90deg, #67A6FC, #DAA7FF, #FD7272, #E6FF80);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  animation: gradientAnimation 5s infinite;
}

/* Keyframes for the gradient animation */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.container-issues {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container-issues ul {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.container-issues ul li {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 100vw;
  background: #00000041;
  border: 1px solid #ffffff69;
  cursor: pointer;
  color: #cccccc !important;
  transition: all 0.1s ease-in-out;
  opacity: 0.8;
  user-select: none;
}

.container-issues ul li:active {
  transform: scale(0.95);
}

.container-issues ul li:hover {
  background: #000000d1;
  border: 1px solid #ffffff;
  opacity: 1;
}

.container-issues ul li.not-clickable {
  cursor: unset;
}

.container-issues ul li.not-clickable:hover {
  background: #00000041;
  border: 1px solid #ffffff69;
  cursor: unset;
  opacity: 0.8;
}

.container-issues ul li.not-clickable:active {
  transform: unset;
}

/* Handle */

textarea::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

/* Handle on hover */

.textarea-editable::-webkit-scrollbar-thumb:hover {
  background: #515f9a;
}

.ai-playground .gpt-area .prompt-q-space {
  padding-bottom: 1rem;
  color: #00eaff;
  border-bottom: 1px solid #2e3453;
  line-height: initial;
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: 1.5rem;
}

.ai-playground .gpt-area .prompt-holder {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0.5rem;
  width: -webkit-fill-available;
  padding-left: 1rem;
}

.ai-playground .gpt-area .prompt-holder::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 2px;
  background: #00eaff;
}

.ai-playground .gpt-area .prompt-q-space .prompt {
  color: #00eaff;
  padding-right: 4rem;
}

.ai-playground .gpt-area .prompt-q-space .tags {
  display: flex;
  gap: 0.5rem;
}

.ai-playground .gpt-area .prompt-q-space .options-holder {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.playground-footer {
  padding-top: 1rem;
  margin-top: 1rem;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #2E3353;
  gap: 1rem;
}

.playground-footer.playground-footer-col {
  flex-direction: column;
  align-items: start;
  justify-content: flex-start;
}

.playground-footer-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.playground-info p {
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: #aeb3f1;
  margin: 0;
}

.ai-playground.ai-playground-reverse .playground-footer {
  border-bottom: 1px solid #2E3353;
  padding-bottom: 1rem;
  padding-top: 0;
  border-top: none;
  margin-bottom: 1rem;
  margin-top: 0;
}

.playground-footer .prompt-box {
  position: relative;
}

.playground-footer .prompt-box .options-holder {
  position: absolute;
  height: 1.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.playground-footer .prompt-box textarea {
  padding-right: 5.5rem;
  max-height: 8.4rem;
  overflow-y: scroll !important;
}

.playground-footer .prompt-box textarea::-webkit-scrollbar-track {
  background: transparent;
}

.output-container {
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #5F68A2;
  border-radius: 1rem;
  white-space: pre-wrap;
  color: #AFD9F4;
  position: relative;
}

.output-container .card {
  border-radius: 0.5rem;
}

.output-container.two-col {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.output-container .left-col {
  width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.output-container .left-col .file-list ul li .file-details span.file-name {
  width: 13rem;
}

.output-content {
  white-space: pre-wrap;
  color: #AFD9F4;
  position: absolute;
  width: 98%;
  height: 95%;
  left: 1rem;
  top: 1rem;
}

.output-container.two-col .output-content {
  position: absolute;
  left: 23rem;
  width: calc(98% - 23rem);
  height: 92%;
  padding-right: 1rem;
}

/*------------------------------------*
  BADGE
*------------------------------------*/
.badge-tag {
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  background: #4B538D;
  display: flex;
  gap: 0.3rem;
  font-weight: 400;
  color: #ffffff !important;
}

/*------------------------------------*
  PAGE LOADER
*------------------------------------*/
.page-loader {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16192eb5;
}

.page-loader::after {
  content: "";
  width: 10rem;
  height: 10rem;
  background: url("../images/loader.svg") no-repeat 0 0;
  background-size: 100%;
}

.prompt-box .spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}

/*------------------------------------*
  SPOTLIGHT
*------------------------------------*/
.spotlight-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8rem;
}

.spotlight-item {
  position: relative;
  width: 9rem;
  height: 9rem;
  text-align: center;
}

.spotlight-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 57%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  z-index: -1;
  background: #ffffff00 radial-gradient(closest-side at 50% 50%, #4857b9 -40%, #80808000 100%) 0% 0% no-repeat padding-box;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.spotlight-item:hover::before {
  opacity: 1;
}

.spotlight-item::after {
  content: "";
  width: 8rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  right: -8rem;
  transform: translateY(-50%);
  background: url(../images/icon-next-arrow.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.spotlight-item:last-child:after {
  display: none;
}

.btn-spotlight-item {
  padding: 8.5rem 0 0 0;
  color: #ffffff;
  width: 100%;
}

.btn-splt-input {
  background: url(../images/border-icon-input.svg) no-repeat 50% 0;
  background-size: 95%;
}

.btn.btn-splt-prompt {
  background: url(../images/border-icon-prompt.svg) no-repeat 163% -1%;
  background-size: 96%;
}

.btn.btn-splt-model {
  background: url(../images/border-icon-ai-model.svg) no-repeat 50% 13%;
  background-size: 90%;
}

.btn-splt-output {
  background: url(../images/border-icon-output.svg) no-repeat 50% 0;
  background-size: 90%;
}

.btn.btn-splt-job-summary {
  background: url(../images/border-icon-job-summary.svg) no-repeat 50% 0;
  background-size: 110%;
}

.btn.btn-splt-resume-summary {
  background: url(../images/border-icon-resume-summary.svg) no-repeat 50% 0;
  background-size: 110%;
}

.btn.btn-splt-find-gap {
  background: url(../images/border-icon-find-the-gap.svg) no-repeat 50% 0;
  background-size: 110%;
}

.btn.btn-splt-action {
  background: url(../images/border-icon-required-action.svg) no-repeat 50% 0;
  background-size: 100%;
}

.btn-splt-input .btn.btn-thin,
.btn-splt-output .btn.btn-thin {
  padding: 0.3rem 0.5rem !important;
  margin-bottom: 0.3rem;
}

.btn-spotlight-item:hover {
  color: #00C1AB;
}

.wrapper-ai-model {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8rem;
  border: 1px dashed #00eaff;
  padding: 0 0 2rem 0;
  margin-left: 1rem;
  border-radius: 1rem;
  position: relative;
}

.wrapper-ai-model::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/border-icon-ai-model.svg) no-repeat 50% 50% #16192E;
  background-size: 90%;
  border: 1px dashed #00eaff;
  border-radius: 0.5rem;
  top: -1rem;
}

.spotlight-item .btn-prompt-blue {
  position: absolute;
  right: 0.3rem;
  top: 0.4rem
}

.spotlight-holder {
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
  padding: 2rem 1rem 3rem;
  /* padding: 1rem 1rem 3rem; */
}

.spotlight-holder-app-life-cycle {
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #2E3353;
  border-radius: 1rem;
  padding: 1rem 1rem 3rem;
}

.spotlight-holder .spotlight-container {
  transform: scale(0.9);
}

.spotlight-holder-app-life-cycle .spotlight-container {
  transform: scale(0.9);
}

/*------------------------------------*
  AI IMAGE
*------------------------------------*/
.ai-image {
  margin: 0;
  position: absolute;
  z-index: 0;
  width: 50%;
  left: 0;
  bottom: 0;
  mix-blend-mode: lighten;
}

.ai-image img {
  width: 100%;
}

.neuron-path {
  position: absolute;
  left: -14rem;
  top: -2rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.neuron-path img {
  width: 82%;
  height: 100%;
}

.neo-light {
  width: 2.3125rem;
  height: 2.3125rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  animation: move 15s linear infinite;
}

.blue-light {
  background: url(../images/blue-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M348.1,814.4c0,0,89.2-45.7,84.7-126.5S278.1,557.7,257.1,451.4s3.8-168.7,87.1-237.6s228.2-51.2,258-38.9s95.9,45.8,99.2,104.6s-12.7,94.1-60.1,148s-62.4,61.2-58,122.4s93.1,113.7,153.3,114s205.9-22.3,258.1-172.4s154.6-161.2,196.9-163.6');
}

.orange-light {
  background: url(../images/orange-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M75.7,742.3c0,0,156.8,36.6,194.2-21.7s32-64,31.6-93.2s-35.1-117-31.6-169.5s41.7-135.4,100.9-156.3s127.6-40.7,227.8-16.7s96.4,118.1,91.8,134s-0.2,95.3-129.5,213.2S426.2,804,503.2,842.3s151-70.9,151-70.9');
}

.blue-light-2 {
  background: url(../images/blue-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M738.6,84.8c0,0-56.1,31-142.5,23s-172.1-5.8-219.1,15.1s-90.2,38.7-136.2,119.2s-21.4,201,0,229.2s49.5,96,162.7,116.9s243.6,22.2,363.1,143.9');
}

.orange-light-2 {
  background: url(../images/orange-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M305.8,777.5c0,0,109.3-52.7,114.8-126.4s-30.9-210.6,68.5-274.5s226.4-50.7,272.2-33.5S854,406.3,866.6,421s46.5,100.8,135.9,133.9s144,32.9,144,32.9');
}

.orange-light-3 {
  background: url(../images/orange-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M75.7,132.9c0,0,148.4,164.1,324.8,112.7s172.5-36.4,226.2-32s118.6,53.6,137.6,89.4s31.4,117.1-4.6,216.4S622.4,669.9,588.3,674.1s-152.5,19.4-210.7,108.8');
}

.blue-light-3 {
  background: url(../images/blue-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M1191.6,193c0,0-156.8-36.6-194.2,21.7c-37.3,58.3-32,64-31.6,93.2s35.1,117,31.6,169.5s-41.7,135.4-100.9,156.3c-59.1,20.9-127.6,40.7-227.8,16.7s-96.4-118.1-91.8-134c4.6-15.9,0.2-95.3,129.5-213.2s134.6-171.8,57.6-210.1s-151,70.9-151,70.9');
}

.orange-light-4 {
  background: url(../images/orange-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M919.3,120.9c0,0-89.2,45.7-84.7,126.5c4.4,80.8,154.8,130.3,175.7,236.6s-3.8,168.7-87.1,237.6s-228.2,51.2-258,38.9s-95.9-45.8-99.2-104.6s12.7-94.1,60.1-148s62.4-61.2,58-122.4s-93.1-113.7-153.3-114S324.7,293.9,272.5,444S117.9,605.2,75.6,607.7');
}

.orange-light-5 {
  background: url(../images/orange-light.png) no-repeat 0 0;
  background-size: 100%;
  offset-path: path('M528.8,850.5c0,0,56.1-31,142.5-23s172.1,5.8,219.1-15.1s90.2-38.7,136.2-119.2c46-80.5,21.4-201,0-229.2c-21.4-28.2-49.5-96-162.7-116.9s-243.6-22.2-363.1-143.9');
}

@keyframes move {
  0% {
    offset-distance: 100%;
  }

  100% {
    offset-distance: 0;
  }
}

/*------------------------------------*
  TABLE DATA
*------------------------------------*/
.table-data * {
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 1rem;
  color: #ffffff;
}

.table-data .table-data-head {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.table-data .table-data-head h5.block-headline {
  margin-bottom: 0 !important;
  color: #f2bb0d !important;
}

.table-data .table-data-body .tr {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.table-data.two-col .table-data-head .heading,
.table-data.two-col .table-data-body .tr .td {
  width: 50%;
  padding: 0.2rem 0;
}

.table-data.three-col .table-data-head .heading,
.table-data.three-col .table-data-body .tr .td {
  width: 33.33%;
  padding: 0.2rem 0;
}

.table-hover>tbody>tr:hover {
  cursor: pointer;
  background: #363a5f;
}

.table-hover>tbody>tr:hover>* {
  color: #ffffff;
}

.table-hover tr:has(.workflow-child-list):hover {
  background: unset;
}

.table .table {
  background: #11121d;
}

/*------------------------------------*
  STEPPER
*------------------------------------*/
.stepper {
  padding-left: 2.5rem;
  padding-right: 0.5rem;
  padding-left: 2rem;
  height: 100%;
}

.stepper ul {
  display: flex;
  flex-direction: row;
  gap: 2.3rem;
  padding: 0.3rem 0;
}

.stepper.vertical ul {
  flex-direction: column;
}

.stepper ul li.stepper-item {
  position: relative;
  cursor: default;
}

.stepper ul li.stepper-item::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: #2F3462;
  border: 2px solid #6770BE;
  border-radius: 0.7rem;
  left: -2rem;
  top: -0.25rem;
  position: absolute;
  flex-shrink: 0;
}

.stepper ul li.stepper-item.active::before {
  background: #fae6003b;
  border: 2px solid #ffe000;
}

.stepper ul li.stepper-item.completed::before {
  background: url(../images/icon-check.svg) no-repeat 50% 53% #2A9321;
  border: 2px solid #91FF88;
  background-size: 50%;
}

.stepper ul li.stepper-item::after {
  content: "";
  width: 1px;
  height: 77%;
  position: absolute;
  top: 1.55rem;
  left: -1.35rem;
  border-left: 1px dashed #ABB3E6;
}

.stepper ul li.stepper-item:last-child::after {
  display: none;
}

.stepper ul li.stepper-item.completed {
  cursor: pointer !important;
}

.stepper ul li.stepper-item h5 {
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.stepper ul li.stepper-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 130%;
  color: #bec6f1;
}

.stepper ul li.stepper-item h5,
.stepper ul li.stepper-item p {
  opacity: 0.5;
}

.stepper ul li.stepper-item.active h5 {
  color: #ffe000;
}

.stepper ul li.stepper-item.completed h5 {
  color: #5ded51;
}

.stepper ul li.stepper-item.active h5,
.stepper ul li.stepper-item.active p,
.stepper ul li.stepper-item.completed h5,
.stepper ul li.stepper-item.completed p {
  opacity: 1;
}

/*------------------------------------*
  COMPARE MODELS START
*------------------------------------*/
.compare-model-section {
  border-left: 1px solid #2E3353;
  padding-left: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.custom-radio {
  position: relative;
  padding-left: 0;
  cursor: pointer;
}

.custom-radio label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid #6B79C9;
  background: #333958;
  border-radius: 1.5rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

label.open-ai::before,
label.vertex-ai::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: url(../images/icon-openai.svg) no-repeat 0 0;
  background-size: 100%;
}

label.vertex-ai::before {
  background: url(../images/icon-vertexai.svg) no-repeat 0 50%;
  background-size: contain;
}

.custom-radio .form-check-input {
  border: none;
  background: transparent;
  margin: 0;
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  box-shadow: none;
}

.custom-radio .form-check-input:checked {
  background: url(../images/icon-green-tick.svg) no-repeat 50% 50%;
  box-shadow: none;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.custom-radio .form-check-input:checked~label {
  padding-left: 2rem;
  background: #b5fe5f1c;
  border: 1px solid #B6FE60;
}

.compare-model-section .radio.horizontal {
  gap: 0.5rem;
}

/*------------------------------------*
  ML PLAYGROUND
*------------------------------------*/
.sub-card {
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.content-container {
  margin-bottom: 2rem;
}

.content-container h4 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

h6.sub-heading {
  font-weight: normal;
  font-size: 0.9rem;
  color: #9FAAEA;
  padding: 0.3rem 0;
}

.tab-content.h-custom {
  height: calc(100% - 8.7rem);
}


/*------------------------------------*
  SUSTAINABILITY MODEL START
*------------------------------------*/
.folder {
  border-bottom: 1px dashed #3E4674;
  padding: 1rem 0;
}

.folder:last-child {
  border: none;
}

.folder-box {
  display: flex;
  gap: 1.3rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.folder-box h6.folder-title {
  color: #ffffff;
  font-weight: 400;
  width: 80%;
  flex-shrink: 0;
  margin: 0;
  line-height: inherit;
  width: 75%;
}

.folder-box .btn-holder {
  flex-shrink: 0;
}

.folder-box .btn-holder {
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}

.folder .collapsing .card.card-body,
.folder .collapse .card.card-body {
  padding: 0.5rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

.button-files {
  position: relative;
}

.file-count {
  position: absolute;
  width: 1.2rem;
  height: 1.1rem;
  border-radius: 0.7rem;
  background: #ad2323;
  right: -0.5rem;
  top: -0.45em;
  text-align: center;
  line-height: 0.8rem;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid #202235;
}

.folder-box .btn.btn-file {
  width: 1.2rem;
  margin-top: -4px;
}

.folder-box .btn.btn-upload {
  margin-top: -4px;
}

.folder-box input[type="file"]:active .btn.btn-upload {
  transform: scale(0.8);
}

/* .section-item-list ul li.folder {
  padding-top: 0;
} */

.section-edited {
  color: #6ff941 !important;
}


/*------------------------------------*
  MODEL GEN-AI START
*------------------------------------*/
.gap-6 {
  gap: 4rem;
}

.mb-6 {
  margin-bottom: 6rem;
}

.pr-1 {
  padding-right: 1rem;
}

.card-model-state {
  border: none;
  background: #2E3353;
  border-radius: 1rem;
  box-shadow: 1rem 1rem 0 #00000036;
  position: relative;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  align-items: center;
  /* padding-bottom: 2.3rem; */
}

.card-model-state:active {
  transform: scale(0.96);
}

/* .card-model-state::after {
  content: "";
  width: 3.9rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
  background: url(../images/icon-next-arrow.svg) no-repeat 50% 50%;
  background-size: 8rem;
} */

.card-model-state:last-child::after {
  display: none;
}

.card-model-state .card-header {
  background: transparent linear-gradient(104deg, #535c92 0%, #2c3b89 100%) 0% 0% no-repeat padding-box;
  display: flex;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  border-radius: 0.9rem 0.9rem 0 0;
}

.card-model-state.active,
.card-model-state:hover {
  opacity: 1;
  border: 2px solid #74bdfd;
}

.card-model-state.active .card-header,
.card-model-state:hover .card-header {
  background: transparent linear-gradient(104deg, #713CFF 0%, #22A2FF 100%) 0% 0% no-repeat padding-box;
}

.card-model-state .card-body span.count {
  width: 2.2rem;
  height: 2.2rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  color: #ffffff;
  font-weight: bold;
  background: #474E86;
  flex-shrink: 0;
  line-height: 1.2rem;
  border-radius: 15px;
}

.card-model-state.active span.count {
  background: transparent linear-gradient(141deg, #F7519D 0%, #8022FF 100%) 0% 0% no-repeat padding-box;

}

.card-model-state .card-header h5 {
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.4rem;
  padding: 1rem;
}

.card-model-state .card-body {
  padding: 1rem;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 7rem;
  padding-left: 2.4rem;
}

.card-model-state .card-footer {
  background: transparent;
  padding-top: 0;
  /* position: absolute; */
  width: 100%;
  display: flex;
  justify-content: flex-end !important;
  left: 0;
  right: 0;
  bottom: 0;
}

.btn.btn-popup {
  background: url(../images/icon-popup.svg) no-repeat 50% 50%;
  background-size: 100%;
  border-radius: 0;
}

.sidebar-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-navigation li.nav-item {
  border: 1px solid #6B79C9;
  background: #333958;
  border-radius: 1.5rem;
  transition: all 0.3s ease-in-out;
  padding-left: 2rem;
}

.sidebar-navigation li.active,
.sidebar-navigation li.active:hover {
  background: url(../images/icon-green-tick.svg) no-repeat 0.6rem 50% #b5fe5f1c;
  border: 1px solid #B6FE60;
}

.sidebar-navigation li:hover {
  background: #b5fe5f1c;
  border: 1px solid #B6FE60;
}

.sidebar-navigation li.nav-item a {
  color: #ffffff;
  display: block;
  padding: 0.3rem 0.7rem 0.3rem 0;
}

/******* 22/11/2023 ********/

.btn.btn-usecase {
  background: url(../images/icon-usecase.svg) 50% 50% no-repeat, linear-gradient(130deg, #ff00c4 0%, #ff6a00 100%) padding-box !important;
  width: 2rem !important;
  height: 2rem !important;
}

.usecase-btn-holder .btn.btn-icon-bg:nth-child(2n) {
  background: url(../images/use-case-btn-logo-1.svg) 50% 50% no-repeat, linear-gradient(130deg, #ff00c4 0%, #ff6a00 100%) padding-box !important;
}

.usecase-btn-holder .btn.btn-icon-bg:nth-child(3n) {
  background: url(../images/use-case-btn-logo-2.svg) 50% 50% no-repeat, linear-gradient(130deg, #ff00c4 0%, #ff6a00 100%) padding-box !important;
}

.usecase-btn-holder .btn.btn-icon-bg:nth-child(4n) {
  background: url(../images/use-case-btn-logo-3.svg) 50% 50% no-repeat, linear-gradient(130deg, #ff00c4 0%, #ff6a00 100%) padding-box !important;
}

.usecase-btn-holder .btn.btn-icon-bg:nth-child(5n) {
  background: url(../images/use-case-btn-logo-4.svg) 50% 50% no-repeat, linear-gradient(130deg, #ff00c4 0%, #ff6a00 100%) padding-box !important;
}

figure.icon-holder {
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 40%;
}

figure.icon-holder img {
  width: 80%;
}

figcaption.card-icon-caption {
  flex-shrink: 0;
  line-height: 1.2rem;
  font-size: 1.1rem;
  color: #ffffff;
  width: 55%;
}

/* .card-carousel .slick-track {
  display: flex;
  gap: 4rem;
  padding-bottom: 1.5rem;
}

.card-carousel .slick-dots li {
  background: red;
} */

.card-carousel-container {
  width: calc(100% - 1rem);
}

.card-carousel-container .slick-list {
  max-width: 72vw;
  padding-bottom: 1.2rem;
}

.card-carousel-container .slick-track {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  /* display: block; */
}

.card-carousel-container .slick-track:before,
.card-carousel-container .slick-track:after {
  display: none;
}

.slick-dots li button:before {
  content: "" !important;
  width: 10px;
  height: 10px;
  border-radius: 8px;
  background: #ffffff;
}

/* Inner HTML styles */
.list-style {
  padding-left: 1.5rem;
}

.list-style li {
  list-style-type: disc;
}


/*------------------------------------*
  SUSTAINABILITY MODEL START
*------------------------------------*/
.folder {
  border-bottom: 1px dashed #3E4674;
  padding: 1rem 0;
}

.folder:last-child {
  border: none;
}

.folder-box {
  display: flex;
  gap: 1.3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.folder-box h6.folder-title {
  color: #ffffff;
  font-weight: 400;
  width: 80%;
  flex-shrink: 0;
  margin: 0;
  line-height: inherit;
  width: 75%;
}

.folder-box .btn-holder {
  flex-shrink: 0;
}

.folder-box .btn-holder {
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}

.folder .collapsing .card.card-body,
.folder .collapse .card.card-body {
  padding: 0.5rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

.button-files {
  position: relative;
}

.file-count {
  position: absolute;
  width: 1.2rem;
  height: 1.1rem;
  border-radius: 0.7rem;
  background: #ad2323;
  right: -0.5rem;
  top: -0.45em;
  text-align: center;
  line-height: 0.8rem;
  font-weight: 600;
  font-size: 0.8rem;
  border: 1px solid #202235;
}

.folder-box .btn.btn-file {
  width: 1.2rem;
  margin-top: -4px;
}

.folder-box .btn.btn-upload {
  margin-top: -4px;
}

.folder-box input[type="file"]:active .btn.btn-upload {
  transform: scale(0.8);
}

.chat-prompt {
  padding: 1rem;
  border-radius: 0.7rem;
  background: #333759;
  width: 80%;
  flex-shrink: 0;
}

.chat-reply {
  padding: 1rem;
  border-radius: 0.7rem;
  background: #484e81 !important;
  width: 80% !important;
  flex-shrink: 0;
}

.gpt-chat-result {
  height: 95%;
  display: flex;
  overflow: auto;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  padding-right: 1rem !important;
}

.gpt-chat-result .chat-box:nth-child(even) {
  margin-left: auto;
}


.bot-typing {
  background: url(../images/keyboard_alt_white_24dp.svg) no-repeat 0 50%;
  background-size: 1.5rem;
  padding-left: 2rem;
  animation: bot-typing 1s ease-in infinite;
}

@keyframes bot-typing {

  0%,
  10% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.3;
  }
}

.chat-prompt {
  padding: 1rem;
  border-radius: 0.7rem;
  background: #333759;
  width: 80%;
  flex-shrink: 0;
}

.chat-main-outer-container {
  display: flex;
  flex-direction: column-reverse;
}

.ai-playground.ai-playground-reverse .chat-main-outer-container {
  flex-direction: column;
}

.chat-main-container {
  display: flex;
  flex-direction: column-reverse;
  height: auto;
  align-items: center;
}

.chat-wrapper {
  height: auto;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: flex-end;
  padding-right: 0.7rem;
}

.chat-prompt-response-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.chat-prompt-response-wrapper .chat-style {
  padding: 0.5rem 0.7rem;
  background: #373d7c;
  border-radius: 0.6rem 0.6rem 0.6rem 0;
  color: #fff;
  max-width: 80%;
}

.chat-prompt-response-wrapper .chat-style.chat-style-editable {
  display: flex;
  gap: 0.3rem;
  align-items: flex-start;
}

.chat-prompt-response-wrapper .chat-style.chat-style-editable .btn.btn-edit-white {
  margin: 0.3rem;
  margin-right: 0;
  flex-shrink: 0;
}

.chat-prompt-response-wrapper .prompt {
  border-radius: 0.6rem 0.6rem 0 0.6rem;
  align-self: flex-end;
  background: #1e7c55;
  color: #ffffff;
  position: relative;
}

.chat-prompt-response-wrapper .prompt.editable-prompt {
  width: 80%;
  background: transparent;
  padding: 0;
}

.chat-prompt-response-wrapper .prompt.editable-prompt .editable-answer,
.chat-prompt-response-wrapper .prompt.editable-prompt .btn.btn.btn-edit-white {
  display: none;
}

.chat-prompt-response-wrapper .prompt.editable-prompt .textarea-edit-answer {
  border-radius: 0.4rem;
  border: none;
  border-bottom: 3px solid #1ac350;
  padding: 0.5rem 0.8rem;
  color: #000000 !important;
}


/* .chat-prompt-response-wrapper .prompt .floating-textarea{
  position: absolute;
  padding: 0.7rem;
  z-index: 999;
  background: #16192E 0% 0% no-repeat padding-box;
  opacity: 1;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 0.7rem 0 0.7rem 0.7rem;
  width: 40rem;
  right: 0;
  top: 100%;
  box-shadow: 0 1rem 1.5rem #00000070;
} */

.chat-prompt-response-wrapper .prompt .floating-textarea .btn-holder {
  justify-content: end;
  gap: 0.5rem;
}

.chat-prompt-response-wrapper .prompt * {
  color: #ffffff !important;
}

.chat-prompt-response-wrapper .response {
  align-self: flex-start;
}

.cost-holder,
.time-holder {
  display: flex;
  gap: 0.5rem;
}

.submit-report-container {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #282b43;
  border-radius: 0.5rem;
  border: 1px dashed #4a4f81;
  align-items: center;
}

.submit-report-container:has(.report-success) {
  background: #1b4119;
  border-radius: 0.5rem;
  border: 1px dashed #26bd19;
}

.submit-report-container:has(.report-success) p {
  color: #ffffff !important;
}

.submit-report-container h6,
.submit-report-container .btn {
  color: #ffffff !important;
}

.submit-report-container p {
  font-size: 1.1rem;
  color: #bbbfdd !important;
}

/*------------------------------------*
  NAVBAR USER INFORMATION
*------------------------------------*/

.user-info-arrow {
  padding: 1.5rem;
  cursor: pointer;
}

.user-info-arrow:hover,
.user-info-arrow.show {
  background: #2a2c4a;
}

.user-info-arrow .material-icons {
  font-size: 1.5rem;
  transition: all 0.2s ease-in-out;
}

.user-info-arrow.show .material-icons {
  transform: rotate(180deg);
}

.user-info::after {
  display: none;
}

.no-gap {
  gap: 0 !important;
}

.user-info .info {
  display: flex;
  flex-direction: column;
}

.role-dropdown .btn-link {
  color: #ffffff;
  text-decoration: none;
  color: #42a4fa;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.no-outline:focus {
  box-shadow: none;
}

.btn.title {
  background: url(../images/title_white.svg) no-repeat 50% 50%;
  background-size: 80%;
}

.btn.stop-mic {
  background: url(../images/stop_circle.svg) no-repeat 50% 50%;
  background-size: 80%;
}

.btn.download-audio {
  background: url(../images/cloud_download.svg) no-repeat 50% 50%;
  background-size: 80%;
}

.img-thumbnail-list ul li.img-thumbnail .btn-close {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  width: 1rem;
  height: 1rem;
  background: url(../images/Icon-close.svg) no-repeat 50% 50% #000000 !important;
}

/************FROM SURAJIT AT MULTI MODAL**************/

.alert-box-capsule {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  width: 11rem;
  margin: 0;
  padding: 0;
  left: auto;
}

.alert-box-capsule .alert button.close {
  display: none;
}

.alert-box-capsule .alert.alert-success.alert-dismissible {
  border-radius: 100vw;
  justify-content: center;
  width: 11rem;
  padding: 0.5rem 1rem;
  background: #ffffffe0;
  border: none;
}

.alert-box-capsule .alert.alert-success.alert-dismissible p {
  color: #000000;
}

typeahead-container {
  width: 100% !important;
  max-height: 7rem;
  border-radius: 0 !important;
}

typeahead-container .dropdown-item span {
  white-space: break-spaces !important;
}

typeahead-container::-webkit-scrollbar {
  width: 0.3125rem;
}

typeahead-container::-webkit-scrollbar-track {
  background: #121522;
  border-radius: 10px;
}

/* Handle */

typeahead-container::-webkit-scrollbar-thumb {
  background: #5d6cb1;
  height: 20px;
  border-radius: 3px;
}

/* Handle on hover */

typeahead-container::-webkit-scrollbar-thumb:hover {
  background: #6a7dc9;
}

/*******************************
Rediness-upload
********************************/
.form-check.user-check {
  padding-left: 0;
  margin: 0
}

.form-check.user-check label {
  border-radius: .4rem;
  background: #1e2037;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid transparent
}

.form-check.user-check label:hover {
  background: #313352
}

.form-check.user-check input.form-check-input:checked~label.repost-success,
.form-check.user-check input.form-check-input:disabled~label.repost-success {
  background: #087f3e;
  border: 1px solid #17e5b4;
  color: #fff;
  opacity: 1;
}

.form-check.user-check input.form-check-input:checked~label {
  background: #1a3c51;
  border: 1px solid #17ace5;
  opacity: 1;
}

.form-check.user-check input.form-check-input:disabled~label {
  background: #1a3c51;
  border: 1px solid #17ace5;
  opacity: 1;
}

.w-13-rem {
  width: 13rem !important
}

.ml-auto,
.user-list-row .btn-holder {
  margin-left: auto
}

.u-details .u-name,
.user-list-container {
  display: flex;
  flex-direction: column
}

.u-details,
.user-list-row {
  align-items: center;
  display: flex
}

.user-list-container .text-success {
  font-weight: 600;
  color: #0cdf17 !important
}

.user-list-row {
  padding: .6rem 0;
  border-bottom: 1px solid #3a426d
}

.u-details {
  gap: 1rem
}

.u-details .material-icons {
  color: #2d96f2 !important;
  font-size: 2rem
}

.u-name .u-sub-details {
  display: inline-block;
  font-size: .8rem;
  color: #ffc107 !important
}

.user-list-options {
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.custom-select-btn {
  background: #313660;
  padding: .45rem .8rem .55rem 2.3rem;
  border-radius: .3rem
}

.pointer {
  border-top: 1px solid #444a76;
  padding-top: 1rem;
  margin-bottom: 1rem
}

.pointer li {
  border-bottom: 1px solid #444a76;
  margin-bottom: 1rem;
  min-width: 0
}

.pointer.no-border li,
.table.no-border td {
  border: none
}

.pointer li:last-child {
  border-top: none;
  margin: 0
}

.pointer-item-container {
  width: 100%
}

.form-control.form-control-lg {
  font-size: 2rem;
  color: #fff
}

.form-control.form-control-md {
  font-size: 1.1rem;
  color: #fff;
  background: #1d275e;
  border: 1px solid #3d4fb1
}

.playground-info {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
  justify-content: space-between;
}

.playground-info .datom-logo {
  width: 7rem;
  flex-shrink: 0;
  margin-bottom: 0;
}

.playground-info .datom-logo img {
  filter: invert();
  width: 100%;
}

.form-check.user-check {
  padding-left: 0;
  margin: 0
}

.form-check.user-check label {
  border-radius: .4rem;
  background: #1e2037;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid transparent
}

.form-check.user-check label:hover {
  background: #313352
}

.form-check.user-check input.form-check-input:checked~label.repost-success {
  background: #087f3e;
  border: 1px solid #17e5b4;
  color: #fff
}

.form-check.user-check input.form-check-input:checked~label {
  background: #1a3c51;
  border: 1px solid #17ace5
}

.w-13-rem {
  width: 13rem !important
}

.ml-auto,
.user-list-row .btn-holder {
  margin-left: auto
}

.u-details .u-name,
.user-list-container {
  display: flex;
  flex-direction: column
}

.u-details,
.user-list-row {
  align-items: center;
  display: flex
}

.user-list-container .text-success {
  font-weight: 600;
  color: #0cdf17 !important
}

.user-list-row {
  padding: .6rem 0;
  border-bottom: 1px solid #3a426d
}

.u-details {
  gap: 1rem
}

.u-details .material-icons {
  color: #2d96f2 !important;
  font-size: 2rem
}

.u-name .u-sub-details {
  display: inline-block;
  font-size: .8rem;
  color: #ffc107 !important
}

.user-list-options {
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.custom-select-btn {
  background: #313660;
  padding: .45rem .8rem .55rem 2.3rem;
  border-radius: .3rem
}

.pointer {
  border-top: 1px solid #444a76;
  padding-top: 1rem;
  margin-bottom: 1rem
}

.pointer li {
  border-bottom: 1px solid #444a76;
  margin-bottom: 1rem;
  min-width: 0
}

.pointer.no-border li,
.table.no-border td {
  border: none
}

.pointer li:last-child {
  border-top: none;
  margin: 0
}

.pointer-item-container {
  width: 100%
}

.form-control.form-control-lg {
  font-size: 2rem;
  color: #fff
}

.form-control.form-control-md {
  font-size: 1.1rem;
  color: #fff;
  background: #1d275e;
  border: 1px solid #3d4fb1
}

.playground-info {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: 100%;
  justify-content: space-between;
}

.playground-info .datom-logo {
  width: 7rem;
  flex-shrink: 0;
  margin-bottom: 0;
}

.playground-info .datom-logo img {
  filter: invert();
  width: 100%;
}

.custom-progress-bar {
  border-radius: 100vw;
  overflow: hidden;
  height: 1.5rem;
  background: #070810;
}

.custom-progress-bar .bg-success {
  background: transparent linear-gradient(112deg, #27cd05 0%, #0f5b00f8 100%) 0% 0% no-repeat padding-box;
  border-radius: 100vw;
}

.custom-progress-bar .bg-success .text-nowrap {
  font-size: 1rem;
  font-weight: 600;
}

/* map navigation chat icon */
.open-button {
  background: url(../images/icon-chat-floting.svg) no-repeat 50% 55% #ffffff;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  filter: invert(1);
  border-radius: 100vw;
  border: 1px solid #000000;
}

.alert.alert-warning .alert-msg {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.alert.alert-warning p {
  color: #664d03;
  padding: 0;
  margin: 0;
}

.alert.alert-warning .alert-msg .btn-close {
  filter: invert(1);
}

.ai-playground alert .alert.alert-warning {
  margin-bottom: 0 !important;
}


/* Image Search */
textarea.form-control.machine-description {
  min-height: 10rem;
}

.editable-description .form-control:disabled {
  padding: 0;
  padding-right: 1rem;
  background: transparent;
  opacity: 1;
  color: #D6D6DA;
  border: none;
}

/*******************************
IMAGE INSPECTION COMPONENT
********************************/

.tunig-details-box-holder .tune-box h5 {
  margin-bottom: 0.3rem !important;
}

.btn-tune {
  /* background: url(../../../../assets/images/icon-material-tune.svg) no-repeat 50% 50% !important; */
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background-size: 70% !important;
  padding: 0 !important;
}

.tune-box {
  white-space: nowrap;
  position: relative;
}

.list-of-slider {
  width: 10rem;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list-of-slider .slider-item {
  /* border-bottom: 1px solid #393E75; */
}

.list-of-slider .slider-item:last-child {
  border-bottom: none;
}


.left-slide-panel {
  position: absolute;
  left: calc(24rem + 1px);
  width: 19rem;
  background: #16192E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1rem;
  height: 100%;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

.left-slide-panel>* {
  /* flex-shrink: 0; */
  padding: 1rem;
}

.left-slide-panel.collapse {
  box-shadow: none;
}

.left-slide-panel.collapse:not(.show) {
  display: flex !important;
  left: 4rem;
}

.left-slide-panel.collapse.show {
  left: calc(24rem + 1px);
  box-shadow: 2rem 1rem 1.5rem #171829c2;
}

.left-slide-panel-body {
  height: 100%;
  flex-shrink: unset;
  padding: 0 0 0 1rem;
  margin-right: 0.4rem;
  padding-right: 0.5rem;
}

.panel-headline h5.block-headline {
  margin: 0 !important;
}

.main-container {
  position: relative;
  z-index: 1;
}

.left-stepper-panel {
  position: relative;
  z-index: 3;
}

.ml-auto {
  margin-left: auto !important;
}

.offcanvas-prompt-settings {
  width: 20rem;
}

.machine-description {
  min-height: 10rem;
}

.editable-description .form-control:disabled {
  padding: 0;
  padding-right: 1rem;
  background: transparent;
  opacity: 1;
  color: #D6D6DA;
  border: none;
}


/*------------------------------------*
  DATA PANEL
*------------------------------------*/
.data-panel {
  width: 20rem;
  background: #16192E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.data-panel.data-panel-wide {
  width: 25rem;
}

.data-panel .btn-holder {
  margin-bottom: 1rem;
  gap: 0.5rem
}

.data-panel .btn-holder .btn {
  margin: 0;
}

.data-panel-header {
  padding: 1rem;
}

.data-panel-body {
  height: 100%;
}

.data-panel-footer {
  margin-top: auto;
}

/*** DATA PANEL CENTER COLUMN START ***/
.data-panel-center-col {
  width: 40%;
  background: #16192E 0% 0% no-repeat padding-box;
  border-right: 1px solid #2E3353;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  gap: 1rem;
}

.data-panel-center-col-header {
  padding: 0 0 0.5rem 0;
  border-bottom: 1px solid #2E3353;
}

.data-panel-center-col-header h5,
.data-panel-center-col-header h6 {
  margin-bottom: 0.2rem !important;
}

.data-panel-center-col-body {
  height: 100%;
}

.data-panel-center-col-footer {
  margin-top: auto;
}

/*** DATA PANEL CENTER COLUMN END ***/

ul.list-data {
  display: flex;
  flex-direction: column;
}

ul.list-data>li {
  border-bottom: 1px solid #2E3353;
  padding: 1rem 0;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}

ul.list-data li:last-child {
  border: none;
}

ul.list-data li .data-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

ul.list-data li .data-container p {
  margin: 0;
}

/*------------------------------------*
 CUSTOM BADGE
*------------------------------------*/
.badge.badge-custom {
  font-weight: 400;
  border-radius: 100vw;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  line-height: 100%;
  padding-bottom: 0.2rem;
  padding-top: 0.3rem;
}

.badge.badge-outline.badge-custom {
  border: 1px solid #000000;
}

.badge.badge-custom .spinner-border {
  width: 0.6rem;
  height: 0.6rem;
}

.badge.badge-custom.bg-info {
  background-color: #087cf2 !important
}

.badge.badge-custom.bg-success {
  background-color: #028d0a !important;
}

.badge.badge-outline.badge-custom.bg-success {
  background-color: #1d3c1f !important;
  border: 1px solid #028d0a;
  color: #8be090;
}

.badge.badge-custom.bg-danger {
  background-color: #ce1123 !important;
}

.badge.badge-custom.bg-warning {
  background-color: #d96d00 !important;
}

.badge.badge-custom.bg-inprogress {
  background-color: #5d2d09 !important;
}

.badge.badge-custom.bg-light {
  background-color: #ffffff32 !important;
}

.badge.badge-custom.bg-info {
  background-color: #084298 !important;
}

/*------------------------------------*
 GENERIC OMNI CHAT EXTERNAL(EXTENDED CSS)
*------------------------------------*/
input[type="radio"].ans-rate {
  appearance: none;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
}

input[type="radio"].ans-rate.rate-yes {
  background: url(../images/thumb_up_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

input[type="radio"].ans-rate.rate-yes:checked {
  background: url(../images/thumb_up_white_outline_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

input[type="radio"].ans-rate.rate-no {
  background: url(../images/thumb_down_white_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

input[type="radio"].ans-rate.rate-no:checked {
  background: url(../images/thumb_down_white_outline_24dp.svg) no-repeat 50% 50%;
  background-size: 100%;
}

/***************************
CHECKBOX SWITCH
***************************/
.form-check-input.switch {
  border-radius: 100vw;
  width: 1.8rem;
  position: relative;
  transition: all 0.2s ease-in-out;
  border: none;
  background: #3e4974;
}

.form-check-input.switch::after {
  content: "";
  position: absolute;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 100vw;
  background: #ffffff;
  top: 50%;
  transform: translate(0.2rem, -50%);
  transition: all 0.2s ease-in-out;
}

.form-check-input.switch:checked[type=checkbox] {
  background-image: none;
  background-color: #43ad12;
  border-color: #3B8918;
}

.form-check-input.switch:checked[type=checkbox]::after {
  background: #ffffff !important;
  transform: translate(150%, -50%);
}

p.msg-text {
  padding: 0;
  margin: 0;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #65e1f1;
}

.main-container .offcanvas.offcanvas-tag {
  padding-left: 4rem;
  width: 26rem !important;
}

.dd-upside .dropdown-list {
  bottom: 3.2rem !important;
}

/*------------------------------------*
------------------------------------
GENERIC TEMPLATE CSS
------------------------------------
*------------------------------------*/
h4.font-basic {
  font-family: calibri, sans-serif;
  font-size: 1.125rem;
  color: #ffffff;
  font-weight: normal;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #B9B9B9;
}

.wrapper-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wrapper-header {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.wrapper-header .btn-back {
  align-self: unset;
}

.wrapper-header.wrapper-header-thin {
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}

.wrapper-body {
  display: flex;
  height: 100%;
  gap: 1rem;
}

.wrapper-body.full-width {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -1rem;
}

.wrapper-body .main-container {
  padding: 0;
}

.data-panel.data-panel-slick {
  width: 20rem;
  background: #202237 0% 0% no-repeat padding-box;
  border-radius: 1rem;
  padding-right: 0.5rem;
  border: 1px solid #383f67;
}

.data-panel.data-panel-slick .nav-tabs {
  border-bottom: 1px solid #ffffff0d;
}

.data-panel.data-panel-slick .data-panel-body {
  padding-right: 0.5rem;
}

.data-panel.data-panel-slick.collapse.show {
  height: unset !important;
}

.data-panel.data-panel-slick.collapse:not(.show) {
  display: inherit !important;
  margin-left: -21rem;
  transition: margin-left 0.3s ease-in-out !important;
  z-index: 1;
}

.data-panel.data-panel-slick.collapsing {
  height: unset !important;
  transition: margin-left 0.3s ease-in-out !important;
  z-index: 1;
}

.card.card-transparent.border-bottom {
  border-bottom: 1px solid #585f8b !important;
}

.container.container-slick {
  padding: 1rem;
  padding-bottom: 0;
  background: #292C3E 0% 0% no-repeat padding-box;
  border-radius: 1rem;
}

.container.container-slick .playground-footer {
  border-color: #585f8b;
}

.action-to-response {
  display: flex;
  justify-content: flex-end;
}

.prompt-suggestion-container {
  background: #3E425C 0% 0% no-repeat padding-box;
  position: absolute;
  width: 100%;
  bottom: calc(100% + 0.3rem);
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0px -25px 80px #0d0e17b3;
  animation: slideUp 0.5s;
}

@keyframes slideUp {
  from {
    transform: translateY(20%);
    opacity: 0;
  }

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

.prompt-suggestion-container .prompt-row .form-check {
  padding-left: 0;
}

.prompt-suggestion-container .prompt-row .form-check label {
  background: #32374f 0% 0% no-repeat padding-box;
  border-radius: 0.3rem;
  padding: 0.5rem 0.8rem;
  margin: 0;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  width: 100%;
  line-height: 1.2rem;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.prompt-suggestion-container .prompt-row .form-check:has(input:checked) label {
  background: #191c27 0% 0% no-repeat padding-box;
}

.prompt-suggestion-container .prompt-row .form-check label:hover {
  background: #2b2f42 0% 0% no-repeat padding-box;
  border: 1px solid #7684d6;
}

.prompt-suggestion-container .prompt-row .form-check .form-check-input {
  display: none;
}

/*-----------------------------------*
BREADCRUMB STYLES
*------------------------------------*/
.breadcrumb-item.active {
  color: #b7b7b7;
}

/*------------------------------------*
FORM STYLES
*------------------------------------*/
.form-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label.label {
  font-size: 0.875rem;
  font-family: calibri, sans-serif;
  color: #ffffff;
  margin-bottom: 0.2rem;
}

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

label.label.label-light {
  color: #979CBE;
}

label.label small {
  font-size: 0.9rem;
  color: #cfcfcf;
  text-transform: math-auto;
  margin-top: 0.2rem;
}

.form-control.form-control-prompt {
  background: #191A26 0% 0% no-repeat padding-box;
}

/* DEFAULT SWITCH */
.switch-content .form-check.form-switch {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.switch-content.flexible .form-check.form-switch {
  justify-content: unset;
  gap: 1rem;
}

.switch-content.flexible .form-switch .form-check-input {
  margin-left: 0;
}

.switch-content .form-switch .form-check-input {
  background-color: #1a1a1a !important;
  border: 2px solid #ffffff;
  height: 1.2rem;
  background-image: url(../images/switch-circle.svg);
  opacity: 0.5;
  margin-top: 0;
}

.switch-content .form-switch label {
  color: #ffffff;
  font-size: 0.875rem;
}

.switch-content .form-switch .form-check-input:checked {
  background-color: #008834 !important;
  opacity: 1;
}

.switch-content .form-switch .form-check-input:disabled {
  opacity: 0.2;
}

.switch-content .form-switch .form-check-input:checked:disabled {
  opacity: 0.5;
}

/*------------------------------------*
HEIGHTS
*------------------------------------*/
.h-100-4rem {
  height: calc(100% - 4rem);
}

.h-100-8rem {
  height: calc(100% - 8rem) !important;
}

/*------------------------------------*
POSITIONS
*------------------------------------*/
.position-top-right {
  top: 0.5rem;
  right: 0.5rem;
}

/*------------------------------------*
 COMMON CHATING CONTAINER
*------------------------------------*/
.chating-container * {
  color: #efefef;
}

.chating-container {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  padding-right: 1rem;
  padding-bottom: 2.5rem;
}

.chating-container .chatting-history,
.chating-container .chatting-history .chat-group {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
}

.chating-container .chat-bubble {
  max-width: 80%;
  padding: 0.75rem 1.125rem;
  border-radius: 1rem;
  position: relative;
}

.chat-bubble .spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: .2em;
}

.chating-container .chat-bubble .chat-details {
  font-size: 1.125rem;
  line-height: normal;
  position: relative;
}

.chating-container .chat-bubble .chat-details .prompt:has(table) {
  overflow: auto;
  margin-bottom: 1.5rem;
}

.chating-container .chat-bubble .chat-details .prompt::-webkit-scrollbar {
  width: 0.5rem;
}

.chating-container .chat-bubble .chat-details .prompt::-webkit-scrollbar-track {
  background: #272d48;
  border-radius: 10px;
}

.chating-container .chat-bubble .chat-details .prompt.no-scrollbar::-webkit-scrollbar {
  display: none;
  position: relative;
}

.chating-container .chat-bubble .chat-details .prompt::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

.chating-container .chat-bubble .chating-info {
  position: absolute;
  top: -1.3rem;
  right: 0;
  font-size: 0.8rem;
  display: flex;
  gap: 0.5rem;
  width: max-content;
}

.chating-container .chat-bubble .chating-info .u-name {
  color: #ffffffce !important;
}

.chating-container .chat-bubble .chating-info .prompt-date,
.chating-container .chat-bubble .chating-info .prompt-date sup {
  color: #ffffff7d !important;
}

.chating-container .chat-bubble-user {
  background: #00000063;
  align-self: flex-end;
}

.chating-container .chat-bubble-llm {
  background: #ffffff16;
  align-self: flex-start;
  max-width: 99.99% !important;
}

.chating-container .chat-bubble-llm.chat-bubble-bot-pp {
  margin-left: 3rem !important;
}

.chating-container .spinner-border {
  width: 1.3rem;
  height: 1.3rem;
  border-width: 0.15rem;
}

.text-loader {
  user-select: none;
  color: #ffffffb3 !important;
}

.bot-pp {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 100vw;
  overflow: hidden;
  left: -3rem;
  top: 0.2rem;
}

.bot-pp img {
  width: 100%;
}

.llm-multi-select {
  font-size: 0.9rem;
  line-height: normal;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.llm-multi-select .form-check input[type="checkbox"],
.llm-multi-select .form-check input[type="radio"] {
  display: none;
}

.llm-multi-select .form-check {
  background: #27272764;
  border-radius: 0.4rem;
  padding: 0;
  transition: all 0.1s ease-in-out;
}

.llm-multi-select .form-check:hover {
  background: #27272777;
}

.llm-multi-select .form-check label {
  padding: 0.5rem 1rem !important;
  cursor: pointer;
  width: 100%;
  color: #ffffff;
}

.llm-multi-select .form-check:has(input[type="checkbox"]:checked),
.llm-multi-select .form-check:has(input[type="radio"]:checked) {
  background: #007f0b;
}

.llm-multi-select .btn-thin {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/*------------------------------------*
 DRAG-DRP STYLING
*------------------------------------*/
.drag-drop-file-section {
  border: 1px solid #8F9DFA;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-drop-section {
  text-align: center;
  background: url(../images/icon__folder__upload.svg) no-repeat 50% 30%;
  background-size: 4rem;
  padding: 1rem;
  padding-top: 7rem;
  background-color: #181b2a;
  border-radius: 0.3rem !important;
  position: relative;
  height: 8.5rem !important;
  margin: auto;
  border: 1px dashed #8f9dfa !important;
}

.ngx-file-drop__drop-zone {
  text-align: center;
  background: url(../images/icon__folder__upload.svg) no-repeat 50% 30%;
  background-size: 4rem;
  padding: 1rem;
  padding-top: 7rem;
  background-color: #181b2a;
  border-radius: 0.3rem !important;
  position: relative;
  height: 8.5rem !important;
  margin: auto;
  border: 1px dashed #8f9dfa !important;
}

.drag-drop-file-section-csv .ngx-file-drop__drop-zone {
  background: url(../images/icon-csv-upload.svg) no-repeat 50% 30% !important;
  background-size: 3.8rem !important;
}

.ngx-file-drop__drop-zone--over {
  background-color: #303b6e !important;
}

.ngx-file-drop__drop-zone::after {
  content: "Drag and Drop files";
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 73%;
  transform: translateX(-50%)
}

.ngx-file-drop__content {
  display: none !important;
}

.upload-rule ul {
  padding: 0.5rem 0 0 1rem;
}

.upload-rule li {
  font-size: 1rem;
  color: #b7bbd6;
  list-style-type: disc;
}

/*------------------------------------*
 TRENDING
*------------------------------------*/
.trending-prompts {
  display: flex;
  gap: 1rem;
  justify-content: flex-start !important;
  width: 100%;
  overflow-x: auto;
  height: 4.3rem;
}

.trends {
  background: #353A57;
  border-radius: 0.5rem;
  padding: 0.3rem 0.8rem 0.5rem;
  width: 14rem;
}

.trends p {
  font-size: 0.9rem;
  line-height: normal;
}


/*------------------------------------*
  LOGIN START
*------------------------------------*/
.login-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: transparent radial-gradient(closest-side at 50% 50%, #3A406C 0%, #1A1D34 100%) 0% 0% no-repeat padding-box;
  background-size: cover;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.login-wrapper::after {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/login-background.png) no-repeat 0 0;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.logo-container {
  position: absolute;
  left: 3rem;
  top: 3rem;
  z-index: 3;
  display: flex;
  gap: 2rem;
}

.login-branding {
  font-size: 0;
  text-indent: -9999px;
  line-height: 0;
  width: 14rem;
  height: 2rem;
  background: url(../images/tcs-AI-WisdomNext-logo.svg) no-repeat 0 50%;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

.login-container {
  width: 25rem;
  background: #00000073 0% 0% no-repeat padding-box;
  box-shadow: 0 0 126px #000000db;
  border-radius: 16px;
  opacity: 1;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(17px);
  border-radius: 1rem;
  opacity: 1;
  position: relative;
  z-index: 4;
  padding: 2rem;
  overflow: hidden;
  margin-bottom: 10rem;
  border: 11px solid #ffffff00;
}

/* .login-container .form-control,
.login-container .form-control:focus {
  background: #00000045 0% 0% no-repeat padding-box !important;
  border: 1px solid #2F4381;
  border-radius: 4px;
  opacity: 1;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: #D6D6DA;
} */

.login-container select.form-control option {
  background: #152431;
}

.branding {
  font-size: 0;
  text-indent: -9999px;
  line-height: 0;
  width: 11rem;
  height: 2rem;
  background: url(../images/tcs-AI-WisdomNext-logo.svg) no-repeat 0 50%;
  background-size: contain;
}

.login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.login-form .form-group {
  position: relative;
}

.login-form .form-group::after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1rem;
}

.login-form .form-group.field-username::after {
  background: url(../images/icon-username.svg) no-repeat 0 0;
  background-size: 100%;
}

.login-form .form-group.field-password::after {
  background: url(../images/icon-password.svg) no-repeat 0 0;
  background-size: 100%;
}

.login-form .form-group input {
  padding-left: 2.5rem;
}

.login-form.reset-password-form .form-group input {
  padding-left: 1rem;
}

.login-form .form-group input::placeholder {
  color: #ffffffb3;
}

.animated-arms {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 3;
  width: 100%;
  height: 65rem;
}

.floating-object {
  position: absolute;
  z-index: 3;
  width: 50.8%;
  overflow: hidden;
}

.floating-object figure,
.floating-object figure img {
  width: 100%;
}

.robot-arm {
  left: 0;
  bottom: 11%;
  z-index: 3;
}

.human-arm {
  right: 0;
  top: 10%;
  z-index: 1;
}

.ai-text {
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8%;
  z-index: 4;
}

.ai-text h3 {
  color: #ffffff;
  animation-delay: 0.8s;
}

.floating-robot-arm {
  animation: floating-robot-arm infinite 3s;
  animation-delay: 1s;
}

.floating-human-arm {
  animation: floating-human-arm infinite 3s;
  animation-delay: 1s;
}

@keyframes floating-robot-arm {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 4%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes floating-human-arm {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 7%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.text-anim {
  text-align: center;
  position: absolute;
  top: 3rem;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 4;
  animation-delay: 0.8s;
}

.text-anim h3 {
  color: #ffffff;
}

.login-form .alert-box {
  padding: 0;
  margin-top: -1rem;
}

.login-form .alert-box {
  position: static;
  margin: 0;
}

.login-form .alert {
  margin-bottom: 0;
}

.login-form p,
.login-form .alert p {
  margin: 0;
}

/*------------------------------------*
 AUDIO
*------------------------------------*/
.card.card-bordered {
  background: #222536;
  border: 1px solid #787C9D;
  flex: 1 1 0;
}

.card.card-bordered.card-bordered-dashed {
  background: #222536;
  border: 1px dashed #787C9D;
  flex: 1 1 0;
}

.card.card-bordered .card-body {
  padding-top: 1rem;
}

.file-icon.file-format-audio {
  background: url(../images/icon__audio.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.file-icon.file-format-recording {
  background: url(../images/icon__record.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-record {
  background: url(../images/icon__record.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-microphone {
  background: url(../images/icon__microphone.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-stop {
  background: url(../images/icon__stop__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-stop-outline {
  background: url(../images/icon-stop-outline.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn-position-right-center {
  position: absolute;
  right: 1rem;
  bottom: 1.2rem;
}

.file-list li:has(.dropdown-menu) {
  position: relative;
}

.file-list ul ul.dropdown-menu {
  display: none;
}

.file-list ul ul.dropdown-menu.show {
  display: block;
}

.file-list .dropdown-menu li {
  border: none;
  border-bottom: 1px solid #424c81;
  border-radius: 0;
  padding: 0;
}

.file-list .dropdown-menu li:last-child {
  border: none;
}



/*------------------------------------*
 DATA PIPELINE
*------------------------------------*/
ul.stepper-horizontal,
ul.stepper-vertical {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

ul.stepper-horizontal li.step-details,
ul.stepper-vertical li.step-details {
  width: 16rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10rem;
}

ul.stepper-horizontal li.step-details:before,
ul.stepper-vertical li.step-details:before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background: url(../images/blank__check__circle.svg) no-repeat 0 0;
  background-size: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: -2rem;
}

ul.stepper-horizontal li.step-details:after,
ul.stepper-vertical li.step-details:after {
  content: "";
  position: absolute;
  top: -1.25rem;
  width: 100%;
  left: calc(50% + 1rem);
  height: 0;
  border-bottom: 1px dashed #7279a8;
}

ul.stepper-horizontal li.step-details:last-child::after {
  display: none;
}

ul.stepper-horizontal li.step-details.success:before {
  background: url(../images/icon_check_green_circle.svg) no-repeat 0 0;
  background-size: 100%;
}

ul.stepper-horizontal li.step-details.danger:before {
  background: url(../images/icon__cross__red__circle.svg) no-repeat 0 0;
  background-size: 100%;
}

ul.stepper-horizontal li.step-details.warning:before {
  background: url(../images/icon__pause.svg) no-repeat 0 0;
  background-size: 100%;
  filter: drop-shadow(0px 0px 2px #ffbb00);
}

ul.stepper-horizontal li.step-details.inprogress:before {
  background: url(../images/icon__in-progress.svg) no-repeat 0 0;
  background-size: 100%;
  filter: drop-shadow(0px 0px 0px);
}

ul.stepper-horizontal li.step-details.api-error:before {
  background: url(../images/icon__api-error.svg ) no-repeat 0 0;
  background-size: 100%;
}

ul.stepper-horizontal li.step-details * {
  text-align: center;
  text-transform: unset;
}

ul.stepper-horizontal li.step-details:last-child::after,
ul.stepper-vertical li.step-details:last-child::after {
  display: none;
}

ul.stepper-horizontal li.step-details.success:before,
ul.stepper-vertical li.step-details.success:before {
  background: url(../images/icon_check_green_circle.svg) no-repeat 0 0;
  background-size: 100%;
}

ul.stepper-horizontal li.step-details.danger:before,
ul.stepper-vertical li.step-details.danger:before {
  background: url(../images/icon__cross__red__circle.svg) no-repeat 0 0;
  background-size: 100%;
}

ul.stepper-horizontal li.step-details * {
  text-align: center;
}

ul.stepper-horizontal li.step-details .date-details,
ul.stepper-vertical li.step-details .date-details {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

ul.stepper-horizontal li.step-details .date-details span {
  color: #a9aede;
}

/*------------------------------------*
 GENERIC TEMPLATE
*------------------------------------*/
.btn.btn-voice-chat {
  background: url(../images/icon__voice__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-voice-chat-animated {
  background: url(../images/icon__voice__chat__bubble__animated.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-voice-stop {
  background: url(../images/icon__stop__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-copy-chat {
  background: url(../images/icon__copy__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-copy-chat:active {
  background: url(../images/icon__copy__active__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-download-chat {
  background: url(../images/icon__download__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-download-all {
  background: url(../images/icon-download-all-21.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-thumbs-up-chat {
  background: url(../images/icon__thumbs__up__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-thumbs-up-chat:disabled {
  background: url(../images/icon__thumbs__up__active__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
  opacity: 1;
}

.btn.btn-thumbs-down-chat {
  background: url(../images/icon__thimbs__down__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-thumbs-down-chat:disabled {
  background: url(../images/icon__thumbs__down__active__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
  opacity: 1;
}

.btn.btn-thumbs-save-chat {
  background: url(../images/icon__save__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-thumbs-regenerate-chat {
  background: url(../images/icon__regenerate__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-thumbs-regenerate-chat {
  background: url(../images/icon__regenerate__chat__bubble.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-save-analysis {
  background: url(../images/icon-save-analysis.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-icon-chart {
  background: url(../images/icon-chart-18.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.btn.btn-audio-download {
  background: url(../images/icon__audio-download.svg) no-repeat 50% 50%;
  background-size: 100%;
}

/* .chat-actions{
  position: absolute;
  padding: 0.5rem 1rem;
  background: #1b1c29;
  border-radius: 100vw;
  left: 0;
  bottom: -2rem;
  opacity: 0;
  display: none;
  transition: all 0.3s ease-in-out allow-discrete;
} */
.chat-bubble .data-kh {
  position: absolute;
  width: 1.8rem;
  height: 1.5rem;
  border-radius: 5px 5px 5px 0;
  background: #6d7087;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0.8rem;
  font-weight: 500;
  top: -0.8rem;
  right: -1rem;
  color: #ffffff !important;
}

.chat-actions {
  position: absolute;
  padding-top: 0.3rem;
  left: 0;
  bottom: -2.3rem;
  opacity: 0;
  display: none;
  transition: all 0.2s ease-in-out allow-discrete;
  gap: 0.5rem;
  width: 100%;
  min-width: max-content;
}

.chat-actions.chat-actions-review {
  opacity: 1;
  display: block;
  left: calc(100% + 1rem);
  bottom: 0;
  background: transparent;
  width: max-content;
}

.chat-actions.chat-actions-review .btn-group .btn-holder {
  gap: 0.5rem;
}

.chat-actions.chat-actions-review .thumb {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.chat-actions.chat-actions-review .thumb .count {
  line-height: 0;
  color: #ffffffa6 !important;
}

.chat-actions .btn-group {
  margin: 0 0.1rem;
  padding: 0.5rem 0.8rem;
  background: #0000005e;
  border-radius: 100vw;
}

.chat-actions .btn-group .btn-holder {
  gap: 0.6rem;
}

.chat-bubble-user .chat-actions {
  left: unset;
  right: 0;
}

.chat-bubble:hover>.chat-actions {
  opacity: 1;
  display: block;
}

.chating-container .chat-group:last-child .chat-bubble-llm .chat-actions {
  opacity: 1;
  display: block;
}

@starting-style {
  .chat-bubble:hover>.chat-actions {
    opacity: 0;
  }
}

.offcanvas-prompt-library {
  width: 20rem !important;
}

.btn-close.position-absolute {
  position: fixed;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 99;
}

small.text-history {
  color: #ccd3f9;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.5rem;
}

ul.list-library {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

ul.list-library li.list-item {
  position: relative;
}

ul.list-library li.list-item .list-content {
  background: #353950;
  cursor: pointer;
  padding: 0.7rem 1rem 0.8rem;
  border-radius: 1rem;
  position: relative;
  transition: all 0.1s ease-in-out;
}

ul.list-library li.list-item .list-content.active,
ul.list-library li.list-item .list-content.active:hover {
  background: #0041a3;
  color: #ffffff;
}

ul.list-library li.list-item .list-content:active {
  transform: scale(0.95);
}

ul.list-library li.list-item .list-content:hover {
  background: #404562;
}

ul.list-library li.list-item .list-content h6 {
  margin-bottom: 0.3rem;
  font-weight: normal;
}

ul.list-library li.list-item .list-content p {
  color: #cbcfed;
  font-size: 0.875rem;
  line-height: 130%;
  margin: 0;
}

ul.list-library li.list-item .chat-actions {
  bottom: 0.5rem;
  right: 0.5rem;
  left: unset;
  isolation: isolate;
  z-index: 99;
  width: max-content;
}

ul.list-library li.list-item .chat-actions .btn-group {
  background: #000000d6;
}

li.list-item:hover>.chat-actions {
  opacity: 1;
  display: block;
}

@starting-style {
  li.list-item:hover>.chat-actions {
    opacity: 0;
  }
}

.btn-position-right-bottom {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.modal-content:has(.overflow-visible) {
  overflow: visible !important;
}

.modal-content.overflow-visible {
  overflow: visible !important;
}

/* .scale-1 {
  transform: scale(1);
}

.chatting-history .chat-group:last-child .chat-bubble .chat-actions {
  position: fixed;
  bottom: unset;
  padding-top: 1rem;
  padding-right: 0.7rem;
} */
ul.stepper-horizontal li.step-details .date-details span {
  color: #a9aede;
}

ul.stepper-vertical {
  flex-direction: column;
  justify-content: unset;
  padding-left: 2rem;
  gap: 1rem;
}

ul.stepper-vertical li.step-details:after {
  height: calc(100% - 1rem);
  top: 1.8rem;
  left: -1.2rem;
  width: 0;
  border-left: 1px dashed #7279a8;
}

ul.stepper-vertical li.step-details:before {
  left: -1.2rem;
  top: 0;
}

ul.stepper-vertical li.step-details {
  align-items: flex-start;
  max-width: unset;
}

.btn.btn-re-run {
  background: url(../images/icon-refresh.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.progress.progress-thin {
  height: 5px;
}

.progress {
  background: #ffffff12;
}

.progress-bar.bg-success {
  background: #30ce00 !important;
}

/* For table */

.chat-bubble table {
  width: 100% !important;
  border-collapse: collapse;
  background: #0000001f;
}

.chat-bubble table thead th,
.chat-bubble table tbody tr td {
  padding: 0.5rem 0.6rem !important;
  border: 1px solid #ffffff40;
}

.chat-bubble table thead th {
  background: #0000005e
}

.variable-binding * {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
}

.variable-binding ul,
.variable-binding ol {
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.variable-binding ul li,
.variable-binding ol li {
  position: relative;
}

.variable-binding ul li::after,
.variable-binding ol li:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #ffffff;
  left: -1rem;
  top: 0.6rem;
}

.variable-binding ul li,
.variable-binding ol li {
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
}

.variable-binding p {
  margin-bottom: 1rem;
  line-height: 135%;
  letter-spacing: 0.5px;
  word-break: break-word;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
}

.variable-binding p:last-child {
  margin: 0;
}

/* TABLE IN CHAT */

.variable-binding table {
  background: #212338 0% 0% no-repeat padding-box;
  border: 1px solid #3e438ab2;
  border-radius: 0;
  opacity: 1;
  width: -webkit-fill-available;
}

.variable-binding table thead {
  background: #16192E 0% 0% no-repeat padding-box;
  border: 1px solid #434991;
  opacity: 1;
  width: -webkit-fill-available;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
}

.variable-binding table thead th {
  background: transparent;
  font-size: 0.9rem !important;
  color: #c9c9c9 !important;
  font-family: calibri, sans-serif;
  font-weight: bold;
  white-space: nowrap;
}

.variable-binding table tr td,
.variable-binding table tr th {
  border: 1px solid #343752;
  border-color: #434991;
  color: #cacce2;
  padding: 0.5rem 1rem;
}

.variable-binding table tr td {
  vertical-align: top;
}

code[class*="language-"],
pre[class*="language-"] {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.15rem);
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
  width: 100%;
}

.markdown-clipboard-button {
  background: url(../images/icon-copy.svg) no-repeat 50% 50% !important;
  background-size: 1.5rem !important;
  background-color: transparent;
  border: none;
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.1s ease-in-out;
  position: relative;
  text-indent: 30px;
  overflow: hidden;
}

.markdown-clipboard-button.copied {
  background: url(../images/icon-check-1.svg) no-repeat 0 50% !important;
  background-size: 1rem !important;
  font-size: 1rem;
  text-indent: unset;
  padding: 0 0 0 1.3rem;
  width: auto;
  text-indent: unset;
}

.markdown-clipboard-button:active {
  transform: scale(0.95);
}

.pre[class*="language-"] {
  padding-top: 2rem !important;
}

/* END OF MARKDOWN CSS */

/*------------------------------------*
  NGX EDITOR
*------------------------------------*/
.NgxEditor__MenuBar {
  background: transparent !important;
}

.form-control:has(.NgxEditor) {
  padding: 0;
}

.form-control .NgxEditor {
  color: #ffffff !important;
  background: transparent;
  border: none;
}

.form-control .NgxEditor__Content span {
  background-color: transparent !important;
  color: #ffffff !important;
}


.NgxEditor__Content ul,
.NgxEditor__Content ol {
  padding-left: 1.5rem;
}

.NgxEditor__Content ul li {
  list-style-type: disc;
  margin-bottom: 0.2rem;
}

.NgxEditor__Content ol li {
  list-style-type: auto;
  margin-bottom: 0.2rem;
}

.NgxEditor__Content ul li p:last-child,
.NgxEditor__Content ol li p:last-child {
  margin: 0;
}

td.temp-description ul,
td.temp-description ol {
  padding-left: 1.5rem;
}

td.temp-description ul li {
  list-style-type: disc;
  margin-bottom: 0.2rem;
}

td.temp-description ol li {
  list-style-type: auto;
  margin-bottom: 0.2rem;
}

td.temp-description ul li p:last-child,
td.temp-description ol li p:last-child {
  margin: 0;
}

.scroll-content ul,
.scroll-content ol {
  padding-left: 1.5rem;
}

.scroll-content ul li {
  list-style-type: disc;
  margin-bottom: 0.2rem;
}

.scroll-content ol li {
  list-style-type: auto;
  margin-bottom: 0.2rem;
}

.scroll-content ul li p:last-child,
.scroll-content ol li p:last-child {
  margin: 0;
}

/***** TREE VIEW ******/
.treeview-container {
  max-height: calc(100vh - 26.6rem) !important;
}

.treeview-container::-webkit-scrollbar {
  width: 0.5rem;
}

.treeview-container::-webkit-scrollbar-track {
  background: #272d48;
  border-radius: 10px;
}

.treeview-container::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

.treeview-container::-webkit-scrollbar-thumb:hover {
  background: #515f9a;
}

/* OPACITY START */
.opacity-05 {
  filter: opacity(.5);
}

/* OPACITY END */


.custom-node {
  width: 150px;
  height: 100px;
  background: linear-gradient(to right, #00d2ff, #3a7bd5);
  border: 1px solid gray;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
}

/* Agent orchestration css */
.h-100-7rem {
  height: calc(100vh - 7rem);
}

foreignObject.selectable:has(.wrapper .start-node) {
  overflow: visible !important;
  width: 3rem !important;
}

foreignObject.selectable:has(.wrapper .end-node) {
  overflow: visible !important;
  width: 3rem !important;
}

foreignObject.selectable {
  overflow: visible !important;
}

.selectable .wrapper:has(.card-agent-flow) {
  height: 2.5rem !important;
}

circle.default-handle {
  r: 3 !important
}

ul.nav-menu li a.menu-item.business-list::before {
  background: url(../images/icon-business-list.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.tool-agent-mapping::before {
  background: url(../images/icon__tool-agent-mapping.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.usecase-evaluate-registration::before {
  background: url(../images/icon__usecase-evaluate-registration.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.tool-template::before {
  background: url(../images/icon__tool-template.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.tool-instance::before {
  background: url(../images/icon__tool-instance.svg) no-repeat 50% 50%;
  background-size: 100%;
}

ul.nav-menu li a.menu-item.mcp-server::before {
  background: url(../images/icon__mcp-server.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.card-agentic {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

ul.nav-menu li a.menu-item.business-list::before {
  background: url(../images/icon-business-list.svg) no-repeat 50% 50%;
  background-size: 100%;
}

.card-agentic {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.btn.btn-more-option {
  background-image: url(../images/icon-more-options.svg);
  background-repeat: no-repeat;
  background-position: var(--icon-background-position);
  background-size: 100%;
}

span.segment-key {
  color: #dd81e0 !important;

}

span.segment-value,
.ngx-json-viewer .segment-type-null>.segment-main>.segment-value {
  color: #cccccc !important;
  background: none !important;
}


/* CUSTOM PAGINATION START */

.custom-pagination .pagination {
  justify-content: right;
  margin-top: 1rem;
}

.custom-pagination .pagination .page-item:first-child .page-link,
.custom-pagination .pagination .page-item:last-child .page-link {
  padding-left: 1rem;
  padding-right: 1rem;
}

.custom-pagination .pagination .page-item:first-child .page-link {
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

.custom-pagination .pagination .page-item:last-child .page-link {
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
}

.custom-pagination .pagination .page-item .page-link {
  background-color: #0a0c18;
  border-color: #3e4874;
  color: #ffffff;
  cursor: pointer;
}

.custom-pagination .pagination .page-item .page-link.active {
  background-color: #3e4874;
}

.custom-pagination .pagination .page-item .page-link:hover {
  background-color: #3e4874;
}

/* CUSTOM PAGINATION END */

.modal-dialog.custom-modal.custom-fullscreen {
  max-width: calc(100vw - 4rem) !important;
  width: calc(100vw - 4rem) !important;
  height: calc(100vh - 2rem) !important;
  margin: 1rem auto !important;
}

.modal-dialog.custom-modal {
  transition: all 0.5s ease-in-out !important;
  transform-origin: center !important;
}

/* PAGINATION START */
.pagination-position .ngx-pagination {
  margin-bottom: 0;
}

/* PAGINATION END */

.short-by {
  position: relative;
}

.short-by::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: url(../images/icon__short-by.svg) no-repeat 50% 50%;
  background-size: 85%;
  transform: translateY(-50%);
  top: 50%;
}


/* audio-analysis/audio-generation */

/* .download-audio-container{
    display: none ;
}

.download-audio-container audio{
    width: 15.125rem;
} */

/* API-REGISTRATION NGX-JSON-VIEWER */
.response-json section.ngx-json-viewer,
.apilist-payload-view section.ngx-json-viewer,
.thought-process-json-viewer section.ngx-json-viewer {
  overflow-y: auto !important;
}

.response-json section.ngx-json-viewer::-webkit-scrollbar,
.apilist-payload-view section.ngx-json-viewer::-webkit-scrollbar,
.thought-process-json-viewer section.ngx-json-viewer::-webkit-scrollbar {
  width: 0.5rem;
}

.response-json section.ngx-json-viewer::-webkit-scrollbar-track,
.apilist-payload-view section.ngx-json-viewer::-webkit-scrollbar-track,
.thought-process-json-viewer section.ngx-json-viewer::-webkit-scrollbar-track {
  background: #272d48;
  border-radius: 10px;
}

.response-json section.ngx-json-viewer::-webkit-scrollbar-thumb,
.apilist-payload-view section.ngx-json-viewer::-webkit-scrollbar-thumb,
.thought-process-json-viewer section.ngx-json-viewer::-webkit-scrollbar-thumb {
  background: #3e4874;
  height: 20px;
  border-radius: 3px;
}

.response-json section.ngx-json-viewer::-webkit-scrollbar-thumb:hover,
.apilist-payload-view section.ngx-json-viewer::-webkit-scrollbar-thumb:hover,
.thought-process-json-viewer section.ngx-json-viewer::-webkit-scrollbar-thumb:hover {
  background: #515f9a;
}

.apilist-payload-view section.ngx-json-viewer {
  max-height: 20rem !important;
}

.thought-process-json-viewer > section.ngx-json-viewer {
  font-size: 0.85rem;
}

.dropdown-list-roles .dropdown-list {
  bottom: calc(100% + 0.5rem) !important;
}

/* CSS FOR CREATE_EMAILS_TOOL */

/* SELECT TOOL TEMPLATE MODAL START */

.tool-template-specific-container .tool-template-specific-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.tool-template-specific-container .tool-template-specific-header .tool-template-specific-tag {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.tool-template-specific-container .tool-template-specific-header .tool-template-specific-tag label {
  font-size: 1rem;
}

.tool-template-specific-body {
  height: calc(100vh - 18rem);
  padding-right: .5rem;
}

/* SELECT TOOL TEMPLATE MODAL END */


/*  */

.tool-template-tag-manage {
  padding: 1rem;
  border-radius: .5rem;
  border: 1px solid #2E3353;
  background-color: #17192D;
}


/* TAG LIST START */

ul.tag-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

ul.tag-list li.tag-chips .form-check {
  padding: 0;
}

ul.tag-list li.tag-chips .form-check input[type="checkbox"],
ul.tag-list li.tag-chips .form-check input[type="radio"] {
  display: none;
}

ul.tag-list li.tag-chips label {
  font-size: 0.9rem;
  padding: 0.1rem 0.8rem 0.2rem !important;
  border-radius: 100vw;
  background: #282C4A 0% 0% no-repeat padding-box;
  border: 1px solid #6574c9;
  cursor: pointer;
}

ul.tag-list li.tag-chips .form-check input[type="checkbox"]:checked~label,
ul.tag-list li.tag-chips .form-check input[type="radio"]:checked~label {
  background: transparent linear-gradient(137deg, #7F4FE9 0%, #5C66E0 100%) 0% 0% no-repeat padding-box;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.asterisk {
  color: #ff0f0f;
  font-size: 1rem;
}

/* TAG LIST END */

/* ADDED FOR HELP */
.container-help {
  z-index: 999;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 16rem;
  background: #000000a8;
  padding: 1.5rem;
  border-radius: 1rem;
  backdrop-filter: blur(18px);
}

.container-help p {
  font-size: 0.875rem;
  line-height: 150%;
}

.container-help .btn.btn-outline-light {
  border: 1.5px solid #ffffff;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 120%;
}

/* HELP CSS ENDED */

.modal:has(.modal-header[appDraggableModal]) {
  /* DRAGGABLE MODAL */
  will-change: transform;

  .modal-header {
    cursor: move !important;
    user-select: none !important;
  }
}


.as-split-gutter {
    background-color: #3b3955 !important;
}