/* buttons */

:root {
  --bs-btn-bg: var(--primary);
  --bs-btn-hover-bg: var(--indigo-600);
  --bs-btn-active-bg: var(--indigo-400);
  --bs-btn-focus-bg: var(--indigo-700);
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled,
.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

.btn.btn-icon {
  padding: 6px;
}

.btn .icon-left {
  margin-right: 8px;
}

.btn .icon-right {
  margin-left: 8px;
}

/* sizes */
.btn-lg {
  padding: 8px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: .3rem;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: .2rem;
}

.btn.btn-sm .icon-right {
  margin-left: 4px;
}

/* primary */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: var(--indigo-600);
  border-color: var(--indigo-600);
}

.btn-primary:active {
  background-color: var(--indigo-400);
  border-color: var(--indigo-400);
}

.btn-primary:focus {
  background-color: var(--indigo-700);
  border-color: var(--indigo-700);
}

/* outline-primary */
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: var(--white) !important;
  background-color: var(--primary) !important;
  border-color: var(--indigo-600) !important;
}

.btn-outline-primary:active {
  color: var(--indigo-400);
  border-color: var(--indigo-400);
}

/* Disabled Primary */
.btn-primary:disabled {
  background-color: var(--indigo-300);
  border-color: var(--indigo-300);
}

.btn-outline-primary:focus {
  color: var(--indigo-700);
  border-color: var(--indigo-700);
}

/* secondary */
.btn-secondary {
  background-color: var(--blue-900);
  border-color: var(--blue-900);
}

.btn-secondary:hover {
  background-color: var(--blue-800);
  border-color: var(--blue-800);
}

.btn-secondary:active {
  background-color: var(--blue-400);
  border-color: var(--blue-400);
}

.btn-secondary:focus {
  background-color: var(--blue-700);
  border-color: var(--blue-700);
}

/* outline-secondary */
.btn-outline-secondary {
  color: var(--gray-700);
  border-color: var(--gray-500);
}

.btn-outline-secondary:hover {
  color: var(--gray-700);
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

.btn-outline-secondary:active {
  color: var(--gray-400);
  border-color: var(--gray-400);
}

.btn-outline-secondary.btn.active {
  color: var(--gray-700);
  background-color: var(--gray-100);
  border-color: var(--gray-500);
}

.btn-outline-secondary:focus:not(:hover):not(:disabled):not(.disabled):not(.active) {
  color: var(--gray-400);
  border-color: var(--gray-400);
}

/* danger */
.btn-danger {
  background-color: var(--red-500);
  border-color: var(--red-500);
  color: var(--white);
}

.btn-danger:hover {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--white);

}

.btn-danger:active {
  background-color: var(--red-400);
  border-color: var(--red-400);
}

.btn-danger:focus {
  background-color: var(--red-700);
  border-color: var(--red-700);
}

/* outline-danger */
.btn-outline-danger {
  color: var(--red-500);
  border-color: var(--red-500);
}

.btn-outline-danger:hover {
  color: var(--white);
  border-color: var(--red-600);
  background-color: var(--red-600);
}

.btn-outline-danger:active {
  color: var(--red-400);
  border-color: var(--red-400);
  background-color: var(--red-400);

}

.btn-outline-danger:focus {
  color: var(--red-700);
  border-color: var(--red-700);
  background-color: var(--red-700);
}

/* success */
.btn-success {
  background-color: var(--success);
  border-color: var(--success);
}

.btn-success:hover {
  background-color: var(--teal-600);
  border-color: var(--teal-600);
}

.btn-success:active {
  background-color: var(--teal-400);
  border-color: var(--teal-400);
}

.btn-success:focus {
  background-color: var(--teal-700);
  border-color: var(--teal-700);
}

/* outline-success */
.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}

.btn-outline-success:hover {
  color: var(--teal-400);
  border-color: var(--teal-400);
}

.btn-outline-success:active {
  color: var(--teal-400);
  border-color: var(--teal-400);
}

.btn-outline-success:focus {
  color: var(--teal-700);
  border-color: var(--teal-700);
}

/* outline-warning */
.btn-outline-warning {
  color: var(--warning);
  border-color: var(--warning);
}

.btn-outline-warning:hover {
  color: var(--orange-400);
  border-color: var(--orange-400);
}

.btn-outline-warning:active {
  color: var(--orange-400);
  border-color: var(--orange-400);
}

.btn-outline-warning:focus {
  color: var(--orange-700);
  border-color: var(--orange-700);
}


/* neutral */
.btn-neutral {
  background-color: var(--gray-200);
  border-color: var(--gray-400);
  color: var(--black);
}

.btn-neutral:hover {
  background-color: var(--gray-300);
  border-color: var(--gray-500);
}

.btn-neutral:active {
  background-color: var(--gray-400);
  border-color: var(--gray-600);
}

.btn-neutral:focus {
  background-color: var(--gray-500);
  border-color: var(--gray-700);
}

.btn-check:checked+.btn.btn-neutral,
.btn.btn-neutral.active,
.btn.btn-neutral.show,
.btn.btn-neutral:first-child:active:not(:disabled):not(.disabled),
:not(.btn-check)+.btn.btn-neutral:active,
.btn-neutral:active {
  color: var(--white);
  border-color: var(--gray-400);
  background-color: var(--gray-400);
}

/* white */
.btn-white {
  color: var(--gray-700);
  border-color: var(--gray-500);
  background-color: var(--white);
}

.btn-white:hover {
  color: var(--gray-700);
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

.btn-check:checked+.btn.btn-white,
.btn.btn-white.active,
.btn.btn-white.show,
.btn.btn-white:first-child:active:not(:disabled):not(.disabled),
:not(.btn-check)+.btn.btn-white:active,
.btn-white:active {
  color: var(--white);
  border-color: var(--gray-400);
  background-color: var(--gray-400);
}

.btn-white:focus {
  color: var(--gray-400);
  border-color: var(--gray-400);
}

/* outline-neutral */
.btn-outline-neutral {
  color: var(--gray-700);
  border-color: var(--gray-500);
}

.btn-outline-neutral:hover {
  color: var(--gray-700);
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

.btn-check:checked+.btn.btn-outline-neutral,
.btn.btn-outline-neutral.active,
.btn.btn-outline-neutral.show,
.btn.btn-outline-neutral:first-child:active:not(:disabled):not(.disabled),
:not(.btn-check)+.btn.btn-outline-neutral:active,
.btn-outline-neutral:active {
  color: var(--white);
  border-color: var(--gray-400);
  background-color: var(--gray-400);
}

.btn-outline-neutral:focus {
  color: var(--gray-400);
  border-color: var(--gray-400);
}

/* Utils */
.btn-fit-content {
  height: fit-content;
}
:root {
  /* pallets */

   /* colors */
   --primary: #6610F2;
   --secondary: #6A7487;
   --success: #3BC466;
   --info: #FFE5D2;
   --warning: #FE7C1C;
   --danger: #E92F43;

   --light: #F8F9FA;
   --dark: #0E101B;

  /* blue */
  --blue-100: #E9F0FF;
  --blue-200: #A4C2FE;
  --blue-300: #78A3FE;
  --blue-400: #4A84FE;
  --blue-500: #1D66FE;
  --blue-600: #1350DB;
  --blue-700: #0C3BB4;
  --blue-800: #03268B;
  --blue-900: #021346;

  /* indigo */
  --indigo-100: #E0CFFC;
  --indigo-200: #C29FFA;
  --indigo-300: #A370F7;
  --indigo-400: #8540F5;
  --indigo-500: #6610F2;
  --indigo-600: #520DC2;
  --indigo-700: #3D0A91;
  --indigo-800: #290661;
  --indigo-900: #140330;

  /* teal */
  --teal-100: #D4F8D1;
  --teal-200: #AAF0A3;
  --teal-300: #84E489;
  --teal-400: #5FD575;
  --teal-500: #3BC466;
  --teal-600: #2F9D52;
  --teal-700: #23763E;
  --teal-800: #184E29;
  --teal-900: #0B2714;

  /* pink */
  --pink-100: #F8D4ED;
  --pink-200: #F1AADC;
  --pink-300: #E980CA;
  --pink-400: #E155B8;
  --pink-500: #D92BA5;
  --pink-600: #B41E8C;
  --pink-700: #871669;
  --pink-800: #5B0E46;
  --pink-900: #2D0723;

  /* red */
  --red-100: #FBD6DA;
  --red-200: #F6ACB4;
  --red-300: #F2828E;
  --red-400: #ED5868;
  --red-500: #E92F43;
  --red-600: #C62032;
  --red-700: #9D1523;
  --red-800: #680D18;
  --red-900: #35070C;

  /* orange */
  --orange-100: #FFE5D2;
  --orange-200: #FECBA1;
  --orange-300: #FEB177;
  --orange-400: #FE9649;
  --orange-500: #FE7C1C;
  --orange-600: #D4610C;
  --orange-700: #A14807;
  --orange-800: #6B3005;
  --orange-900: #361802;

  /* gray */
  --gray-100: #F8F9FB;
  --gray-200: #EBEBF4;
  --gray-300: #E0E0EE;
  --gray-400: #D1D1E5;
  --gray-500: #B1AFD1;
  --gray-600: #736AA4;
  --gray-700: #4D4878;
  --gray-800: #36345A;
  --gray-900: #21223A;
  --gray-black: #212529;

  --white: #FFFFFF;
  --black: #000000;
}

/* Color Classes */
.primary { color: var(--primary) !important; }
.secondary { color: var(--secondary) !important; }
.success { color: var(--success) !important; }
.info { color: var(--info) !important; }
.warning { color: var(--warning) !important; }
.danger { color: var(--danger) !important; }

.light { color: var(--light) !important; }
.dark { color: var(--dark) !important; }

.blue-100 { color: var(--blue-100); }
.blue-200 { color: var(--blue-200); }
.blue-300 { color: var(--blue-300); }
.blue-400 { color: var(--blue-400); }
.blue-500 { color: var(--blue-500); }
.blue-600 { color: var(--blue-600); }
.blue-700 { color: var(--blue-700); }
.blue-800 { color: var(--blue-800); }
.blue-900 { color: var(--blue-900); }

.indigo-100 { color: var(--indigo-100); }
.indigo-200 { color: var(--indigo-200); }
.indigo-300 { color: var(--indigo-300); }
.indigo-400 { color: var(--indigo-400); }
.indigo-500 { color: var(--indigo-500); }
.indigo-600 { color: var(--indigo-600); }
.indigo-700 { color: var(--indigo-700); }
.indigo-800 { color: var(--indigo-800); }
.indigo-900 { color: var(--indigo-900); }

.teal-100 { color: var(--teal-100); }
.teal-200 { color: var(--teal-200); }
.teal-300 { color: var(--teal-300); }
.teal-400 { color: var(--teal-400); }
.teal-500 { color: var(--teal-500); }
.teal-600 { color: var(--teal-600); }
.teal-700 { color: var(--teal-700); }
.teal-800 { color: var(--teal-800); }
.teal-900 { color: var(--teal-900); }

.pink-100 { color: var(--pink-100); }
.pink-200 { color: var(--pink-200); }
.pink-300 { color: var(--pink-300); }
.pink-400 { color: var(--pink-400); }
.pink-500 { color: var(--pink-500); }
.pink-600 { color: var(--pink-600); }
.pink-700 { color: var(--pink-700); }
.pink-800 { color: var(--pink-800); }
.pink-900 { color: var(--pink-900); }

.red-100 { color: var(--red-100); }
.red-200 { color: var(--red-200); }
.red-300 { color: var(--red-300); }
.red-400 { color: var(--red-400); }
.red-500 { color: var(--red-500); }
.red-600 { color: var(--red-600); }
.red-700 { color: var(--red-700); }
.red-800 { color: var(--red-800); }
.red-900 { color: var(--red-900); }

.orange-100 { color: var(--orange-100); }
.orange-200 { color: var(--orange-200); }
.orange-300 { color: var(--orange-300); }
.orange-400 { color: var(--orange-400); }
.orange-500 { color: var(--orange-500); }
.orange-600 { color: var(--orange-600); }
.orange-700 { color: var(--orange-700); }
.orange-800 { color: var(--orange-800); }
.orange-900 { color: var(--orange-900); }

.gray-100 { color: var(--gray-100); }
.gray-200 { color: var(--gray-200); }
.gray-300 { color: var(--gray-300); }
.gray-400 { color: var(--gray-400); }
.gray-500 { color: var(--gray-500); }
.gray-600 { color: var(--gray-600); }
.gray-700 { color: var(--gray-700); }
.gray-800 { color: var(--gray-800); }
.gray-900 { color: var(--gray-900); }
.gray-black { color: var(--gray-black); }

.white { color: var(--white); }
.black { color: var(--black); }

/* Text with Background Color Classes */
.text-bg-primary { color: #fff !important; background-color: var(--primary) !important; }
.text-bg-secondary { color: #fff !important; background-color: var(--secondary) !important; }
.text-bg-success { color: #fff !important; background-color: var(--success) !important; }
.text-bg-info { color: #000 !important; background-color: var(--info) !important; }
.text-bg-warning { color: #000 !important; background-color: var(--warning) !important; }
.text-bg-danger { color: #fff !important; background-color: var(--danger) !important; }

.text-bg-light { color: #000 !important; background-color: var(--light) !important; }
.text-bg-dark { color: #fff !important; background-color: var(--dark) !important; }

/* Background Color Classes */
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }

.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }

.bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-200 { background-color: var(--blue-200); }
.bg-blue-300 { background-color: var(--blue-300); }
.bg-blue-400 { background-color: var(--blue-400); }
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-600 { background-color: var(--blue-600); }
.bg-blue-700 { background-color: var(--blue-700); }
.bg-blue-800 { background-color: var(--blue-800); }
.bg-blue-900 { background-color: var(--blue-900); }

.bg-indigo-100 { background-color: var(--indigo-100); }
.bg-indigo-200 { background-color: var(--indigo-200); }
.bg-indigo-300 { background-color: var(--indigo-300); }
.bg-indigo-400 { background-color: var(--indigo-400); }
.bg-indigo-500 { background-color: var(--indigo-500); }
.bg-indigo-600 { background-color: var(--indigo-600); }
.bg-indigo-700 { background-color: var(--indigo-700); }
.bg-indigo-800 { background-color: var(--indigo-800); }
.bg-indigo-900 { background-color: var(--indigo-900); }

.bg-teal-100 { background-color: var(--teal-100); }
.bg-teal-200 { background-color: var(--teal-200); }
.bg-teal-300 { background-color: var(--teal-300); }
.bg-teal-400 { background-color: var(--teal-400); }
.bg-teal-500 { background-color: var(--teal-500); }
.bg-teal-600 { background-color: var(--teal-600); }
.bg-teal-700 { background-color: var(--teal-700); }
.bg-teal-800 { background-color: var(--teal-800); }
.bg-teal-900 { background-color: var(--teal-900); }

.bg-pink-100 { background-color: var(--pink-100); }
.bg-pink-200 { background-color: var(--pink-200); }
.bg-pink-300 { background-color: var(--pink-300); }
.bg-pink-400 { background-color: var(--pink-400); }
.bg-pink-500 { background-color: var(--pink-500); }
.bg-pink-600 { background-color: var(--pink-600); }
.bg-pink-700 { background-color: var(--pink-700); }
.bg-pink-800 { background-color: var(--pink-800); }
.bg-pink-900 { background-color: var(--pink-900); }

.bg-red-100 { background-color: var(--red-100); }
.bg-red-200 { background-color: var(--red-200); }
.bg-red-300 { background-color: var(--red-300); }
.bg-red-400 { background-color: var(--red-400); }
.bg-red-500 { background-color: var(--red-500); }
.bg-red-600 { background-color: var(--red-600); }
.bg-red-700 { background-color: var(--red-700); }
.bg-red-800 { background-color: var(--red-800); }
.bg-red-900 { background-color: var(--red-900); }

.bg-orange-100 { background-color: var(--orange-100); }
.bg-orange-200 { background-color: var(--orange-200); }
.bg-orange-300 { background-color: var(--orange-300); }
.bg-orange-400 { background-color: var(--orange-400); }
.bg-orange-500 { background-color: var(--orange-500); }
.bg-orange-600 { background-color: var(--orange-600); }
.bg-orange-700 { background-color: var(--orange-700); }
.bg-orange-800 { background-color: var(--orange-800); }
.bg-orange-900 { background-color: var(--orange-900); }

.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }
.bg-gray-black { background-color: var(--gray-black); }

.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

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

.table th {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  color: var(--gray-700);
  border-bottom-width: 2px;
  border-bottom-color: var(--gray-700);
}

.table td {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-600);
  border-bottom-width: 1px;
  border-bottom-color: var(--gray-200);
}

.table td a:not(.btn) {
  font-size: 14px;
  font-weight: 400;
  color: var(--indigo-600);
  text-decoration: none;
}

/* Sortable table headers */
th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: 25px;
  text-wrap: nowrap;
}

th.sortable::after,
th.sortable::before {
  content: "";
  position: absolute;
  right: 8px;
  opacity: 0.5;
  font-size: 55%;
  transform: scaleX(1.5);
}

th.sortable::after {
  content: "\25BC"; /* Down arrow */
  top: 60%;
  transform: translateY(-50%) scaleX(1.5);
}

th.sortable::before {
  content: "\25B2"; /* Up arrow */
  bottom: 60%;
  transform: translateY(50%) scaleX(1.5);
}

th.sortable.sort-asc::after,
th.sortable.sort-desc::before {
  content: "";
}

th.sortable.sort-asc::before {
  content: "\25B2"; /* Up arrow */
  bottom: 60%;
  transform: translateY(50%) scaleX(1.5);
}

th.sortable.sort-desc::after {
  content: "\25BC"; /* Down arrow */
  top: 60%;
  transform: translateY(-50%) scaleX(1.5);
}

.integration-sync-table tr.table-danger {
  background-color: #f5c6cb !important;
  td {
    color: black !important;
  }
}

.integration-sync-table tr.table-warning {
  background-color: #d6d8db !important;
  td {
    color: black !important;
  }
}

.integration-sync-table tr.table-success {
  background-color: #c3e6cb !important;
  td {
    color: black !important;
  }
}
.wrapper-footer {
  border-top: 2px solid var(--gray-300);
  height: 46px;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  width: 100%;
  bottom: 0;
}

.wrapper-footer .text-footer {
  font-size: 14px;
  line-height: 24px;
  color: var(--gray-600);
  text-align: center;
  margin: 0;
}

.wrapper-footer .text-footer span {
  color: var(--primary);
}
.wrapper-navbar.navbar {
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;

  border-bottom: 2px solid var(--gray-300);

  box-shadow: 0px 2px 4px 0px #00000013;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* nav-item active */
#navbarNav .nav-link {
  font-size: 14px;
}

#navbarNav .navbar-nav {
  gap: 0.5rem;
}

.wrapper-navbar.navbar .nav-item {
  padding: 5.5px 0.5rem;
  position: relative;
  height: 100%;
  border-radius: 4px;
}

.wrapper-navbar.navbar .nav-item .nav-link {
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.wrapper-navbar.navbar .nav-item .nav-link i {
  font-size: 14px;
  line-height: 24px;
  color: transparent;
}

.wrapper-navbar.navbar .nav-item::after {
  content: "";
  width: 100%;
  height: 2px;
  background: transparent;
  transition: width 0.3s;
  position: absolute;
  bottom: -19px;
  left: 0;
  transition: all 0.3s;
  display: none;
}

.wrapper-navbar.navbar .nav-item:hover {
  background-color: var(--gray-200);
}

.wrapper-navbar.navbar .nav-item.active {
  background-color: var(--indigo-100);
}

.wrapper-navbar.navbar .nav-item:hover .nav-link,
.wrapper-navbar.navbar .nav-item.active .nav-link {
  color: var(--gray-800);
}

.wrapper-navbar.navbar .nav-item.active .nav-link {
  font-weight: 700;
}

.wrapper-navbar.navbar .nav-item:hover .nav-link i,
.wrapper-navbar.navbar .nav-item.active .nav-link i {
  color: var(--primary);
}

.wrapper-navbar.navbar .nav-item.active::after {
  background: var(--primary);
  width: 100%;
  transition: width 0.3s;
}

.wrapper-navbar.navbar .nav-item:hover:not(.disabled)::after {
  background: var(--primary);
  width: 100%;
  transition: width 0.3s;
}

.wrap-account-button {
  border-radius: 3px;
  border: 2px solid var(--gray-400);
  cursor: pointer;
  display: flex;
  transition: border-color 0.2s;
  text-decoration: none;
  color: var(--gray-700);
}

.wrap-account-button.has-badge {
  border: 2px solid var(--primary);
  /* use this class when the badge is present */
}

.wrap-account-button:hover {
  border-color: var(--gray-200);
  transition: border-color 0.2s;
}

.wrap-account-avatar {
  height: 40px;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--gray-300);

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.wrap-account-avatar.p20 {
  height: 20px;
}

.wrap-account-button .wrap-account-info,
.wrap-account-info {
  display: flex;
  align-items: center;
  padding-right: 16px;
}

.wrap-account-button .wrap-account-info .wrap-name,
.wrap-account-info .wrap-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wrap-account-button .wrap-account-info .wrap-name .name,
.wrap-account-info .wrap-name .name {
  color: var(--gray-700);
  line-height: 120%;
  font-size: 20px;
  margin: 0;
}

.wrap-account-button .wrap-account-info .wrap-name .company,
.wrap-account-info .wrap-name .company {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 14px;
  margin: 0;
}

.list-actions {
  padding-left: 0;
  margin-bottom: 0;
}

.list-actions li {
  padding-left: 16px;
  list-style: none;
}

.list-actions li a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.list-actions li a p {
  margin-bottom: 0;
  padding: 8px;
}

.wrap-account-button .wrap-account-action {
  display: flex;
  align-items: center;
  padding: 15px 8px;

  border-left: 2px solid var(--gray-300);
  color: var(--gray-500);
  font-weight: 300;
}

.wrap-account-button:hover .wrap-account-action {
  transition: background-color 0.2s;
}

/* .dropdown-menu.show {
  margin-top: var(--bs-user-dropdown-spacer) !important;
  border: 1px solid var(--gray-300);
  border-radius: 0px;
  padding-right: 0;
}

.dropdown-menu.show i {
  margin-right: 5px;
  margin-bottom: 0px;
} */

.dropdown-menu.show i.indigo {
  color: var(--indigo-500);
}

.dropdown-menu.show i.red {
  color: var(--red-600);
}
/*
.dropdown-item {
  display: block;
  width: 100%;
  padding: 15px 10px!important;
}
*/
.dropdown-menu-end {
  right: -15px !important;
}

.hrdivider {
  position: relative;
  margin-bottom: 0px;
  text-align: center;
}

.hrdivider span {
  position: absolute;
  top: -11px;
  left: 15px;
  background: #fff;
  padding: 0 10px;
  font-weight: bold;
  font-size: 12px;
  color: var(--gray-500);
}

.hrdivider hr.solid + span {
  font-weight: 400;
  color: var(--gray-800);
  font-size: 14px;
}

hr.new2 {
  border-top: 1px dashed var(--gray-500) !important;
}

hr.solid {
  border-top: 1px solid var(--gray-500) !important;
}

.btn-integration-menu {
  width: 100px;
}

.user-menu-integration-box-title {
  margin-bottom: 8px;
}

.user-menu-integration-box {
  border-radius: 3px;
  border: 1px solid var(--gray-400);
  padding: 0px 4px 8px 8px;
  margin: 0px !important;
}

.dropdownMenu2Items {
  min-width: 380px !important;
  max-width: 400px;
  padding-right: 0px !important;
}

.action-button-user-menu {
  color: var(--primary) !important;
  text-decoration: none;
  border: none;
  padding: 4px 8px;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0.2rem;
  background-color: #fff;
}

.grayscale {
  filter: grayscale(100%);
}

.connect-text {
  color: var(--gray-400);
}

#reset-general-prompt {
  position: relative;
  top: 5px;
}

#dropdownNotices {
  margin-right: 1rem;
}

#dropdownNotices.btn:hover,
#dropdownNotices.btn.active {
  background-color: var(--primary);
  color: var(--white);
}

#dropdownNotices .badge {
  top: 5px;
}

/* Media queries */
@media (min-width: 768px) and (max-width: 1480px) {
  .wrapper-navbar.navbar .nav-item:hover:not(.active)::after {
    bottom: -23px;
    border-top: 3px solid var(--primary);
  }
}
.wrap-tabs {
  display: flex;
  flex-direction: column;
  padding: 0 4.5rem;
  border-bottom: 1px solid var(--gray-300);
}

.offcanvas .wrap-tabs {
  padding: 0 1rem;
}

.wrap-tabs.new-users {
  background-color: var(--gray-100);
}

.tab-links {
  display: flex;
  margin-bottom: 0;
  margin-top: 20px;
  padding: 0;

  list-style: none;
}

.tab-links .tab-link--item  {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: all 0.3s;
}

.tab-links .tab-link--item i {
  display: none;
}

.tab-link--item a {
  display: flex;
  gap: 6px;
  font-size: 16px;
  font-weight: 400;
  color: var(--primary);
  text-decoration: none;
  padding: 8px 16px 10px;
}

.tab-links .tab-link--item:hover {
  background-color: var(--white);
  border-color: var(--gray-300);
  transition: all 0.3s;
}

.tab-links .tab-link--item:hover a {
  color: var(--gray-700);
}

.tab-link--item.active:hover {
  border-color: var(--gray-300);
  border-bottom: 1px solid var(--white);
}

.tab-link--item.active {
  background-color: var(--white);
  border-color: var(--gray-300);
  border-bottom: 1px solid var(--white);
}

.tab-link--item.active i {
  display: block;
}

.tab-link--item.active a {
  color: var(--gray-700);
}

.tab-content .tab {
  display: none;
}

.tab-content .tab.active {
  display: block;
}

.tab-links .tab-link--item i.always-visible {
  display: block !important;
}
.tag {
  width: fit-content;
  display: flex;
  align-items: center;
  padding: 1px 8px;
  gap: 4px;
  border-radius: 4px;
  border: 1px solid var(--gray-500);
  background-color: var(--gray-100);

  font-size: 14px;
  line-height: 21px;

  color: var(--gray-900);
}

.tag.tag--primary {
  border-color: var(--indigo-500);
  background-color: var(--indigo-100);
  color: var(--indigo-900);
}

.tag.tag--secondary {
  border-color: var(--blue-500);
  background-color: var(--blue-100);
  color: var(--blue-900);
}

.tag.tag--success {
  border-color: var(--teal-500);
  background-color: var(--teal-100);
  color: var(--teal-900);
}

.tag.tag--danger {
  border-color: var(--red-500);
  background-color: var(--red-100);
  color: var(--red-900);
}

.tag.tag--warning {
  border-color: var(--orange-500);
  background-color: var(--orange-100);
  color: var(--orange-900);
}

.tag.tag--light {
  border-color: var(--light-500);
  background-color: var(--light-100);
  color: var(--light-900);
}

.tag.tag--dark {
  border-color: var(--dark-500);
  background-color: var(--dark-100);
  color: var(--dark-900);
}

.wrapper-logger {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-left: 0;
  padding-right: 0;
  height: 50px;
  border-bottom: 1px dashed #e0e0e0;
  background-color: var(--white);
}

.container-fluid.wrapper-logger {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

.wrap-logger {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-logger {
  font-size: 12px;
  color: var(--gray-600);
}

.date-logger em {
  color: var(--gray-700);
  font-style: normal;
}

.logger {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logger img {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  object-fit: cover;
  object-position: center;

  background-color: var(--gray-300);
}

.logger span {
  font-size: 12px;
  color: var(--indigo-600);
}

.action-link {
  font-size: 14px;
  color: var(--indigo-600);
  text-decoration: none;
}

/* Card preview */
.wrap-previw-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.previw-logo img {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
  background-color: var(--gray-300);
}


.wrap-previw-logo .wrap-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-fake {
  position: absolute;
  bottom: 20px;
  width: 114px;
  opacity: 0;
  cursor: pointer;

}

.wrap-validation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.wrap-validation .tag {
  font-size: 12px;
  color: var(--red-500);
  white-space: nowrap;

  background-color: var(--gray-100);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-400);
}

.wrap-validation .valid_tag {
  font-size: 12px;
  color: var(--teal-500);
  white-space: nowrap;

  background-color: var(--gray-100);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-400);
}

.wrap-validation span {
  font-size: 12px;
  color: var(--gray-600);
}

.wrap-account-footer {
  display: flex;
  align-items: center;
  gap: 10px;

  background-color: var(--white);
  border-top: 1px dashed var(--gray-300);
  padding: 16px 0;

  position: relative;
  bottom: 0;
  z-index: 1;
}

.wrap-account-actions {
  justify-content: end;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.inline {
  display: inline !important;
}


/* My account */
.wrapper-chat {
  width: 100%;
  height: calc(100vh - 315px);
  background-color: var(--gray-100);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--gray-300);
}

.wrap-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.wrap-message {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 16px;
  gap: 16px;
  position: relative;
  max-width: 85%;
}

.avatar-message {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--gray-300);
}

.wrap-message.ready .avatar-message {
  visibility: hidden;
}

.box-message {
  width: 100%;
  min-height: 50px;
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0px 2px 4px 0px #00000013;
  position: relative;
}

.box-message .message {
  display: block;
  color: #736AA4;
}

.box-message .message .white {
  color: #FFF;
}

.info-send {
  position: absolute;
  bottom: -24px;
  right: 0;
  font-size: 12px;
  color: #736AA4;
}

.wrap-message .box-message:before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  bottom: 10px;
  border: 7px solid transparent;
}


.wrap-message.user-message {
  left: 15%;
}

.wrap-message.user-message .box-message {
  background-color: var(--white);
  justify-content: flex-end;
  border: 1px solid var(--gray-300);
}

.wrap-message.user-message .box-message:before {
  right: -8px;
  border: 7px solid transparent;
  border-right: 0;
  border-left: 7px solid var(--gray-300);
}

.wrap-message.bot-message {
  margin-bottom: 50px;
  margin-top: 30px;
}

.wrap-message.bot-message .box-message {
  background-color: var(--indigo-100);
  justify-content: flex-start;
}

.wrap-message.bot-message .box-message:before {
  left: -7px;
  border-left: 0;
  border-right: 7px solid var(--indigo-100);
}

.wrap-message-form {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  align-items: end;
  padding: 16px 32px;
  border-top: 1px dashed var(--gray-300);
  gap: 10px;
}


.wrap-integration {
  margin: 6px 12px;
}

.wrap-integration .form-label {
  font-size: 16px;
  color: var(--dark);
}

.wrap-integration-input {
  display: flex;
  position: relative;
  gap: 3px;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  padding: 4px;
  align-items: center;
  justify-content: space-between;
}

.wrap-integration-input .icon-integration {
  width: 32px;
  height: 32px;
  border-radius: 4px;

  background-color: var(--gray-200);

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap-integration-input .icon-integration .bi {
  font-size: 18px;
  color: var(--gray-600);
}

.wrap-integration-input .form-control {
  border-color: transparent;
  width: 50%;
}

.users-select option,
.users-select .ts-control div {
  color: var(--gray-700);
}

.users-select .ts-control div i {
  color: var(--gray-600);
}

.user-list-table tbody tr:hover {
  background-color: var(--gray-100);
}
.user-list-table tbody tr td:not(input[type="checkbox"]) {
  cursor: pointer;
}

.form-control.bto-remove-line {
  width: 38px;
}
#contacts-header-page .wrap-header-page-actions .btn-group .btn {
  border-radius: 3px;
}

#contact-filter-date label {
  background: none;
  border-right: 0;
}

#contact-filter-date select {
  border-left: 0;
}

.table-action-row .action-row {
  cursor: pointer;
}

.table-action-row .action-row:hover {
  background-color: var(--gray-100);
}

/* Modals */
#resetWorkerModal .modal-header i,
#contactModal .modal-header i {
  color: var(--orange-500);
}

#resetWorkerModal ul.reset-worker-modal-list {
  margin-top: 2rem;
  list-style: none;
}

#contactModal ul.contact-modal-list {
  margin-top: 1rem;
  list-style: none;
  padding-left: 0;
}

ul.reset-worker-modal-list li,
ul.contact-modal-list li {
  position: relative;
  padding-left: 25px;
}

ul.contact-modal-list li:not(:last-child) {
  margin-bottom: 8px;
}

ul.reset-worker-modal-list li::before,
ul.contact-modal-list li::before {
  content: "\F138"; /* Código Unicode para o ícone bi-arrow-right */
  font-family: bootstrap-icons !important;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  color: var(--orange-500);
}

ul.contact-modal-list li span.status {
  font-size: 14px;
  line-height: 13px;
  font-weight: 400;
  color: var(--dark);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-500);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

ul.contact-modal-list li span.status.paused {
  background-color: var(--orange-100);
  border: 1px solid var(--orange-300);
}

ul.contact-modal-list li span.status.lost {
  background-color: var(--red-100);
  border: 1px solid var(--red-300);
}

/* Offcanvas */
#newAccountCanvas .form-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

#newAccountCanvas .form-control::placeholder {
  color: var(--gray-600);
}

.bg-importing {
  color: #0e101b !important;
  background-color: #ffe5d2;
}

.bg-ready {
  background-color: #736aa4;
}

.bg-actived {
  background-color: #6610f2;
}

.bg-paused {
  background-color: #fe9649;
}

.bg-finished {
  background-color: #0e101b;
}
.wrapper-receipts {
  display: flex;
  flex-direction: column;

  padding: 30px 0;

  background-color: var(--gray-100);
}

.wrapper-receipts .title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--black);
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  gap: 8px;
}

.wrapper-receipts .title .bi {
  color: var(--gray-500);
}

.wrap-card-receipts {
  display: flex;
  flex-wrap: wrap;

  background-color: var(--white);
  border-radius: 4px;
  border: 1px solid var(--gray-300);
}

.wrap-card-receipts--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px dashed var(--gray-300);
  width: 100%;
}

.wrap-card-receipts--header .title-card {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0;
  line-height: 1;
}

.wrap-card-receipts--header .title-card small {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-500);
}

.wrap-card-receipts--header .badge.bg-success {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
  background-color: var(--orange-100) !important;
  padding: 4px 8px;
  border-radius: 50px;
}

.wrap-card-receipts--body {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
  width: 100%;
}

.wrap-card-total-receipts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}

.wrap-card-total-receipts .label-resume-receipts,
  .wrap-card-total-receipts .text-resume-receipts {
  color: var(--indigo-500);
}

.wrap-card-resume-receipts {
  border-bottom: 1px solid var(--gray-300);
  padding-bottom: 6px;
  line-height: 1;
}

.wrap-card-receipts .wrap-card-resume-receipts:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.label-resume-receipts {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 0;
}

.text-resume-receipts {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.wrapper-finance {
  border-left: 2px solid var(--gray-300);
  height: 100%;
  width: 100%;
}

.wrap-header-inner-finance {
  display: flex;
  background: white;
  padding: 30px;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px dashed var(--gray-300);
}

.wrap-header-inner-finance-icon {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: var(--gray-200);
  padding: 8px;
}

.wrap-icon {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: var(--indigo-500);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.wrap-header-inner-finance-icon .wrap-icon:last-child {
  background: var(--orange-200);
  color: var(--orange-600);
  transform: translate(23px, -16px);
}

.title-inner-finance {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0;
}

.title-inner-finance .badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
  background-color: var(--orange-100) !important;
  padding: 4px 8px;
  border-radius: 50px;
}

.wrapper-status-finance {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.wrapper-status-finance .wrap-status-workers {
  width: auto;
}


.wrapper-details-finance {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--white);
}
.wrap-table-details-finance--header {
  border-bottom: 2px solid var(--gray-700);
  padding-bottom: 8px;
}

.wrap-table-details-finance--header .label {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 0;
}


.wrap-card-credit-card--resume .wrap-card-receipts {
  border-radius: 0;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px dashed var(--gray-300);
}

.wrap--card-credit-card-recorrent {
  padding: 16px;
  border-bottom: 1px dashed var(--gray-300);
}

.wrap--card-credit-card-recorrent .form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 0;
}

.wrap-card-credit-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}
.integration-card .card-header img {
  max-width: 64px;
}

.integration-card .integration-avatar {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.integration-card .integration-avatar i {
  font-size: 32px;
}

.integration-card .integration-avatar.google {
  background-color: var(--red-100);
}

.integration-card .integration-avatar.google i {
  color: var(--red-600);
}

.integration-card .integration-avatar.whatsapp {
  background-color: var(--teal-100);
}

.integration-card .integration-avatar.whatsapp i {
  color: var(--teal-600);
  margin-top: -5px;
}

.integration-card .card-header a:not(.btn) {
  font-size: 16px;
  text-decoration: none;
  color: var(--gray-800);
}

.integration-card .card-body {
  font-size: 14px;
  color: var(--gray-600);
}

/* Offcanvas */
#whatsAppIntegrationCanvas p, #RdStationIntegrationCanvas p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 21px;
  font-weight: 400;
}
.wrapper-hero-login {
  background-color: rgba(224,207,252,0.7);
  background-image: url(/../assets/bg-login.svg);
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: calc(100vh - 46px);
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 12%;
}
.wrapper-hero-login .title {
  font-size: 40px;
  font-weight: 700;
  color: var(--blue-900);
  margin-top: 50px;
  text-align: center;
  margin: 50px auto;
}


.wrapper-card-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100vh - 46px);
  background-color: rgba(224,207,252,0.7);
}

@media (min-width: 768px) {
  .wrapper-card-login {
    background-color: var(--gray-100);
  }

  .wrapper-card-login .card {
    width: 70%;
  }
}

.wrapper-card-login .card {
  width: 90%;
  border-color: var(--gray-300);
  border-radius: 4px;
}

.wrapper-card-login .card .title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  color: var(--blue-900);
  width: 80%;
}

.wrapper-card-login .card .btn {
  width: 100%;
  margin-top: 10px;
}

.wrapper-card-login .card .google-button {
  width: 100%;
}

.wrapper-card-login .card .google-button .customGPlusSignIn {
  width: 100% !important;
  margin-top: 10px;
  box-shadow: none !important;
  border: 1px solid #B1AFD1 !important;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 4px !important;
}

.wrapper-header-meeting {
  background-color: var(--white);
  padding: 15px;
  border-bottom: 1px solid var(--gray-300);
}

.wrap-header-meeting  {
  display: flex;
  align-items: center;
}

.wrap-header-meeting .bi {
  font-size: 24px;
  margin-right: 10px;
}

.wrap-header-meeting .title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.wrap-info-meeting {
  display: flex;
  flex-direction: column;
  padding-right: 24px;
}

.wrap-info-meeting--details {
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.wrap-info-meeting--details.messages {
  align-items: flex-start;
}

.wrap-info-meeting--details--icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  background-color: var(--gray-200);
  border-radius: 4px;

  position: relative;
  overflow: hidden;
}

.wrap-info-meeting--details--text {
  font-size: 16px;
  line-height: 20px;
  color: var(--gray-900);
  margin: 0;
}

.wrap-info-meeting--details--text > small {
  font-size: 14px;
  font-weight: 400;
}

.wrap-info-meeting--details .personality {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-600);

  display: flex;
  align-items: center;

  background-color: var(--indigo-100);
  padding: 4px 8px;
  border-radius: 4px;

  position: relative;
  margin-top: 5px;

  box-shadow: 0px 2px 4px 0px #00000013;
  width: fit-content;
}

.wrap-info-meeting--details .personality::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 7px solid transparent;
  border-left: 0;
  border-right: 7px solid  var(--indigo-100);
  transform: translate(-100%, -120%);
}


/* calendar */
.wrap-calendar {
  border-left: 1px solid var(--gray-300);
  border-right: 1px solid var(--gray-300);
  height: auto;
  width: 100%;
  background-color: var(--white);
  position: relative;
}

@media (min-width: 768px) {
  .wrap-calendar {
    height: calc(100vh - 250px);
  }
  table.ui-datepicker-calendar {
    padding: 0;
  }
  .ui-datepicker-buttonpane.ui-widget-content {
    background-color: var(--white);
  }
}

@media (min-width: 1025px) {
  .wrap-calendar {
    height: calc(100vh - 200px);
  }
  table.ui-datepicker-calendar {
    padding: 1rem;
  }
}

.ui-datepicker-header {
  background-color: var(--white);
  color: var(--gray-900);
  text-align: center;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed var(--gray-300);

  position: relative;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  display: flex;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after {
  color: var(--gray-500);
}

.ui-datepicker-prev {
  left: 0;
}

.ui-datepicker-next {
  right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display:none;
}

.ui-datepicker-prev:after,
.ui-datepicker-next:after {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  font-size: 1em;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  color: var(--gray-900);
}

.ui-datepicker-prev:after { content:"\F284" }
.ui-datepicker-next:after { content:"\F285" }

.ui-datepicker-calendar th {
  padding: 10px;
  color: var(--gray-900);
}

.ui-datepicker-calendar {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 16px;
  background-color: var(--white);
  width: 100%;
}

.ui-datepicker-title {
  padding: 10px;
  color: var(--teal-900);
}

.ui-datepicker-calendar td {
  padding: 4px 0px;
}

.ui-datepicker-calendar .ui-state-default {
  text-decoration: none;
  color: var(--gray-900);
}

.ui-datepicker-calendar .ui-state-active {
  color: var(--indigo-500);
}

.ui-datepicker-buttonpane.ui-widget-content {
  border-top: 1px dashed var(--gray-300);
  padding: 16px;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: background-color 0.3s;
  cursor: pointer;
  display: none;
}

@media (min-width: 768px) {
  .ui-datepicker-buttonpane.ui-widget-content {
    display: flex;
  }
}

.ui-datepicker-buttonpane.ui-widget-content:hover {
  background-color: var(--gray-100);
  transition: background-color 0.3s;
}

.ui-datepicker-buttonpane.ui-widget-content:hover button {
  color: var(--indigo-900);
}

.ui-datepicker-buttonpane.ui-widget-content button {
  background-color: transparent;
  color: var(--indigo-500);
  border: none;
  padding: 0;
  border-radius: 4px;
  width: 100%;
}

.ui-datepicker-calendar .ui-datepicker-unselectable.ui-state-disabled .ui-state-default {
  color: var(--gray-400);
  cursor: not-allowed;
}

/* Confirm Meeting Modal */
#confirmMeetingModal .modal-dialog {
  max-width: 632px;
  width: calc(100% - 16px);
}

.meeting-list li {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--gray-900);
}

.meeting-list .meeting-icon {
  width: 48px;
  height: 48px;
  background-color: var(--gray-200);
  display: flex;
  justify-content: center;
  align-items: center;
}

.meeting-list .meeting-title {
  font-size: 16px;
  line-height: 150%;
  font-weight: 700;
}

.meeting-list .meeting-desc {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.meeting-list .meeting-icon .bi {
  font-size: 20px;
}

.meeting-list .meeting-icon .bi.bi-calendar-check {
  color: var(--teal-500);
}

.meeting-list .meeting-icon .bi.bi-clock {
  color: var(--blue-500);
}

/* Schedule */
.wrap-schedule {
  border-right: 1px solid var(--gray-300);
  height: calc(100vh - 200px);
  width: 100%;
  background-color: var(--white);
  position: relative;
}

.wrap-schedule-header {
  background-color: var(--white);
  color: var(--gray-900);
  text-align: center;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed var(--gray-300);

  position: relative;
}

.wrap-time-slots {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 46px;
  overflow-y: auto;
  height: calc(100vh - 256px);
}

.wrap-time-slots .btn {
  height: 48px;
  font-size: 20px;
}

@media (max-width: 1024px) {
  .meeting-container {
    margin-bottom: 105px;
  }
  .wrap-training-footer {
    position: fixed;
    bottom: 30px !important;
  }
  .wrapper-footer {
    position: fixed;
  }
  .wrap-schedule {
    height: auto;
  }
  .wrap-time-slots {
    height: auto;
  }
}



/* modal */
.modal-dialog.modal-dialog-centered.custom-meeting {
  flex-direction: column;
  top: 10%;
}

.wrap-info-meeting--details.messages.messages.modal-message  {
  width: 110%;
  left: -6%;
  position: relative;
}

.wrap-info-meeting--details.messages.messages.modal-message .personality {
  margin-bottom: 6px;
  font-size: 12px;
}

.modal-backdrop.modal-white {
  background-color: var(--white);
}

.overlay-white {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1040;
}

.meet-account-avatar {
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal consent terms */
#optInModal .modal-body p {
  font-size: 14px;
}
.wrapper-header-page {
  background-color: var(--white);
  padding: 20px 4.5rem;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
}

.wrapper-header-page > .container-fluid {
  padding: 0;
}

.wrap-header-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wrap-header-page-title {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.wrap-header-page-title .title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.wrap-header-page-title .badge {
  background-color: var(--primary);
  border-radius: 22px;
  font-size: 12px;
}

.wrap-header-page-title .badge-warning {
  color: var(--gray-600);
  border-radius: 22px;
  font-size: 12px;
}

.wrap-header-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* search */
.wrapper-search {
  display: flex;
  align-items: center;
  background-color: var(--gray-100);
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding: 1rem 4.5rem;

  border-bottom: 1px dashed var(--gray-200);
}

.wrapper-search.search--internal {
  background-color: var(--white);
  border-bottom: 1px dashed var(--gray-300);
  padding-left: 0;
  padding-right: 0;
}

.wrapper-search .container-fluid {
  padding: 0;
}

/* Sticky Headers */
.wrapper-header-page-internal.sticky-header {
  position: sticky;
  z-index: 100;
}

.wrap-tabs.wrap-tabs-custom.sticky-header,
.new-wrapper-status-workers.sticky-header {
  position: sticky;
  z-index: 100;
  background-color: var(--gray-100);
}

.new-wrapper-status-workers.sticky-header {
  margin: -1px auto 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-300);
}

/* internal */
.wrapper-header-page-internal {
  padding: 0;
  border-bottom: 1px solid var(--gray-300);
  display: flex;
}

.wrap-header-page-internal {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wrap-header-page-internal--info.my-services {
  align-items: center;
}

.wrap-header-page-internal--info.my-services .icon-divider {
  font-size: 32px;
  color: var(--gray-400);
}

.wrap-header-page-internal--info {
  background-color: var(--white);
  padding: 0.5rem 4.5rem;
  display: grid;
  grid-template-columns: 80px auto;
  gap: 16px;
}

.wrap-header-page-internal--info--avatar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wrap-header-page-internal--info--avatar img  {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}

.wrap-header--avatar-service {
  background: var(--gray-200);
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  padding: 8px;
}

.wrap-header--avatar-service img.image-one,
.wrap-header--avatar-service img.image-two {
  width: 40px;
  height: 40px;
  border-radius: 2px;
}

.wrap-header--avatar-service img.image-two {
  transform: translate(25px, -15px);
  z-index: 1;
  position: relative;
}

.wrap-header--avatar-service div.image-two {
  transform: translate(25px, -15px);
  z-index: 1;
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
}

.wrap-header--avatar-service div.image-two .bi {
  font-size: 20px;
  color: var(--blue-500);
}

.wrap-header-page-internal--info--data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wrap-header-page-internal--info--data .model {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 0;
}

.wrap-header-page-internal--info--data .model a {
  text-decoration: none;
}

.wrap-header-page-internal--info--data .name {
  font-size: 20px;
  line-height: 120%;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;

  display: flex;
  align-items: center;
  gap: 8px;
  /* margin-top: 4px; */
  /* margin-bottom: 10px; */
}
.wrap-header-page-internal--info--data .name h3 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;

  display: inline-flex;
  align-items: center;
}

.wrap-header-page-internal--info--data .company-name {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--indigo-500);
  margin-top: 6px;
}

.wrap-header-page-internal--info--data .badge {
  border-radius: 22px;
  font-size: 12px;
}

.wrap-header-page-internal--info--data .name .time {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gray-600);
}

.wrap-header-page-internal--info--data .personality {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-600);

  display: flex;
  align-items: center;

  background-color: var(--indigo-100);
  padding: 4px 8px;
  border-radius: 4px;

  position: relative;
  margin-bottom: 5px;

  box-shadow: 0px 2px 4px 0px #00000013;
  width: fit-content;

}

.wrap-header-page-internal--info--data .personality::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 7px solid transparent;
  border-left: 0;
  border-right: 7px solid  var(--indigo-100);
  transform: translate(-100%, -50%);
}

 .wrap-header-page-internal--info--tags {
  display: flex;
  gap: 4px;
  flex-flow: wrap;
}

.wrap-header-page-internal--info--tags .tags-worker {
  font-size: 14px;
  line-height: 13px;
  font-weight: 400;
  color: var(--gray-900);

  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  padding: 4px 8px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dropdown */
.wrap-header-page-internal--info--data .dropdown .btn {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.wrap-header-page-internal--info--data .dropdown .btn:not(.dropdown-toggle-split) {
  background-color: var(--teal-600);
  border-color: var(--teal-600);
  padding: 6px 30px;
}

.wrap-header-page-internal--info--data .btn-sm+.dropdown-toggle-split {
  background-color: var(--teal-700);
  border-color: var(--teal-700);
  padding: 9px;
}

.wrap-header-page-internal--info--data .dropdown-toggle-split:hover {
  background-color: var(--teal-800);
  border-color: var(--teal-800);
}

.wrap-header-page-internal--info--data .dropdown-toggle-split.show {
  background-color: var(--teal-700);
  border-color: var(--teal-700);
}

/* KPIS */
.wrapper-header-page-internal-kpis {
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  padding: 10px 4.5rem;
}

.wrapper-header-page-internal-kpis .divider-right {
  border-right: 1px dashed var(--gray-400);
  height: 100%;
  margin-right: 16px;
}

.wrap-header-page-internal--kpis {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: wrap;
  gap: 16px;
  padding-right: 16px;
}

.wrap-header-page-internal--kpis .wrap-header-page-internal--kpis--item {
  display: flex;
  flex-direction: column;
  color: var(--gray-600);
}

.wrap-header-page-internal--kpis .wrap-header-page-internal--kpis--item .label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  margin: 0;
}

.wrap-header-page-internal--kpis .wrap-header-page-internal--kpis--item .wrap-numbers {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wrap-header-page-internal--kpis .wrap-header-page-internal--kpis--item .wrap-numbers .number {
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 700;
  color: var(--gray-600);
}
/* Fim KPIS */

#content .container-master {
  padding: 0 4.5rem;
}

#newContact > .row,
#newCompany > .row {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#newContact .card-body,
#newCompany .card-body {
  padding: 24px 24px;
}

#newContact .card-header,
#newCompany .card-header {
  line-height: 24px;
}

footer.container-fluid {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

#customBtn {
  display: inline-block;
  background: white;
  color: #444;
  width: 160px;
  border-radius: 3px;
  border: thin solid #888;
  box-shadow: 2px 2px 1px grey;
  white-space: nowrap;
}
#customBtn:hover {
  cursor: pointer;
}
.google-icon {
  background: transparent 5px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
}

.google-top-icon {
  background: transparent 5px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  height: 16px;
  z-index: 3;
  position: absolute;
  top: 45px;
  left: 55px;
}

span.buttonText {
  display: inline-block;
  vertical-align: middle;
  padding-right: 42px;
  font-size: 14px;
  font-weight: bold;
}

.google-button {
  border: none;
  background-color: white;
}

.me-action {
  width: 180px;
  margin-left: 50px !important;
}

.wrap-header-page-internal--info--status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: var(--white);
  border-bottom: 1px dashed var(--gray-300);
  border-top: 1px dashed var(--gray-300);
}

.wrap-header-page-internal--info--status span {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
}

.wrap-header-page-internal--info--status span em {
  font-style: normal;
  color: var(--gray-800);
}

.title-segment {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700);
  margin-left: 28px;
  margin-top: 4px;
  margin-bottom: 5px;
}

.messages-not-sent {
  position: relative;
}

.messages-not-sent::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 4px,
    var(--gray-400) 4px,
    var(--gray-400) 7px
  );
  z-index: -1;
}

.messages-not-sent .title-segment {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-800);
  margin-left: 37px;
  margin-top: 1rem;
  margin-bottom: 32px;
  background-color: var(--gray-100);
  width: fit-content;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* wrapper status */
.wrapper-status-workers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4.5rem;
}

.wrap-table-workers .wrapper-status-workers,
.wrap-table-workers .wrapper-card-contract {
  height: 147px;
}

.wrap-status-workers {
  display: flex;
  align-items: center;
  padding: 8px;
  height: 44px;
  width: 175px;
  border-radius: 4px;
}

.wrap-status-workers--item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-status-workers--item .label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  margin: 0;
}

.wrap-status-workers--item .wrap-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.wrap-status-workers--item .wrap-numbers .number {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
}

/* waiting */
.wrap-status-workers.waiting {
  background-color: var(--gray-200);
  color: var(--gray-600);
}
.wrap-status-workers.waiting .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.waiting .wrap-numbers .bi {
  color: var(--gray-500);
}

/* opened */
.wrap-status-workers.opened {
  background-color: var(--indigo-100);
  color: var(--indigo-400);
}
.wrap-status-workers.opened .wrap-numbers {
  color: var(--indigo-500);
}

.wrap-status-workers.opened .wrap-numbers .bi {
  color: var(--indigo-300);
}

/* converted */
.wrap-status-workers.converted {
  background-color: var(--teal-100);
  color: var(--teal-700);
}
.wrap-status-workers.converted .wrap-numbers {
  color: var(--teal-600);
}

.wrap-status-workers.converted .wrap-numbers .bi {
  color: var(--teal-300);
}

/* lost */
.wrap-status-workers.lost {
  background-color: var(--red-100);
  color: var(--red-400);
}
.wrap-status-workers.lost .wrap-numbers {
  color: var(--red-600);
}

.wrap-status-workers.lost .wrap-numbers .bi {
  color: var(--red-300);
}

/* hired */
.wrap-status-workers.hired {
  width: 125px;
  background-color: var(--gray-200);
  color: var(--gray-600);
}
.wrap-status-workers.hired .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.hired .wrap-numbers .bi {
  color: var(--gray-500);
}

/* total */
.wrap-status-workers.total {
  width: auto;
  background-color: var(--indigo-100);
  color: var(--indigo-400);
}
.wrap-status-workers.total .wrap-numbers {
  color: var(--indigo-500);
}

.wrap-status-workers.total .wrap-numbers .number {
  font-size: 20px;
}

.wrap-status-workers.total .wrap-numbers .bi {
  color: var(--indigo-300);
}

/* email */
.wrap-status-workers.email {
  background-color: var(--orange-100);
  color: var(--orange-600);
}
.wrap-status-workers.email .wrap-numbers {
  color: var(--orange-700);
}

.wrap-status-workers.email .wrap-numbers .bi {
  color: var(--orange-500);
}

/* linkedin */
.wrap-status-workers.linkedin {
  background-color: var(--blue-100);
  color: var(--blue-400);
}
.wrap-status-workers.linkedin .wrap-numbers {
  color: var(--blue-700);
}

.wrap-status-workers.linkedin .wrap-numbers .bi {
  color: var(--blue-500);
}

/* whatsapp */
.wrap-status-workers.whatsapp {
  background-color: var(--teal-100);
  color: var(--teal-600);
}
.wrap-status-workers.whatsapp .wrap-numbers {
  color: var(--teal-700);
}

.wrap-status-workers.whatsapp .wrap-numbers .bi {
  color: var(--teal-500);
}

/* time */
.wrapper-status-workers.block-sm .wrap-status-workers.time {
  width: 100px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w100 {
  width: 100px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w200 {
  width: 175px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w300 {
  width: 250px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w400 {
  width: 325px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w500 {
  width: 400px;
}

.wrap-status-workers.time {
  background-color: var(--gray-200);
  color: var(--gray-600);
}

.wrap-status-workers.time .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.time .wrap-numbers .bi {
  color: var(--gray-500);
}

/* Block */
.wrapper-status-workers.block {
  margin: 0;
}

.wrapper-status-workers.block .wrap-status-workers {
  width: 22%;
  height: 134px;
}

.wrapper-status-workers.block .wrap-status-workers  .wrap-status-workers--item {
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* block-sm */
.wrapper-status-workers.block-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.wrapper-status-workers.block-sm .wrap-status-workers {
  width: 80px;
  height: 62px;
}

.wrapper-status-workers.block-sm .wrap-status-workers  .wrap-status-workers--item {
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* Card my services */
.card.card-my-services {
  position: relative;
  /* overflow: hidden; */
  margin-bottom: 1rem;
  border-radius: 4px;
  border-color: var(--gray-300);
}

/* Resumo da conversa */
#summaryCard .card.card-my-services .card-header,
#summaryCard .card.card-my-services .card-body {
  background-color: var(--indigo-200);
  color: var(--black);
}

#summaryCard .card.card-my-services .card-header .card-title {
  margin-top: -5px;
  color: var(--bs-dark-text-emphasis);
}
#summaryCard .card.card-my-services .card-header .header-data {
  margin-left: 45px;
}

.card.card-my-services .card-chat-avatar.out::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 49px;
  top: 15px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid var(--gray-400);
  transform: translate(-100%, 0);
}

.card.card-my-services .card-chat-avatar.in::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -2px;
  top: 15px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid var(--gray-400);
  transform: translate(-100%, 0);
}

.card.card-my-services .card-chat-avatar.out {
  position: absolute;
  left: -50px;
  top: 28px;
}

.card.card-my-services .card-chat-avatar.in {
  position: absolute;
  right: -50px;
  top: 28px;
}

.card.card-my-services .card-chat-avatar .chat-avatar-div .badge {
  width: 16px;
  height: 16px;
}

.card.card-my-services .card-chat-avatar .chat-avatar-div .wrap-account-avatar {
  width: 40px;
  height: 40px;
}

.card.card-my-services .card-header {
  padding: 1rem;
}

.card.card-my-services .card-header .header-data {
  width: calc(100% - 145px);
}

.card.card-my-services.edit .card-header {
  padding: 0.5rem 1rem;
  line-height: 120%;
  font-weight: 700;
}

.card.card-my-services.edit .card-body {
  padding: 1rem;
}

.card.card-my-services.edit .card-body hr {
  margin-left: -1rem;
  margin-right: -1rem;
}

.card.card-my-services.edit .card-footer {
  justify-content: end;
  padding: 1rem;
}

.card.card-my-services .card-header:first-child,
.card.card-my-services .card-status + .card-header {
  align-items: start;
}

.card.card-my-services .card-header:last-child {
  border-bottom: none;
}

.card.card-my-services .card-header .card-title {
  font-size: 12px;
  line-height: 14px;
  color: var(--gray-500);
  white-space: nowrap;
  font-weight: 400;
  margin: 0;
  margin-top: 8px;
}

.card.card-my-services .card-header .card-title em {
  font-style: normal;
}

.card.card-my-services .card-header .text-sync {
  font-size: 12px;
  line-height: 14px;
  color: var(--teal-500);
  white-space: nowrap;
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card.card-my-services .card-header .text-sync .bi {
  color: var(--teal-500);
}

.card.card-my-services .card-header .badge {
  border-radius: 22px;
}

.card.card-my-services .card-body {
  /* width: 80%; */
  /* margin: 20px auto; */
  margin: 0;
  padding: 1rem;
  padding-left: 4rem;
  color: var(--gray-600);
  font-size: 12px;
  line-height: 14px;
}

.card.card-my-services .card-body .read-more {
  color: var(--primary);
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  text-decoration: none;
}

.card.card-my-services .card-body .read-more:hover {
  color: var(--indigo-700);
}

.card.card-my-services .card-body p {
  font-size: 12px;
  color: var(--gray-600);
  margin-bottom: 12px;
}

.card.card-my-services .card-footer {
  padding-left: 4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card.card-my-services .card-footer .btn {
  font-size: 14px;
  line-height: 150%;
  gap: 8px;
}

.card.card-my-services .card-footer .bi {
  font-size: 16px;
}

.card.card-my-services.card-init .card-header:first-child {
  background-color: var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}

.card.card-my-services.card-init.card-end {
  margin-bottom: 0;
}

.card.card-my-services .card-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: var(--gray-600);
  margin-bottom: 0;
}

.card.card-my-services.card-init .card-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--gray-800);
  margin-top: 0;
}

.card.card-my-services.card-init .card-title.top6 {
  margin-top: 6px;
}

.card.card-my-services .tags-worker {
  background-color: var(--gray-200);
  color: var(--black);
  font-size: 14px;
}

.card.card-my-services .tags-worker .bi {
  font-size: 12px;
}

.card.card-my-services .tags-worker.email {
  background-color: var(--orange-100);
  border-color: var(--orange-200);
  color: var(--orange-700);
}

.card.card-my-services .tags-worker.email .bi {
  color: var(--orange-700);
}

.card.card-my-services .tags-worker.whats {
  background-color: var(--teal-100);
  border-color: var(--teal-300);
  color: var(--teal-700);
}

.card.card-my-services .tags-worker.whats .bi {
  color: var(--teal-700);
}

.card.card-my-services .tags-worker.linkedin {
  background-color: var(--blue-100);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

.card.card-my-services .tags-worker.linkedin .bi {
  color: var(--blue-600);
}

.card.card-my-services .tags-worker.telephone {
  background-color: var(--indigo-100);
  border-color: var(--indigo-200);
  color: var(--indigo-600);
}

.card.card-my-services .tags-worker.telephone .bi {
  color: var(--indigo-600);
}

.card.card-my-services .tags-worker.objective {
  background-color: var(--indigo-100);
  border-color: var(--indigo-200);
  color: var(--indigo-500);
}

.card.card-my-services .tags-worker.objective .bi {
  color: var(--indigo-700);
}

.card-my-services .card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--orange-100);
  color: var(--orange-700);
  padding: 8px 16px 8px 64px;
  font-size: 12px;
  line-height: 14px;
  border-bottom: 1px dashed var(--gray-400);
}

.wrap-icon-type-message {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-100);
  width: 40px;
  height: 40px;
  border-radius: 2px;
  font-size: 20px;
  flex-shrink: 0;
}

.card.card-my-services .card-header .wrap-icon-type-message.init {
  background-color: var(--gray-500);
}

.card.card-my-services .card-header .wrap-icon-type-message.init .bi {
  color: var(--orange-white);
}

.card.card-my-services .card-header .wrap-icon-type-message.end {
  background-color: var(--gray-500);
}

.card.card-my-services .card-header .wrap-icon-type-message.end .bi {
  color: var(--white);
}

.card.card-my-services .card-header .wrap-icon-type-message.mail {
  background-color: var(--orange-100);
}

.card.card-my-services .card-header .wrap-icon-type-message.mail .bi {
  color: var(--orange-600);
}

.card.card-my-services .card-header .wrap-icon-type-message.whats {
  background-color: var(--teal-100);
}
.card.card-my-services .card-header .wrap-icon-type-message.whats .bi {
  /* color: var(--success); */
  color: var(--teal-600);
}

.card.card-my-services .card-header .wrap-icon-type-message.linkedin {
  background-color: var(--blue-100);
}
.card.card-my-services .card-header .wrap-icon-type-message.linkedin .bi {
  color: var(--blue-600);
}

.card.card-my-services .card-header .wrap-icon-type-message.telephone {
  background-color: var(--indigo-100);
}
.card.card-my-services .card-header .wrap-icon-type-message.telephone .bi {
  color: var(--indigo-600);
}

.card.card-my-services .card-header .wrap-icon-type-message .bi {
  font-size: 20px;
}

.wrap-icon-type-voting {
  display: flex;
  align-items: start;
  justify-content: flex-end;
  width: 90px;
  height: auto;
  flex-shrink: 0;
  gap: 8px;
}

.wrap-icon-type-voting button {
  align-items: center;
  justify-content: center;
  border-radius: 3.2px;
  border-color: var(--gray-500);
  background-color: transparent;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
}

.wrap-icon-type-voting button .bi {
  color: var(--gray-600);
  font-size: 16px;
}

.wrap-icon-type-voting button.accept:hover,
.wrap-icon-type-voting button.accept.voted {
  background-color: var(--teal-300);
  border-color: var(--teal-300);
}

.wrap-icon-type-voting button.accept:hover .bi,
.wrap-icon-type-voting button.accept.voted .bi {
  color: var(--teal-600);
}

.wrap-icon-type-voting button.decline:hover,
.wrap-icon-type-voting button.decline.voted {
  background-color: var(--red-100);
  border-color: var(--red-100);
}

.wrap-icon-type-voting button.decline:hover .bi,
.wrap-icon-type-voting button.decline.voted .bi {
  color: var(--red-500);
}

span.subject-content {
  cursor: pointer;
}

.wrap-header-init {
  /* margin-left: 48px; ajustado por conta do flex-shrink */
  margin-left: 50px;
}

.wrap-header-init--row {
  display: grid;
  grid-template-columns: 80px 1fr;
  height: 24px;
  gap: 8px;
  align-items: center;
}

.w95x {
  grid-template-columns: 95px 1fr;
}

.wrap-header-init--row .label {
  font-size: 12px;
  color: var(--gray-900);
  font-weight: 400;
}

.wrap-header-init--row .value {
  font-size: 12px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-header-init--row .value a {
  color: var(--gray-700);
  text-decoration: none;
}

.wrap-header-init--row .value a:hover {
  text-decoration: underline;
}

.wrap-header-init--row .value .avatar {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.wrap-header-init--row .value .bi.list {
  color: var(--blue-500);
}

.wrap-header-init--row .value .bi.origin {
  color: var(--primary);
}

.wrap-header-init--row .value .bi.file {
  color: var(--teal-500);
}

.wrap-header-email {
  /* margin-left: 48px; ajustado por conta do flex-shrink */
  margin-left: 50px;
}

.wrap-header-email--row {
  display: grid;
  grid-template-columns: 80px 1fr;
  height: 24px;
  gap: 8px;
  align-items: center;
}

.wrap-header-email--row .label {
  font-size: 12px;
  color: var(--gray-900);
  font-weight: 400;
}

.wrap-header-email--row .value {
  font-size: 14px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-header-email--row .value .avatar {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.wrap-header-email--row .value .bi.color-blue {
  color: var(--blue-600);
}

.wrap-header-email--row .value .bi.color-green {
  color: var(--green-600);
}

.message-response {
  background-color: beige;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  border: 1px solid var(--gray-400);
}

.subject-row {
  font-weight: bold;
  color: black !important;
}

.message-actions a {
  border-radius: 15px;
  padding: 4px 12px;
}

.btn-action-flat {
  border-radius: 0 !important;
  padding: 6px 8px !important;
  border-color: var(--gray-500) !important;
}

.btn-action-flat-right {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  padding: 6px 12px !important;
}

.delete-action:hover {
  color: var(--white);
  background-color: var(--bs-red) !important;
}

#user_list {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

#user_list .wrapper-search {
  padding: 1rem 0;
}

.wrapper-search.search--internal .see-changes,
.wrapper-logger .see-changes,
.primary-link {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--indigo-600);
  text-decoration: none;
}

.wrapper-logger .section-info {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--gray-600);
}

/* Nav Approval */
#navApproval {
  background-color: var(--white);
  border-right: 1px solid var(--gray-300);
  padding: 32px 24px 32px 72px;
}

#navApproval ul li {
  border-bottom: 1px solid var(--gray-300);
  transition: all 0.3s;
}

#navApproval ul li:hover {
  background-color: var(--gray-100);
  transition: all 0.3s;
}

#navApproval ul li a {
  padding: 8px 0;
  text-decoration: none;
}

#navApproval .iconList {
  width: 40px;
  height: 40px;
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

#navApproval .iconList .bi {
  font-size: 20px;
  color: var(--gray-600);
}

#navApproval ul li .infoList {
  width: 100%;
  align-items: center;
}

#navApproval ul li .infoLead,
#navApproval ul li .infoWorker {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

#navApproval ul li .infoLead img,
#navApproval ul li .infoWorker img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

#navApproval ul li .infoLead span {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  color: var(--gray-700);
}

#navApproval ul li .infoWorker span {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: var(--gray-600);
}

#navApproval ul li .itemStatus {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#navApproval ul li .itemStatus .bi {
  font-size: 16px;
}

/* Top Navbar */
#topNavbar {
  padding: 16px 72px;
  background-color: var(--white);
  border-bottom: 1px dashed var(--gray-300);
}

#topNavbar .interactInfo span {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--gray-600);
}

/* Messages List */
#messagesList {
  padding: 32px 24px 32px 72px;
}

/* New wrap status */
.new-wrapper-status-workers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px 4.5rem;
}

.wrap-table-workers .new-wrapper-status-workers,
.wrap-table-workers .wrapper-card-contract {
  height: 147px;
}

.new-wrap-status-workers {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  height: 48px;
  width: 230px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background-color: var(--white);
}

.new-wrap-status-workers.active {
  height: 60px;
  width: 240px;

  .label {
    font-weight: bold;
    font-size: 14px;
  }
}

.new-wrap-status-workers--item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 4px;
}

.new-wrap-status-workers--item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-right: 1px dashed var(--white);
  flex-shrink: 0;
}

.new-wrap-status-workers--item .data {
  display: flex;
  padding: 6px 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.new-wrap-status-workers--item .label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  margin: 0;
  color: var(--gray-800);
}

.new-wrap-status-workers--item .wrap-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background-color: var(--white);
  border-radius: 100px;
  min-width: 45px;
  height: 17.5px;
}

.new-wrap-status-workers--item .wrap-numbers .number {
  font-size: 12px;
  line-height: 10px;
  font-weight: 700;
  color: var(--gray-600);
}

/* waiting */
.new-wrap-status-workers.waiting .new-wrap-status-workers--item {
  background-color: var(--gray-200);
}

.new-wrap-status-workers.waiting .new-wrap-status-workers--item .icon {
  color: var(--gray-600);
}

.new-wrap-status-workers.waiting .wrap-numbers {
  color: var(--gray-700);
}

/* opened */
.new-wrap-status-workers.opened .new-wrap-status-workers--item {
  background-color: var(--indigo-100);
}

.new-wrap-status-workers.opened .new-wrap-status-workers--item .icon {
  color: var(--indigo-400);
}

.new-wrap-status-workers.opened .wrap-numbers {
  color: var(--indigo-700);
}

/* hot */
.new-wrap-status-workers.hot .new-wrap-status-workers--item {
  background-color: var(--orange-100);
}

.new-wrap-status-workers.hot .new-wrap-status-workers--item .icon {
  color: var(--red-400);
}

.new-wrap-status-workers.hot .wrap-numbers {
  color: var(--indigo-700);
}

/* converted */
.new-wrap-status-workers.converted .new-wrap-status-workers--item {
  background-color: var(--teal-100);
}

.new-wrap-status-workers.converted .new-wrap-status-workers--item .icon {
  color: var(--teal-600);
}

/* lost */
.new-wrap-status-workers.lost .new-wrap-status-workers--item {
  background-color: var(--red-100);
}
.new-wrap-status-workers.lost .new-wrap-status-workers--item .icon {
  color: var(--red-600);
}

.header-capacity {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  color: var(--indigo-700);
  width: 350px;
  height: 30px;
  font-size: 14px;
  line-height: 150%;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: var(--indigo-100);
  border: 1px solid var(--indigo-200);
}

.header-capacity.header-services {
  height: 37.6px;
}

.header-capacity .progress {
  width: 165px;
  height: 8px;
}

.header-capacity .progress .progress-bar {
  background-color: var(--indigo-400);
}

.wrap-tabs.wrap-tabs-custom {
  flex-direction: row;
  justify-content: space-between;
}

.wrap-tabs.wrap-tabs-custom .row {
  width: 100%;
  align-items: center;
  justify-content: end;
}

.wrap-tabs.wrap-tabs-custom .tab-links .tab-link--item {
  flex-shrink: 0;
}

/* Novo Atendimentos */
#newAttSidebar .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 1.5rem 1rem 78px;
}

#newAttSidebar .header2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 2px solid var(--gray-700);
}

#newAttSidebar .header .title,
#newAttSidebar .header2 .title {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

#newAttSidebar .header .title .bi {
  font-size: 24px;
  line-height: 24px;
}

#newAttSidebar .header .title h6,
#newAttSidebar .header2 .title h6 {
  margin-bottom: 4px;
}

#newAttSidebar .header .title .badge {
  color: var(--indigo-400);
  background-color: var(--indigo-100);
}

#newAttSidebar .header2 .title input[type="checkbox"] {
  margin-top: 0;
  margin-bottom: .15rem;
}

#newAttSidebar .header2 .sortable-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

#newAttSidebar .header2 .sortable-actions .sort-asc,
#newAttSidebar .header2 .sortable-actions .sort-desc {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#newAttSidebar .header2 .sortable-actions .sort-asc:hover,
#newAttSidebar .header2 .sortable-actions .sort-desc:hover {
  background-color: transparent;
}

#newAttSidebar .header2 .sortable-actions .sort-asc:hover .bi,
#newAttSidebar .header2 .sortable-actions .sort-desc:hover .bi {
  color: var(--gray-600);
}

#newAttSidebar .header2 .sortable-actions .bi {
  height: 5.14px;
  font-size: 12px;
  color: var(--gray-500);
}

#newAttSidebar .filtered-by {
  background-color: var(--info);
  padding: 0.5rem 1.5rem 0.5rem 72px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#newAttSidebar .filtered-by > span {
  color: var(--gray-800);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

#newAttendanceHeader .wrap-header-page-internal--info--tags {
  margin-top: 1.95rem;
}

#newAttSidebar .filtered-by .tags-worker,
#newAttSidebar .statusInfo .tags-worker,
#newAttendanceHeader .tags-worker,
#attendancesLeft .tags-worker {
  font-size: 14px;
}

#newAttSidebar .filtered-by .tags-worker .btn-close,
#newAttSidebar .statusInfo .tags-worker .btn-close,
#newAttendanceHeader .tags-worker .btn-close {
  font-size: 8px;
  color: var(--gray-600);
}

#newAttSidebar .filtered-by .tags-worker.new,
#newAttSidebar .statusInfo .tags-worker.new,
.topAttendancesLead .tags-worker.new {
  background-color: var(--blue-100);
  border-color: var(--blue-300);
  color: var(--blue-800);
}

#newAttSidebar .filtered-by .tags-worker.inactive,
#newAttSidebar .statusInfo .tags-worker.inactive,
#newAttendanceHeader .tags-worker.inactive,
.topAttendancesLead .tags-worker.inactive {
  background-color: var(--red-100);
  border-color: var(--red-300);
  color: var(--red-800);
}

#newAttSidebar .filtered-by .tags-worker.hot,
#newAttSidebar .filtered-by .tags-worker.copilot,
#newAttSidebar .statusInfo .tags-worker.hot,
#newAttSidebar .statusInfo .tags-worker.copilot,
#newAttendanceHeader .tags-worker.hot,
#newAttendanceHeader .tags-worker.copilot,
.topAttendancesLead .tags-worker.hot,
.topAttendancesLead .tags-worker.copilot {
  background-color: var(--orange-100);
  border-color: var(--orange-400);
  color: var(--pink-800);
}

#newAttendanceHeader .tags-worker.whatsapp,
.topAttendancesLead .tags-worker.whatsapp {
  background-color: var(--teal-100);
  border-color: var(--teal-400);
  color: var(--teal-800);
}

#newAttSidebar .filtered-by .tags-worker.hot .bi,
#newAttSidebar .filtered-by .tags-worker.copilot .bi,
#newAttSidebar .statusInfo .tags-worker.hot .bi,
#newAttSidebar .statusInfo .tags-worker.copilot .bi,
#newAttendanceHeader .tags-worker.hot .bi,
#newAttendanceHeader .tags-worker.copilot .bi,
.topAttendancesLead .tags-worker.hot .bi,
.topAttendancesLead .tags-worker.copilot .bi {
  color: var(--red-600);
}

#newAttSidebar .statusInfo .tags-worker.linkedin .bi,
#newAttendanceHeader .tags-worker.linkedin .bi,
.topAttendancesStatus .tags-worker.linkedin .bi,
.topAttendancesLead .tags-worker.linkedin .bi {
  color: var(--blue-600);
}

#newAttSidebar .statusInfo .tags-worker.whatsapp .bi,
#newAttendanceHeader .tags-worker.whatsapp .bi,
.topAttendancesStatus .tags-worker.whatsapp .bi {
  color: var(--teal-600);
}

.topAttendancesLead .tags-worker.whatsapp .bi {
  color: var(--teal-800);
}

#select-attendances {
  width: 110px;
}

#navAttendances {
  background-color: var(--white);
  border-right: 1px solid var(--gray-300);
  padding: 32px 24px 32px 72px;
}

#navAttendances table.table-action-row tbody tr:hover {
  background-color: var(--gray-100);
}

#navAttendances table.table-action-row tbody tr td:not(input[type="checkbox"]) {
  cursor: pointer;
}

#navAttendances table.table-action-row .td-worker {
  width: auto;
}

#navAttendances table.table-action-row .td-worker.before-expand {
  background-color: var(--gray-100);
}

#navAttendances table.table-action-row .td-worker.expanded {
  width: 28%;
}

#navAttendances table.table-action-row .td-worker > div {
  display: flex;
  gap: 0.5rem;
}

#navAttendances table.table-action-row .td-worker .infoList {
  display: flex;
  gap: 2px;
}

#navAttendances table.table-action-row .td-worker .itemDate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  line-height: 1.5rem;
  color: var(--gray-600);
}

#navAttendances ul.attendancesList li {
  border-bottom: 1px solid var(--gray-300);
  transition: all 0.3s;
}

#navAttendances ul.attendancesList li:hover {
  background-color: var(--gray-100);
  transition: all 0.3s;
}

#navAttendances ul.attendancesList li a {
  padding: 0.5rem;
  text-decoration: none;
  align-items: flex-start;
}

#navAttendances .imgWorker {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

#navAttendances .imgWorker .wrap-account-avatar {
  flex-shrink: 0;
}

#navAttendances ul.attendancesList li .infoList {
  width: 215px;
  align-items: flex-start;
  justify-content: center;
}

#navAttendances ul.attendancesList li .infoLead,
#navAttendances ul.attendancesList li .infoWorker {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

#navAttendances ul.attendancesList li .infoLead {
  margin-bottom: 8px;
}

#navAttendances ul.attendancesList li .infoLead span {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-700);
}

#navAttendances ul.attendancesList li .statusInfo span {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-900);
}

#navAttendances ul.attendancesList li .itemDate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  line-height: 1.5rem;
  color: var(--gray-600);
}

.offcanvas.offcanvas-end.wide-offcanvas {
  width: 80%;
  max-width: none;
  width: 66.66666667%;
}

.topAttendancesLead,
.topAttendancesStatus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topAttendancesLead {
  padding: 9px 4.5rem 9px 24px;
  background-color: var(--white);
}

.topAttendancesLead .wrap-header-page-internal--info {
  padding: 0;
  grid-template-columns: 32px auto;
  gap: 8px;
  width: 100%;
}

.topAttendancesLead .wrap-header-page-internal--info--avatar {
  margin-top: 6px;
}

.topAttendancesLead .wrap-header-page-internal--info--avatar img {
  width: 32px;
  height: 32px;
}

.topAttendancesLead .wrap-header-page-internal--info--data .name {
  font-size: 16px;
  line-height: 150%;
  font-weight: 700;
  color: var(--gray-700);
  align-items: flex-start;
}

.topAttendancesLead .wrap-header-page-internal--info--data .name .details {
  margin-left: 8px;
  font-size: 12px;
  line-height: 14px;
  color: var(--primary);
  text-decoration: none;
  transition: all .35s ease-in-out;
}

.topAttendancesLead .wrap-header-page-internal--info--data .name .details:hover {
  color: var(--indigo-700);
}

.topAttendancesLead .ai-select {
  width: auto;
  color: var(--white);
  background-color: var(--indigo-600);
}

.topAttendancesLead .ai-select:focus {
  border-color: var(--indigo-700);
  box-shadow: 0 0 0 .25rem rgba(82,13,194,.25);
}

.topAttendancesStatus {
  padding: 6px 4.5rem 6px 24px;
  background-color: var(--gray-100);
  border-top: 1px dashed var(--gray-300);
}

.topAttendancesStatus .infoData {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--gray-500);
}

.topAttendancesStatus .wrap-progress-kanban-card.progress-stacked {
  width: 106px;
  height: 16px;
  background-color: transparent;
  padding: 0;
  position: relative;
  border-radius: 0;
}

.topAttendancesStatus .wrap-progress-kanban-card.progress-stacked .progress {
  height: 100%;
}

.topAttendancesStatus .wrap-progress-kanban-card.progress-stacked .progress .progress-bar {
  border-radius: 100px;
}

.topAttendancesStatus .count-progress {
  font-size: 14px;
  color: var(--gray-600);
}

#attendancesLeft .wrap-tabs {
  padding: 0 4.5rem 0 24px;
  background-color: var(--white);
  border-top: 1px solid var(--gray-300);
}

#attendancesLeft .wrap-tabs .tab-links {
  margin-top: 0.5rem;
}

#attendancesLeft .wrap-tabs .tab-links .tab-link--item i {
  display: block;
}

#attendancesLeft .wrap-tabs .tab-links .tab-link--item .bi-whatsapp {
  color: var(--teal-600);
}

#attendancesLeft .briefing {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  color: var(--indigo-700);
  background-color: var(--indigo-100);
  padding: 1rem 4.5rem 1rem 24px;
}

#attendancesLeft .briefing .title {
  font-size: 14px;
}

#attendancesLeft .briefing .text {
  font-size: 14px;
  margin-bottom: 0;
}

#newMessagesList {
  padding: 24px 126px 24px 72px;
}

#newMessagesList .card.card-chat {
  padding: 0.5rem;
  background-color: var(--gray-200);
}

#newMessagesList .card.card-chat .card.card-my-services {
  margin-bottom: 0.5rem;
}

#newMessagesList .card.card-chat .card.card-my-services:last-child {
  margin-bottom: 0;
}

#newMessagesList .card.card-my-services.card-ping {
  margin-right: 4rem;
}

#newMessagesList .card.card-my-services.card-pong {
  margin-left: 4rem;
  background-color: var(--blue-100);
  border-color: var(--blue-200);
}

#newMessagesList .card.card-my-services.card-pong .card-header {
  background-color: var(--blue-100);
  border-bottom: 1px dashed var(--blue-200);
}

#newMessagesList .card.card-my-services.card-pong .card-header .card-title .highlight {
  color: var(--blue-600);
}

#newMessagesList .card.card-my-services .card-header {
  padding: 0.5rem 1rem;
}

#newMessagesList .card.card-my-services .wrap-header-page-internal--info--tags {
  display: inline-flex;
  flex-flow: row;
}

#newMessagesList .card.card-my-services .wrap-header-page-internal--info--tags .tags-worker {
  width: max-content;
}

#newMessagesList .card.card-my-services .card-title {
  text-align: right;
}

#newMessagesList .card.card-my-services .card-body {
  padding-left: 1rem;
}

#newMessagesList .card.card-my-services .card-chat-avatar.out {
  left: -55px;
}

#newMessagesList .card.card-my-services .card-chat-avatar.out::after {
  left: 55px;
}

#newMessagesList .card.card-my-services .card-chat-avatar.in {
  right: -55px;
}

#newMessagesList .card.card-my-services .card-chat-avatar.in::after {
  left: -8px;
}

#newMessagesList .card.card-my-services .card-chat-avatar.in .chat-avatar-div {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue-400);
}

#newMessagesList .card.card-my-services .card-chat-avatar.in .chat-avatar-div .bi {
  color: var(--white);
}

#newMessagesList .messages-not-sent,
.end-of-cadence {
  position: relative;
  margin-left: -72px;
  margin-right: -126px;
}

#newMessagesList .messages-not-sent::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 4px,
    var(--indigo-400) 4px,
    var(--indigo-400) 7px
  );
  z-index: -1;
}

#newMessagesList .messages-not-sent .title-segment {
  font-size: 14px;
  font-weight: 400;
  color: var(--indigo-500);
  margin-left: 37px;
  margin-top: 1rem;
  margin-bottom: 32px;
  background-color: var(--gray-100);
  width: fit-content;
  padding-left: 1rem;
  padding-right: 1rem;
}

#newMessagesList .card-not-sent .card-header,
#newMessagesList .card-not-sent .card-body,
#newMessagesList .card-not-sent .card-footer {
  background-color: var(--gray-300);
}

#newMessagesList .card-not-sent .card-header {
  border-bottom: 1px dashed var(--gray-400);
}

#newMessagesList .card-not-sent .card-header .card-desc {
  margin-top: 0.25rem;
}

#newMessagesList .card-not-sent .card-footer {
  border-top: 1px dashed var(--gray-400);
  padding: 1rem;
}

#newMessagesList .card-not-sent .card-footer .btn-outline-secondary {
  background-color: var(--white);
}

#newMessagesList .card-my-services .card-status {
  padding: 8px 16px;
}

.end-of-cadence::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 4px,
    var(--gray-300) 4px,
    var(--gray-300) 7px
  );
  z-index: -1;
}

.end-of-cadence .title-segment {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
  margin-left: 37px;
  margin-top: 1rem;
  margin-bottom: 32px;
  background-color: var(--gray-100);
  width: fit-content;
  padding-left: 1rem;
  padding-right: 1rem;
}

#attendancesLeft .card.card-new-message {
  border-radius: 0;
  margin: 0;
  border-top-style: dashed !important;
}

.no-decoration {
  text-decoration: none;
}
.wrap-filter {
  display: flex;
  gap: 16px;
  align-items: center;
}

.wrap-filter .title {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-800);
  margin: 0;
}

.wrap-filter-tags {
  display: flex;
  gap: 8px;
}

.wrap-filter-tags .tag .filtered {
  color: var(--gray-600);
}

/* message alert */
.wrap-message-alert {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;

  background: var(--blue-100);
  padding: 16px;
  border-radius: 8px;
}

.wrap-content-message-alert {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-message-alert {
  width: 40px;
  height: 40px;
  background: var(--white);
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-message-alert .bi {
  font-size: 20px;
  color: var(--blue-500);
}

.message-alert {
  display: flex;
  flex-direction: column;
}

.message-alert .title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}

.message-alert .description {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--gray-600);
  margin: 0;
}


/* Kanban */
.wrap-kanban {
  overflow-x: auto;
  padding: 8px;

  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) var(--gray-100);

  white-space: nowrap;

  background: var(--gray-200);
  border-radius: 8px;
}

.mt-wrap-kanban {
  margin-top: 53px !important;
}

.kanban-group {
  background: var(--indigo-100);
}

.kanban-won {
  background: var(--teal-100);
}

.kanban-lost {
  background: var(--red-100);
}

.wrap-kanban-header {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
}

.kanban-group > .wrap-kanban-header {
  margin-bottom: 0;
  display: grid;
}

.wrap-kanban-header .title {
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.kanban-group > .wrap-kanban-header .title {
  margin-top: 8px;
  line-height: 4px;
}

.wrap-kanban-header .badge {
  font-size: 12px;
  /* line-height: 12px; Assim estava descentralizado na vertical */
  line-height: 11px;
  font-weight: 700;
  color: var(--gray-800);

  background: var(--white);
  border-radius: 12px;
}

.wrap-kanban-header .badge.doing {
  color: var(--white);
  background: var(--primary);
}

.wrap-kanban-header .badge.done {
  color: var(--white);
  background: var(--success);
}

.wrap-kanban-header .badge.lost {
  color: var(--white);
  background: var(--red-500);
}

.wrap-kanban-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 450px;
  height: calc(100vh - 275px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  padding-left: 0.25rem;
  padding-top: 4px;
}

.empty-kanban {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.empty-kanban .bi {
  font-size: 40px;
  color: var(--gray-400);
}

.empty-kanban .title {
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  color: var(--gray-600);
  margin: 0;
}

.wrap-kanban-card {
  display: flex;
  flex-direction: column;
  width: calc(100% - 0.25rem);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: grab;
  transition: all 0.3s;
}

.wrap-kanban-card:hover {
  transition: all 0.3s;
  box-shadow: 0px 0px 0px 4px #8540F552;
  border: 1px solid var(--indigo-300);
}

.wrap-kanban-card:active {
  transition: all 0.3s;
  box-shadow: none;
  cursor: grabbing;
}

.wrap-kanban-card-top .tags-worker span {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  border-radius: 0.375rem;
  gap: .25rem;
  width: -moz-fit-content;
  width: fit-content;
}

/* hot */
.wrap-kanban-card.hot {
  border: 1px solid var(--orange-400);
}

.wrap-kanban-card.hot:hover {
  box-shadow: 0px 0px 0px 4px var(--orange-200);
  border: 1px solid var(--orange-400);
}

.wrap-kanban-card.hot .wrap-kanban-card-top .name {
  color: var(--orange-700);
}

.wrap-kanban-card.hot .wrap-kanban-card-top .tags-worker {
  color: var(--pink-800);
}

.wrap-kanban-card.hot .wrap-kanban-card-top .tags-worker span {
  background-color: var(--orange-100);
  border-color: var(--orange-400);
  color: var(--pink-800);
}

.wrap-kanban-card.hot .wrap-kanban-card-top .tags-worker .bi {
  color: var(--red-600);
}

/* Kanban Won */
.kanban-won .wrap-kanban-card {
  border: 1px solid var(--teal-400);
}

.kanban-won .wrap-kanban-card:hover {
  box-shadow: 0px 0px 0px 4px var(--teal-200);
  border: 1px solid var(--teal-400);
}

/* Kanban Lost */
.kanban-lost .wrap-kanban-card {
  border: 1px solid var(--red-400);
}

.kanban-lost .wrap-kanban-card:hover {
  box-shadow: 0px 0px 0px 4px var(--red-200);
  border: 1px solid var(--red-400);
}

.wrap-header-page-internal--info--tags .tags-worker-kanban {
  font-size: 11px;
  line-height: 13px;
  font-weight: 500;
  color: var(--gray-900);

  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  padding: 4px 8px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-header-page-internal--info--tags .tags-worker-kanban.email {
  color: var(--gray-700);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
}

.wrap-header-page-internal--info--tags .tags-worker-kanban.whatsapp {
  color: var(--teal-700);
  background-color: var(--teal-100);
  border: 1px solid var(--teal-200);
}

.wrap-header-page-internal--info--tags .tags-worker-kanban.linkedin {
  color: var(--blue-700);
  background-color: var(--blue-100);
  border: 1px solid var(--blue-200);
}

.ghost-card {
  background: var(--gray-300);
  border: 1px dashed var(--gray-400);
  border-radius: 4px;
}

.wrap-kanban-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
}

.wrap-kanban-card-top .card-name {
  min-width: 65%;
  width: 100%;
  display: inline-flex;
  justify-content: left;
  gap: 4px;
}

.wrap-kanban-card-top .attendance-checkbox {
  margin-top: 0;
}

.wrap-kanban-card-top .name {
  color: var(--gray-900);
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  padding-right: 4px;
}

.wrap-kanban-card-top .card-name .bi {
  /* color: var(--gray-600); */
  color: var(--orange-400);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  padding-right: 4px;
}

.wrap-kanban-card-top .card-group {
  margin-left: auto;
  width: auto;
}

.wrap-kanban-card-top .card-info {
  width: auto;
  color: var(--gray-600);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  text-align: right;
}

.wrap-kanban-card-top .card-info.whatsapp {
  color: #ff6900;
}

.wrap-kanban-card-top .card-info.hot {
  color: #ff6900;
  .hot-text {
    border-radius: 0.5rem;
    padding: 0.02rem 0.30rem 0.1rem 0.3rem;
    background-color: #ffedd4;
  }
}

.wrap-kanban-card-top .card-info.message-failed, .wrap-kanban-card-top .card-name .bi.message-failed {
  color: #e70101;
}

.wrap-kanban-card.hot .wrap-kanban-card-top .card-info {
  width: 35%;
  display: flex;
  justify-content: end;
}

.wrap-kanban-card-header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  /* flex-wrap: wrap; previne quebrar o avatar */
}

.wrap-kanban-card-avatar {
  width: 32px;
  height: 32px;
  background: var(--gray-200);
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.wrap-kanban-card-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.wrap-kanban-card-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-wrap: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrap-kanban-card-info .name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  color: var(--gray-700);
  margin: 0;
  margin-bottom: 0.25rem;
}

.wrap-kanban-card-info .company {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--indigo-600);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrap-kanban-card-info .company i {
  margin-right: 2px;
}

.wrap-kanban-card-info .line-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  color: var(--blue-600);
  /* font-weight: 500; */
  font-weight: 600;
  font-size: 11px;
}

.wrap-kanban-card-info .line-status.worker,
.wrap-kanban-card-info .line-status.inactivity {
  color: var(--primary);
}

.wrap-kanban-card-info .line-status.converted {
  color: var(--teal-700);
}

.wrap-kanban-card-info .line-status.lost {
  color: var(--red-700);
}

.wrap-kanban-card-info .info--tags {
  display: flex;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.wrap-kanban-card-info .info--tags .tag {
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
  padding: 1px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-kanban-card-info .info--tags .tags-paused {
  border: 1px solid var(--red-300);
  color: var(--red-700);
  background-color: var(--red-100);
}

.wrap-kanban-card-info .info--tags .tags-waiting {
  border: 1px solid var(--orange-300);
  color: var(--orange-800);
  background-color: var(--orange-100);
}

.wrap-kanban-card-info .info--tags .tags-running {
  border: 1px solid var(--teal-300);
  color: var(--teal-700);
  background-color: var(--teal-100);
}

.wrap-kanban-card-content {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  text-wrap: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px dashed var(--gray-200);
}

.wrap-progress-kanban-card {
  display: block;
  width: 100%;
}

.wrap-progress-kanban-card.progress-stacked {
  display: flex;
  width: 99px;
  margin: auto;
  border-radius: 2px;
  gap: 1px;
  padding: 2px;
  background-color: var(--gray-200);
}

.wrap-progress-kanban-card .progress {
  color: var(--indigo-500);
  border-radius: 2px;
}

.wrap-progress-kanban-card.progress-stacked .progress {
  height: 13px;
}

.wrap-progress-kanban-card.progress-stacked .progress:first-child .progress-bar {
  border-radius: 2px 0 0 2px;
}

.wrap-progress-kanban-card.progress-stacked .progress:last-child .progress-bar {
  border-radius: 0 2px 2px 0;
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.whatsapp, .wrap-progress-kanban-card.progress-stacked .progress-bar.answered {
  background-color: var(--teal-400);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.linkedin, .wrap-progress-kanban-card.progress-stacked .progress-bar.read {
  background-color: var(--blue-400);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.email, .wrap-progress-kanban-card.progress-stacked .progress-bar.received {
  background-color: var(--indigo-300);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.noresponse, .wrap-progress-kanban-card.progress-stacked .progress-bar.not-received {
  background-color: var(--red-400);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.waiting-approve {
  background-color: var(--bs-yellow);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.unidentified {
  background-color: var(--dark);
}

.wrap-progress-kanban-card.progress-stacked .progress-bar.notsent {
  background-color: var(--gray-500);
}

.wrap-progress-kanban-card .progress .progress-bar {
  background-color: var(--indigo-500);
}

.count-progress {
  font-size: 12px;
  color: var(--gray-700);
}

.wrap-convertion-kanban-card {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-convertion {
  width: 16px;
  height: 16px;
  background: var(--gray-200);
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-convertion img {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 4px;
}

.wrap-convertion-kanban-card .name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--indigo-600);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-conversion {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-600);
}

.date-conversion .bi {
  font-size: 16px;
  color: var(--gray-500);
}

.date-conversion .warning {
  color: var(--warning) !important;
}

.wrap-kanban-card-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 1rem ;
}

.wrap-kanban-card-footer.lost {
  color: var(--red-500);
}

.wrap-kanban-card-footer.lost .message {
  color: var(--red-500);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.wrap-kanban-card-footer.lost .date {
  color: var(--red-500);
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.wrap-score-kanban-card {
  display: flex;
  gap: 4px;
  align-items: center;
}

.wrap-score-kanban-card .bi {
  font-size: 16px;
  color: var(--orange-400);
}

.wrap-score-kanban-card .score {
  font-size: 12px;
  color: var(--gray-500);
}

.wrap-score-kanban-card .score.bi-envelope.working {
  color: var(--indigo-400);
}

.wrap-score-kanban-card .score.bi-linkedin.working {
  color: var(--blue-500);
}

.wrap-score-kanban-card .score.bi-whatsapp.working {
  color: var(--teal-500);
}

.wrap-message-kanban-card {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
  flex-flow: wrap;
  text-wrap: wrap;
  padding: 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 13px;
}

.wrap-message-kanban-card p {
  font-size: 11px;
  line-height: 13px;
}

.wrap-message-kanban-card.converted {
  color: var(--teal-700);
  background-color: var(--teal-100);
  border: 1px solid var(--teal-200);
}

.wrap-message-kanban-card.opened {
  color: var(--gray-700);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
}

.wrap-message-kanban-card.lost {
  color: var(--red-700);
  background-color: var(--red-100);
  border: 1px solid var(--red-200);
}

.wrap-kanban-card-footer .date {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gray-600);
}

.wrap-kanban-card-footer .progress-card {
  width: 100%;
  font-size: 11px;
  color: var(--gray-700);
  height: 5px;
}

.wrap-kanban-card-footer .progress-card .progress-bar {
  background-color: var(--primary);
}

.wrap-kanban-card.hot .wrap-kanban-card-footer .progress-card .progress-bar {
  background-color: var(--orange-500);
}

.progress-worker-header {
  width: calc(50% - 6px);
  font-size: 11px;
  color: var(--gray-700);
  background-color: var(--indigo-200);
  height: 5px;
  border-radius: 6px;
}

.progress-worker-header .progress-bar {
  border-radius: 6px;
  height: 100%;
  max-width: 100%;
  background-color: var(--primary);
}

.wrap-kanban-card-footer .count-progress {
  font-size: 11px;
  /* color: var(--primary); */
  color: var(--blue-600);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 1px 0.5rem;
  line-height: 14px;
}

.wrap-kanban-card.hot .wrap-kanban-card-footer .count-progress {
  color: var(--orange-700);
  border-color: transparent;
}

.wrap-kanban-card-footer .count-progress.bordered {
  /* border: 1px solid var(--primary); */
  border: 1px solid var(--blue-600);
}

.wrap-kanban-card.hot .wrap-kanban-card-footer .count-progress.bordered {
  border-color: var(--orange-300);
}

/* List */
.group-progress-table-cell {
  display: flex;
  align-items: center;
}

.wrap-progress-table-cell {
  display: block;
  width: calc(100% - 73px);
  margin-right: 8px;
}

.wrap-progress-table-cell .progress {
  background-color: var(--gray-200);
  border-radius: 2px;
  height: 28px;
}

.wrap-progress-table-cell .progress-bar {
  background-color: var(--indigo-500);
}

.count-table-cell-progress {
  font-size: 16px;
  color: var(--gray-500);
}

.count-table-cell-progress .value-now {
  color: var(--gray-700);
}

.project-workers-attendance-table tbody tr:hover {
  background-color: var(--gray-100);
}

.project-workers-attendance-table tbody tr td:not(input[type="checkbox"]) {
  cursor: pointer;
}

/* Kanban Loader Component */
#kanban-loader-container {
  transition: opacity 0.3s ease-in-out;
  margin-bottom: 1rem;
  padding: 0rem 4.5rem;
  opacity: 1;
}

#kanban-loader-container.kanban-loader-hidden {
  display: none;
}

#kanban-loader-container[style*="opacity: 0"] {
  opacity: 0;
}

#kanban-loader {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  border-radius: 0.375rem;
  position: relative;
  box-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.085);
  transition: all 0.3s ease-in-out;
}

#kanban-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: rgba(255, 255, 255, 0.6);
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

#kanban-loader-overlay.kanban-loader-overlay-hidden {
  display: none;
}

#kanban-loader-overlay.kanban-loader-overlay-visible {
  display: block;
  opacity: 1;
  pointer-events: all;
}

#kanban-loader-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid #e9ecef;
  border-top: 2px solid #7c3aed;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

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

#kanban-loader::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid transparent;
  z-index: 1;
}

#kanban-loader::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 32px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #f3e8ff;
  z-index: 2;
}

#kanban-loader-close-btn {
  border: none;
  background: transparent;
  color: #6b7280;
}

#kanban-loader-close-btn.hidden {
  display: none !important;
}

#kanban-loader-close-btn:hover {
  background-color: rgba(147, 51, 234, 0.1) !important;
  color: #374151;
}

#kanban-loader button.btn-sm {
  padding: 3px 8px;
  transition: all 0.2s ease-in-out;
}

#kanban-loader button:not(.bt-excluir) span,
#kanban-loader button:hover span,
#kanban-loader button:hover i {
  color: var(--gray-800);
}

#kanban-loader button span {
  font-size: 12.5px;
  font-weight: 500;
}

#kanban-loader button .bi-chevron-down {
  font-size: 11px;
}

#kanban-loader button:hover {
  background-color: rgba(147, 51, 234, 0.1) !important;
}

/* Kanban Select Bar */
#kanban-select-bar {
  display: none;
  border-bottom: 1px solid var(--indigo-200);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

#kanban-select-bar button.btn-sm {
  padding: 3px 8px;
}

#kanban-select-bar button:not(.bt-excluir) span,
#kanban-select-bar button:hover span,
#kanban-select-bar button:hover i {
  color: var(--gray-800);
}

#kanban-select-bar button span {
  font-size: 12.5px;
  font-weight: 500;
}

#kanban-select-bar #clear-selection-btn span {
  font-weight: 700;
}

#kanban-select-bar button .bi-chevron-down {
  font-size: 11px;
}

#kanban-select-bar .dropdown-menu .dropdown-header {
  font-size: 11.5px;
}
#kanban-select-bar .dropdown-menu .dropdown-item {
  font-size: 12.5px;
}

/* Media queries */
@media (min-width: 768px) and (max-width: 819px) {
  .mt-wrap-kanban {
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 820px) and (max-width: 1024px) {
  .mt-wrap-kanban {
    margin-bottom: 2rem;
  }
}

.terms h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  color: var(--primary);

  margin-bottom: 28px;
}

.terms h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--primary);

  margin-top: 20px;
}

.terms p,
.terms li {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: #212529;
}

.terms p a {
  color: var(--primary);
  text-decoration: none;
}
.wrapper-badge-container {
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  border-radius: 8px;
}

.wrapper-badge-container.new-worker {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.worker-nav {
  padding-top: 20px !important;
}

.wrapper-badge-container.new-worker .badge-container {
  width: 100%;
  /* width: 218px; */
  max-width: 100%;
}

.worker-nav a {
  text-decoration: none;
}

.worker-nav > label {
  font-size: 12px;
}

.worker-nav ul li {
  border-color: var(--gray-300);
  border-top-style: solid;
  border-bottom-style: solid;
}

.worker-nav ul li:not(:first-child):not(:last-child) {
  border-top-style: dashed;
  border-bottom-style: dashed;
}

.worker-nav ul li i {
  color: var(--gray-500);
}

.worker-nav ul li span {
  color: var(--gray-800);
}

.worker-nav ul li.active {
  background-color: var(--white);
  border-color: var(--gray-300);
}

.worker-nav ul li.active div i {
  color: var(--primary);
}

.worker-nav ul li.active span {
  font-weight: 700;
}

/* Projects Training */
#projectForm .card .card-body {
  padding: 1.5rem;
}

#projectForm .wrap-table-workers--info--tags .tags-worker {
  color: var(--indigo-500);
  background-color: var(--gray-200);
  border: 1px solid var(--gray-400);
}

#projectForm .wrap-table-workers--info--tags .tags-worker .btn-close {
  color: var(--gray-600);
  font-size: 10px;
  padding: 0;
  margin-top: 2px;
}

.worker-whoami-avatar {
  width: 156px;
  /* height: 208px; */ /* original layout */
  height: 215px; /* same fields height */
  object-fit: cover;
  border-radius: 4px;
}

.worker-whoami-actions {
  justify-content: start;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.wpp-section .card-header .bi {
  color: var(--success);
}

#projectForm .card-body hr.dashed {
  margin: 0 -1.5rem;
}

.wpp-section .form-message {
  min-height: 96px;
  border-radius: 2px;
}

.wpp-section .messages .title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--gray-black);
}

.wpp-section .messages .card {
  border: 1px solid var(--gray-400);
  border-radius: 4px;
}

.wpp-section .messages .card-body {
  gap: 10px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-600);
  padding: 0.5rem;
}

.wpp-section .messages .card-body img {
  border-radius: 2px;
  width: 96px;
  height: 96px;
}

.wpp-section .messages .card-body p {
  font-size: 14px;
  line-height: 21px;
}

.wpp-section .card-body .wpp-row-message label {
  font-size: 16px;
  line-height: 24px;
}

.wpp-section .messages .card-footer {
  padding: 0.5rem 10px;
}

.wpp-section .messages .card-footer .status {
  display: flex;
  gap: 0.5rem;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--gray-600);
}

.wpp-section .messages .card-footer .status .datetime {
  color: var(--gray-700);
}

.wpp-section .messages .card-footer .status img {
  border-radius: 2px;
  width: 16px;
  height: 16px;
}

.wpp-section .messages .card-footer .status .username {
  color: var(--indigo-600);
}

.wpp-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  color: var(--gray-500);
  border-radius: 2px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
}

.wpp-img .image-uploaded {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding: 0.5rem;
}

.wpp-img .image-uploaded > div {
  gap: 0.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
}

.wpp-img .image-uploaded img {
  width: 48px;
  height: 48px;
}

.wpp-img .image-uploaded .image-name {
  font-size: 16px;
  line-height: 24px;
  color: var(--primary);
  font-weight: 400;
}

.wpp-img .image-uploaded .bi {
  font-size: 14px;
  color: var(--gray-900);
}

.file-drop-area {
  padding: 1rem;
  height: 148px;
}

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

.wpp-img .bi {
  font-size: 48px;
  line-height: 1;
}

.wpp-img h5 {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-900);
  margin-bottom: 0;
  word-break: break-word;
}

.wpp-img span {
  /* font-size: 12px; */ /* original layout porém quebra lionha */
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  color: var(--gray-600);
}

.wpp-img img {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
  background-color: var(--gray-300);
}

.form-text-description {
  font-size: 14px;
  line-height: 21px;
  color: var(--gray-600);
}

.row-resume {
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: .25rem;
  padding-bottom: .25rem;
}

.label-resume {
  font-size: 12px;
  color: var(--gray-600);
  margin-bottom: 0;
}

.text-resume {
  font-size: 12px;
  color: var(--gray-900);
  margin-bottom: 0;
  text-align: right;
  display: block;
}

.card-footer .label-resume {
  font-size: 14px;
  color: var(--indigo-500);
}

.card-footer .text-resume {
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo-500);
}

.badge-container {
  width: 100%;
  max-width: 245px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5);
}

.badge-container-compact {
  width: 100%;
  max-width: 245px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5);
}

.badge-header {
  background: linear-gradient(106.85deg, #9013FE 3.96%, #6A10F3 96.25%);
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 0 1rem;
}

.badge-header-compact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  padding: 1.5rem;
}

.badge-header::before {
  content: '';
  width: 90%;
  height: 100%;
  background: #6610F2;
  position: absolute;
  top: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.badge-hole {
  width: 64px;
  height: 16px;
  border-radius: 20px;
  background: #EBEBF4;
  border: 1px solid #E0E0EE;
  display: flex;
  margin: 16px auto;
}

.badge-header img {
  background-color: var(--gray-300);
  border-radius: 4px;
  width: 80px;
  height: 100px;
  margin-bottom: 10px;
  margin-top: 16px;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 1;
}

.badge-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-header-compact h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-header p {
  font-size: 14px;
  color: var(--white);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.badge-header-compact p {
  font-size: 12.5px;
  color: var(--white);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
}

.badge-header p .bi {
  font-size: 20px;
  color: var(--indigo-700);
}

.badge-body {
  padding: 0 5%;
  background-color: var(--orange-500);
  height: 56px;
}

.badge-body h4 {
  background: var(--orange-400);
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 16px;
}

.badge-footer {
  background-color: var(--gray-100);
  padding: 0 5%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.badge-footer-info {
  padding: 10px 12px;
  background-color: var(--white);
  margin-bottom: 6%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.badge-footer-info p {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-bottom: 2px dashed var(--gray-400);
  padding: 6px 0;
}

.badge-footer-info p:last-child {
  border: none;
}

.badge-footer-info p strong {
  font-size: 12px;
  color: var(--gray-900);
  font-weight: 500;
  margin-bottom: 0;
}

.subcard-worker {
  width: 100%;
  /* max-width: 245px; */ /* Reativar após aplicar novo modelo de crachá reduzido v2 */
}

.subcard-worker .title {
  font-size: 15px;
  font-weight: 400;
}

#reminders-index-list .dropdown-item,
#reminders-index-list .dropdown-item i {
  font-size: 14px;
}

/* Garantir que os dropdowns funcionem corretamente */
#reminders-index-list .dropdown-toggle {
  position: relative;
  z-index: 1;
}

#reminders-index-list .dropdown-menu {
  z-index: 1050;
}

/* Estilos para o dropdown "Novo lembrete" */
#reminders-index-list .dropdown-item[data-reminder-type] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

#reminders-index-list .dropdown-item[data-reminder-type]:hover,
#reminders-index-list .dropdown-item[data-label][data-description]:not(.active):hover {
  background-color: var(--gray-200);
}

/* custom range */
.wrap-range {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 97%;
  position: relative;
  margin: 0 auto 12px;
}

.wrap-range::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--gray-300);
  transform: translateY(-50%);
  border-radius: 4px;
}

.range-value {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid var(--blue-300);
  z-index: 1;
}

.wrap-range .form-range {
  position: absolute;
  top: -6px;
  z-index: 2;
}

.wrap-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.caption-range {
  font-size: 14px;
  color: var(--gray-900);
}

.wrap-caption .caption-range:last-child {
  color: var(--gray-600);
}

.wrap-training-footer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  background-color: var(--white);
  border-top: 1px dashed var(--gray-300);
  padding: 16px 0;

  /* position: fixed; */
  bottom: 0;
  z-index: 1;
}

.wrap-training-actions {
  justify-content: end;
  display: flex;
  align-items: center;
  gap: 10px;

}

.nav-training {
  display: flex;
  position: sticky;
  top: 90px;
}

.nav-training .nav-link {
  font-size: 16px;
  line-height: 24px;
  color: var(--indigo-500);
  padding: 8px 0 8px 22px;
  position: relative;
}

.nav-training .nav-link:hover {
  color: var(--indigo-700);
}

.nav-training .nav-link.past::after {
  background-color: var(--indigo-300);
}

.nav-training .nav-link.active::after {
  background-color: var(--indigo-500);
}

.nav-training .nav-link.past::before {
  border-color: var(--indigo-300);
}

.nav-training .nav-link.active::before {
  border-color: var(--indigo-500);
}

.nav-training .nav-link::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background-color: var(--gray-500);
  transition: width 0.3s;
  border-radius: 50%;
  position: absolute;
  top: 16px;
  left: 0;
  border: 2px solid var(--white);
}

.nav-training .nav-link::before {
  content: '';
  display: block;
  width: 0px;
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 20px;
  left: 6px;
  border-left: 1px dashed var(--gray-300);
}

.nav-training .nav-link:last-child::before {
  display: none;
}

/* Training Area */
#training-master .icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  font-size: 1.25rem;
}

#training-master .icon-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 48px;
  width: auto;
  max-width: 100%;
  height: 48px;
  border-radius: 2px;
  font-size: 1.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  background-color: var(--gray-200);
}

#training-master .icon-logo img {
  max-width: 100%;
  height: 100%;
}

/* Topnav */
#training-topnav {
  padding-left: 4.5rem;
  border-bottom: 1px solid var(--gray-300);
}

#training-topnav button.active,
#training-topnav a.active {
  cursor: default;
  color: var(--indigo-400);
  background-color: rgb(243 232 255 / 1);
}

/* Catalog Submenu */
#training-catalognav {
  padding-left: 4.5rem;
  border-bottom: 1px solid var(--gray-200);
  background-color: var(--white);
}

#training-catalognav a {
  font-size: 14px;
}

#training-catalognav a.active {
  cursor: default;
  /* color: var(--gray-900) !important;
  background-color: var(--gray-100) !important; */
  color: var(--indigo-400);
  background-color: rgb(243 232 255 / 1);
}

#training-catalognav a:hover:not(.active) {
  color: var(--gray-900);
  background-color: var(--gray-100);
}

/* Side Area */
#training-side-area {
  border-right: 1px solid var(--gray-300);
}
#training-side-area .wrapper-header-page {
  /* padding: 2rem 1.5rem 2rem 4.5rem; */
  padding: 1rem 0.5rem 0 4.5rem;
  background-color: var(--white);
  border-bottom: none;
  border-right: 1px solid var(--gray-300);
}

#training-side-area .wrap-header-page-title .badge {
  line-height: 13px;
}

#training-side-area > .card {
  background-color: var(--gray-100);
  border-radius: 0;
  border-right: none;
}

#training-side-area .card-body {
  padding: 1rem 1.5rem;
}

#training-side-area > .card .card-body {
  padding-left: 4.5rem;
}

#training-side-area .side-info {
  font-size: 0.875rem;
  margin-bottom: 20px;
}

#training-side-area .business-link,
#training-side-area .product-list a {
  text-decoration: none;
}

#training-side-area .business-card {
  transition: ease-in-out 0.3s;
}

#training-side-area .business-card:hover {
  transition: ease-in-out 0.3s;
  box-shadow: 0 0 0 2px #8540F580;
}

#training-side-area .business-card-active, #training-side-area .product-card-active {
  border: 1px solid var(--indigo-300);
  box-shadow: 0 0 0 4px #8540F552;
}

#training-side-area .product-card {
  border: 1px solid var(--gray-300);
  margin-bottom: 0.5rem;
  transition: ease-in-out 0.3s;
}

#training-side-area .business-card .card-body,
#training-side-area .product-card .card-body {
  padding: 0;
}

#training-side-area .business-card .card-body-top,
#training-side-area .product-card .card-body-top {
  padding: 1rem;
}

#training-side-area .business-card .data-icon,
#training-side-area .product-card .data-icon {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

#training-side-area .data-icon span {
  font-size: 0.875rem;
  margin-right: 0.25rem;
}

#training-side-area .data-icon .bi-file-zip {
  color: var(--teal-600);
}

#training-side-area .data-icon .bi-globe {
  color: var(--blue-400);
}

.update-info {
  display: flex;
  color: var(--gray-600);
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 1rem;
  border-top: 1px dashed var(--gray-300);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: left;
}

.update-info i {
  margin-left: 4px;
}

#training-side-area .form-search,
#training-side-area .products {
  margin-top: 1.25rem;
}

#training-side-area .product-list a:hover .product-card {
  border: 1px solid var(--primary);
  transition: ease-in-out 0.6s;
}

/* Main Area */
#training-main-area .card-header {
  padding: 0.5rem 1.5rem;
}

#training-main-area .card-body {
  padding: 1.5rem;
}

#main-training-card {
  display: none;
}

.wrap-table-training--info--tags {
  display: flex;
  gap: 4px;
}

.avatar-training-header {
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 0.75rem;
  background-color: var(--gray-300);
}

.tags-training {
  font-size: 14px;
  line-height: 13px;
  font-weight: 400;
  color: var(--gray-900);

  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  padding: 4px 8px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}

.tags-training.running {
  background-color: var(--orange-100);
  border: 1px solid var(--orange-300);
}

#training-main-area {
  position: relative;
}

#training-main-area .wrap-tabs .badge {
  height: 21px;
  margin-top: 2px;
}

#training-main-area .tab-links {
  margin-top: 8px;
}

#training-main-area .tab-info {
  padding: 1rem 4.5rem;
  border-bottom: 1px dashed var(--gray-300);
  background-color: var(--white);
}

#training-main-area .tab-info p {
  font-size: 14px;
  line-height: 21px;
  color: var(--gray-600);
  margin-bottom: 0;
}

#training-main-area .update-info {
  padding: 0;
  border-top: none;
}

/* Biblioteca */
#training-main-area .action-area {
  padding: 1rem;
}

#training-main-area .table td.changed-date {
  font-size: 14px;
  line-height: 21px;
  color: var(--gray-600);
}

/* Empresa */
#about-items {
  padding: 1rem 4.5rem;
}

#about-items .card:not(:last-child) {
  margin-bottom: 0.5rem;
}

#about-items .card-header h6 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  margin-bottom: 0;
}

#about-items .card-body p {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: var(--gray-600)
}

/* Objecoes Mapeadas */
#training-master .wrap-training-footer {
  border-top: 1px dashed var(--indigo-200);
  position: sticky;
}

/* Minha voz */
.voice-card {
  cursor: pointer;
  border: 2px solid transparent;
  transition: box-shadow 0.3s ease;
}

.voice-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.voice-card.selected {
  border: 2px solid var(--primary);
  background-color: color-mix(in srgb, var(--indigo-200) 20%, transparent);
}

.voice-card.selected .card-footer {
  background-color: transparent;
}

.voice-card.selected .card-title .btn,
.voice-card .card-title .btn:hover {
  color: var(--white);
  background-color: var(--primary);
}

.voice-card .card-body {
  padding: 1rem !important;
}

.voice-card .card-title .btn {
  width: 25px;
}

.voice-card .form-text-description {
  font-size: 11px;
}

#newTriggerCanvas .form-text-description {
  font-size: 12px;
}

/* Offcanvas */
#newProductCanvas .form-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

#newProductCanvas .form-control::placeholder {
  color: var(--gray-600);
}

/* Catalog View All Section */
.hover-shadow {
  transition: box-shadow 0.15s ease-in-out;
}

.hover-shadow:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.object-fit-cover {
  object-fit: cover;
}

/* Product Images Indicator */
.product-images-indicator {
  z-index: 2;
}

.product-images-indicator .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Carousel customizations for product modal */
#productImageCarousel .carousel-control-prev,
#productImageCarousel .carousel-control-next {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
}

#productImageCarousel .carousel-control-prev {
  left: 10px;
}

#productImageCarousel .carousel-control-next {
  right: 10px;
}

#productImageCarousel .carousel-indicators {
  bottom: 10px;
}

#productImageCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.5);
}

#productImageCarousel .carousel-indicators .active {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Edit Product Modal Image Thumbnails */
#current-images-container {
  max-height: 200px;
  overflow-y: auto;
}

#current-images-container .position-relative {
  flex-shrink: 0;
}

#current-images-container .img-thumbnail {
  transition: transform 0.2s ease;
}

#current-images-container .img-thumbnail:hover {
  transform: scale(1.05);
}

#current-images-container .remove-image-btn {
  border-radius: 50%;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#current-images-container .remove-image-btn:hover {
  opacity: 1;
}

/* Estilos para área de upload de mídia do produto */
#product-media-upload-area {
  transition: all 0.3s ease;
  cursor: pointer;
}

#product-media-upload-area:hover {
  background-color: #f8f9fa;
  border-color: #007bff;
}

#product-media-upload-area.border-primary {
  background-color: #e3f2fd !important;
  border-color: #007bff !important;
}

.file-preview-item {
  transition: all 0.2s ease;
}

.file-preview-item:hover {
  transform: translateY(-2px);
}

.file-preview-item .remove-file-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.file-preview-item:hover .remove-file-btn {
  opacity: 1;
}

/* Chat Playground Styles */
.chat-playground-container {
  height: 70vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

.chat-header {
  background-color: var(--bs-light);
  border-bottom: 1px solid var(--bs-border-color);
  flex-shrink: 0;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(106.85deg, #9013FE 3.96%, #6A10F3 96.25%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  background-color: #f8f9fa;
}

.chat-message {
  max-width: 100%;
}

.message-content {
  flex: 1;
}

.message-bubble {
  background-color: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 80%;
  word-wrap: break-word;
}

.worker-bubble {
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* color: white; */
  background-color: var(--white);
  color: var(--gray-800);
  border: 1px solid var(--gray-300);
}

.user-bubble {
  /* background-color: #e3f2fd; */
  background-color: #d9fdd3;
  /* color: #1976d2; */
  color: var(--gray-800);
  margin-left: auto;
}

.message-time {
  display: block;
  margin-top: 4px;
}

.quick-actions-section {
  flex-shrink: 0;
  background-color: white;
}

.chat-input-container {
  flex-shrink: 0;
  background-color: white;
}

.chat-input-container .input-group {
  border-radius: 25px;
  overflow: hidden;
}

.chat-input-container .form-control {
  border: 1px solid var(--bs-border-color);
  border-right: none;
  padding: 12px 20px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.chat-input-container .form-control:focus {
  box-shadow: none;
  border-color: var(--bs-primary);
}

.chat-input-container .btn {
  border-radius: 0;
  padding: 12px 20px 12px 16px;
}

.user-message {
  justify-content: flex-end;
  text-align: right;
}

.user-message .message-bubble {
  margin-left: auto;
}

/* Audio Recording Styles */
.recording-dot {
  width: 8px;
  height: 8px;
  background-color: #dc3545;
  border-radius: 50%;
  animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#voiceButton.recording {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

#voiceButton.recording:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Audio Message Styles */
.audio-message {
  /* max-width: 200px; */
  width: 450px;
  max-width: 75%;
  height: 40px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
}

.user-bubble .audio-message {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.worker-bubble .audio-message {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.message-bubble .audio-message {
  border-radius: 20px;
  outline: none;
}

/* Melhorar visibilidade dos controles de áudio */
.audio-message::-webkit-media-controls-panel {
  background-color: transparent;
}

.audio-message::-webkit-media-controls-play-button {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  margin: 4px;
}

.audio-message::-webkit-media-controls-timeline {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  height: 6px;
}

.audio-message::-webkit-media-controls-current-time-display,
.audio-message::-webkit-media-controls-time-remaining-display {
  /* color: white; */
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); */
  color: var(--gray-800);
  font-size: 11px;
}

/* Adjust Worker Modal Styles */
#adjustWorkerModal .btn-purple {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: white;
}

#adjustWorkerModal .btn-purple:hover {
  background-color: #5a32a3;
  border-color: #5a32a3;
}

#adjustWorkerModal .btn-purple:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  opacity: 0.65;
}

#adjustWorkerModal .text-purple {
  color: #6f42c1;
}

/* Star Rating Styles */
.star-rating {
  border: none;
  background: none;
  padding: 2px;
  transition: all 0.2s ease;
}

.star-rating:hover {
  transform: scale(1.1);
  background: none;
  border: none;
}

.star-rating i {
  transition: all 0.2s ease;
}

.star-rating:hover i,
.star-rating.active i {
  color: #ffc107 !important;
}

.star-rating.active i {
  color: #ffc107 !important;
}

/* Improvement Tags Styles */
.improvement-tag {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 15px;
  padding: 4px 12px;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.improvement-tag:hover {
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.improvement-tag .remove-tag {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 14px;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.improvement-tag .remove-tag:hover {
  background-color: #dc3545;
  color: white;
}

/* Modal animations */
#adjustWorkerModal .modal-dialog {
  transition: all 0.3s ease;
}

#adjustWorkerModal.show .modal-dialog {
  transform: scale(1);
}

/* Space-y utility for consistency */
.space-y-4 > * + * {
  margin-top: 1.5rem;
}
/* Templates */
.template-card {
  display: flex;
  flex-direction: column;
}

.template-card .bi {
  font-size: 20px;
}

.template-card p {
  margin-bottom: 0;
}

table.templates-lists-table {
  table-layout: fixed;
  min-width: 650px;
}

table.templates-lists-table thead th:nth-child(-n+2) {
  width: 25px;
}

table.templates-lists-table thead th:nth-child(3) {
  /* background-color: blueviolet; */
  width: 10%;
}

table.templates-lists-table thead th.limited {
  width: 20%;
}

table.templates-lists-table thead th.half-limited {
  width: 10%;
}

table.templates-lists-table thead th.actions,
table.templates-lists-table tbody td.actions {
  white-space: nowrap;
  min-width: 25px;
  text-align: center;
}

.actions a,
.actions button {
  display: inline-block;
  margin-right: 3px;
  margin-left: 3px;
  padding: 0.25rem 0.5rem;
  font-size: 12px;
}

.templates-lists-table tbody tr:hover {
  background-color: var(--gray-100);
}

.templates-lists-table tbody tr td.sortable {
  cursor: grab;
}

.templates-lists-table tbody tr td.sortable:active {
  cursor: grabbing;
}

.templates-lists-table thead th {
  white-space: nowrap;
}

.templates-lists-table thead th,
.templates-lists-table tbody tr td {
  padding: 0.5rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
}

/* Status */
/* Inicia transparente até ajustar no js */
.badge-status {
  opacity: 0;
}

.badge-status,
.badge-status .badge {
  font-size: 12px;
}

.badge-status .badge {
  color: var(--gray-700);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
}

.badge-status.active .bi {
  color: var(--teal-700);
}

.badge-status.active .badge {
  color: var(--teal-700);
  background-color: var(--teal-100);
  border-color: var(--teal-300);
}

.badge-status.pendent .bi {
  color: var(--orange-700);
}

.badge-status.pendent .badge, .badge-status.pending .badge {
  color: var(--orange-700);
  background-color: var(--orange-100);
  border-color: var(--orange-300);
}

.badge-status.rejected .bi {
  color: var(--red-700);
}

.badge-status.rejected .badge {
  color: var(--red-700);
  background-color: var(--red-100);
  border-color: var(--red-300);
}

.modal .modal-body .description {
  font-size: 14px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-line span {
  font-size: 12px;
}
/* ========================================
   WORKITO PAGE STYLES
   ======================================== */

/* Container principal */
/* #workito-master {

} */

/* Área de boas-vindas */
.workito-welcome-area {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workito-welcome-content {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.workito-welcome-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.workito-welcome-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.workito-info-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 400px;
  margin: 0 auto;
}

.workito-info-card h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.workito-info-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

.workito-info-list li {
  color: #374151;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
}

.workito-info-list li:before {
  content: "•";
  color: var(--primary, #8b5cf6);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Chat Widget Styles */
.workito-chat-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
}

.workito-chat-button {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: none;
  /* background: linear-gradient(135deg, var(--primary, #8b5cf6) 0%, #3b82f6 100%); */
  /* background-color: var(--primary); */
  /* background-color: #8912FC; */
  background-color: #7d11f8;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.workito-chat-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 35px -5px rgba(139, 92, 246, 0.4);
  /* background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); */
  background-color: #8912FC;
  /* background-color: #7d11f8; */
  /* background-color: #7212cc; */
}

.workito-chat-button img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

/* Chat Window */
.workito-chat-window {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  /* width: 20rem; */
  width: 360px;
  height: 24rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  z-index: 40;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0; /* Começa invisível */
}

.workito-chat-header {
  /* background: var(--primary, #8b5cf6); */
  /* background-color: #8912FC; */
  background-color: #7d11f8;
  color: white;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workito-chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.workito-chat-header img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.workito-chat-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.workito-chat-status {
  font-size: 0.75rem;
  opacity: 0.8;
  margin: 0;
}

.workito-chat-close {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}

.workito-chat-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Chat Messages Area */
#wktChatArea,
.workito-messages-area {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background: #fafafa;
}

.workito-messages {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.workito-message {
  display: flex;
  max-width: 80%;
}

.workito-message.user {
  align-self: flex-end;
  justify-content: flex-end;
}

.workito-message.bot {
  align-self: flex-start;
  justify-content: flex-start;
}

.workito-message-bubble {
  padding: 0.75rem;
  border-radius: 1rem;
  position: relative;
}

.workito-message.bot .workito-message-bubble {
  background: #f3f4f6;
  color: #374151;
}

.workito-message.user .workito-message-bubble {
  /* background: var(--primary, #8b5cf6); */
  /* background-color: #8912FC; */
  background-color: #7d11f8;
  color: white;
}

.workito-message-text {
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}

.workito-message-time {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 0.25rem 0 0 0;
}

/* Chat Input Area */
.workito-chat-input {
  padding: 0.75rem;
  border-top: 1px solid #e5e7eb;
  background: white;
}

.workito-input-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.workito-input-field {
  flex: 1;
  height: 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  background: white;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.workito-input-field:focus {
  border-color: var(--primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.workito-send-button {
  height: 2.5rem;
  padding: 0 0.75rem;
  /* background: var(--primary, #8b5cf6); */
  /* background-color: #8912FC; */
  background-color: #7d11f8;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workito-send-button:hover:not(:disabled) {
  background: #7c3aed;
}

.workito-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.workito-send-button svg {
  width: 1rem;
  height: 1rem;
}

/* Botões de anexo e áudio */
.workito-attachment-button,
.workito-audio-button {
  height: 2.5rem;
  width: 2.5rem;
  background: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.workito-attachment-button:hover,
.workito-audio-button:hover {
  background: #f3f4f6;
  color: var(--primary, #8b5cf6);
}

.workito-attachment-button svg,
.workito-audio-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Attachment Container & Dropdown */
.workito-attachment-container {
  position: relative;
}

.workito-attachment-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  min-width: 160px;
  margin-bottom: 0.5rem;
  display: none;
  flex-direction: column;
  z-index: 60;
}

.workito-attachment-dropdown.open {
  display: flex;
}

.workito-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.875rem;
  color: #374151;
  text-align: left;
}

.workito-dropdown-item:first-child {
  border-radius: 0.5rem 0.5rem 0 0;
}

.workito-dropdown-item:last-child {
  border-radius: 0 0 0.5rem 0.5rem;
}

.workito-dropdown-item:hover {
  background: #f3f4f6;
  color: var(--primary, #8b5cf6);
}

.workito-dropdown-item svg {
  color: #6b7280;
  transition: color 0.2s;
}

.workito-dropdown-item:hover svg {
  color: var(--primary, #8b5cf6);
}

.workito-dropdown-item span {
  font-weight: 500;
}

/* Audio Recorder Styles */
.workito-audio-recorder {
  display: none;
  padding: 0.75rem;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.workito-audio-recorder.recording {
  display: block;
}

.workito-audio-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.workito-cancel-recording {
  height: 2.5rem;
  width: 2.5rem;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workito-cancel-recording:hover {
  background: #dc2626;
  transform: scale(1.05);
}

.workito-cancel-recording svg {
  width: 1.25rem;
  height: 1.25rem;
}

.workito-audio-status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.workito-recording-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workito-recording-dot {
  width: 0.75rem;
  height: 0.75rem;
  background: #ef4444;
  border-radius: 50%;
  animation: workito-pulse 1.5s infinite;
}

@keyframes workito-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.workito-recording-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.workito-recording-time {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  font-family: monospace;
}

.workito-send-audio {
  height: 2.5rem;
  width: 2.5rem;
  background: #7d11f8;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workito-send-audio:hover {
  background: #6d0edc;
  transform: scale(1.05);
}

.workito-send-audio:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.workito-send-audio svg {
  width: 1rem;
  height: 1rem;
}

/* Audio Message Styles */
.workito-audio-message {
  background: #f0f9ff !important;
  border: 1px solid #e0f2fe;
  padding: 1rem !important;
  border-radius: 1rem !important;
}

.workito-message.user .workito-audio-message {
  background: rgba(125, 17, 248, 0.1) !important;
  border-color: rgba(125, 17, 248, 0.2);
  color: #374151 !important;
}

.workito-audio-player {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.workito-audio-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.workito-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #7d11f8;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.workito-play-button:hover {
  background: #6d0edc;
  transform: scale(1.05);
}

.workito-message.user .workito-play-button {
  background: white;
  color: #7d11f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workito-message.user .workito-play-button:hover {
  background: #f8fafc;
  color: #6d0edc;
}

.workito-audio-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 195px;
}

.workito-progress-bar {
  position: relative;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  cursor: pointer;
  overflow: visible;
}

.workito-message.user .workito-progress-bar {
  background: rgba(255, 255, 255, 0.3);
}

.workito-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #7d11f8;
  border-radius: 2px;
  transition: width 0.1s ease;
  width: 0%;
}

.workito-message.user .workito-progress-fill {
  background: white;
}

.workito-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  background: #7d11f8;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.1s ease;
  opacity: 0;
}

.workito-progress-bar:hover .workito-progress-handle {
  opacity: 1;
}

.workito-message.user .workito-progress-handle {
  background: white;
  border-color: #7d11f8;
}

.workito-audio-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6b7280;
  font-family: monospace;
}

.workito-message.user .workito-audio-times {
  color: rgba(55, 65, 81, 0.8);
}

.workito-audio-info {
  display: flex;
  justify-content: flex-end;
}

.workito-audio-size {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

.workito-message.user .workito-audio-size {
  color: rgba(55, 65, 81, 0.7);
}

/* Legacy audio content styles (for compatibility) */
.workito-audio-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.workito-audio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workito-audio-duration {
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0 0 0.25rem 0;
  color: #374151;
}

.workito-message.user .workito-audio-duration {
  color: #1f2937;
}

/* File Message Styles */
.workito-file-message {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  padding: 1rem !important;
}

.workito-message.user .workito-file-message {
  background: rgba(125, 17, 248, 0.1) !important;
  border-color: rgba(125, 17, 248, 0.2);
  color: #374151 !important;
}

.workito-file-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.workito-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 8px;
  color: #6b7280;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.workito-file-info {
  flex: 1;
}

.workito-file-name {
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0 0 0.25rem 0;
  color: #374151;
  word-break: break-all;
  line-height: 1.3;
}

.workito-file-size {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}

.workito-message.user .workito-file-name {
  color: #1f2937;
}

.workito-message.user .workito-file-size {
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 768px) {
  .workito-chat-window {
    right: 1rem;
    left: 1rem;
    width: auto;
    bottom: 5rem;
  }

  .workito-chat-widget {
    right: 1rem;
    bottom: 1rem;
  }

  .workito-welcome-title {
    font-size: 2rem;
  }

  .workito-info-card {
    margin: 0 1rem;
    padding: 1.5rem;
  }
}

/* Animações */
@keyframes workito-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.workito-message {
  animation: workito-fade-in 0.3s ease-out;
}

/* Scrollbar personalizada para o chat */
#wktChatArea::-webkit-scrollbar,
.workito-messages-area::-webkit-scrollbar {
  width: 4px;
}

#wktChatArea::-webkit-scrollbar-track,
.workito-messages-area::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

#wktChatArea::-webkit-scrollbar-thumb,
.workito-messages-area::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

#wktChatArea::-webkit-scrollbar-thumb:hover,
.workito-messages-area::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Estados de loading/typing */
.workito-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: #f3f4f6;
  border-radius: 1rem;
  margin: 0.5rem 0;
}

.workito-typing-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #9ca3af;
  border-radius: 50%;
  animation: workito-typing 1.4s infinite ease-in-out;
}

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

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

@keyframes workito-typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.wrapper-table-workers {
  display: grid;
  gap: 16px;
}

.wrap-header-page-internal--info--avatar .dropdown .btn:not(.dropdown-toggle-split),
.wrapper-table-workers .dropdown .btn:not(.dropdown-toggle-split) {
  background-color: var(--teal-600);
  border-color: var(--teal-600);
}

.wrap-header-page-internal--info--avatar .dropdown-toggle-split,
.wrapper-table-workers .dropdown-toggle-split {
  background-color: var(--teal-700);
  border-color: var(--teal-700);
}

.wrap-header-page-internal--info--avatar .dropdown-toggle-split:hover,
.wrapper-table-workers .dropdown-toggle-split:hover {
  background-color: var(--teal-800);
  border-color: var(--teal-800);
}

.wrap-header-page-internal--info--avatar .dropdown-toggle-split.show,
.wrapper-table-workers .dropdown-toggle-split.show {
  background-color: var(--teal-700);
  border-color: var(--teal-700);
}

.wrap-header-page-actions .btn-hire-worker {
  padding: 6px 8px;
  line-height: 1rem;
  font-size: 14px;
}

.box-worker-contract-header {
  padding: 0.5rem;
  background-color: var(--indigo-100);
  border-radius: 4px;
}

.box-worker-contract-header hr.dashed {
  border-top: 1px dashed var(--gray-100);
  margin: 0.5rem -0.5rem;
}

.box-worker-contract-header ul li {
  background: none;
  border: none;
  padding: 0.5rem 0;
  color: var(--indigo-500);
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-worker-contract-header ul li .value span {
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  color: var(--indigo-500);
}

.box-worker-contract-header ul li .value i {
  font-size: 14px;
  color: var(--indigo-300);
}

.wrap-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 450px;
  width: 100%;

  flex-direction: column;

  gap: 16px;

  color: var(--gray-500);
  background-color: var(--gray-200);
  border-radius: 4px;
  border: 1px solid var(--gray-300);
}

.wrap-table-workers {
  display: grid;
  /* grid-template-columns: minmax(500px, 570px) minmax(300px, 60%) minmax(240px, auto); */
  grid-template-columns: minmax(395px, 570px) minmax(300px, 60%) minmax(345px, auto);
  gap: 16px;

  border-radius: 4px;
  border: 1px solid var(--gray-300);
  /* overflow: hidden; */
  cursor: pointer;
  transition: all 0.3s;
}

.wrap-table-workers:hover {
  transition: all 0.3s;
  box-shadow: 0px 0px 0px 4px #8540F552;
  border: 1px solid var(--indigo-300);
}

.wrap-table-workers--info {
  background-color: var(--white);
  padding: 16px;
  display: flex;
  gap: 16px;
}

.wrap-table-workers--info--avatar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wrap-table-workers--info--avatar img  {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}

.wrap-table-workers--info--data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(100% - 96px);
  position: relative;
}

.wrap-table-workers--info--data .model {
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 0;
}

.wrap-table-workers--info--data .name {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;

  display: flex;
  align-items: center;
  gap: 8px;
}

.wrap-table-workers--info--data .name .time {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gray-600);
}

.wrap-table-workers--info--data .personality {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--gray-600);

  display: flex;
  align-items: center;

  background-color: var(--indigo-100);
  padding: 4px 8px;
  border-radius: 4px;

  position: relative;
  margin-bottom: 5px;

  box-shadow: 0px 2px 4px 0px #00000013;
  width: fit-content;

}

.wrap-table-workers--info--data .personality::before {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  left: 0;
  top: 50%;
  border: 7px solid transparent;
  border-left: 0;
  border-right: 7px solid  var(--indigo-100);
  transform: translate(-100%, -50%);
}

.wrap-table-workers--info--tags {
  display: flex;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;

  /* max-height: 80px;
  background-color: aqua;
  overflow-y: scroll; */
  /* background-color: aqua; */
}

.wrap-table-workers--info--tags .tags-worker {
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
  color: var(--gray-900);

  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  padding: 1px 8px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-table-workers--info--tags .tags-worker .tag-title {
  width: auto;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KPIS */
.wrap-table-workers--kpis {
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
  gap: 16px;
  padding-right: 16px;
}

.wrap-table-workers--kpis.work-load {
  border-right: 1px dashed var(--gray-400);
}

.wrap-table-workers--kpis.new-users {
  padding: 16px 20px;
  gap: 6px;
  border-top: 1px dashed var(--gray-400);
}

.wrap-table-workers--kpis .wrap-table-workers--kpis--item {
  display: flex;
  flex-direction: column;
  color: var(--gray-600);

}

.wrap-table-workers--kpis .wrap-table-workers--kpis--item .label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  margin: 0;
}

.wrap-table-workers--kpis .wrap-table-workers--kpis--item .wrap-numbers {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wrap-table-workers--kpis .wrap-table-workers--kpis--item .wrap-numbers .number {
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 700;
  color: var(--gray-600);
}

/* status */
.wrapper-status-workers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4.5rem;
}

.wrap-table-workers .wrapper-status-workers,
.wrap-table-workers .wrapper-card-contract {
  /* height: 147px; */
  height: 100%;
}

.wrap-status-workers {
  display: flex;
  align-items: center;
  padding: 8px;
  height: 44px;
  width: 175px;
  border-radius: 4px;
}

.wrap-status-workers--item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wrap-status-workers--item .label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  margin: 0;
}

.wrap-status-workers--item .wrap-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.wrap-status-workers--item .wrap-numbers .number {
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
}


/* waiting */
.wrap-status-workers.waiting {
  background-color: var(--gray-200);
  color: var(--gray-600);
}
.wrap-status-workers.waiting .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.waiting .wrap-numbers .bi {
  color: var(--gray-500);
}


/* opened */
.wrap-status-workers.opened {
  background-color: var(--indigo-100);
  color: var(--indigo-400);
}
.wrap-status-workers.opened .wrap-numbers {
  color: var(--indigo-500);
}

.wrap-status-workers.opened .wrap-numbers .bi {
  color: var(--indigo-300);
}

/* converted */
.wrap-status-workers.converted {
  background-color: var(--teal-100);
  color: var(--teal-700);
}
.wrap-status-workers.converted .wrap-numbers {
  color: var(--teal-600);
}

.wrap-status-workers.converted .wrap-numbers .bi {
  color: var(--teal-300);
}

/* lost */
.wrap-status-workers.lost {
  background-color: var(--red-100);
  color: var(--red-400);
}
.wrap-status-workers.lost .wrap-numbers {
  color: var(--red-600);
}

.wrap-status-workers.lost .wrap-numbers .bi {
  color: var(--red-300);
}

/* hired */
.wrap-status-workers.hired {
  width: 125px;
  background-color: var(--gray-200);
  color: var(--gray-600);
}
.wrap-status-workers.hired .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.hired .wrap-numbers .bi {
  color: var(--gray-500);
}

/* total */
.wrap-status-workers.total {
  width: auto;
  background-color: var(--indigo-100);
  color: var(--indigo-400);
}
.wrap-status-workers.total .wrap-numbers {
  color: var(--indigo-500);
}

.wrap-status-workers.total .wrap-numbers .number {
  font-size: 20px;
}

.wrap-status-workers.total .wrap-numbers .bi {
  color: var(--indigo-300);
}


/* email */
.wrap-status-workers.email {
  background-color: var(--orange-100);
  color: var(--orange-600);
}
.wrap-status-workers.email .wrap-numbers {
  color: var(--orange-700);
}

.wrap-status-workers.email .wrap-numbers .bi {
  color: var(--orange-500);
}


/* linkedin */
.wrap-status-workers.linkedin {
  background-color: var(--blue-100);
  color: var(--blue-400);
}
.wrap-status-workers.linkedin .wrap-numbers {
  color: var(--blue-700);
}

.wrap-status-workers.linkedin .wrap-numbers .bi {
  color: var(--blue-500);
}


/* whatsapp */
.wrap-status-workers.whatsapp {
  background-color: var(--teal-100);
  color: var(--teal-600);
}
.wrap-status-workers.whatsapp .wrap-numbers {
  color: var(--teal-700);
}

.wrap-status-workers.whatsapp .wrap-numbers .bi {
  color: var(--teal-500);
}

/* time */
.wrapper-status-workers.block-sm .wrap-status-workers.time {
  width: 100px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w100 {
  width: 100px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w200 {
  width: 175px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w300 {
  width: 250px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w400 {
  width: 325px;
}

.wrapper-status-workers.block-sm .wrap-status-workers.time.w500 {
  width: 400px;
}

.wrap-status-workers.time {
  background-color: var(--gray-200);
  color: var(--gray-600);
}

.wrap-status-workers.time .wrap-numbers {
  color: var(--gray-700);
}

.wrap-status-workers.time .wrap-numbers .bi {
  color: var(--gray-500);
}


/* Block */
.wrapper-status-workers.block {
  margin: 0;
}

.wrapper-status-workers.block .wrap-status-workers {
  width: 22%;
  /* height: 134px; */
  height: calc(100% - 1rem);
}

.wrapper-status-workers.block .wrap-status-workers  .wrap-status-workers--item {
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

/* block-sm */
.wrapper-status-workers.block-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.wrapper-status-workers.block-sm .wrap-status-workers {
  min-width: 100px;
  min-height: 70px;
}

.wrapper-status-workers.block-sm .wrap-status-workers  .wrap-status-workers--item {
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: space-between;
  align-items: flex-start;
}


/* Contract */
.wrapper-card-contract {
  padding: 8px;
  width: 100%;
  height: 100%;
  display: flex;
}
.wrap-card-contract {
  background-color: var(--indigo-100);
  border-radius: 4px;
  width: 100%;
}

.wrap-card-contract--header {
  display: flex;
  padding: 8px;
  border-bottom: 1px dashed var(--gray-100);
}

.wrap-card-contract--header .btn {
  width: 100%;
  background-color: var(--white);
  border-color: var(--gray-500);
  color: var(--gray-700);
}

.wrap-card-contract--body {
  display: flex;
  flex-direction: column;
  padding: 8px;
  justify-content: space-between;
}

.label-resume-contract {
  font-size: 12px;
  color: var(--indigo-500);
  margin-bottom: 0;
}

.text-resume-contract {
  font-size: 14px;
  font-weight: 700;
  color: var(--indigo-500);
  margin-bottom: 0;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* Cadence */
.card-cadence {
  display: flex;
  align-items: center;

  line-height: 8px;
  width: 100%;
  min-height: 72px;
  gap: 16px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  position: relative;
  background-color: var(--white);
}

.card-cadence .box-grip {
  flex-shrink: 0;
}

.card-cadence .info--tags {
  display: flex;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.card-cadence .info--tags .tags-cadence {
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
  color: var(--gray-900);

  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  padding: 1px 8px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  gap: 4px;
}

.card-cadence .info--tags .tags-cadence.email {
  color: var(--orange-700);
  background-color: var(--orange-100);
  border: 1px solid var(--orange-200);
}

.card-cadence .info--tags .tags-cadence.objective {
  color: var(--indigo-500);
  background-color: var(--indigo-100);
  border: 1px solid var(--indigo-200);
}

.card-cadence .info--tags .tags-cadence.objective .bi {
  color: var(--indigo-700);
}

.card-cadence .info--tags .tags-cadence.whatsapp {
  color: var(--teal-700);
  background-color: var(--teal-100);
  border: 1px solid var(--teal-300);
}

.card-cadence a.card-cadence-edit {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-cadence a.card-cadence-edit .box-text .text {
  margin-right: calc(1rem + 32px);
}

.card-cadence.first,
.card-cadence.last,
.card-cadence.wainting {
  background-color: var(--gray-200);
}

.card-cadence:not(.first, .last) .box-grip {
  cursor: grab;
}

.box-grip {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  min-height: 70px;
  height: 100%;
  position: absolute;
  border-radius: 4px 0 0 4px;
  border-right: 1px dashed var(--gray-300);
  background-color: var(--gray-100);
}

.card-cadence .box-icon {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 16px;

  width: 40px;
  height: 40px;
  margin-left: calc(24px + 16px);
  border-radius: 2px;
  color: var(--white);
  background: var(--gray-500);
}

.card-cadence .box-icon.email {
  color: var(--orange-600);
  background: var(--orange-100);
}

.card-cadence .box-icon.clock {
  color: var(--white);
  background: var(--gray-600);
}

.card-cadence .box-icon.whatsapp {
  color: var(--teal-600);
  background: var(--teal-100);
}

.card-cadence .box-icon.linkedin {
  color: var(--blue-600);
  background: var(--blue-100);
}

.card-cadence .box-icon.phone {
  color: var(--indigo-600);
  background: var(--indigo-100);
}

.card-cadence.last .box-icon {
  color: var(--white);
  background: var(--gray-600);
}

.box-input {
  width: calc(100% - 220px);
}

.box-text {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  margin-left: calc(40px + 24px + 32px);
}

.box-text .title {
  font-size: 16px;
  font-weight: 400;
  color: var(--gray-800);
  margin-bottom: 0;
  line-height: 24px;
}

.box-text .text {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-600);
  margin-bottom: 0;
  line-height: 14px;
}

.box-btn {
  width: 32px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px dashed var(--gray-300);;
  border-radius: 0 4px 4px 0;
  position: absolute;
  right: 0;
  background: var(--gray-100);
}

.box-edit-btn {
  width: 32px;
  height: 70px;
  display: flex;
  right: 32px !important;
  align-items: center;
  justify-content: center;
  border-left: 1px dashed var(--gray-300);;
  border-radius: 0 0 0 0;
  position: absolute;
  right: 0;
  background: var(--gray-100);
}

.box-edit-btn button{
  border: none;
  background: none;
  padding: 0;
  width: 100%;
}

.wrapper-chat-cadence {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-left: 1px dashed var(--gray-300);
  height: 100%;
}

.wrap-header-chat-cadence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  border-bottom: 1px dashed var(--gray-300);
}

.wrap-header-chat-cadence-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
}

.wrap-body-chat-cadence {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  flex-grow: 1;
  overflow-y: auto;
}

.wrap-footer-chat-cadence {
  background-color: var(--gray-100);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-up-icon {
  border-bottom: 1px solid var(--gray-300);
}

.link-down-icon {
  border-top: 1px solid var(--gray-300);
}

.up-icon {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 3px;
}

.down-icon {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 3px;
}

.ms-35 {
  margin-left: .35rem !important;
  color: #747474;
}

/* Modals */
#resetWorkerModal .modal-header i,
#attendanceModal .modal-header i {
  color: var(--orange-500);
}

#resetWorkerModal ul.reset-worker-modal-list {
  margin-top: 2rem;
  list-style: none;
}

#attendanceModal ul.attendance-modal-list {
  margin-top: 1rem;
  list-style: none;
  padding-left: 0;
}

ul.reset-worker-modal-list li,
ul.attendance-modal-list li {
  position: relative;
  padding-left: 25px;
}

ul.attendance-modal-list li:not(:last-child) {
  margin-bottom: 8px;
}

ul.reset-worker-modal-list li::before,
ul.attendance-modal-list li::before {
  content: "\F138"; /* Código Unicode para o ícone bi-arrow-right */
  font-family: bootstrap-icons !important;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  color: var(--orange-500);
}

ul.attendance-modal-list li span.status {
  font-size: 14px;
  line-height: 13px;
  font-weight: 400;
  color: var(--dark);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-500);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

ul.attendance-modal-list li span.status.paused {
  background-color: var(--orange-100);
  border: 1px solid var(--orange-300);
}

ul.attendance-modal-list li span.status.lost {
  background-color: var(--red-100);
  border: 1px solid var(--red-300);
}


/* Offcanvas */
.formCadenceCanvas .offcanvas-footer .btn {
  font-weight: 700;
}
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
@import "base/colors.css";
@import "base/typography.css";
@import "base/buttons.css";
@import "base/table.css";

/* Bootstrap vars overrides */
:root {
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.75rem;
  --bs-user-dropdown-spacer: 0.5rem;
  --bs-pagination-active-bg: #6610F2;
  --bs-link-color: #6610F2;
  --bs-link-color-rgb: 102, 16, 242;
  --bs-link-hover-color: #520DC2;
  --bs-link-hover-color-rgb: 82, 13, 194;
  --bs-focus-ring-color: rgba(102, 16, 242, 0.25);
  --bs-dropdown-link-active-bg: #6610F2 !important;
}

body {
  background-color: var(--gray-100);
  font-family: "Sarabun", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Behind the navbar */
  padding: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 48px;
  /* Height of navbar */
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

/*
 * Navbar
 */

.wrapper-navbar.navbar {
  padding: 11px 4.5rem;
}

.wrap-account-button {
  border-radius: 4px;
  border: 2px solid var(--gray-500);
  padding: 0;
  background-color: transparent;
}

.dropdown .wrap-account-info .wrap-account-avatar {
  height: 31px;
  width: 31px;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary);
}

.wrap-account-button .wrap-account-info .wrap-name .name,
.wrap-account-info .wrap-name .name {
  color: var(--gray-800);
  line-height: 150%;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.wrap-account-button .wrap-account-info .wrap-name .company {
  display: none;
}

.wrap-account-button .wrap-account-action {
  padding: 0 6px;
  background-color: var(--gray-400);
  border-left: 2px solid var(--gray-500);
}

.wrap-account-button .wrap-account-action i {
  font-size: 8.5px;
}

/*
 * Utilities
 */

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.p-custom {
  padding: 1rem 4.5rem;
}

.px-custom {
  padding-left: 4.5rem !important;
  padding-right: 4.5rem !important;
}

.ps-custom {
  padding-left: 4.5rem !important;
}

.pe-custom {
  padding-right: 4.5rem !important;
}

/* Card */
.card {
  border: 1px solid var(--gray-300);
  background-color: var(--white);
}

.card-header {
  padding: 16px 24px;
  background-color: var(--white);
  border-bottom: 1px dashed var(--gray-300);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header .title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0;
}

.card-header.small {
  padding: 8px 16px;
}

.card-header .title.small {
  font-size: 16px;
}

.card-body .text-card {
  font-size: 14px;
  color: var(--gray-600);
}

.card-footer {
  padding: 16px 24px;
  background-color: var(--white);
  border-top: 1px dashed var(--gray-300);
}

.card-footer.small {
  padding: 8px 16px;
}

.card-header .bi {
  font-size: 16px;
  color: var(--gray-500);
}

.col-form-label,
label {
  font-size: 14px;
  color: var(--black);
  margin-bottom: 6px;
}

.wrap-range input[type="range"]::-webkit-slider-runnable-track {
  background: none;
}

.wrap-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.custom-tooltip {
  --bs-tooltip-bg: var(--indigo-100);
  --bs-tooltip-color: var(--gray-600);
  --bs-tooltip-max-width: 750px;
}

.form-check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.form-check-inline .form-check-input,
.form-check-inline .col-form-label,
.form-check-inline label {
  margin-bottom: 0;
  cursor: pointer;
}

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

/* Offcanvas */
.offcanvas-title i {
  font-size: 1rem;
  vertical-align: text-bottom;
}

.offcanvas.offcanvas-end {
  top: 56px;
  height: calc(100vh - 80px);

  &.offcanvas-doc {
    width: 600px !important;
  }
}

.offcanvas-footer {
  background-color: var(--gray-100);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Switch */
.form-switch {
  padding-left: 0;
}

.form-switch .form-check-label {
  font-size: 16px;
  color: var(--dark);
}

.form-switch .form-check-input {
  float: none;
  margin-left: 0;
}

.form-switch small {
  font-size: 14px;
  color: var(--secondary);
}

/* badge */
.badge.rounded-pill {
  line-height: 1.1;
}

/* divider */
hr.dashed {
  border-top: 1px dashed var(--gray-300);
  opacity: 1;
}

.title-dashed {
  position: relative;
  margin-bottom: 8px;
}

.title-dashed span {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
  margin-left: 1rem;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 21px;
  font-weight: 700;
  background-color: var(--white);
}

.title-dashed hr.dashed {
  position: absolute;
  top: -2px;
  width: 100%;
}

.invalid-feedback {
  display: block;
}

.field_with_errors {
  width: 100%;
}

.top-85 {
  top: 85px !important;
  max-height: 50px !important;
}

.toast {
  background-color: var(--white) !important;
}

.modal {
  z-index: 99990;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-dialog-left {
  left: 0.5rem;
  position: absolute;
}

.modal-dialog-right {
  right: 0.5rem;
  position: absolute;
}

.modal-dialog-bottom {
  bottom: 0.5rem;
  margin-bottom: 0.25rem;
  position: absolute;
}

.modal-dialog-half-left {
  left: 12.5%;
  position: absolute;
}

.modal-dialog-half-right {
  right: 12.5%;
  position: absolute;
}

.wrap-kanban-card {
  text-decoration: none;
}

.avatar-file {
  width: 30px;
}

.companyContentformCanvas {
  height: 250px !important;
}

.popover {
  --bs-popover-max-width: 30% !important;
}

.btn-content-info {
  width: 50px;
}

.load-more {
  margin-top: 20px;
}

.paused-danger {
  color: red !important;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  margin: 0;
}

.cadence-contact {
  color: rgb(0, 89, 253) !important;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  margin: 0;
}

.cadence-index a {
  text-decoration: none !important;
  width: 100%;
}

.p-20 {
  width: 20% !important;
}

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

.p-50 {
  width: 50% !important;
}

.p-95 {
  width: 95% !important;
}

.wpp-row-message .trix-button-row .trix-button--icon-strike,
.wpp-row-message .trix-button-row .trix-button--icon-link,
.wpp-row-message .trix-button-row .trix-button-group--block-tools,
.wpp-row-message .trix-button-row .trix-button-group--file-tools,
.wpp-row-message .trix-button-row .trix-button-group--history-tools {
  display: none !important;
}

.wpp-row-message trix-editor {
  min-height: 8.5em !important;
}

.ts-wrapper.tom-select,
.ts-wrapper.tom_select {
  padding: 0 2.25rem 0 0.75rem;
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

.ts-control {
  border: none !important;
  padding: 9px 9px 9px 0 !important;
  flex-wrap: nowrap !important;
}

.ts-wrapper.tom-select.focus,
.ts-wrapper.tom_select.focus {
  box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.25) !important;
  padding: 0 0.75rem !important;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  font-size: 1rem !important;
}

.ts-dropdown {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.ts-dropdown .option {
  line-height: 1.5 !important;
  font-size: 1rem !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
}

.ts-dropdown,
.ts-dropdown-content {
  border-radius: 6px !important;
}

.ts-dropdown .active {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Custom Turbo Progress bar */
.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 10px;
  background: var(--primary);
  box-shadow: 0 10px 10px -3px rgba(59, 130, 246, 0.9),
    0 4px 6px -4px rgba(59, 130, 246, 0.9);
  visibility: hidden;
}

#custom-loading-bar {
  z-index: 9998;
}

.loading-box {
  display: block;
  text-align: center;
}

.top-box {
  width: 60px;
  height: 84px;
  margin: auto;
  margin-bottom: 1rem;

}

.top-box svg {
  position: relative;
  z-index: 10;
}

@keyframes shadow-bounce-blur {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.8;
    filter: blur(2px);
  }

  50% {
    transform: translateY(-3px);
    opacity: 1;
    filter: blur(0px);
  }
}

.top-box .logoShadow {
  position: relative;
  z-index: 9;
  margin-top: -5px;
  width: 60px;
  height: 17px;
  background-color: var(--gray-500);
  border-radius: 50%;
  animation: shadow-bounce-blur 1s ease-in-out infinite;
}

.bottom-box {
  position: relative;
  width: 360px;
  height: 78px;
  padding: 1rem 0.5rem;
  border-radius: 1rem;
  background-color: var(--white);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.075);
}

.bottom-box::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--white);
}

.bottom-box h5 {
  color: var(--gray-600);
}

.bottom-box p {
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

/* Fim do Custom Turbo Progress bar */

/* CustomConfirm */
#custom-confirm-modal {
  position: fixed;
  inset: 0px;
  z-index: 1050;
  z-index: 99991;
}

/* Fim do CustomConfirm */

.hidden-input {
  display: none;
  /* Esconde o input padrão */
}

/* Media queries */
@media (min-width: 768px) and (max-width: 1480px) {
  .navbar-brand img {
    width: 100%;
    min-width: 80px;
  }

  #navbarNav .nav-link {
    font-size: 0.85rem;
    text-wrap: nowrap;
  }

  .dropdown .wrap-name {
    font-size: 0.85rem;
  }

  .dropdown .wrap-account-button .wrap-account-info,
  .dropdown .wrap-account-info {
    gap: 0.5rem;
  }

  .dropdown .wrap-account-info .wrap-account-avatar {
    font-size: 0.85rem;
  }
}

.worker-speciality,
.new-worker-speciality {
  display: flex !important;
  align-items: center !important;
  padding: 8px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background-color: var(--gray-200) !important;
  color: var(--gray-600) !important;
  font-weight: bold !important;
  font-size: 12px !important;
}

.worker-speciality.sdr {
  width: auto !important;
  min-width: 135px;
}

.worker-speciality.inbound {
  width: auto !important;
  min-width: 125px;
}

.new-worker-speciality.sdr {
  background-color: var(--indigo-100) !important;
  color: var(--indigo-600) !important;
}

.new-worker-speciality.inbound {
  background-color: var(--indigo-100) !important;
  color: var(--indigo-600) !important;
}

.w-40 {
  width: 40% !important;
}

.w-200px {
  width: 200px !important;
}

.acessos-link-externo input {
  height: 32px;
  /* Altura reduzida do input */
  padding: 4px 8px;
  /* Padding interno reduzido */
  margin-bottom: 8px;
  /* Espaçamento entre os campos reduzido */
  font-size: 13px;
  /* Tamanho da fonte um pouco menor */
  line-height: 1.2;
  /* Altura da linha reduzida */
}

/* Ajustes para os labels */
.acessos-link-externo label {
  font-size: 12px;
  /* Tamanho da fonte do label reduzido */
  margin-bottom: 2px;
  /* Espaçamento abaixo do label reduzido */
  color: #666;
  /* Cor mais suave para os labels */
  display: block;
}

/* Ajuste para cada grupo de input */
.acessos-link-externo .input-group {
  margin-bottom: 10px;
  /* Espaçamento entre grupos de input */
}

/* Ajuste para o último grupo de input */
.acessos-link-externo .input-group:last-child {
  margin-bottom: 0;
  /* Remove margem do último grupo */
}

.w-50px {
  width: 50px !important;
}

.w-35px {
  width: 35px !important;
}

.link-disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

.top-10 {
  top: 10px !important;
}

.top-20 {
  top: 20px !important;
}

td.sortable,
td.sortable:hover {
  cursor: grab;
}

span.whatsapp-failed {
  cursor: grab;
}

td.sortable:active,
td.sortable:hover:active {
  cursor: grabbing;
}

.sticker-image {
  width: 100px;
  height: 100px;
}

.contact-card-body:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.contact-card-body {
  /* Aumenta o padding interno */
  padding: 24px;

  /* Reduz a largura máxima do card */
  width: fit-content;


  /* Centraliza o card se necessário */
  margin: 10px;

  /* Mantém o efeito de sombra, mas um pouco mais suave */
  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);

  /* Bordas arredondadas mais suaves */
  border-radius: 12px;

  /* Fundo branco */
  background-color: #ffffff;

  /* Espaçamento entre os elementos internos */
  strong {
    display: block;
    margin-bottom: 12px;
  }

  small {
    display: block;
    color: #666;
    margin-bottom: 8px;
  }
}

.offcanvas-backdrop {
  background-color: var(--gray-200) !important;
}

.offcanvas-backdrop.show {
  opacity: 0.65 !important;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  font-size: 1.25rem;
}

.attendance-cadence-indicator {
  display: flex;
  align-items: center;
}

/* Pagination bootstrap overrides */
.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #6610F2;
  --bs-pagination-active-border-color: #6610F2;
}

/* Select bootstrap overrides */
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.25);
}

select.form-select option:hover,
select option:hover,
select option[selected] {
  background-color: #6610F2 !important;
}

/* Form Bootstrap overrides */
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.25);
}

/* Custom Animation */
@keyframes vertical-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

@keyframes shadow-opacity-blur {

  0%,
  100% {
    opacity: 1;
    filter: blur(0);
  }

  50% {
    opacity: 0.9;
    filter: blur(2px);
  }
}

.motion-safe\:animate-bounce {
  animation: vertical-bounce 1.5s ease-in-out infinite;
}

.offcanvas.offcanvas-end.wide-offcanvas.atendance-canvas {
  top: 293px;
  height: calc(100vh - 294px);
  border-top: 1px solid transparent;
}

#contacts-index-list .offcanvas-backdrop.show {
  opacity: 0 !important;
}

img.avatar-1 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.btn-record {
  animation: recordPulse 1.5s ease-in-out infinite;
}

@keyframes recordPulse {
  0% {
    background-color: #8B5CF6;
    box-shadow: 0 0 5px rgba(102, 16, 242, 0.5);
  }

  50% {
    background-color: #6610F2;
    box-shadow: 0 0 10px rgba(102, 16, 242, 0.8);
  }

  100% {
    background-color: #8B5CF6;
    box-shadow: 0 0 5px rgba(102, 16, 242, 0.5);
  }
}

img.timeline-image {
  max-width: 500px;
}

#change_contact_autopilot {
  width: auto;
  gap: 0.5rem;
}

#whatsapp-message-template {
  max-width: 290px;
}

.btn-outline-autopilot {
  color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-autopilot:hover {
  color: var(--white);
  background-color: #0d6efd;
}

.btn-outline-copilot {
  color: #520DC2;
  border-color: #520DC2;
}

.btn-outline-copilot:hover {
  color: var(--white);
  background-color: #520DC2;
}

trix-editor.disabled {
  pointer-events: none !important;
  opacity: 0.6 !important;
  background-color: #f8f9fa !important;
}

trix-toolbar.disabled {
  display: none !important;
}

#new_message_body {
  min-height: 150px;
  height: auto;
  overflow-y: auto;
}

.new-message-body .trix-button-row .trix-button--icon-strike,
.new-message-body .trix-button-row .trix-button--icon-link,
.new-message-body .trix-button-row .trix-button-group.trix-button-group--text-tools,
.new-message-body .trix-button-row .trix-button-group.trix-button-group--block-tools,
.new-message-body .trix-button-row .trix-button-group.trix-button-group--file-tools {
  display: none;
}

table.webook-send-data-table th,
table.webook-send-data-table td {
  text-align: center;
  vertical-align: middle;
  align-items: center;

  button {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

.json-example {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin: 0px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.1;
  text-align: left;
}

pre code.json-content {
  text-align: left;
  margin: 0;
  padding: 0;
}

.table-xsm td,
.table-xsm th {
  border: 1px solid #ddd;
  padding: 3px 8px;
  line-height: 1.2;
  height: 28px;
  vertical-align: middle;
}

.status-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.success {
  background-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.status-indicator.waiting {
  background-color: var(--gray-200);
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.status-indicator.error {
  background-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.status-text {
  font-size: 14px;
  font-weight: 500;
  color: #212529;
  margin: 0;
}

.response-details {
  font-size: 13px;
  color: #6c757d;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0 0 0;
}

.modal-title .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-show-modal-title {
  cursor: pointer;
}

/* Emoji Picker Styles */
em-emoji-picker {
  --color-border-over: rgba(0, 0, 0, 0.1);
  --color-border: rgba(0, 0, 0, 0.05);
  --font-family: "Inter", sans-serif;
  --rgb-accent: 155, 155, 155;

  position: absolute;
  z-index: 1000;
  max-width: 400px;
  min-width: 300px;
  resize: horizontal;
  overflow: auto;
  left: 290px !important;
}

@media (max-width: 768px) {
  em-emoji-picker {
    max-width: 80vw;
  }
}

.emoji-picker-button {
  background: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-width: 32px !important;
  min-height: 32px !important;
  outline: none !important;
}

.emoji-picker-button:hover {
  background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.emoji-picker-button:active {
  background: linear-gradient(135deg, #d8d8d8 0%, #c8c8c8 100%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(1px) !important;
}

.emoji-picker-button:focus {
  outline: 2px solid #007bff !important;
  outline-offset: 2px !important;
}

/* Dark mode support */
.dark .emoji-picker-button {
  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
  border: 1px solid #888888 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.dark .emoji-picker-button:hover {
  background: linear-gradient(135deg, #5a5a5a 0%, #4a4a4a 100%) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Layout adjustments for the emoji picker section */
.has-validation .flex.items-center.justify-between {
  margin-bottom: 8px !important;
}

.has-validation .form-label {
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .has-validation .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .emoji-picker-button {
    align-self: flex-end !important;
  }
}

.carousel-control-prev,
.carousel-control-next {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  opacity: 0.6;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
}

.carousel-control-prev-icon {
  transform: rotate(45deg);
  margin-left: 4px;
}

.carousel-control-next-icon {
  transform: rotate(-135deg);
  margin-right: 4px;
}

trix-editor {
  &.manual-email-height {
    min-height: 215px;
  }
}

trix-editor {
  &.manual-email-signature-height {
    min-height: 130px;
  }
}

.type-email_manual .trix-button-group--file-tools, .type-email_manual .trix-button--icon-link {
  display: none;
}

.cadence-step-save-button {
  width: 200px;
  margin-right: 0 !important;
  float: right;
  margin-left: auto;
}

.grouped-whatsapp-message {
  border: 1px dashed rgba(102, 16, 242, 0.25);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  margin: 4px !important;
}

.btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.btn-outline-secondary .bi-download {
  transition: transform 0.2s ease;
}

.btn-outline-secondary:hover .bi-download {
  transform: translateY(-1px);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
























 */

@import "base/icons.css";
@import "components/tabs.css";
@import "tw_scoped_preflight.css";