@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* create global variables */
:root {
  --primary-gray: 17, 17, 17;
  --dead-white: 231, 233, 234;
  --input-gray: 60, 61, 61;
  --primary-color: 62, 48, 225;
  /*--primary-color: 52, 189, 235;*/
  --error-red: 209, 31, 54;
  --secondary-gray: 59, 60, 60;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif !important;
  scrollbar-width: thin;
  -ms-overflow-style: none;
}

hr {
  margin: 0.5rem 0 !important;
}

#body-jwt {
  display: none;
}

.tag-button {
  background-color: rgba(var(--input-gray), 0.5);
  color: rgb(var(--dead-white));
  border: 1px solid rgba(var(--dead-white), 0.1) !important;
  width: fit-content;
  height: 3rem;
  border: 0;
  outline: 0;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: 7px;
  cursor: pointer;
  align-items: center;
  padding-right: 1rem;
  padding-left: 1rem;
  transition: 0.3s ease-in-out;
  position: relative;
  display: inline-flex;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.tag-button svg {
  fill: rgb(var(--dead-white)) !important;
}

.tag-buttons-wrapper {
  width: fit-content;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 3.5rem;
  margin-top: 1rem;
  max-width: 75%;
}

.tag-button:hover {
  background-color: rgba(var(--input-gray), 0.7);
  transition: 0.3s ease-in-out;
}

.custom-label {
  color: rgba(var(--dead-white), 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

::-webkit-scrollbar {
  width: 6px;
  background-color: rgb(var(--primary-gray));
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--input-gray));
  border-radius: 10px;
}

#modal-body-content .form-check-input[type="checkbox"] {
  border: 1px solid rgba(var(--dead-white), 0.1) !important;
}

#login-wrapper,
#home-wrapper,
#tos-wrapper,
#privacy-policy-wrapper,
#gpt-wrapper {
  width: 100%;
  height: 100vh;
  background-color: rgb(var(--primary-gray));
}

.enterprise-register-wrapper {
  overflow: hidden !important;
}

.enterprise-register-logo {
  width: 10rem;
  height: auto;
  margin-bottom: 1rem;
}

.register-wrapper {
  /* padding-top: 3rem; */
  /* padding-bottom: 3rem; */
}

.register-wrapper .login-right img {
  /* top: -3rem; */
  position: relative;
}

#app-wrapper {
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: rgb(var(--primary-gray));
  display: flex;
}

#login-wrapper .login-left {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-left .wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

#login-wrapper,
#tos-wrapper,
#privacy-policy-wrapper,
#gpt-wrapper {
  height: 100% !important;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#tos-wrapper .body-text,
#privacy-policy-wrapper .body-text {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-top: 0.5rem;
}

#tos-wrapper .subtitle-label,
#privacy-policy-wrapper .subtitle-label {
  margin-top: 2rem;
}

#home-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

#home-img {
  width: 90%;
  max-width: 25rem;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.coming-soon {
  margin-top: 5rem;
  font-size: 1.25rem;
}

.coming-soon span {
  font-size: 1.25rem;
  color: rgba(var(--dead-white), 0.5);
}

.title {
  font-size: 2.5rem;
  color: rgb(var(--dead-white));
  font-weight: 700;
  margin-top: 3rem;
}

.subtitle {
  font-size: 1.25rem;
  max-width: 90%;
  color: rgba(var(--dead-white), 0.5);
}

.step-title .subtitle {
  max-width: 80% !important;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.having-trouble p {
  width: 40% !important;
}

input[type="color"] {
  border: 0 !important;
}

.step-title .file-input {
  border: 1px solid rgb(var(--dead-white), 0.2) !important;
  /* background: rgb(var(--dead-white), 0.1); */
  padding: 0.5rem;
  margin-bottom: 0 !important;
  margin-top: 0.5rem;
}

.clr-field {
  width: 100%;
}

.clr-field button {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  width: 2rem;
}

.step-title .input__no-file {
  white-space: unset !important;
  margin-right: 0;
}

#login-wrapper .login-right {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-wrapper {
  overflow: hidden !important;
}

#login-wrapper .login-right img {
  width: 100%;
  height: 100%;
  background-color: rgba(var(--dead-white), 0.1);
  border-radius: 14px;
  scale: 0.8;
  object-fit: cover;
}

.register-wrapper .login-right img {
  height: 55rem !important;
}

#login-logo {
  width: 10rem;
  height: auto;
}

.custom-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  position: relative;
  display: block;
}

.custom-input-wrapper .custom-input-icon {
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.pass-input {
  padding-right: 4rem;
}

.custom-input-wrapper .view-pass-btn {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: 0;
  outline: 0;
  color: rgba(var(--dead-white), 0.5);
  font-size: 1.3rem;
}

.custom-input-wrapper .custom-input-icon i {
  color: rgba(var(--dead-white), 0.5);
  font-size: 1.5rem;
  opacity: 0.5;
}

.custom-input-wrapper textarea {
  height: auto !important;
  min-width: 50vw;
}

.textarea-icon {
  top: 30% !important;
}

.action-form-btn {
  width: fit-content !important;
  margin-top: 1rem;
}

.custom-input-wrapper input,
.custom-input-wrapper textarea {
  padding-left: 4rem;
  height: 4rem;
  background-color: rgba(var(--input-gray), 0.5);
  color: rgb(var(--dead-white)) !important;
  border: 0;
  outline: 0px solid rgba(var(--dead-white), 0.1);
  font-weight: 500;
  font-size: 1rem;
  width: 100%;
  display: block;
  border-radius: 14px;
  transition: outline 0.1s ease-in-out;
  outline-style: solid;
  resize: none;
}

fieldset.is-invalid {
  border: 2px dashed rgba(var(--error-red), 1) !important;
}

.custom-input-wrapper input:focus,
.custom-input-wrapper textarea:focus {
  background-color: rgba(var(--input-gray), 0.5);
  border: 1px solid rgba(var(--dead-white), 0.3);
}

.custom-input-wrapper input:focus .custom-input-wrapper input::placeholder,
.custom-input-wrapper
  textarea:focus
  .custom-input-wrapper
  textarea::placeholder {
  color: rgba(var(--dead-white), 0.3);
}

.custom-btn {
  width: auto;
  height: 4rem;
  border: 0;
  outline: 0;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 14px;
  cursor: pointer;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
}

.sm-custom-btn {
  width: 100%;
  height: 3rem;
  border: 0;
  outline: 0;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 7px;
  cursor: pointer;
  /* padding: 0 2rem; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  background: none;
  color: rgba(var(--dead-white));
  transition: 0.3s ease-in-out;
  padding-right: 1rem;
  padding-left: 1rem;
}

.sm-custom-btn:hover {
  background-color: rgba(var(--dead-white), 0.1);
  transition: 0.3s ease-in-out;
}

.custom-btn i {
  font-size: 1.1rem;
  margin-left: 0.5rem;
  position: relative;
  top: 2px;
}

.sm-custom-btn i {
  font-size: 1.1rem;
  margin-right: 1rem;
  position: relative;
  top: 0;
  opacity: 1;
}

.sm-custom-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
  position: relative;
  top: 0;
}

#profile-username {
  float: left;
}

.blue-btn {
  background-color: rgb(var(--primary-color));
  color: rgb(var(--dead-white));
  font-weight: 600;
}

.red-btn {
  background-color: rgba(var(--error-red), 1);
  color: rgb(var(--dead-white));
  font-weight: 600;
  border: 0 !important;
}

.required-icon {
  position: relative;
  top: 4px;
  font-size: 1.2rem !important;
  color: rgb(var(--error-red));
  left: 2px;
  display: none;
}

.steps-controller .spinner {
  scale: 0.5;
}

.spinner-wrapper {
  display: flex;
  align-items: center;
}

.steps-controller .executing-action-label {
  top: 0;
  left: 0;
  display: block;
  margin-left: 2rem;
}

.wizard-modal-img,
.wizard-modal-content,
.wizard-automations-img {
  width: 100%;
  height: auto;
}

.wizard-automations-img {
  height: 100% !important;
}

.wizard-modal-content {
  padding: 2rem 3rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.sm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(var(--dead-white));
}

.wizard-modal-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-right: 1px solid rgba(var(--dead-white), 0.05);
}

.automations-examples-buttons button {
  zoom: 0.9;
  display: inline-block;
  margin-right: 0.5rem;
}

.automations-examples-buttons button i {
  position: relative;
  top: 3px;
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.bounce {
  animation: bounce 0.5s ease;
}

.automations-examples-buttons button {
  min-width: 12rem;
  opacity: 0.8;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.automations-examples-buttons .sm-custom-btn i {
  margin-right: 0.5rem !important;
}

@keyframes subtle-move {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-5px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
}

.subtle-move-animation {
  animation: subtle-move 2s ease-in-out;
}

.wizard-automations-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  border-left: 1px solid rgba(var(--dead-white), 0.05);
}

.steps-controller .loader {
  top: 0;
  left: 0;
}

.step-wrapper #notification-wrapper,
.terms-of-use-content #notification-wrapper,
.privacy-policy-content #notification-wrapper {
  margin-top: 2rem;
  margin-bottom: -1rem;
  max-width: 80%;
}

.black-btn {
  background-color: rgba(var(--primary-gray), 1);
  color: rgba(var(--dead-white), 1);
  font-weight: 600;
}

.blue-alt-btn {
  background-color: rgba(var(--primary-color), 0.2);
  color: rgba(var(--primary-color), 1);
  font-weight: 600;
}

.black-btn:hover {
  background-color: rgba(var(--primary-gray), 0.7);
}

.blue-btn:hover {
  background-color: rgba(var(--primary-color), 0.7);
}

.red-btn:hover {
  background-color: rgba(var(--error-red), 0.7);
}

.blue-alt-btn:hover {
  background-color: rgba(var(--primary-color), 0.4);
}

.white-btn {
  background-color: rgba(var(--dead-white));
  color: rgb(var(--primary-gray));
}

.gray-btn {
  background-color: rgba(var(--input-gray), 0.5);
  color: rgba(var(--dead-white), 0.5);
  font-weight: 600;
}

.gray-btn svg {
  fill: rgba(var(--dead-white), 0.5) !important;
}

.gray-btn:hover {
  background-color: rgba(var(--input-gray), 0.7);
}

.red-btn svg {
  fill: rgb(var(--dead-white)) !important;
}

.white-btn:hover {
  background-color: rgba(var(--dead-white), 0.7);
}

.custom-btn:hover {
  opacity: 0.7;
}

.custom-btn span {
  display: inline-block;
  margin-bottom: 1px;
}

#login-buttons button,
#register-buttons button {
  display: inline-block;
}

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

.terms-list li {
  display: inline-block;
  margin-right: 2rem;
}

.terms-list li a {
  color: rgba(var(--dead-white), 0.3);
  transition: 0.2s ease-in-out;
}

.terms-list li a:hover {
  color: rgba(var(--dead-white), 1);
  transition: 0.2s ease-in-out;
}

.terms-list li a i {
  position: relative;
  top: 0;
  right: 0;
  opacity: 0.6;
  transition: 0.2s ease-in-out;
}

.terms-list li a:hover i {
  position: relative;
  top: -5px;
  right: -5px;
  opacity: 1;
  color: rgba;
  transition: 0.2s ease-in-out;
  color: rgba(var(--primary-color), 1);
}

.login-logo {
  position: relative;
  width: fit-content;
}

.login-logo span {
  position: absolute;
  top: 0.5rem;
  right: -1.2rem;
  transform: translateX(-50%);
  color: rgb(var(--dead-white), 0.5);
  font-size: 0.8rem;
  font-weight: 500;
}

.pass-strength-label {
  color: rgba(var(--error-red), 1);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.remember-me label,
.terms label,
.agent-wizard-checks label,
.control-panel-checks label {
  color: rgb(var(--dead-white), 0.3);
  transition: 0.3s ease-in-out;
  margin-left: 0.5rem;
}

.terms-link {
  color: rgb(var(--dead-white), 0.7);
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}

.terms-link:hover {
  color: rgba(var(--dead-white), 0.4);
  text-decoration: underline;
  transition: 0.3s ease-in-out;
}

.terms-wrapper {
  margin-top: 3rem;
}

.form-check-input {
  background-color: rgba(var(--input-gray), 0.5) !important;
  border: 1px solid rgb(var(--dead-white), 0.1);
}

#loading-continue,
#loading-confirm {
  display: none;
}

#confirm-code-btn {
  min-width: 40%;
}

.loader-btn {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
}
.loader-btn::after,
.loader-btn::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--dead-white));
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  animation: animloader 2s ease-in-out infinite;
}
.loader::after {
  animation-delay: 1s;
}

@keyframes animloader {
  0%,
  100% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
}

.form-check-input:checked {
  background-color: rgb(var(--primary-color)) !important;
}

.form-check-input[type="checkbox"]:checked:after,
.form-check-input[type="checkbox"]:after {
  content: "";
  display: block;
  margin-left: 0.4rem !important;
  margin-top: 1px !important;
  background-color: transparent !important;
  scale: 0.8;
}

.form-check-input:before {
  content: "";
  position: absolute;
  /* box-shadow: 0px 0px 0px 13px rgba(0,0,0,0); */
  border-radius: 50%;
  width: 0.875rem;
  height: 0.875rem;
  background-color: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  left: 0.15rem !important;
  top: 0.15rem !important;
}

.terms-list i {
  rotate: 45deg;
}

.no-files-text {
  color: rgba(var(--dead-white), 0.5);
  font-size: 1rem;
  font-weight: 500;
  margin-top: 1rem;
  max-width: 60%;
  margin: 0 auto;
  margin-top: -1rem;
}

#notification-wrapper {
  background-color: rgba(var(--error-red), 0.2);
  padding: 1rem 1rem;
  border-radius: 14px;
  color: rgb(var(--error-red));
  cursor: default;
  transition: 0.2s ease-in-out;
  display: none;
}

#notification-msg {
  font-weight: 400;
  font-size: 1rem;
  word-break: break-all;
}

#chat-content {
  width: 100%;
  height: 85%;
  overflow-y: auto;
  top: 2rem;
  position: relative;
  display: block;
  padding: 3rem 0.5rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

#chat-content .system-message {
  width: 100%;
  height: fit-content;
  float: left;
  position: relative;
  margin-top: 3.5rem;
  margin-bottom: 0.5rem;
}

#chat-content .user-message {
  width: 100%;
  height: fit-content;
  float: right;
  text-align: right;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#chat-content .user-message .avatar-chat {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--dead-white), 0.2);
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  top: -1rem;
}

.no-files-wrapper {
  width: 100%;
  height: 100%;
  margin-top: -4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#chat-content .system-message img {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--dead-white), 0.2);
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  top: -1rem;
}

#chat-content .user-message .message {
  display: inline-flex;
  width: fit-content;
  max-width: 70%;
  margin-right: 1rem;
  padding: 1.5rem;
  background: rgba(var(--primary-color));
  color: rgba(var(--dead-white));
  border-radius: 14px;
  text-align: left;
  top: 2px;
  position: relative;
  word-break: break-word;
}

#chat-content .system-message .message a,
#chat-content .system-message .message h1,
#chat-content .system-message .message span {
  display: contents;
}

#chat-content .system-message .message h1 {
  font-size: 1.2rem;
  font-weight: 700;
}

.no-msg-btn {
  width: fit-content !important;
  margin-top: 2rem !important;
  margin: 0 auto;
}

.no-msg-btn svg {
  margin-right: 0.5rem !important;
}

.ai-tag {
  position: absolute;
  top: -2.5rem;
  left: 3.7rem;
  padding: 0.2rem 1rem;
  background: rgba(var(--primary-color));
  color: rgba(var(--dead-white));
  border-radius: 7px;
  font-weight: 500;
}

#chat-content .system-message .message {
  padding: 1.5rem;
  background: rgba(var(--input-gray), 1);
  color: rgba(var(--dead-white));
  border-radius: 14px;
  display: inline-grid;
  width: fit-content;
  max-width: 70%;
  margin-left: 1rem;
  word-break: break-word;
}

#chat-content .system-message .message-code div {
  margin-top: 1rem;
  border-radius: 7px;
  background: rgba(var(--primary-gray), 0.6);
  outline: 1px solid rgba(var(--dead-white), 0.2);
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.8);
  position: relative;
}

.copy-success {
  background: rgba(var(--primary-color)) !important;
  color: rgba(var(--dead-white), 1) !important;
  transition: 0.3s ease-in-out;
}

.copy-failure {
  background: rgb(var(--error-red)) !important;
  color: rgba(var(--dead-white), 1) !important;
  transition: 0.3s ease-in-out;
}

.copy-button {
  top: 0.5rem;
  position: absolute;
  right: 0.3rem;
  margin-top: 0 !important;
  scale: 0.8;
  transition: 0.3s ease-in-out;
}

.modal-image {
  width: fit-content;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
  max-width: 100%;
  /* margin: 0 auto !important; */
  position: relative;
  /* text-align: center; */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 14px;
}

#files {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 6rem;
  overflow-y: auto;
  padding-bottom: 5rem;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.file-wrapper {
  width: 100%;
  height: auto;
  padding: 0;
  border-radius: 14px;
  min-height: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#files .plyr--video {
  /* height: 100%; */
  /* outline: 1px solid rgba(var(--dead-white), 0.3); */
  max-height: 12vw;
}

.filename {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 10vw;
  cursor: default;
}

.fileicon {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-right: 1rem;
  position: relative;
  top: -1rem;
  margin-left: 0.5rem;
}

.filedate {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.6);
  margin-bottom: 0;
}

.fileicon i {
  font-size: 1.2rem;
  color: rgba(var(--dead-white), 0.2);
}

.file-wrapper-area {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
  background: rgba(var(--input-gray), 0.5);
  border-radius: 14px;
}

strong {
  display: contents;
}

.file-extension-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: rgba(var(--primary-gray), 1);
  font-weight: 500;
  color: rgba(var(--dead-white));
  font-size: 0.7rem;
  z-index: +1;
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
  opacity: 0.7;
  cursor: default;
  transition: 0.3s ease-in-out;
}

.file-extension-label:hover {
  opacity: 1;
  transition: 0.3s ease-in-out;
}

.file-download-btn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: rgba(var(--primary-color), 1);
  z-index: +1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 7px;
  font-size: 1rem;
  color: rgba(var(--dead-white), 1);
  backdrop-filter: blur(8px);
  transition: 0.3s ease-in-out;
}

.file-wrapper-audio {
  /* background: rgba(var(--input-gray), 0.5); */
  /* padding: 0.5rem; */
  height: fit-content;
}

.file-download-btn:hover {
  opacity: 0.7;
  transition: 0.3s ease-in-out;
}

.file-agent-avatar {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(var(--dead-white), 0.2);
}

.file-info-wrapper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 1rem;
}

.file-info-l {
  display: contents;
}

.file-info-r {
  margin-left: auto;
}

.file-agent-avatar {
  top: -0.5rem;
  position: relative;
}

#chat {
  width: 100%;
  height: 90%;
  position: relative;
  margin-top: 7.5vh;
}

#app-chat-input {
  width: 100%;
  display: flex;
  align-items: center;
}

.chat-input {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 0;
  width: 100%;
  z-index: +1;
}

#send-file-btn,
#record-audio-btn {
  background-color: rgba(var(--secondary-gray));
  transition: 0.3s ease-in-out;
}

#send-file-btn:hover,
#record-audio-btn:hover {
  background-color: rgba(var(--secondary-gray), 0.7) !important;
  transition: 0.3s ease-in-out;
}

#send-file-btn,
#quick-actions-btn {
  position: absolute;
  left: 0;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

/* #send-file-btn {
  left: 3rem !important;
} */

#chat-message {
  width: 100%;
  padding: 1.5rem 4.5rem;
  background: #262727;
  border-radius: 15px;
  border: 0;
  color: rgba(var(--dead-white));
  resize: none;
  padding-right: 7rem;
  padding-left: 7.5rem;
  box-sizing: border-box;
  overflow: hidden !important;
  max-height: 8rem;
  border: 1px solid rgba(var(--dead-white), 0.2);
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

#chat-message:focus {
  outline: none;
}

#send-message-btn {
  position: absolute;
  right: 1rem;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

#record-audio-btn {
  position: absolute;
  right: 4rem;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

.content-inner {
  width: 100%;
  height: 91vh;
  background-color: rgba(var(--input-gray), 0.5);
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  overflow: hidden;
  position: relative;
}

.content-top {
  background: none;
  width: 100%;
  position: absolute;
  padding: 0 1.3rem;
  top: 5vh;
  left: 0;
  height: fit-content;
  display: flex;
  height: 2.5rem;
  align-items: center;
  z-index: +1;
}

.content-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
  display: inline-flex;
  margin-right: 0.5rem;
  align-items: center;
}

.sidebar {
  width: 23rem;
  height: 90vh;
  background: rgba(var(--input-gray), 0.5);
  position: fixed;
  top: 0;
  left: 5rem;
  /* overflow-y: auto;
    overflow-x: hidden; */
  overflow: visible;
  padding: 2rem;
  transition: width 0.3s;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 15px;
  z-index: +10;
}

.sidebar.collapsed {
  width: 8rem;
}

.sidebar.collapsed .menu-item span,
.sidebar.collapsed .profile-wrapper span,
.sidebar.collapsed .my-account-label {
  display: none;
}

.sidebar.collapsed .menu-item i {
  margin-right: 0;
}

.centered-item {
  text-align: center;
  justify-content: center;
}

.sidebar .profile-wrapper {
  color: rgba(var(--dead-white));
  padding: 15px 20px;
  text-emphasis: none;
  display: flex;
  align-items: center;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2rem;
  background-color: rgba(var(--dead-white), 0.1);
  transition: 0.2s ease-in-out;
}

.sidebar .profile-wrapper:hover {
  background-color: rgba(var(--dead-white), 0.08);
  cursor: default;
  transition: 0.2s ease-in-out;
}

.sidebar .menu-item {
  color: rgba(var(--dead-white));
  padding: 15px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  transition: 0.3s ease-in-out;
  border: 0;
  width: 100%;
  background: none;
}

.sidebar .menu-item i {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  position: relative;
  opacity: 0.5;
}

.sidebar .profile-wrapper img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 0.5rem;
  outline: 1px solid rgba(var(--dead-white), 0.2);
}

.sidebar.collapsed .profile-wrapper img {
  margin-right: 0;
}

.sidebar .menu-item .nav-item-label,
.sidebar .profile-wrapper .nav-item-label {
  margin-left: 0.5rem;
}

.sidebar .menu-item:hover {
  background-color: rgba(var(--dead-white), 0.1);
  transition: 0.3s ease-in-out;
}

.subtitle {
  font-size: 1rem !important;
}

#plans .container {
  max-width: 1200px;
}

.menu-active {
  background-color: rgb(var(--primary-color)) !important;
  transition: 0.3s ease-in-out;
}

.menu-active i {
  opacity: 1 !important;
}

.content-wrapper {
  margin-left: 32rem;
  margin-right: 4rem;
  padding: 20px;
  transition: margin-left 0.2s ease-in-out;
  width: 100%;
  background: none;
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: rgba(var(--dead-white), 0.3);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 2rem;
}

.menu-label {
  color: rgba(var(--dead-white), 0.5);
  font-size: 0.8rem;
  font-weight: 500;
}

.collapsed + .content-wrapper {
  margin-left: 17rem;
  /* overflow-y: auto; */
}

.sidebar.collapsed .profile-actions-btn {
  display: none;
}

.profile-actions-btn {
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--dead-white), 0.1);
  border-radius: 10px;
  border: 0;
  transition: 0.2s ease-in-out;
}

.profile-actions-btn:hover {
  background-color: rgba(var(--dead-white), 0.2);
  transition: 0.2s ease-in-out;
}

.profile-actions-btn:hover i {
  color: rgba(var(--dead-white), 1);
  transition: 0.2s ease-in-out;
}

.profile-actions-btn i {
  color: rgba(var(--dead-white), 0.5);
  font-size: 1.4rem;
  transition: 0.4s ease-in-out;
}

.profile-action-wrapper {
  margin-left: auto;
  position: relative;
}

.toggle-btn {
  position: absolute;
  top: 5vh;
  left: 29rem;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--input-gray), 0.3);
  border-radius: 10px;
  transition: 0.2s ease-in-out;
  position: fixed;
}

#history .sm-custom-btn i {
  font-size: 1.3rem;
  margin-right: 0.8rem !important;
  position: relative;
  top: 0px;
  opacity: 1 !important;
}

.toggle-btn:hover {
  background-color: rgba(var(--input-gray), 0.5);
  transition: 0.2s ease-in-out;
}

.toggle-btn:hover i {
  color: rgba(var(--dead-white), 1);
  transition: 0.2s ease-in-out;
}

.toggle-btn i {
  color: rgba(var(--dead-white), 0.5);
  font-size: 1.2rem;
  transition: 0.4s ease-in-out;
}

.collapsed + .content-wrapper .toggle-btn {
  left: 14rem;
  transition: 0.2s ease-in-out;
}

.collapsed + .content-wrapper .toggle-btn i {
  rotate: 180deg;
  transition: 0.4s ease-in-out;
}

.collapsed .sidebar-top img {
  clip-path: polygon(0 0, 31% 0, 31% 100%, 0% 100%);
  margin-left: 0.5rem;
}

.sidebar-top {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.sidebar-top img {
  width: 10rem;
  height: auto;
}

.my-account-label {
  margin-bottom: -3px;
  margin-left: 0.5rem;
  color: rgba(var(--dead-white), 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: left;
}

.profile-tooltip {
  display: none;
}

.collapsed .profile-actions-tooltip {
  left: 6.5rem;
}

.profile-actions-tooltip {
  width: 13rem;
  height: auto;
  background-color: rgba(var(--secondary-gray));
  border: 1px solid rgba(var(--dead-white), 0.2);
  position: absolute;
  bottom: 3.9rem;
  left: 23.5rem;
  border-radius: 7px;
  opacity: 0;
  padding: 0.5rem;
  transition: 0.1s ease-in-out;
  display: none;
}

.audio-player {
  width: 100%;
}

.audio-duration {
  font-size: 12px;
  color: gray;
  text-align: right;
}

.audio-progress {
  width: 100%;
  height: 5px;
  margin-top: 5px;
}

#recording-indicator {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white));
  text-align: right;
  position: absolute;
  left: -3.5rem;
  top: 50%;
  pointer-events: none;
  transform: translateY(-50%);
}

#chat-content .system-message audio {
  display: inline-flex;
  max-width: 50%;
  margin-left: 1rem;
  position: relative;
  top: 6px;
}

#chat-content .user-message audio {
  display: inline-flex;
  max-width: 50%;
  margin-right: 1rem;
  position: relative;
  top: 6px;
  filter: invert(1);
}

#chat-content .user-message audio::-webkit-media-controls-panel {
  background-color: #c1cf1e;
  border-radius: 14px;
}

img {
  user-select: none;
  /* Para navegadores modernos */
  -webkit-user-drag: none;
  /* Para navegadores baseados em WebKit como Chrome e Safari */
  -moz-user-select: none;
  /* Para Firefox */
  -ms-user-select: none;
  /* Para Internet Explorer e Edge */
}

.content-top-btn {
  width: fit-content;
  display: inline-flex;
  margin-left: 1rem;
}

.content-top-btns {
  margin-left: auto;
}

.page {
  width: 100%;
  height: 100%;
}

.loading-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-file-emoji {
  color: rgba(var(--dead-white), 1) !important;
}

.spinner {
  position: relative;
  width: 56px;
  height: 56px;
  animation: spinner-xza56z 2s infinite linear;
}

.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(var(--primary-color));
  border-radius: 50%;
  animation: spinner-lqsq3g 1.25s infinite ease;
}

.spinner::before {
  height: 75%;
  width: 75%;
  transform-origin: -40% -80%;
}

.spinner::after {
  height: 50%;
  width: 50%;
  transform-origin: 40% 80%;
}

@keyframes spinner-xza56z {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-lqsq3g {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(0);
  }
}

@keyframes dots-ijr34dmd {
  50% {
    box-shadow: 21.3px 0 0 3.4px, 42.6px 0 0 7.8px, 63.9px 0 0 3.4px;
  }

  100% {
    box-shadow: 21.3px 0 0 0, 42.6px 0 0 3.4px, 63.9px 0 0 7.8px;
  }
}

.loading-dots {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  color: #e7e9ea;
  box-shadow: 21.3px 0 0 7.8px, 42.6px 0 0 3.4px, 63.9px 0 0 0;
  transform: translateX(-42.6px);
  animation: dots-ijr34dmd 0.8s infinite alternate linear;
  scale: 0.6;
  opacity: 0.8;
  margin: 0 0.5rem;
  position: relative;
  top: -1.3rem;
  left: -1rem;
}

.app-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.app-modal.show {
  opacity: 1;
}

#quick-actions-wrapper button {
  width: 100%;
}

.app-modal-content {
  background-color: #262727;
  margin: auto;
  padding: 2rem;
  border: 0;
  max-width: 80%;
  position: relative;
  border-radius: 14px;
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  width: fit-content;
  min-width: 80%;
}

.message-time {
  width: fit-content;
  position: absolute;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
}

.plyr {
  width: min-content;
  border-radius: 14px;
  position: relative;
  left: 3.5rem;
  top: -2rem;
  margin-bottom: -2rem;
  max-height: 25rem;
}

#files .plyr {
  left: 0 !important;
  top: 0 !important;
  margin: 0 auto;
  width: 100% !important;
  min-width: unset !important;
  height: 12vw;
}

.plyr--full-ui input[type="range"] {
  color: rgba(var(--primary-color)) !important;
}

.plyr__control--overlaid {
  background: rgba(var(--primary-color), 0.8) !important;
}

.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded="true"] {
  background: rgba(var(--primary-color)) !important;
}

#files .plyr--video {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(var(--primary-color), 0.5) !important;
}

.plyr__menu__container
  .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
  background: rgba(var(--primary-color)) !important;
}

.app-modal.show .app-modal-content {
  transform: translateY(0);
  opacity: 1;
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded="true"] {
  background: rgba(var(--primary-color)) !important;
}

.plyr--audio .plyr__controls {
  background: rgba(var(--dead-white)) !important;
  height: 12vw;
  border: 1px solid rgba(var(--dead-white), 0.2);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#chat .plyr--audio .plyr__controls {
  height: 3.5rem;
  border-radius: 14px !important;
}

.audio-player-sender .plyr--audio .plyr__controls {
  background: rgba(var(--primary-color)) !important;
  color: rgba(var(--dead-white)) !important;
}

.audio-player-sender .plyr--full-ui input[type="range"] {
  color: rgba(var(--dead-white)) !important;
}

.audio-player-sender .plyr--audio .plyr__control:hover {
  background: rgba(var(--dead-white), 0.2) !important;
}

.user-message .plyr {
  margin-left: auto;
  /* right: 1rem; */
  margin-right: 7rem;
  top: 0rem;
}

#chat .plyr {
  width: 60%;
}

/* .plyr__control svg {
  fill: rgba(var(--dead-white), 0.5) !important;
} */

.plyr__controls .plyr__controls__item.plyr__time {
  font-weight: 600 !important;
}

.code-inputs {
  display: flex;
  justify-content: space-between;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.code-input {
  width: 100%;
  height: 90px;
  text-align: center;
  font-size: 24px;
  /* border: 2px solid #ccc; */
  border-radius: 5px;
  margin: 0 5px;
  background: rgba(var(--dead-white), 0.1);
  border: 0;
  color: rgba(var(--dead-white));
  font-weight: 700;
  font-size: 2rem;
}

.code-input:focus {
  border-color: #007bff; /* Cor de destaque ao focar */
  outline: none;
}

.confirm-code-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.confirm-code-buttons button {
  justify-content: center;
  text-transform: uppercase;
}

.modal-xl-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(var(--dead-white), 1);
  margin-bottom: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.text-tag {
  font-size: 0.9rem;
  background-color: rgba(var(--dead-white), 0.1);
  border-radius: 7px;
  padding: 0.2rem 0.5rem;
  color: rgba(var(--dead-white), 1);
}

.modal-xl-text {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-bottom: 2rem !important;
  text-align: center;
  max-width: 50%;
  margin: 0 auto;
}

.close {
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--dead-white), 0.1);
  border-radius: 10px;
  transition: 0.3s ease-in-out;
  float: right;
  position: absolute;
  right: -4rem;
  top: 0;
}

.close i {
  color: rgba(var(--dead-white), 0.8);
  font-size: 1.2rem;
  transition: 0.4s ease-in-out;
}

.close:hover {
  background-color: rgba(var(--dead-white), 0.2);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.close:hover i {
  color: rgba(var(--dead-white), 1);
  transition: 0.3s ease-in-out;
}

.agent-card {
  width: 100%;
  height: 100% !important;
  /* padding: 1rem; */
  border: 1px solid rgba(var(--dead-white), 0.1);
  background: rgba(var(--dead-white), 0.08);
  border-radius: 14px;
  margin-bottom: 1rem;
  display: flex;
  transition: transform 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  /* padding-bottom: 3rem; */
}

.remember-me input,
#terms-check {
  border: 1px solid rgb(var(--dead-white), 0.2);
}

.no-agents-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.no-agents-wrapper svg {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-agents-wrapper p {
  color: rgba(var(--dead-white), 0.6);
  font-size: 0.9rem;
  font-weight: 500;
}

#files .plyr {
  transition: transform 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

#files .plyr:hover {
  /* transform: scale(1.05); */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.agent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  z-index: -1;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.agent-card:hover::before {
  transform: translateX(100%);
  opacity: 1;
}

.agent-card:hover {
  background: rgba(var(--dead-white), 0.12);
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.agent-card.active {
  background: rgba(var(--primary-color), 1);
  /* cursor: default; */
}

.agent-card.active:hover {
  background: rgba(var(--primary-color), 0.9);
}

.agent-card.active .agent-info {
  color: rgba(var(--dead-white)) !important;
  padding: 0.1rem;
}

.agent-info {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-bottom: 0;
}

.agent-info i {
  margin-right: 0.2rem;
}

.agents-list-wrapper {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: unset;
  padding-top: 2rem;
  width: 100%;
  overflow-x: hidden;
}

.is-invalid {
  border: 1px solid rgba(var(--error-red), 1) !important;
}

.info-r {
  margin-left: auto;
  margin-right: 0;
}

.info-r .agent-info {
  display: inline-flex;
}

.agent-infos {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  position: relative;
  /* position: absolute; */
  /* top: 9rem; */
}

/* .agent-img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 14px;
  margin-right: 1.5rem;
} */

.agent-img {
  width: 10rem;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  margin-right: 1.5rem;
  /* border: 1px solid rgba(var(--dead-white), .2); */
  -webkit-box-shadow: 0px 3px 23px -8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 3px 23px -8px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 3px 23px -8px rgba(0, 0, 0, 0.4);
}

.sm-custom-btn:disabled {
  background-color: rgba(var(--dead-white), 0.2);
  color: rgba(var(--dead-white), 0.5) !important;
  cursor: not-allowed !important;
  font-weight: 600;
}

.sm-custom-btn:disabled svg {
  fill: rgba(var(--dead-white), 0.5) !important;
}

.agent-name {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
}

/* .agent-role {
  font-size: 0.85rem;
  background: rgba(var(--primary-gray), 0.4);
  border-radius: 7px;
  padding: 0.2rem 0.5rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.8);
  margin-top: 0.5rem;
  width: fit-content;
  margin-bottom: 0;
  opacity: 1;
  padding-top: 0.25rem;
} */

.agent-role-title {
  font-size: 0.8rem;
  background: rgba(var(--dead-white), 0.1);
  border-radius: 7px;
  padding: 0.2rem 0.5rem;
  font-weight: 500;
  color: rgba(var(--dead-white), 0.8);
  margin-top: 0.5rem;
  width: fit-content;
  margin-bottom: 0;
  opacity: 1;
  padding-top: 0.25rem;
  display: inline-flex;
  position: relative;
  top: -2px;
}

.agent-desc {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.6);
  margin-bottom: 0;
  margin-top: 1rem;
}

.agent-card-content {
  height: auto;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

#my-agents-modal-title {
  margin-top: 0.65rem;
  width: fit-content !important;
  min-width: unset !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

.verified-tag {
  position: relative;
  top: -1px;
  margin-left: 0.2rem;
  background: rgba(var(--primary-gray));
  display: inline-flex;
  border-radius: 7px;
  width: 1.2rem;
  height: 1.2rem;
  align-items: center;
  justify-content: center;
}

.verified-tag i {
  color: rgba(var(--dead-white));
  font-size: 0.9rem;
}

.info-r .agent-info {
  margin-left: 0.2rem;
}

.chat-no-msg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.no-history-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 10rem);
}

.no-history-wrapper div {
  text-align: center;
}

.diagonal {
  transform: rotate(-45deg);
}

.no-msg-img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 50%;
  /* border: 1px solid rgba(var(--dead-white), 0.2); */
}

.no-msg-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
}

.no-msg-text {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-top: 0.5rem !important;
  width: 70%;
  margin: 0 auto;
}

.system-message .attached-image {
  left: 3.5rem !important;
}

.attached-image {
  width: 30% !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 0 !important;
  margin: 0 !important;
  margin-right: 3.5rem !important;
  display: inline-flex !important;
  position: relative;
  top: 1.5rem;
  max-height: 25rem;
  object-fit: cover;
  margin-top: -1rem !important;
  transition: 0.2s ease-in-out;
}

.attached-image:hover {
  cursor: pointer;
  transform: scale(1.05);
  transition: 0.2s ease-in-out;
}

/* .loader {
  width: calc(60px / 2);
  height: calc(25px / 2);
  border: 2px solid;
  box-sizing: border-box;
  border-radius: 50%;
  display: grid;
  border-color: rgba(var(--primary-color));
  animation: l2 2s infinite linear;
  left: -1rem;
  position: relative;
  top: -1rem;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  border: inherit;
  border-radius: 50%;
  animation: inherit;
  animation-duration: 3s;
  border-color: rgba(var(--primary-color));
}
.loader:after {
  --s: -1;
}
@keyframes l2 {
  100% {
    transform: rotate(calc(var(--s, 1) * 1turn));
  }
} */

.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--primary-color));
  box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.4);
  animation: l2 1.8s infinite linear, wiggle 5s infinite ease-in-out;
  position: relative;
  scale: 0.7;
  margin-left: -1rem;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--primary-color), 0.4);
  animation: l2 1.8s infinite linear, wiggle 5s infinite ease-in-out;
  animation-delay: -0.5s, 0s;
}

.loader:after {
  animation-delay: -1s, 0s;
}

@keyframes l2 {
  100% {
    box-shadow: 0 0 0 35px transparent;
  }
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

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

#modal-body-content {
  /* max-height: 80vh; */
}

.executing-action-label {
  display: inline-flex;
  position: relative;
  /* top: ; */
  left: 1rem;
  color: rgba(var(--dead-white), 0.5);
  font-size: 1rem;
  font-weight: 500 !important;
  background: linear-gradient(
    90deg,
    rgba(var(--dead-white), 0.7) 0%,
    rgba(var(--dead-white), 0.7) 40%,
    rgba(var(--dead-white), 1) 50%,
    rgba(var(--dead-white), 0.7) 60%,
    rgba(var(--dead-white), 0.7) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
}

.agent-role {
  display: inline-flex;
  position: relative;
  top: 0;
  left: 0;
  color: rgba(var(--dead-white), 0.2);
  font-size: 1rem;
  font-weight: 500 !important;
  background: linear-gradient(
    90deg,
    rgba(var(--dead-white), 0.6) 0%,
    rgba(var(--dead-white), 0.6) 40%,
    rgba(var(--dead-white), 1) 50%,
    rgba(var(--dead-white), 0.6) 60%,
    rgba(var(--dead-white), 0.6) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

.mingcute--sparkles-fill {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m6.173 13.004l.17.371a8.7 8.7 0 0 0 3.3 3.638l.265.155a.181.181 0 0 1 0 .316a8.7 8.7 0 0 0-3.565 3.793l-.17.372a.19.19 0 0 1-.346 0l-.17-.372a8.7 8.7 0 0 0-3.565-3.793a.181.181 0 0 1 0-.316l.265-.155a8.7 8.7 0 0 0 3.3-3.638l.17-.371a.19.19 0 0 1 .346 0M15.078 2.73a15.2 15.2 0 0 0 6.536 7.288a.317.317 0 0 1 0 .553a15.2 15.2 0 0 0-6.536 7.289a.331.331 0 0 1-.605 0a15.2 15.2 0 0 0-6.536-7.289a.317.317 0 0 1 0-.553a15.2 15.2 0 0 0 6.536-7.288a.331.331 0 0 1 .605 0'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  top: 2px;
  position: relative;
}

.agent-wizard-wrapper,
.control-panel-wrapper {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.control-panel-sec {
  border-radius: 14px;
  background: rgba(var(--dead-white), 0.08);
  padding: 1rem;
  margin-top: 1rem;
}

.control-panel-wrapper h3 i {
  transition: 0.3s ease-in-out;
}

.control-panel-wrapper h3 i:hover {
  transition: 0.3s ease-in-out;
}

.control-panel-wrapper .bx-rotate-180 {
  transition: 0.3s ease-in-out;
}

.agent-wizard-wrapper h1,
.control-panel-wrapper h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
}

.control-panel-wrapper p {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-bottom: 0;
}

.control-panel-top h1 {
  padding-left: 2rem;
  border-left: 1px solid rgba(var(--dead-white), 0.2);
}

.control-panel-top img {
  padding-right: 2rem;
}

.control-panel-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-panel-top img,
.control-panel-top h1 {
  display: inline-flex;
}

.control-panel-wrapper h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
  cursor: pointer;
}

.bx-rotate-180 {
  transform: rotate(180deg);
}

.agent-wizard-avatar-preview {
  width: 10rem;
  height: 14rem;
  /* margin: 0 auto; */
  border-radius: 14px;
  /* outline: 1px solid rgba(var(--dead-white), 0.1); */
  display: block;
  cursor: pointer;
  object-fit: cover;
}

.agent-wizard-checks label,
.control-panel-checks label {
  color: rgba(var(--dead-white)) !important;
}

.agent-wizard-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.agent-wizard-preview .title {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
  margin-top: 0;
  display: inline-block;
  margin-right: 0.5rem;
}

.agent-wizard-preview .description {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.7);
  margin-top: 1rem;
  max-width: 40%;
  margin-bottom: 1rem;
}

.agent-preview-content ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0 !important;
  display: inline-block;
  margin-left: 0.5rem;
}

.agent-preview-content ul li {
  display: inline-flex;
  margin-right: 0.2rem;
}

.agent-preview-content ul li i {
  color: rgba(var(--dead-white), 0.5);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0;
}

.agent-wizard-preview .subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(var(--dead-white), 0.5);
  margin-bottom: 0;
  margin-top: 0.3rem;
  background-color: rgba(var(--dead-white), 0.1);
  padding: 0.3rem 0.8rem;
  padding-top: 0.35rem;
  width: fit-content;
  border-radius: 7px;
  display: inline-block;
}

.agent-preview-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.select-img-overlay {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 2rem;
  height: 2rem;
  background: rgba(var(--dead-white), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  cursor: pointer;
}

.select-img-overlay i {
  color: rgba(var(--dead-white), 1) !important;
  font-size: 1rem;
}

/* MultiSelect */

.multiSelect {
  width: 100%;
  position: relative;
  display: block;
}

.multiSelect *,
.multiSelect *::before,
.multiSelect *::after {
  box-sizing: border-box;
}

.multiSelect_dropdown {
  height: 4rem;
  background-color: rgba(var(--input-gray), 0.5);
  color: rgb(var(--dead-white)) !important;
  border: 0;
  outline: 0px solid rgba(var(--dead-white), 0.1);
  font-weight: 500;
  font-size: 1rem;
  width: 100%;
  display: block;
  border-radius: 14px;
  padding-left: 4rem;
  transition: outline 0.1s ease-in-out;
  outline-style: solid;
  cursor: pointer;
}

.multiSelect_dropdown.-hasValue {
  padding: 5px 30px 5px 5px;
  cursor: default;
  padding-left: 4rem;
  display: flex;
  align-items: center;
}

.multiSelect_dropdown.-open {
  outline: 1px solid rgba(var(--dead-white), 0.1);
}

.multiSelect_arrow::before,
.multiSelect_arrow::after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 8px;
  border-radius: 20px;
  border-bottom: 8px solid rgba(var(--dead-white), 1);
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.15s ease;
}

.multiSelect_arrow::before {
  right: calc(3rem);
  transform: rotate(-50deg) translateY(-50%);
}

.multiSelect_arrow::after {
  right: calc(3rem + 1px);
  transform: rotate(50deg) translateY(-50%);
}

.multiSelect_list {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  max-height: calc(10 * 31px);
  top: 4rem;
  left: 0;
  z-index: 9999;
  right: 0;
  background: rgba(var(--input-gray), 1);
  border-radius: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition: opacity 0.1s ease, visibility 0.1s ease,
    transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: scale(0.8) translate(0, 4px);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
}

.multiSelect_option {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translate(6px, 0);
  transition: all 0.15s ease;
}

.multiSelect_option.-selected {
  display: none;
}

.multiSelect_option:hover .multiSelect_text {
  color: #fff;
  background: rgba(var(--primary-color));
}

.multiSelect .custom-input-icon {
  top: 50% !important;
}

.multiSelect_text {
  cursor: pointer;
  display: block;
  padding: 0.5rem 1.5rem;
  color: rgb(var(--dead-white));
  font-size: 1rem;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.15s ease;
}

.multiSelect_list.-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(0, 12px);
  transition: opacity 0.15s ease, visibility 0.15s ease,
    transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

.multiSelect_list.-open + .multiSelect_arrow::before {
  -webkit-transform: rotate(-130deg) translateY(-50%);
  transform: rotate(-130deg) translateY(-50%);
  top: 40%;
}

.multiSelect_list.-open + .multiSelect_arrow::after {
  -webkit-transform: rotate(130deg) translateY(-50%);
  transform: rotate(130deg) translateY(-50%);
  top: 40%;
}

.multiSelect_list.-open .multiSelect_option {
  opacity: 1;
  transform: translate(0, 0);
}

.multiSelect_list.-open .multiSelect_option:nth-child(1) {
  transition-delay: 10ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(2) {
  transition-delay: 20ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(3) {
  transition-delay: 30ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(4) {
  transition-delay: 40ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(5) {
  transition-delay: 50ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(6) {
  transition-delay: 60ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(7) {
  transition-delay: 70ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(8) {
  transition-delay: 80ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(9) {
  transition-delay: 90ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(10) {
  transition-delay: 100ms;
}

.multiSelect_choice {
  background: rgba(var(--dead-white), 0.1);
  color: rgba(var(--dead-white), 1);
  padding: 0.5rem 1rem;
  line-height: 17px;
  margin: 5px;
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  border: 1px solid rgba(var(--dead-white), 0.2);
}

#selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.multiSelect_choice_noX {
  background: rgba(var(--dead-white), 0.1);
  color: rgba(var(--dead-white), 1);
  padding: 0.5rem 1rem;
  line-height: 17px;
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 30px;
  font-weight: 500;
  border: 1px solid rgba(var(--dead-white), 0.2);
}

.multiSelect_deselect {
  font-size: 1rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  color: rgba(var(--dead-white), 0.6);
}

.multiSelect_choice:hover .multiSelect_deselect {
  color: rgba(var(--dead-white), 0.8);
}

.multiSelect_noselections {
  text-align: center;
  padding: 1rem;
  color: rgb(var(--dead-white));
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.multiSelect_placeholder {
  position: absolute;
  left: 4rem;
  font-size: 1rem;
  top: 50%;
  background-color: transparent;
  color: rgba(var(--dead-white), 0.4);
  pointer-events: none;
  transition: all 0.1s ease;
  transform: translateY(-50%);
}

.multiSelect_dropdown.-open + .multiSelect_placeholder,
.multiSelect_dropdown.-open.-hasValue + .multiSelect_placeholder {
  display: none;
}

.multiSelect_dropdown.-hasValue + .multiSelect_placeholder {
  top: -11px;
  left: 17px;
  color: #6e7277;
  font-size: 13px;
}

/* SingleSelect */

.singleSelect {
  width: 100%;
  position: relative;
  display: block;
}

.singleSelect *,
.singleSelect *::before,
.singleSelect *::after {
  box-sizing: border-box;
}

.singleSelect_dropdown {
  height: 4rem;
  background-color: rgba(var(--input-gray), 0.5);
  color: rgb(var(--dead-white)) !important;
  border: 0;
  outline: 0px solid rgba(var(--dead-white), 0.1);
  font-weight: 500;
  font-size: 1rem;
  width: 100%;
  display: block;
  border-radius: 14px;
  padding-left: 4rem;
  transition: outline 0.1s ease-in-out;
  outline-style: solid;
  cursor: pointer;
}

.singleSelect_dropdown.-hasValue {
  padding: 5px 30px 5px 5px;
  cursor: default;
  padding-left: 4rem;
  display: flex;
  align-items: center;
}

.singleSelect_dropdown.-open {
  outline: 1px solid rgba(var(--dead-white), 0.1);
}

.singleSelect_arrow::before,
.singleSelect_arrow::after {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 8px;
  border-radius: 20px;
  border-bottom: 8px solid rgba(var(--dead-white), 1);
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.15s ease;
}

.singleSelect_arrow::before {
  right: calc(3rem);
  transform: rotate(-50deg) translateY(-50%);
}

.singleSelect_arrow::after {
  right: calc(3rem + 1px);
  transform: rotate(50deg) translateY(-50%);
}

.singleSelect_list {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  max-height: calc(10 * 31px);
  top: 4rem;
  left: 0;
  z-index: 9999;
  right: 0;
  background: rgba(var(--input-gray), 1);
  border-radius: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition: opacity 0.1s ease, visibility 0.1s ease,
    transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: scale(0.8) translate(0, 4px);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
}

.singleSelect_option {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translate(6px, 0);
  transition: all 0.15s ease;
}

.singleSelect_option.-selected {
  background-color: rgba(var(--primary-color));
}

.singleSelect_option:hover .singleSelect_text {
  color: #fff;
  background: rgba(var(--primary-color));
}

.singleSelect .custom-input-icon {
  top: 50% !important;
}

.singleSelect_text {
  cursor: pointer;
  display: block;
  padding: 0.5rem 1.5rem;
  color: rgb(var(--dead-white));
  font-size: 1rem;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.15s ease;
}

.singleSelect_list.-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(0, 12px);
  transition: opacity 0.15s ease, visibility 0.15s ease,
    transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

.singleSelect_list.-open + .singleSelect_arrow::before {
  -webkit-transform: rotate(-130deg) translateY(-50%);
  transform: rotate(-130deg) translateY(-50%);
  top: 40%;
}

.singleSelect_list.-open + .singleSelect_arrow::after {
  -webkit-transform: rotate(130deg) translateY(-50%);
  transform: rotate(130deg) translateY(-50%);
  top: 40%;
}

.singleSelect_list.-open .singleSelect_option {
  opacity: 1;
  transform: translate(0, 0);
}

.singleSelect_list.-open .singleSelect_option:nth-child(1) {
  transition-delay: 10ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(2) {
  transition-delay: 20ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(3) {
  transition-delay: 30ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(4) {
  transition-delay: 40ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(5) {
  transition-delay: 50ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(6) {
  transition-delay: 60ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(7) {
  transition-delay: 70ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(8) {
  transition-delay: 80ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(9) {
  transition-delay: 90ms;
}

.singleSelect_list.-open .singleSelect_option:nth-child(10) {
  transition-delay: 100ms;
}

.singleSelect_choice {
  background: rgba(var(--dead-white), 0.1);
  color: rgba(var(--dead-white), 1);
  padding: 0.5rem 1rem;
  line-height: 17px;
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 30px;
  font-weight: 500;
  border: 1px solid rgba(var(--dead-white), 0.2);
}

#selected-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.singleSelect_choice_noX {
  background: rgba(var(--primary-color), 0.2);
  color: rgba(var(--dead-white), 1);
  padding: 0.5rem 1rem;
  line-height: 17px;
  display: inline-block;
  font-size: 0.8rem;
  border-radius: 30px;
  font-weight: 500;
  border: 1px solid rgba(var(--primary-color), 0.7);
}

.selected-items-display #selected-items {
  margin-bottom: 1rem;
}

.singleSelect_placeholder {
  position: absolute;
  left: 4rem;
  font-size: 1rem;
  top: 50%;
  background-color: transparent;
  color: rgba(var(--dead-white), 0.4);
  pointer-events: none;
  transition: all 0.1s ease;
  transform: translateY(-50%);
}

.singleSelect_dropdown.-open + .singleSelect_placeholder,
.singleSelect_dropdown.-open.-hasValue + .singleSelect_placeholder {
  display: none;
}

/* .singleSelect_dropdown.-hasValue + .singleSelect_placeholder {
  top: -11px;
  left: 17px;
  color: #6e7277;
  font-size: 13px;
} */

.file-input {
  display: flex;
  margin: 0 0 1rem;
  padding: 1rem;
  color: rgba(var(--dead-white));
  border: 2px dashed rgba(var(--dead-white), 0.3);
  border-radius: 14px;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.file-input__label {
  margin-left: -1rem;
  padding: 0 1rem;
  font-size: 1rem;
  color: rgba(var(--dead-white), 0.5);
}

.file-input__input {
  align-items: flex-start;
  display: grid;
  grid-template-columns: auto 1fr auto;
  width: 100%;
}

.file-input:focus-within {
  border-color: rgba(var(--primary-color));
}

.file-input:focus-within .file-input__label {
  color: rgba(var(--primary-color));
}

.file-input__helper {
  margin-left: 1rem;
  font-size: 0.9rem;
  color: rgba(var(--dead-white), 0.5);
}

.input {
  position: relative;
}

.input__left {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.input__no-file {
  margin-right: 1rem;
  white-space: nowrap;
  opacity: 0.5;
  font-size: 0.9rem;
  position: relative;
  top: -1px;
}

.input__choose {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  color: rgba(var(--primary-gray)) !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(var(--dead-white), 1) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 7px;
  white-space: nowrap;
  cursor: pointer;
}

.input__choose:focus {
  background-color: rgba(var(--dead-white), 0.7);
}

.input__remove {
  position: absolute;
  font-size: 0.9rem;
  right: 0;
  top: 0.7rem;
  color: rgba(var(--dead-white), 0.5);
  border-radius: 50%;
  background: none;
  border: 0;
  transition: 0.3s ease-in-out;
}

.input__remove:hover svg {
  fill: rgba(var(--dead-white), 1);
  transition: 0.3s ease-in-out;
}

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

.input__remove:active {
  color: rgba(var(--primary-color));
}

.input__remove svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: rgba(var(--dead-white), 0.5);
  transition: 0.3s ease-in-out;
}

.chip {
  display: inline-flex;
  justify-content: space-between;
  height: 2rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  align-items: center;
  background-color: rgba(var(--input-gray), 0.5);
  border: 1px solid rgba(var(--dead-white), 0.3);
  border-radius: 14px;
  white-space: nowrap;
}

.chip__container {
  padding-right: 2rem;
  position: relative;
  top: 0.5rem;
}

.chip__text {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.agent-wizard-wrapper .file-input {
  margin-bottom: 0 !important;
  margin-top: 1rem !important;
}

.shadow-response-indicator {
  position: relative;
  top: 1px;
  left: 0.5rem;
  opacity: 1;
  font-size: 1rem;
}

#modal-body-content .loading-container {
  height: 20rem;
}

/* Estilo para forçar o seletor de configurações do Plyr a abrir para baixo */
.plyr__menu__container {
  position: absolute;
  top: auto !important;
  bottom: -15px !important;
  /* Ajuste conforme necessário para sua aplicação */
  transform: translateY(100%) !important;
  /* Faz com que o menu abra para baixo */
}

.plyr__menu__container--open {
  top: auto !important;
  bottom: -5px !important;
  /* Ajuste conforme necessário para sua aplicação */
  transform: translateY(100%) !important;
  /* Faz com que o menu abra para baixo */
}

.plyr__menu__container:after {
  display: none !important;
}

.user-message,
.system-message {
  position: relative;
  z-index: 1 !important;
}

.chat-no-msg .text-center {
  position: relative;
  top: -2rem;
}

.share-private-option {
  width: 100%;
  background: rgba(var(--dead-white), 0.08);
  height: auto;
  padding: 1rem 1.5rem;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--dead-white));
  font-weight: 500;
  border: 1px solid rgba(var(--dead-white), 0.2);
  transition: 0.2s ease-in-out;
}

#define-pass {
  display: none;
}

.continue-conversation-loading {
  display: none;
  margin: 0 auto;
  position: relative;
  top: 3px;
}

.history-content .continue-conversation-btn {
  min-width: 15rem;
}

.share-private-option:hover {
  background: rgba(var(--dead-white), 0.125);
  transition: 0.2s ease-in-out;
  cursor: pointer;
}

.share-private-option .left-icon {
  font-size: 1.25rem;
  opacity: 0.5;
  position: relative;
  top: -1px;
}

.share-private-option .right-icon {
  font-size: 1.5rem;
  color: rgba(var(--primary-color));
}

.share-private-option p {
  margin-bottom: 0;
  margin-right: auto;
  margin-left: 1rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.selected-share-option {
  color: rgba(var(--dead-white)) !important;
  background: rgba(var(--primary-color)) !important;
  border: 1px solid rgba(var(--dead-white), 0) !important;
  cursor: default !important;
}

#modal-body-content .content-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 2rem;
  min-width: 90%;
}

.bordered-btn {
  border: 1px solid rgba(var(--dead-white), 0.2);
}

.share-agent-btns,
.modal-btns {
  margin-left: auto;
  width: fit-content;
}

.share-agent-btns button,
.modal-btns button {
  width: fit-content;
  display: inline-flex;
}

.share-agent-wrapper {
  width: 100%;
  height: auto;
  border-radius: 7px;
  padding: 1.5rem;
  background: rgba(var(--dead-white), 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.share-tag-name {
  color: rgba(var(--dead-white), 0.5);
  font-weight: 600;
}

.share-agent-img-wrapper img {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(var(--dead-white), 0.2);
  border-radius: 50%;
  object-fit: cover;
  position: relative;
}

.share-agent-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
}

.share-agent-info p {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.share-agent-info {
  margin-right: auto;
  margin-left: 1rem;
}

.share-chat-body #chat {
  height: 100% !important;
  margin-top: 0 !important;
}

.share-chat-body .content-wrapper {
  margin-left: 4rem !important;
}

.share-chat-body #chat-content {
  height: 77% !important;
  top: 10vh !important;
  padding-bottom: 1rem !important;
}

.share-chat-body .content-top {
  top: 6vh;
}

.share-chat-body .chat-no-msg .text-center {
  top: -1rem !important;
}

.share-chat-body .chat-input {
  bottom: 1.5rem !important;
}

.enterprise-logo {
  width: auto;
  height: 3rem;
  display: inline-block;
  margin-right: 2rem;
  border-right: 2px solid rgba(255, 255, 255, 0.1);
  padding-right: 2rem;
}

#share-btn {
  border: 1px solid rgba(var(--dead-white), 0.2);
}

.rotate {
  animation: rotateIcon 2s ease-out forwards;
}

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

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

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

.scale {
  animation: scaleButton 2s ease-out forwards;
}

@keyframes scaleButton {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
    /* Aumenta o tamanho e gira rapidamente */
  }

  100% {
    transform: scale(1);
    /* Volta ao tamanho original após girar */
  }
}

.enterprise-register-wrapper .row {
  display: none;
}

.enterprise-register-wrapper textarea {
  padding-top: 1.5rem;
}

.share-loader {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(var(--primary-gray), 1);
  z-index: 10;
}

#history,
#automations,
#automations-list {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 6rem;
  overflow-y: auto;
  padding-bottom: 5rem;
  padding-top: 0.5rem;
  /* padding-right: 0.5rem; */
  /* padding-left: 0.5rem; */
}

.exclude-all-btn {
  width: fit-content;
  margin-bottom: 0;
  margin-left: auto;
}

.history-box {
  background: rgba(var(--dead-white), 0.1);
  border-radius: 14px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.history-agent-img {
  width: 50%;
  height: 100%;
}

.history-agent-img img {
  height: auto !important;
  width: 100% !important;
  min-height: 18rem !important;
  max-height: 18rem !important;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  object-fit: cover;
}

.continue-conversation-content {
  display: flex;
  align-items: center;
}

.history-content {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.history-text {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(var(--dead-white), 0.8);
  margin-bottom: 0;
}

#page-history .content-subtitle {
  font-size: 1rem;
  margin-bottom: 0;
  margin-left: 1rem;
  top: 0;
  left: 0;
}

.history-content .blue-btn {
  width: fit-content;
  text-transform: uppercase;
}

.half-image-wrapper {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
}

.half-image-wrapper #slideshow-image {
  width: 45vw;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  object-fit: cover;
  transition: transform 0.5s ease-in-out;
}

.register-wrapper .form-check {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.half-image-wrapper #logo {
  width: 7rem;
  position: fixed;
  top: 3rem;
  right: 3rem;
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
}

.history-agent-img #slideshow-image {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  object-fit: cover;
  width: 95%;
  height: 100%;
}

.delete-history-btn {
  background: rgba(var(--dead-white), 0.1);
  border-radius: 7px;
  padding: 0.5rem 1rem;
  color: rgba(var(--dead-white));
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* top: 1rem; */
  /* right: 1rem; */
  height: 2.5rem;
  width: 2.5rem;
  border: 0;
  transition: 0.3s ease-in-out;
}

.history-agent-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(var(--dead-white), 1);
  margin-bottom: 0.4rem;
}

.delete-history-btn:hover {
  background: rgba(var(--dead-white), 0.2);
  transition: 0.3s ease-in-out;
}

.delete-history-btn i {
  font-size: 1rem;
  color: rgba(var(--dead-white), 0.4);
  margin-right: 0;
}

#session-timeout-selector {
  display: none;
}

#credits-btn {
  border: 1px solid rgba(var(--dead-white), 0.2);
}

.glowing-div {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* Valor fixo conforme definido */
}

.glowing-div::before {
  content: "";
  position: absolute;
  top: 0;
  left: -200%;
  /* Começa bem fora da div */
  width: 500%;
  /* Aumenta significativamente a largura para suavizar as bordas */
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  border-radius: 14px;
  /* Correspondente ao valor da div */
  animation: glowing 8s infinite ease-in-out;
  /* Animação mais longa e fluida */
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

@keyframes glowing {
  0% {
    left: -400%;
  }

  50% {
    left: 400%;
    /* Passa além da div, mas não sai completamente */
  }

  100% {
    left: -400%;
    /* Volta ao ponto inicial */
  }
}

.start-chat-wrapper {
  display: flex;
  align-items: center;
  min-height: 45vh;
  max-height: 70vh;
}

.start-chat-img img {
  width: 100%;
  border-radius: 14px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 70vh;
  object-fit: cover;
}

/* .start-chat-img {
  width: 50%;
} */

.callback-wrapper {
  width: 100%;
  height: auto;
  background: rgba(var(--dead-white), 0.1);
  border-radius: 14px;
  border: 1px solid rgba(var(--dead-white), 0.2);
  min-height: 15rem;
}

.callback-img {
  max-width: 33%;
  height: 100%;
}

.callback-img img {
  object-fit: cover;
  width: 100%;
  height: 30rem;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

#callback .executing-action-label {
  top: 0;
  left: 0;
  margin-bottom: 0;
}

.gpt-message {
  background: rgb(var(--dead-white));
  color: rgb(var(--primary-gray));
  border-radius: 14px;
  padding: 1rem;
  width: fit-content;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 60%;
}

.callback-input {
  max-width: 70%;
  display: inline-block;
  margin-right: 1rem;
}

.callback-inputs button {
  display: inline-flex;
}

.start-chat-content {
  width: 60%;
  padding: 1rem 2rem;
  border-radius: 14px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  text-align: center;
  margin: 0 auto;
}

.share-modal-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(var(--dead-white));
  margin-bottom: 0;
}

.share-modal-desc {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-top: 0.5rem !important;
  width: 85%;
  margin: 0 auto;
}

.start-chat-content .sm-custom-btn i {
  opacity: 1 !important;
}

.version-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(var(--dead-white), 1);
  background: rgba(var(--dead-white), 0.1);
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  margin-left: 0.5rem;
  /* position: absolute; */
  position: relative;
  top: -1px;
}

.gray-btn {
  background-color: rgba(var(--input-gray), 1);
}

.steps-wrapper {
  background: rgba(var(--dead-white), 0.05);
  width: 100%;
  height: 100vh;
  border-left: 1px solid rgba(var(--dead-white), 0.1);
  padding: 3rem;
  padding-top: 5rem;
  overflow-y: auto;
  position: fixed;
}

.step-wrapper,
.terms-of-use-content,
.privacy-policy-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-left: 5rem;
  padding-right: 5rem;
  min-height: 100vh;
}

.subtitle-label {
  font-size: 0.9rem;
  color: rgba(var(--dead-white), 0.7);
  text-transform: uppercase;
  font-weight: 600;
}

.step-title .custom-input-wrapper {
  margin-top: 0.5rem !important;
}

.step-title input,
.step-title textarea {
  padding-right: 2rem;
}

/* Estilo para o steps-viewer */
.steps-viewer {
  list-style-type: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
}

.steps-viewer li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: rgba(var(--dead-white), 0.5);
  font-weight: 500;
}

.steps-viewer li:before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #2c2d2d;
  line-height: 2.5rem;
  text-align: center;
  font-weight: 600;
  color: rgba(var(--dead-white));
  transition: background-color 0.3s ease, color 0.3s ease;
  z-index: 1; /* Certifica-se de que o círculo fique acima da linha */
}

.steps-viewer li.completed:before {
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--dead-white), 1);
}

.steps-viewer li.active:before {
  background-color: rgba(var(--primary-color), 1);
  color: rgba(var(--dead-white), 1);
}

.steps-viewer li .step-title {
  font-weight: 600;
  color: rgba(var(--dead-white), 1);
  margin-top: 0.5rem;
  font-size: 1rem;
  margin-left: 1.5rem; /* Alinha o título com o círculo */
}

.steps-viewer li .step-description {
  color: rgba(var(--dead-white), 0.5);
  font-size: 0.9rem;
  margin-left: 1.5rem; /* Alinha a descrição com o título */
  font-weight: 400;
  display: none;
}

/* Linha que conecta os passos */
.steps-viewer li:after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1rem; /* Ajustado para conectar perfeitamente os círculos */
  width: 3px;
  height: calc(
    100% + 1rem
  ); /* Ajustado para conectar perfeitamente os círculos */
  background-color: #2c2d2d;
}

.steps-viewer li.completed:after {
  background-color: rgba(var(--primary-color), 1);
}

.steps-viewer li.previous-step:after {
  background-color: rgba(var(--primary-color), 1);
}

.steps-viewer li.active:after {
  background-color: rgba(var(--input-gray), 0.5);
}

.steps-viewer li:last-child:after {
  display: none;
}

.resume-label {
  font-size: 0.9rem;
  color: rgba(var(--dead-white), 0.6);
  margin-top: 2rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.resume-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(var(--dead-white), 1);
  margin-bottom: 0;
  /* margin-top: 2rem; */
}

.step-title textarea {
  min-width: unset !important;
}

.having-trouble {
  display: block;
  position: relative;
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.having-trouble svg {
  font-size: 2.5rem;
  fill: rgba(var(--dead-white), 0.2);
  margin-bottom: 2rem;
}

.having-trouble h3 {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(var(--dead-white), 1);
  margin-bottom: 0;
}

.having-trouble p {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(var(--dead-white), 0.5);
  margin-top: 0.5rem;
  width: 85%;
}

.enterprise-register-wrapper button,
.having-trouble button {
  width: fit-content;
}

.steps-controller {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.step {
  display: none;
  margin-bottom: 2rem;
}

.steps-wrapper {
  display: flex;
  align-items: center;
}

.scale-wrapper {
  height: auto;
}

/* #steps-viewer-container {
  padding-top: 2rem;
} */

.automations-modal-wrapper {
  width: 100%;
  height: auto;
}

/* desktop menor */
@media (max-width: 1500px) {
  .scale-wrapper {
    /* height: 100%; */
    display: block;
  }

  .steps-wrapper {
    padding: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  #steps-viewer-container {
    scale: 1;
  }

  .having-trouble {
    scale: 1;
  }
}