*{
  font-family:Verdana, arial;
  font-weight:normal;
  font-size:12px;
}

body {
  display: flex;
  height: 100vh;
  overflow-y: hidden;
  font-family: "Open Sans", sans-serif;
  transition: all 0.7s ease;
}
/* Base Variables */
:root {
  --font-family: "Open Sans", sans-serif;;
  --table-font-size: 12px;
  --sidebar-font-size: 12px;
  --subheading-font-size: 12px;
  --heading-font-size: 14px;
  --border-radius: 4px;
  --primary-bg: rgba(37, 65, 53, 1);
  --secondary-bg: #051b12;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --primary-color: #7ba647;
  --secondary-color: #6c757d;
  --button-bg-primary: var(--primary-color);
  --button-bg-primary: var(--primary-color);
  --button-text-color: #ffffff;
  --button-hover-bg-color: #1c86ee;
  --button-hover-text-color: #ffffff;
}

 
/* Dark Theme */
[data-theme='dark'] {
 
}

.p-btn{
  background: var(--button-bg-primary) !important;
  border: none !important;
  box-shadow: 0 0 9px #d5d2d2 !important;
  color: var(--text-primary) !important;
  font-size: var(--table-font-size);
  height: 35px;
}
.back-layout{
  background: #0000004a;
}
.sidebar {
  width: 170px;
  /* background-color: #100f34; */
  background-color: #100f34;
  color: white;
  padding-top: 7px;
}
.sidebar .nav-item {
  padding: 4px 6px;
  line-height: 30px;
  font-weight: 500;
  border-bottom: 1px solid #494646;
  position: relative;
}
.sidebar .nav-item span {
  position: absolute;
  right: 30px;
  
  top: 17px;
  font-size: 9px;
}
.sidebar .nav-item a {
  color: #e7e7e7;
  text-decoration: none;
  font-size: var(--sidebar-font-size);
  padding-left: 14px;
  display: block;
  font-family: sans-serif;
  font-weight: bold;
}
.left-container h5 {
  font-size: var(--subheading-font-size);
  letter-spacing: 0.6px;
  margin-bottom: 0.3rem;
  text-transform: capitalize;
  font-size: 16px;
  border-left: outset;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
}
.sidebar .nav-item i {
  margin-right: 15px;
}

.sidebar .nav-item a:hover {
  /*background-color: #495057;*/
  color: black;
}
.sidebar li.nav-item.active,
.sidebar li.nav-item:hover {
  /* background: #f7f7f7; */
  background: #c0eff7;

  transition: all 0.7s ease;
}
.sidebar li.nav-item.active a {
  color: #000;
}
.sidebar li:hover a {
  color: #000;
  text-decoration: none;
}
.table-container{
  overflow-x: auto;
}
.table-striped{
  display: table !important;
    text-wrap: nowrap;
    font-size: var(--table-font-size);
    position: relative;
}
.table-striped tr{
  position: sticky;
  top: 0;
}
.content {
  width: -webkit-fill-available;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
 
.navbar {
  background-color: #100F34;
  padding: 5px 14px ;
}

.navbar .fa {
  font-size: 1rem;
}
.alert-on-chat{
  margin: 0;
    padding: 11px;
}
.main-content {
  flex-grow: 1;
  padding: 20px;
  height: 100vh;
  overflow-y: scroll;
}.chat-main-content {
  flex-grow: 1;
  height: 78vh;
  padding: 0 20px 20px;
  overflow-y: scroll;
  background: #fff;
  transition: width 1s ease;
  width: calc(100% - -627px);
  /* width: 145%; */
}
/* style.css */

/* The scrollbar */
::-webkit-scrollbar {
  width: 6px; /* Width of the scrollbar */
  height: 6px; /* Height of the scrollbar */
}

/* The draggable part of the scrollbar */
::-webkit-scrollbar-thumb {
  background: #888; /* Color of the draggable part */
  border-radius: 6px; /* Rounded corners */
}

/* The part of the scrollbar not being dragged */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* Darker color when hovering */
}

/* The track (background) of the scrollbar */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the track */
  border-radius: 6px; /* Rounded corners */
}

/* Optional: Add styles for the scrollbar corners */
::-webkit-scrollbar-corner {
  background: #f1f1f1; /* Color of the scrollbar corner */
}
/* Firefox */
/* scrollbar-width: thin; "auto", "thin", or "none" */
/* scrollbar-color: #888 #f1f1f1; thumb color and track color */




.chat-main-content.half-width {
  width: 40%;
  height: 78vh;
 
}
.chat-main-content ::-webkit-scrollbar {
  width: 10px;
}
.chat-main-content.half-width ::-webkit-scrollbar {
  width: 10px;
}
.chat-visitor-container{
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.chat-visitor-container.half-width{
  width: 56%;
}
.d-none {
  display: none;
}

.main-content h3 , .chat-main-content h3{
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  font-size: 14px;
  text-decoration: underline;
   font-weight: bold;
   color: #000;
}
.user-info {
  text-align: left;
  margin-bottom: 8px;
  /* display: flex; */
  justify-content: center;
  justify-content: center;
  gap: 20px;
}

.user-info img {
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  margin-top: 11px;
}

.user-info .dropdown-menu {
  background-color: #343a40;
  border: none;
}

.user-info .dropdown-menu a {
  color: white;
}

.user-info .dropdown-menu a:hover {
  background-color: #495057;
}

.right-div i,
.left-div h1 {
  color: #fff;
}

.left-div h1 {
  font-size:  var(--heading-font-size);
  letter-spacing: 0.3px ;
}

.no-padding {
  padding: 0px;
}

.left-container button.dropdown-btn{
  background: #f8f3f3;
  color: #000;
  font-weight: 600;
  padding: 2px 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.top-bar {
  background: #0cc0df42;
  color: black;
}


.top-bar .left-div h2 {
  color: #100f34;
  line-height: 19px;
  font-size: var(--subheading-font-size);
  padding: 0;
  letter-spacing: 0.7px;
  margin: 0;
  margin: 10px 0px;
}

/*Dropdown*/
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: var(--subheading-font-size);
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.dropdown-btn:hover {
  background-color: #0056b3;
}

.status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.status-icon.online {
  background-color: #28a745;
  /* Green */
}

.offline {
  background-color: #dc3545;
  /* Red */
}

.away {
  background-color: #ffc107;
  /* Yellow */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  z-index: 1;
  top: 100%;
  left: 0;
  margin-top: 5px;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.dropdown-content.show {
  display: block;
  opacity: 1;
}

.dropdown-content .status-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s ease;
}

.dropdown-content .status-item:last-child {
  border-bottom: none;
}

.dropdown-content .status-item:hover {
  background-color: #f1f1f1;
}

.status-text {
  font-size: var(--subheading-font-size);
}

/*Dropdown*/




















/*Pop Up*/
body.modal-open {
  overflow: hidden;
}
.modal{

}
.journey-popup .modal-content {
  width: 88%;
  padding: 14px;
  padding-top: 0px;
}

.journey-popup .modal-header {
  border: 0px none;
}

.journey-popup h2 {
  color: rgba(0, 0, 0, 1);
  font-size: var(--subheading-font-size);
  font-weight: 700;
  line-height: 0;
  margin-bottom: 26px;
  margin-top: 25px;
}

.journey-popup p.feild-command {
  color: #7ba647;
  font-size: var(--subheading-font-size);
  font-weight: 600;
  margin-bottom: 10px;
}

.journey-popup p.note {
  color: #50764A;
  font-size: var(--table-font-size);
  line-height: 16.34px;
  font-weight: 600;
  padding-top: 10px;
}

.journey-popup .form-control {
  color: #16480E;
  background: #F5F5F5;
  border: 1px solid rgba(22, 72, 14, 1);
  margin-bottom: 20px;
  font-size: var(--subheading-font-size);
}

.journey-popup .progress-bar {
  background-color: #7ba647;
}

.journey-popup .progress {
  border: 1px solid rgba(22, 72, 14, 1);
  height: 11px;
}
.step-content p {
  margin-bottom: 0.4rem;
  font-size: var(--subheading-font-size);
}
.journey-popup .btn-primary {
  color: #fff;
  background-color: #7ba647;
  border-color: #7ba647;
}

.journey-popup .btn-secondary {
  color: rgba(80, 118, 74, 1);
  background-color: #fff;
  border-color: rgba(80, 118, 74, 1);
}

.journey-popup .alert-secondary {
  line-height: 19.07px;
  font-weight: 600;
  font-size: var(--subheading-font-size);
  color: rgba(80, 118, 74, 1);
  text-align: center;
  padding: 0.7rem;
  font-size: .82rem;
  margin-bottom: 0px;
}

.journey-popup .alert-secondary i {
  color: #000;
  font-size: var(--subheading-font-size);
  line-height: 18px;
  position: relative;
  top: 7px;
  left: -10px;
}

.journey-popup .press-enter {
  color: rgba(80, 118, 74, 1);
  line-height: 19.07px;
  font-size: var(--subheading-font-size);
  display: block;
  clear: both;
}

.journey-popup h5#exampleModalLongTitle {
  text-align: center;
  margin-bottom: 15px;
  color: rgba(0, 0, 0, 1);
  font-size: 600;
  font-size: var(--subheading-font-size);
  list-style: 21.79px;
}

.journey-popup .modal-body {
  padding-bottom: 0;
}

.journey-popup .modal-footer {
  border: 0px none;
}

.journey-popup .modal-footer button {
  width: 47.5%;
  float: left;
}

.journey-popup .modal-footer button.btn.btn-primary.btn-block {
  width: 100%;
  float: none;
  font-size: 15px;
}

.journey-popup .modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
  position: relative;
  right: -20px;
  font-size: 12px;
}
.modal-header button {
  font-size: 12px;
}

/*Pop Up*/
.modal-title{
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  border-bottom: 1px solid gainsboro;
  font-family: 'poppins';
  letter-spacing: 0.8px;
  color: #000;
}

/*Chat Table*/
.chat-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
  background-color: #fff;
  box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.chat-stats-table thead {
  background-color: #fff;
  color: #000;
}

.chat-stats-table th,
.chat-stats-table td {
  padding: 6px 6px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #000;
}

table td {
  vertical-align: middle;
  font-size: 12px;
  text-transform: capitalize;
  color: #000;
}

table td a {
  color: #7ba647;
}

.chat-stats-table td a {
  color: #2a2a2a;
}

.chat-stats-table td.text-center {
  text-align: center;
}

.chat-stats-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.chat-stats-table th {
  font-weight: bold;
  font-size: var(--table-font-size);
}

.chat-stats-table td {
  font-size: var(--table-font-size);
}

.chat-stats-table td:nth-child(2) {
  color: #28a745;
  /* Green for 'Yes' */
}

.chat-stats-table td:nth-child(2)::before {
  content: attr(data-status);
}

.chat-stats-table td:nth-child(2) {
  color: #dc3545;
  /* Red for 'No' */
}
.chat-id {
  display: flex;
  background-color: #7ba647;
  padding: 3px 4px;
  border-radius: 5px;
  margin-bottom: 2px;
  /* justify-content: space-evenly; */
  gap: 3px;
  font-size: var(--table-font-size);
  color: #fff;
  /* max-width: 130px; */
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
}
.visitor-name{
  cursor: pointer;
  text-transform: capitalize;
}

.green.chat-id {
  background-color: #7ba647;
}
.red.chat-id {
  background-color: #d80025;
}
.orange.chat-id {
  background-color: #47a0a6;
}

.chat-id span {
  color: white;
}
.chat-id button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
}
.toast {
  position: absolute;
  top: 50px;
  right: 20px;
  min-width: 200px;
  background-color: transparent;
  border: none;
  background: transparent;
}
.chat-stats-table img {
  width: 17px;
  height: 16px;

  object-fit: contain;
}
.browser-info {
  
  z-index: 1 !important;
}
.pagination-controls{
  margin: auto auto;
  display: table;
  color: #000;


}

.pagination-controls button{
  margin: 0px 10px;
  border: none;
  padding: 10px;
  font-size: 12px;
}.pagination-controls span{
  
  border: none;
  padding: 5px;
  font-size: 12px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  opacity: 1;
  float: left;
}

.tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #0d6066;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 125%; /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow (navigation bottom icon) */
.tooltip-arrow {
  position: absolute;
  top: 100%; /* Position arrow at the bottom of tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #0d6066 transparent transparent transparent; /* Creates downward-facing arrow */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


.chat-stats-table .chat-icon-visitor {
  background: #7ba647;
  /* padding: 10px; */
  border-radius: 5px;
  width: fit-content;
  padding: 2px 6px;
  position: relative;
  margin: 0px auto;
}
.chat-stats-table .chat-icon-visitor.red {
  background: #d80025;
}
.chat-stats-table .chat-icon-visitor.orange {
  background: #47a0a6;
}
.chat-icon-visitor img{
  width: 13px;
  height: 12px;
}
.chat-stats-table h4 {
  color: #2a2a2a;
  font-size: var(--table-font-size);
  font-weight: 600;
  margin-bottom: 0;
  font-size: 11px;
}
.chat-stats-table td  svg{
  font-size: var(--subheading-font-size);
  margin-left: 5px;
  margin-right: 5px;
  color: #777;;
}


/*Scrollbar*/
:root {
  --scrollbar-width: 12px;
  --scrollbar-track-color: #f1f1f1;
  --scrollbar-track-gradient: linear-gradient(45deg, #f1f1f1, #e1e1e1);
  --scrollbar-thumb-color: #888;
  --scrollbar-thumb-gradient: linear-gradient(45deg, #888, #666);
  --scrollbar-thumb-hover-color: #555;
  --scrollbar-thumb-hover-gradient: linear-gradient(45deg, #555, #333);
}

/* For Firefox */
.main-content {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* For WebKit browsers */
.main-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.main-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-gradient);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

.main-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-gradient);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-gradient);
}
/*Scrollbar*/

/* companies management  */
.company-header{
  padding: 10px;
  box-shadow: 0 0 grey;
  width: 100%;
  /* background-color: red; */
  display: flex;
  align-items: center;
  justify-content: end;
}
.company-header button{
  width: 117px;
    padding: 5px;
    font-size: var(--table-font-size);
 
    letter-spacing: 1px;
    border: 1px solid gray;
}
.company-header button:hover{
background-color: #dbdbdb;
}
.comp-header-row{
  width: 100%;
  display: flex;
  justify-content: end;
  background: white;
  padding: 7px 10px;
}

/* company modal  */
/* Modal overlay to cover the entire screen and center content */
.modal-overlay-comp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050; /* Adjust as needed */
}
.modal-overlay-comp .align-items-center {
  gap: 20px;
}
/* Modal content styling */
.modal-comp {
  width: 350px; /* Adjust the width to make the modal smaller */
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Modal header and footer alignment */
.modal-header-comp,
.modal-footer-comp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Modal title styling */
 
/* Close button styling */
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Form group styling */
.form-group-brand {
  margin-bottom: 0.6rem;
}
.brand-logo-image{
  object-fit: contain;
}
/* Button styling */
.btn-secondary,
.btn-primary {
  padding: 0.5rem 1rem;
}
.modal-comp .form-control:focus{
  box-shadow: inset 0 0 6px #d7d2d2;
  border: none;
}
.form-group-row-2 {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 5px;
}

.form-group-brand {
  flex: 1;
}

.form-control {
  width: 100%;
  padding: 3px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.input100 {
  
  padding: 0 30px 0 68px;
}
.modal-brand {
  width: max-content;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.form-label {
  color: #000;
}
label{
  color: #000;
}
.form-group label{
  color: #000 !important;
}
/* Chat Visitor components css  */

.grid-visitor-container {
  width: 100%;
  height: 100%;
  grid-gap: 10px;
  padding: 5px;
  display: grid
;
  background-color: #eee;
  box-sizing: border-box;
  flex-direction: row;
  display: flex
;
  box-shadow: 0px 0px 8px 0px #303030;
  padding: 8px 9px !important;
  overflow: hidden;
 
  background: transparent;
   
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

.grid-history-container{
  width: 1700px;
  height: 100%;
  grid-gap: 10px;
  padding: 5px;
  display: grid;
  background-color: #eee;
  box-sizing: border-box;
  flex-direction: row;
  display: flex;
  /* background: red; */
  overflow: hidden;

}

.visitor-box-left{
  width: 63%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.visitor-box-right{
  width: 40%;
  overflow-y: auto;
  overflow-x: clip;
  background-color: white;
 
}
.visitor-box-right::-webkit-scrollbar {
  width: 10px;
}
.chat-visitor-item-1 {
  grid-area: chat;
  background-color: #fff;
  display: flex
;
  flex-direction: column;
  overflow-y: auto;
  height: -webkit-fill-available;
  border-top-left-radius: 15px;
}



.chat-visitor-item-2 {
  grid-area: input;
  background-color: #ffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Ensure content stays at the bottom */
  border-bottom-left-radius: 15px;
}

.chat-visitor-item-3 {
  grid-area: detail;
  background-color: #fff;
  padding: 6px;
  margin-top: 31px;
}

.chat-visitor-item-4 {
  grid-area: stats;
  background-color: #f8f8f8;
}

.input-group input{
  font-size: var(--table-font-size);
  line-height: 25px;
  background-color: #F6F2F2;
  padding: 2px 7px;
  margin: 3px;
}.input-group textarea{
  font-size: var(--table-font-size);
 
  background-color: #F6F2F2;  
  
  padding: 2px 7px;
  margin: 3px;
}
.input-group input:focus{
  /* border: 1px solid #c7c7c7; */
   
  box-shadow: none;
}
.input-group textarea:focus{
  border: 1px solid #100F34;
  box-shadow: none;
}
.client-stats-head{
  display: flex;
  width: 100%;
}
.client-stats-head{
  /*background: linear-gradient(90deg, #326751 0%, #3B9570 47%, #128957 100%);*/
  background:#100F34;
  color: #fff;
  border: 2px solid #fff;
}
.client-stats-head div p{
  margin: 0;
  font-size: var(--heading-font-size);
  font-weight: 600;
}.client-stats-head div span{
  margin: 0;
  font-size: var(--table-font-size);

}
.chat-stats{
  text-align:center;
  flex: 1;
  display: flex ;
  padding: 8px 0px;
  flex-direction: column;
}
.past-chats-stats{

border-right: 2px solid #fff;
text-align: center;
}.past-visits-stats{
text-align: center;
border-right: 2px solid #fff;
}
.visitor-path-list ul li{
text-decoration: none;
list-style: none;
color: #787777;
font-size: var(--table-font-size);
}.visitor-path-list ul {
 margin: 0;
 padding: 0;
}
.visitor-path{
  padding: 15px;
}
.visitor-details-ip{
  border: 2px dotted #c4c4c4;
  padding: 15px;
}
.visitor-ip-stats{
  display: inline-block;
  padding:5px 8px;
  font-size: var(--table-font-size);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  margin-bottom: 5px;

}
.visitor-extra-stats{
  font-size: var(--table-font-size);
  color: #787777;
}
.visitor-extra-stats p{
  font-size: var(--table-font-size);
  margin: 0;
  margin-bottom: 5px;
}
.chat-extra-btns{
  display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--table-font-size);
}
/* Add to your CSS file */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.new-message-blink-row {
  /* animation: fadeIn 0.5s ease-out;
   */
   animation:  blink-row  1.5s steps(5, start) infinite;
}
@keyframes blink-row {
  0% {
    background: #fff1ad87;
}
50% {
    background: #f8f3dcbf;
}
75% {
    background: #fff6ca66;
}
100% {
    background: #fff0a8a8;
}
 }
.visitor-row-new:hover{
  background-color: rgb(222 222 222) !important;
  transition: color 0.3s ease; /* Smooth transition for height */
  cursor: pointer;
}
.visitor-idle{
  background-color:  #47A0A6 !important;
}
.visitor-not-served{
  background-color: #c7c5c5a8 !important;
  color: #000;
}
.visitor-close-chat{
  /* background-color:  !important; */
  background: #ff1111bd !important;
  color: #fff;

}

.visitor-close-chat .chatId{
  color: #fff;
}.visitor-close-chat button{
  color: #fff !important;
}
.visitor-left{
  background-color: purple !important;
}
.visitor-not-served span{
  color: #000;
}.visitor-not-served button{
  color: #000;
}
 .message-seen-tick{
  color: #47651a;
  font-size: 9px;
 }
 
 
.admin-message{
  text-align: start;
}.admin-message-right{
  text-align: end;
}
.tag-item {
  background-color: #eee;
  margin: 6px !important;
  padding: 2px 7px !important;
  font-size: var(--table-font-size);
  position: relative;
  border-radius: 5px;
  height: fit-content;
  display: flex;
  padding-right: 14px !important;
}
.tag-remove {
  position: absolute;
  top: -5px;
  right: -7px;
  display: block;
  background: #347057;
  z-index: 22;
  text-align: center;
  color: white;
  border-radius: 20px;
  width: 15px;
  height: 15px;
  line-height: 16px;
  cursor: pointer;
}
.tag-text{
text-transform: capitalize;
}
.tags-box-container {
  display: flex;
  flex-wrap: wrap;
  max-height: 75px;
  height: 0;
  overflow-y: auto;
  scrollbar-color: #347057 #eee; /* Custom scrollbar colors */
  scrollbar-width: thin; /* Thin scrollbar */
  transition: height 0.3s ease; /* Smooth transition for height */
}

/* Trigger the height increase when content is added */
.tags-box-container.active {
  background-color: white !important;
  color: black;
  height: 75px; /* Set the height to 75px when tags are present */
}
.tags-box-container::-webkit-scrollbar {
  width: 4px !important;
 
  background : #347057  #eee;
   
}
.visitor-path-list{
  height: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overflow-y: auto;
}
.closed-chatbox-sidebar ,.minimize-chatbox-sidebar{
text-align: center;
font-size: var(--table-font-size);
background: #56777a;
display: inline;
float: inline-end;
padding: 5px;
width: 25px;
height: 27px;
color: white;
text-transform: capitalize;
border-radius: 8px;
margin-top: 6px;
line-height: initial;
position: fixed;
margin-bottom: 5px;
box-shadow: 0 0 20px #d5d3d3;
right: 64px;
z-index: 2;
cursor: pointer;
}
.closed-chatbox-sidebar {
  right: 31px;
}
.visitor-extra-stats{
  display: flex;
}
/* Base styles for the icons */
.browser-icon, .os-icon {
  font-size: 13px;
  transition: color 0.3s ease;
  cursor: pointer;
}

/* Specific icon colors */
 .comment-message p{
  margin-bottom: 0;
  font-size: 10px;
 }
 .comment-message small{
  font-size: 10px;
 }
 @keyframes blink {
  50% {
    background-color: #c0f7cc;
  }
}

.blink {
  animation: blink 1s step-start infinite;
}

.newMessageNoti {
  color: white;
  background: orange;
  border-radius: 50%;
  margin: auto;
  text-align: center;
  width: 15px;
  height: 15px;
  position: absolute;
  right: -6px;
  font-size: 10px;
  top: -7px;
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% {
    background-color: orange;
    transform: scale(1);
    opacity: 1;
  }
  25% {
    background-color: rgb(255, 167, 38); /* Lighter orange */
    transform: scale(1.05); /* Slight scaling */
    opacity: 0.9;
  }
  50% {
    background-color: rgb(255, 87, 34); /* Darker orange */
    transform: scale(1.1); /* Slightly larger scaling */
    opacity: 0.8;
  }
  75% {
    background-color: rgb(245, 124, 0); /* Intermediate orange */
    transform: scale(1.05); /* Back to initial scaling */
    opacity: 0.9;
  }
}
.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3ed78c;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s infinite linear;
  /* position: absolute; */
  display: flex;
  top: 10px;
  left: calc(50% - 12px);
  justify-content: center;
  align-items: center;
  margin: qa;
  margin: auto;
  margin-top: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.load-old-messages-button {
  display: flex
;
  margin: auto;
  border: none;
  font-size: 10px;
  padding: 5px 10px;
  background: #56777a;
  color: #ffffffee;
  border-radius: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.new-message-notification{
  width: fit-content;
    position: sticky;
    background-color: yellow;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
    /* bottom: 35px; */
    top: 75%;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    font-size: var(--table-font-size);
    background: cornflowerblue;
    color: white;
    padding: 7px 18px;
    cursor: pointer;
}
.chat-messages{
  /* scroll-behavior: smooth; */
}
.chat-messages {
  display: flex;
  flex-direction: column;
 
}
.chat-message-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.typing-user{
  font-size: var(--table-font-size);
  margin-left: 3px;
  /* color: rgb(159, 159, 159); */
  font-size: 10px;
  color: black;
  overflow-wrap: anywhere;
}

.message-bubble {
  margin: 5px;
  display: inline-flex;
  flex-direction: row;
  border-radius: 8px;
  padding: 5px 5px;
  /* background: linear-gradient(45deg, #00dfb5, #10b578); */
  background-color: white;
  width: -webkit-fill-available;
  max-width: 100%;
  white-space: pre-wrap;
  justify-content: space-between;
}
.message-box-textarea{
  font-size: 12px;
  padding: 5px 5px;
}
.admin-message-right {
  align-self: flex-end; /* Align the message to the right */
  /* background:linear-gradient(235deg, #00cfdf78, #109eb5a1) */
  background-color: white;
}

.admin-message {
  align-self: flex-start; /* Align admin message to the left */
  /* background: linear-gradient(90deg, #00dfb5a6, #10b5785e) */
  background-color: white;
}

.client-message {
  align-self: flex-start; /* Align visitor message to the left */
  /* background:linear-gradient(90deg, #00dfb5a6, #10b5785e) */
  /* background-color: white; */
    background: #cccccc4f;
    padding: 8px 12px;
}
.closed_chat_visitor{
  border-bottom: 2px solid #ff4f4f;
}
.note_served{
  border-bottom:2px solid gray;
  
}
.active_visitor_chat{
  border-bottom:2px solid green;
}
.idle_vistitor_chat{
  border-bottom:2px solid #47A0A6 ;
}

.user-msg {
  font-size: var(--table-font-size);
  text-align: left;
  overflow-wrap: anywhere;
}

.new-message-notification {
  position: sticky;
  bottom: 0;
  
  padding: 5px;
  text-align: center;
  cursor: pointer;
}
.visitorChat-header{
  display: none;
}
.visitor-non-active{
  background-color: #fffcbdc7 !important;
  color: #000 !important;
}.visitor-non-active span{
  color: #000 !important;
}.visitor-non-active button{
  color: #000 !important;
}.visitor-non-active img{
  filter: invert(100%);
}
.emoji-picker-container{
  position: absolute;
  bottom: 45px;

}
/* This targets the emoji inside the picker */
.emoji-picker-react .emoji-categories button,
.emoji-picker-react .emoji-scroll-wrapper .emoji-img {
    width: 11px !important; /* Adjust width for smaller size */
    height: 11px !important; /* Adjust height for smaller size */
}

/* You can also target specific container or wrapper if needed */
.emoji-picker-container .emoji-picker-react {
    font-size: var(--table-font-size) !important;
}
/* To resize the emoji images in the emoji picker */
.emoji-picker-react .emoji-img {
  width: 11px !important;  /* Adjust the size as per your needs */
  height: 11px !important; /* Adjust the size as per your needs */
}

/* Optional: Adjust the emoji categories icons as well */
.emoji-picker-react .emoji-categories button {
  width: 11px !important;
  height: 25px !important;
}

/* Optional: Adjust the size of emoji picker container if needed */
.emoji-picker-react {
  font-size: var(--table-font-size) !important; /* Adjust the picker font size */
}
/* Custom styles for EmojiPickerReact */
.EmojiPickerReact {
  --epr-emoji-size: 22px  !important; /* Adjust emoji size */
  --epr-emoji-gap: 5px; /* Adjust gap between emojis */
  --epr-hover-bg-color: rgba(0, 0, 0, 0.1); /* Background color when hovering over emoji */
  --epr-bg-color: #ffffff; /* Picker background color */
  --epr-text-color: #000000; /* Text color in the picker */
  --epr-category-label-bg-color: #f0f0f0; /* Category label background color */
}

/* Optional: Dark theme overrides */
.EmojiPickerReact.epr-dark-theme {
  --epr-bg-color: #1e1e1e;
  --epr-text-color: #f5f5f5;
  --epr-hover-bg-color: rgba(255, 255, 255, 0.1);
  --epr-category-label-bg-color: #2b2b2b;
}

.emoji-btn:hover{
color: #00414d;
}
.no-rating-given{
  opacity: 0.7;
}
.chat_seen_by_client{
  font-size: 12px;
    color: #635e5e;
    margin-left: 8px;
}
.visitor-url-chat{
  color: #5e5e5e;
  text-decoration: none;
  font-size: var(--table-font-size);
  
}
.visitor-path-history{
  padding: 8px;
}
.chat-visitor-status-btn{
  color: white;
  border: none;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 6px;
  margin-bottom: 10px;
}
.pointer-cursor{
  cursor: pointer;
}
.active-history-row {
  /* background-color: #309169 !important; */
  COLOR: #000 !important;
  background-color: #c0eff7 !important;
}.active-history-row td {
  background-color: #c0eff7 !important;
  COLOR: #000 !important;
}
.new-history-row{
  background-color: #d3b3001f !important; 
}
.new-history-row td{
 
    background-color:#ffffff1f !important
 
}
.history-visitors-table td:nth-child(2) {
  color: #000000 !important;
  /* Red for 'No' */
}
.history-visitors-table td{
  text-transform: unset;
}
.history-visitors-table .served_by{
  text-transform: capitalize;
  white-space: nowrap;
}
.active-history-row td:nth-child(2)  {
  
  COLOR: #000 !important;
}
.history-table-column.message-count {
  text-align: center;
}
.search-input-group {
  max-width: 500px;
  border: 1px solid #ccc;
  border-radius: 25px;
  overflow: hidden;
}

.input-group-text {
  background-color: transparent;
  color: #888;
}
.search-input-group input{
  border: none !important;
  background-color: transparent;
}

.comp-header-row.form-control {
  
  border-radius: 4px;border: 1px solid #ccc;margin-top: 0px;  padding: 7px 10px;
}
.company-header button:hover {
  background-color: #7ba647;
  color: #fff;
}
button.m-1.p-btn {
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
}
.date-filter-btn{
  font-size: 12px;
  border: 1px solid rgb(80, 222, 135);
}.date-filter-btn:hover{
  font-size: 12px;
  box-shadow: 0 0 10px #ededed;
  border: 1px solid rgb(80, 222, 135);
  box-shadow: 0 0 10px #ededed;
  color: #000;
}
.accept-btn{
  font-size: 12px;
}
.history-date-picker{
  z-index: 10230;
  position: absolute;
  right: 0;
  width: min-content;
}
.message-bubble .chat-message-right span{
  text-align: right;
  display: flex;
}
.update-btns{
  background: transparent;
    color: black;
    border: 1px solid green;
    color: green;
  font-size: var(--subheading-font-size);
}

.update-btns:hover{

  color: white;
  background-color: green; 
}

.profile-card{
  font-size: var(--subheading-font-size);
}
.profile-card div >h3{
  /* font-size: var(--heading-font-size); */
  font-size: large;
}
.update-profile-modal {
  font-size: 13px;
}
.update-profile-modal form div > input{
  font-size: 13px;
}
table td {
  vertical-align: middle;
}

.left-container img {
  /* display: none; */
}
 

.tab-content {
  /* box-shadow: 4px 4px 15px #000; */
  height: calc(100vh - 47px);
}
.comp-header-row a {
  width: 117px;
  padding: 5px;
  font-size: var(--table-font-size);
  letter-spacing: 1px;
  border: 1px solid gray;
  background: none !important;
  background-color: #fff;
}
.comp-header-row a:hover {
  background: #dbdbdb!important;
}
.chat-stats-table td {
  font-size: 12px;
}
.logout-btn{
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
.form-check {
  margin-bottom: 10px;
}
.header-dashboard .right-div {
  display: flex;
  color: white;
  font-size: 11px;
  justify-content: center;
  align-items: center;
}
.header-dashboard .right-div h5 {
  margin-bottom: 0;
  margin-right: 10px;
  font-size: 13px;
  padding: 5px 15px;
  text-transform: capitalize;
}
 

 

.user-info img {
    position: relative;
    top: -12px;
}

.navbar {
    padding: 10px 0;
}

.tab {
    background: #1d1d1d;
border:0;}

button.tab-button {
    background:#1d1d1d
}


button.close-tab {
  position: relative;
  top: 0;
  background: transparent;
  right: 4px;
  height: 34px;
  font-size: 14px;
}

.tab-ring.false.visitor-left {
    /* background:purple !important; */
}

.visitor-landed-on{
  text-transform: none;
}
.text-default{
  text-transform: none;
}
.copy-visitor-url {
  position: absolute;
    top: -90px;
    right: 0;
    padding: 6px 30px;
}
.copy-visitor-url-history{
 
    position: absolute;
    top: -2px;
    right: 0;
    padding: 6px 30px;

}
.visitor-tags-updated-btns{
  
    background: transparent;
    color: black;
    border: 1px solid #100f34;
    color: #100f34;
    font-size: var(--subheading-font-size);
    padding: 4px 11px;
    margin-top: 0px;
 
}

.visitor-tags-updated-btns:hover{
  background-color: #100f34;
  color: white;
}
.input-group input, .input-group textarea {
  border: 1px solid #e8e3e3;
  padding: 2px 5px 2px 5px;
  font-size: 11px;
  border-radius: 4px;
}

.visitor-details-ip {
  border-right:0;
  border-left:0;
}


.client-stats-head div p {
  font-weight: 400;
}

.sidebar .nav-item a {
  font-weight: normal;
  font-family:Verdana, Arial;
  font-size:11px;
  padding-left:10px;
  
}



.sidebar .nav-item i {
  margin-right:10px;
}
.users-list{
 
  height: 30vh;
  /* background-color: red; */
  /* overflow: scroll; */
  overflow-y: scroll;
  padding: 4px 6px;
}
.online-users-heading{
  padding-left: 16px;
  margin-top: 10px;
  font-size: 17px;
  color: #d0d0d0;
  /* padding: 0px 10px 0px 0px; */
  text-transform: capitalize;
}
.online-users-heading span{
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}
.active-users{
padding:3px 6px 0px 17px;
}
.remaining-users{
padding: 3px 6px 0px 17px;
}
.active-users div, .remaining-users div{
  font-family: Arial;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #8ca5a8 !important;
}
.user-item{
  display: flex;
  justify-content: space-between;
}
.tabs-header button {
  padding-left: 10px;
}
.no-visitor-found{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  width: 100%;
}
.no-visitor-found h3{
  font-size: 14px;
  margin-top: 20px;
  color: #363636;
}
 
.visitor-ip-stats {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* padding: 15px 20px; */
  border-radius: 12px;
  font-weight: bold;
  color: #ffffff;
  /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
  /* margin: 15px 0; */
  transition: background-color 0.3s ease, transform 0.3s ease;
 
  position: relative;
  overflow: hidden;
  flex-direction: column;
  font-size: 10px;
  margin: 0px;
  padding: 0;
}
.visitor-ip-stats span {
  font-size: 12px;
  text-align: center;
 
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 5px;
  /* margin: 3px 20px 2px 20px; */
  width: -webkit-fill-available;
  cursor: default;
}
/* Green background for Good IP */
.good-ip {
  background-color: #4caf50;
 
}

/* Red background for Bad IP */
.bad-ip {
  background-color: #f44336; /* A softer red shade */
 
}

.toggle-button {
  background-color: #ffffff;
  border: none;
  padding: 5px 10px;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;

  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  margin-top: 5px;
  margin-bottom: 4px;
  margin-top: 4px;
  /* margin: 3px 20px 2px 20px; */
}
.toggle-button:hover {
  background-color: #f0f0f0; /* Light gray on hover */
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.15);
}

.toggle-button:active {
  transform: scale(0.98); /* Slight button press effect */
}
.chat-stats-table td {
  font-size: 12px;
  color: #000;
  }
  .user-msg {
    font-size: var(--table-font-size);
     text-align: left;
      color: #000;
    }
    .chat-extra-btns{
      color: #000;
    }

.box-show-pk input{
margin-right: 4px;
margin-left: 6px;
cursor: pointer;
}    
.box-show-pk label{
  display: flex;
  /* justify-content: center; */
  align-items: center;
  margin-right: 18px;
}
.chat-left-div-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hide-pakistan-visitors{
  display: none;
}
.inActive_feature{
  display: none;
}
.visitor-ip-stats
{
  margin-bottom: 5px;
}
td.history-landing-url {
  /* width: 30vw; */
  overflow-wrap: anywhere;
}
.flex-1{
  flex: 1;
}
.show-alert {
  position: absolute;
  top: -46px;
  right: 20px;
  min-width: 200px;
  background-color: transparent;
  border: none;
  background: transparent;
  opacity: 0;
  transform: translateY(-20px); /* Start slightly above */
  transition: opacity 0.4s ease, transform 0.4s ease; /* Smooth transition */
}
.show-alert.active {
  opacity: 1;
  transform: translateY(0); /* Move to the original position */
}
.sidebar {
  background-color: #00373e !important;
  width: 210px;
}

.top-bar {
  background: #cbd9da !important;
}

nav.navbar.navbar-light {
  background: #00383f !important;
}

.sidebar .nav-item{
  border:0;
}
.sidebar .nav-item a i{
  font-size:16px;
padding-right:5px;}
.sidebar .nav-item a {
  font-family:Arial;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
color:#8ca5a8 !important;
}
 
.sidebar li.nav-item.active, .sidebar li.nav-item:hover {
  background-color: rgb(86, 119, 122) !important;
  border: none !important;
}

.sidebar li.nav-item.active a, .sidebar li.nav-item:hover a{
  color:#fff !important;
}

th{
  font-weight:400 !important;
  font-size:12px !important;
  background:#fdfdfd;
}


.active_visitor_chat {
  box-shadow: 0px 1px 1px #b7eba9 !important;
  border-bottom: 0;
}


.idle_vistitor_chat {
border-bottom:0;    box-shadow: 0px 1px 1px #00a4a9 !important;
}


thead.closed_chat_visitor {
  box-shadow: 0px 1px 1px #eba9a9 !important;
  border-bottom: 0;}

.chat-stats-table td{
  font-size:12px;
  padding:10px 0 10px 5px;
color:#555 !important;    
}

h4.pointer.visitor-name {
  font-weight:normal;
}

.chat-icon-visitor {
float:right;
}



.chat-visitor-container h3 {
  font-size: 15px;
  text-decoration: none;
  font-weight: normal;
  margin-top: 40px !important;
  border-bottom: 0;
  color: #444 !important;
}

table.chat-stats-table {
  box-shadow: none;
}
.collapsible-header{
  cursor: pointer;
 
}
.collapsible-header span{
  font-size: 17px;
}

.container-fluid-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  /* flex-direction: column; */
}
.container-fluid-header h3{
  font-size: 15px;
  color: black;    letter-spacing: 0.4px;
  color: #393939;
  font-weight: 600;
  padding: 5px;
  margin-top: 3px;
  padding-left: 0px;
}
.container-fluid-header button{
  width: 117px;
    padding: 5px;
    font-size: var(--table-font-size);
    letter-spacing: 1px;
    border: 1px solid gray;
}
.chat-visitor-container table {
  border-radius:3px !important;
  box-shadow:0px 0px 1px #898585;
  }
  .chat-visitor-container table th{
      color:#333;
      font-weight:300 !important;
  }
  .chat-visitor-container table td{
  /* width:1px; */
  }
  .chat-visitor-container table *{
  font-size:10px;
  text-align:left !important;
  }
  
  .chat-icon-visitor img{
  width:11px;
  }
  
  .chat-icon-visitor {
  font-size:4px !important;
  padding:3px 4px !important;
  }
  
  .browser-info img{width:14px;margin:0px !important;}
  
  h3.collapsible-header{
  padding-bottom:0px;
  }
  
  h3.collapsible-header span{
      background: #00383f;
      width:17px;
      display:inline-flex;
      color:#fff;
      font-size: 13px;
      height:17px;
      position: relative;
      text-align:center;
      padding:0 !important;
      align-content: center;
      justify-content: center;
      
      top: -3px;
      margin-left: 20px;
      border-radius: 4px;
  }
  
  td.browser-info {
  width: 170px;
  }
  
  .chat-icon-visitor {
  float: left;
  }
  
  .newMessageNoti {
  background: #d80025 !important;
  font-size: 0px !important;
  width: 7px;
  height: 7px;
  top: -1px;
  right: -2px;
  }
  
  .chat-stats-table tr:nth-child(2n) {
      background: #fff;
  }
  .chat-stats {
    background: #f8f8f8;
    color: #000;
}

.chat-stats p, .chat-stats span{
 font-size: 11px !important;

padding:0px !important;
margin:0 !important;
line-height:13px;
}


.client-details-box .input-group input, .client-details-box .input-group textarea {
 background:#f8f8f8;
}

.visitor-url-chat {
    font-size: 11px;
}

.visitor-path-list svg {
    display: none;
}
.client-stats-head {
  display: flex
;
  width: 100%;
  /* background: linear-gradient(90deg, #326751 0%, #3B9570 47%, #128957 100%); */
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  flex-direction: column;
  padding: 0px 11px;
}.chat-stats {
  text-align: center;
  flex: 1;
  display: block;
  padding: 8px 0px;
  /* flex-direction: row; */
}.client-stats-head div p {
  font-weight: 400;
  float: right;
}.client-stats-head div span {
  margin: 0;
  float: left;
  font-size: var(--table-font-size);
}
.visitor-typing-area{
  height: 85px;
  background-color: #dddddd91;
  border: 1px solid #cbcbcb;
  border-radius: 10px;
  color: #000 !important;
  overflow: scroll;
}
.visitor-typing-area {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  resize: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: row-resize;
  background: #ddd;
}

.resize-handle:hover {
  background: #bbb;
}

.typing-indicator {
 padding-top: 10px;
 height: 100%;
   
}
.admin-typing-indicator{
  padding-top: 10px;
}
.typing-user {
  margin-bottom: 5px;  height: 100%;
}

 .typing-textarea {
  resize: none;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
   
  height: 100%;
  overflow: scroll;
}
/* // new  */
 

 
.collapse-button {
  
  font-weight: bold;
}

.users-list {
  max-height: 500px; /* Maximum height when expanded */
  
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 1;
}

.users-list.collapsed {
  max-height: 0; /* Hide content when collapsed */
  opacity: 0;
}

.users-list.expanded {
  max-height: 500px; /* Show content when expanded */
  opacity: 1;
}

 

 

.no-users {
  font-style: italic;
  color: #888;
  padding: 8px;
  text-align: center;
}

/* setting page css  */
.settings-container {
  padding: 0px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  height: max-content;
}

.settings-header {
  margin-bottom: 20px;
  width: 100%;
  /* background-color: #eeff; */
  justify-content: flex-start;
}

.settings-tabs {
  display: flex;
  margin-bottom: 10px;
}
.settings-tab-content{
  width: 100%;
  height: 100%;
}
.settings-tab-button {
  padding: 10px 20px;
  margin-right: 10px;
 
  /* background-color: #f0f0f0; */
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.settings-tab-button.active {
    background-color: #c0eff7;
    border: none;
    color: #000;
    font-weight: 600;
}
.settings-tab-button:hover{
  background-color: #b0e0f0 !important;
}
.settings-tab-content {
  padding: 15px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 5px;
}

.shortcuts-container {
  /*padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  color: #333;
}

 
  .shortcut-input-wrapper {
    display: flex
;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}


.shortcut-input {
  flex: 1;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.shortcut-add-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.shortcut-add-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    color: #000;
    font-weight: 600;
}

.shortcut-add-button:hover:not(:disabled) {
  background-color: #0056b3;
}

.shortcuts-list {
  list-style: none;
  padding: 0;
}

.shortcut-item {
  /*display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: box-shadow 0.3s;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #e7e7e7;
}

.shortcut-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shortcut-text {
  font-size: 1rem;
  color: #333;
}

.shortcut-delete-button {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.shortcut-delete-button:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.shortcut-delete-button:hover:not(:disabled) {
  color: #a71d2a;
}
 

 

.shortcut-text {
  white-space: pre-wrap; /* Preserve line breaks and whitespace in shortcuts */
  word-break: break-word; /* Break words to avoid overflow */
  
}

 
.brand-tooltip {
  position: relative;
  cursor: pointer;
}

.brand-tooltip::after {
  content: attr(data-title);
  position: absolute;
  left: 40%;
  bottom: 100%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}

.brand-tooltip:hover::after {
  opacity: 1;
}

.close-btn-red {
  background-color:#ed3434 !important;
  color: white !important;
  border: none !important;
}
.close-btn-red:hover {
  background-color: darkred !important;
}

.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.shortcuts-table td, .shortcuts-table th {
  padding: 10px;
  text-align: center;
  color: #000;
  border-left: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}
.shortcuts-table th{
  background-color:  #efefef !important;
}

.shortcut-delete-button {
  background: none;
  border: none;
  cursor: pointer;
}

.shortcut-private {
  
  color: #000;
}
.shortcut-item {
  display: table-row;
   padding: 10px 15px;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 5px;
   margin-bottom: 10px;
   transition: box-shadow 0.3s;
 }
 .shortcuts-table th:nth-child(2), .shortcuts-table td:nth-child(2) {
  padding: 10px;
  text-align: left;
  width: 90%;
} .shortcuts-table th:nth-child(1), .shortcuts-table td:nth-child(1) {
 
  text-align: center;
 
}
/* General Container Styling */
.sound-container {
  max-width: 96%;
  margin: 27px auto;
  background-color: #ffffff;
  padding: 20px 0px;
  border-radius: 7px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 13%);
  display: flex
;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sound-header {
  font-size: 18px;
  color: #333333;
  text-align: center;
  margin-bottom: 19px;
}

/* Table Styling */
.sound-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.sound-table th,
.sound-table td {
  padding: 6px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.sound-table th {
  background-color: #f9f9f9;
  font-size: 11px;
  color: #555555;
  text-transform: uppercase;
  font-weight: 600;
}

.sound-table tr:nth-child(even) {
  background-color: #f6f6f6;
}

.sound-table tr:hover {
  background-color: #f0f8ff;
}

/* Tone Name Styling */
.sound-toneName {
  font-weight: 500;
  font-size: 11px;
  color: #333333;
}

/* Radio Buttons */
.sound-radioInput {
  /* transform: scale(1.2); */
  accent-color: #007bff;
  margin-right: 10px;
}

/* Play Button */
.sound-playButton {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sound-playButton:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

/* Save Button */
.sound-saveButton {
 
  background-color: #28a745;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-top: 20px;
   
}

.sound-saveButton:hover {
  background-color: #218838;
 
}
.chat-header{
  justify-content: flex-start;
}
.chat-filter-container{
 
   

}
.chat-filter-box{
   
  /* width: 400px; */
  background: red;
  /* right: 0; */
  height: 100vh;
  left: 0;
  z-index: 8888;
  width: 100%;
  height: 35%;
  grid-gap: 10px;
  padding: 5px;
  display: grid
;
  background-color: #eee;
  box-sizing: border-box;
  flex-direction: row;
  display: flex
;
  box-shadow: 0px 0px 8px 0px #303030;
  padding: 8px 9px !important;
  overflow: hidden;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  justify-content: space-between;
}
.chat-filter-container h2{
  text-align: center;
 
  margin-top: 10px;
  font-size: 19px;
  margin-bottom: 16px;
}
.chat-filter-container {
display: flex;
 
align-items: center;
flex-direction: column;
overflow-y: auto;
width: 100%;
}

 

.chat-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  height: 133px;
  overflow-y: auto;
}

.chat-filter-item {
  display: flex
  ;
      align-items: center;
      gap: 15px;
      background-color: #fff;
      /* border: 1px solid #ddd; */
      padding: 8px 12px;
      border-radius: 4px;
      min-width: 235px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-filter-item label {
  font-size: 1rem;
}

.chat-filter-item input[type="checkbox"] {
  transform: scale(1.2);
  cursor: pointer;
}

.filter-chat-close-btn{
  border: 1px solid #ddd;
}

.filter-chat-close-btn:hover{
  background-color: #ddd;
}
.chat-filter-wrapper {
  position: fixed;
  top: -100%; /* Initially hidden */
  left: 0;
  width: 100%;
  z-index: 8888;
  transition: top 0.8s ease-in-out;
}

.chat-filter-wrapper.show {
  top: 0; /* Slide into view */
}

.chat-filter-wrapper.hide {
  top: -100%; /* Slide out of view */
}

.chat-filter-box {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: 100%;
  box-shadow: 0px 0px 8px 0px #303030;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.chat-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.chat-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  min-width: 150px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 170px;
}

.chat-filter-item label {
  font-size: 1rem;
}

.filter-chat-close-btn {
  margin-top: 16px;
}
.chat-filter-search {
  margin-bottom: 10px;
  width: 100%;
}

.chat-filter-search input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.chat-filter-actions {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.chat-filter-actions .btn {
  /* padding: 8px 12px; */
  font-size: 14px;
}

.chat-bottom-area{
  border-bottom-left-radius: 13px;
  padding-left: 12px;
  padding-left: 13px !important;

}

 
 

 
 

.select-all-btn,
.unselect-all-btn {
  margin: 0 5px;
}

.chat-filter-search {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

 

.chat-filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
   
  transition: border-color 0.3s;
}

.chat-filter-item.selected {
  border-color: #007bff;
  background-color: #e8f5ff;
}

.brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
 
}

.brand-name {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.brand-name {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-transform: capitalize;
}

.loading,
.error {
  text-align: center;
  color: #ff0000;
}

 .selected-brands{
  text-align: center;
    align-items: center;
    display: flex
;
    display: flex
;
    display: flex
;
    font-size: 12px;
    width: 100%;
   
    border-radius: 11px;
    padding-left: 5px;
    overflow-x: auto;
    padding-bottom: 6px;  
 }  
 .header-chat-filter{
  display: flex;
  /* flex-direction: column; */
  width: 100%;
  justify-content: space-between;
}
.chat-brand-name {
  text-align: center;
  font-size: 12px;
  /* font-weight: bold; */
  background: #efefef;
  margin: 0px 3px;
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: 10px;
}
.chat-header button {
  margin: 0;
  padding: 0;
  height: 29px;}

 .right-div .supportus img {
  height: 36px;
  display: block;
  /* position: absolute; */
  top: 5px;
  background: linear-gradient(274deg, #003940, #52522b, #003940);
  padding: 3px 0px;
  border-radius: 0;
  margin: 0 auto;
  right: 170px;
}
.brand-logo-container{
  display: flex
  ;
      margin-top: 4px;
      margin-bottom: -10px;
align-items: center;
justify-content: center;
}
.brand-logo-container div input{
  margin-right: 5px;
}
.assign-brand-modal-body{
  height: 48vh;
    overflow: scroll;
}
.modal-overlay-comp .form-group{
  margin: 8px;
}
.modal-footer-comp{
  margin-top: 13px;
}
.alert-by-admin{

  z-index: 1;
  height: 36px;
  right: 0;
  width: -webkit-fill-available;
  text-align: center;
  padding: 5px 0px 0px 0px;
  display: block;
  position: absolute;
  top: 0;
  /* width: 300px; */
  background: #fff3cd !important;
  color: #856404;
  padding-top: 10px;
  transition: all 0.4s ease-in-out;

}
.alert-hide-button, .alert-show-button{
  position: absolute;
  top: 27px;
  background: #856404 !important;
  left: 49%;
  border-radius: 38px;
  cursor: pointer;
  color:#fff3cd ;


}
.alert-hide-button.hide{
  display: none;
}.alert-show-button.hide{
  display: none;
}
.alert-show-button.show {
  top: 31px;
  color: #56777a;
  border: 1px solid #b1b1b1;
  background: #ffffff !important;
}
.alert-hide-button.targeted-none{
  display: none;
}
.alert-by-admin.hide{
  top: -36px;
} 
.alert-dismiss-button{
  position: absolute;
  right: 8px;
  background: transparent;
  padding: 2px;
  margin: 0;
  border: none;
  font-size: 16px;
  margin-top: -5px;
}
.alert-by-admin {
  z-index: 1;
  height: 32px;
  right: 0;
  width: -webkit-fill-available;
  text-align: center;
  padding: 0px 0px 0px 0px;
  display: block;
  position: absolute;
  top: 0;
  /* width: 300px; */
  background: #ee3939 !important;
  color: #ffffff;
  padding-top: 8px;
  transition: all 0.4s ease-in-out;
  text-align: left;
  padding-left: 12px;
}
.alert-by-admin button{
  color: white;
}
.alert-toggle-btn{
  white-space: nowrap;
}
.alert-toggle-btn-deactivate{
  /* background-color: red !important; */
}
.alert-hide-button, .alert-show-button {
  position: absolute;
  top: 21px;
  background: #ee3939 !important;
  left: 48%;
  border-radius: 38px;
  cursor: pointer;
  color: #ffffff;
  font-size: 8px;
}
.alert-form {
  /* max-width: 600px; */
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.alert-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.alert-input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.alert-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.alert-button {
  padding: 12px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.alert-button:hover {
  background-color: #0056b3;
  transform: scale(1.03);
}

.alert-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
}

.alert-select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.alert-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.alert-date {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.alert-date:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
.button-group {
  display: flex;
  gap: 10px; /* Adjust the spacing between buttons */
  justify-content: start; /* Align buttons to the left (optional) */
}

.button-group .btn {
  padding: 5px 10px; /* Adjust padding for consistent button size */
  border-radius: 4px; /* Optional: Rounded corners for modern design */
}

.alert-toggle-btn-deactivate {
  background-color: #dc3545; /* Red color for deactivate button */
  border: none;
}

.alert-toggle-btn {
  background-color: #007bff; /* Blue color for other buttons */
  border: none;
  color: #fff; /* White text for buttons */
}
 .history-visitors-total-records{
  display: flex
;
    justify-content: flex-end;
    padding-right: 15px;
    color: #848484ee;
    border-bottom: 1px solid #e1e1e1c4;
 }


 /* Container for the entire search and filter section */
.search-container {
  position: relative;
  max-width: 600px;
  width: 513px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

/* Styling the input group */
.search-container .input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
}

.search-container .form-control {
  flex: 1;
  padding: 5px 10px;
  border: none;
  outline: none;
  font-size: 11px;
  color: #333;
  
}

.search-container .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  color: #000;
  transition: color 0.3s ease;
}
.history-search-icon{
  position: absolute;
  left: 4px;
  color: #a5a5a5;
}
.search-container .input-group input{
  padding-left: 32px !important;
}
.search-container .input-group-text:hover {
  color: #007bff;
}

/* Settings dropdown */
.settings-dropdown {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 9999;
}

/* Header for filter options */
.settings-dropdown h6 {
  margin-top: 0;
  font-size: 14px;
  color: #555;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
}

/* Inline checkboxes */
.settings-dropdown .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.checkbox-group div {
  display: flex;
  align-items: center;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 8px;
}

.checkbox-group label {
  font-size: 12px;
  color: #333;
  cursor: pointer;
}

/* Multi-select brand dropdown */
.multi-select {
  position: relative;
  margin-top: -5px;
}

.multi-select button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f8f9fa;
  font-size: 12px;
  color: #333;
  text-align: left;
  cursor: pointer;
}

.multi-select-options {
  position: absolute;
  width: 100%;
  background-color: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 270px;
  overflow-y: auto;
  display: none;
  z-index: 1001;
}

.multi-select-options.active {
  display: block;
  background-color: white;
}

.multi-select-options label {
  display: flex;
  padding: 10px;
  cursor: pointer;
  font-size: 12px;
  color: black;
  justify-content: flex-start;
}
.multi-select-options label:hover{
  background-color: #d4d4d4;
}
.multi-select-options input[type="checkbox"] {
  margin-right: 8px;
}


.multi-select-options {
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-height: 270px;
  overflow-y: auto;
}
.toggle-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.toggle-btn {
  padding: 5px 10px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.toggle-btn:hover {
  background: #ebf1f1;
}
.brand-option {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.brand-search-input {
  padding: 7px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  margin-bottom: 4px;
}
.brand-search-input:focus-visible{
  border: none;
}
.message-count{
  text-align: center;
}
.custom-select {
  appearance: none; /* Hides the default arrow */
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE2IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgM0w4IDdMMTUgM0wxNCAyTDEwLjUgNEg1LjVMMSAyTDEgM1oiIGZpbGw9IiM4MThDQTgiLz48L3N2Zz4=')
    no-repeat right 10px center;
  background-size: 13px;
  padding-right: 30px; /* Adds spacing for the arrow */
}

.custom-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.search-input-container {
  position: relative;
  width: 75%; /* Matches the width of the input */
}

.search-input {
  width: 100%;
  padding-right: 35px; /* Add space for the icon */
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 54%;
  transform: translateY(-50%);
  color: #555; /* Icon color */
  pointer-events: none; /* Prevent interaction with the icon */
}
.table tr td.inactive{
  color: red;

}
.total-users{
  margin-left: 20px;
  color: #a1a1a1;
}
.brand-uploaded-image img{
  /* width: 30px; */
  height: 30px;
  object-fit: contain;
  max-width: 100px;
}
.brand-uploaded-image{
  display: flex
;
    flex-direction: row;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
}

.table-striped.tr-static {
  position: static;
}
/* Modal Overlay */
.modal-overlay-comp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal Container */
.modal-brand {
  background: #fff;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
}

/* Modal Header */
.modal-header-comp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-header-comp .modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.modal-header-comp .modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  line-height: 1;
}

/* Modal Body */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* Form Group Styling */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-group-row-2 {
  display: flex;
  gap: 15px;
}

.form-group-row-2 .form-group {
  flex: 1;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.filter-select select {
  width: 100%;
  padding: 5px 9px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  outline: none;
  transition: border-color 0.3s;
  flex: 1;
  font-size: 12px;
}
.checkbox-group {
  margin-bottom: 16px;
}.checkbox-group label {
  margin-left: 8px;
 
}.filter-select .select-row {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 16px;
}.filter-select label {
 
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
}
.filter-select{
  display: flex;
  justify-content: space-between;
}
.chat-main-content{
  height: auto;
}

/* auto reply model css  */
.autoReply-Model-label{
  display: flex !important; 
}
.auto-reply-switch{
  margin: 0;
    margin-left: 12px;
    margin-top: -3px;

}
.auto-reply-model-input {
  padding: 6px !important;
}
.form-check-input:checked {
  background-color: #1dba7b !important;
  border-color: #33c509 !important;
}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none !important;
}
.auto-reply-ignore-label{

  margin: 0;
  padding: 0;
  text-align: left;
  position: absolute;
  top: 3px;
}
.auto-reply-ignore-box{

  display: flex
  ;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: -webkit-fill-available;
      position: relative;
      margin-left: 0;
      padding-left: 0px;
      padding-right: 5px;
}
.auto-reply-ignore-input{
  padding: 10px ;
}
.auto-reply-ignore-container{
  padding: 0px 11px;
}
.table-end-buttons button{
  margin: 0 !important;

  margin-right: 10px !important;
}.table-end-buttons a{
  margin: 0 !important;
   
}.table-end-buttons a button{
  margin: 0 !important;
  
  margin-right: 10px !important;
   
}
.category-header{
  background: #cbd9da;
    color: #fff;
}
.shortcut-type-select{
  margin-right: 10px;
    padding: 9px;
    border-radius: 10px; 
}
.history-filter-bar{
  background-color: #eee;
}
.overlay{
  background: #10101047;
    width: 100%;
    height: 100%;
    position: absolute;

}
.copy-client-id{
  display: flex;

}.copy-client-id button {
  display: flex;
  background-color: transparent;
  border: none;
  text-align: center;
  justify-content: center;
  align-items: center;

  padding: 3px 1px;
}.copy-client-id button:hover {
  display: flex;
  /* background-color: lightblue; */
  border: none;
   
} .copy-client-id p {
 font-size: 11px;
  /* background-color: lightblue; */
  border: none;
  color: #404040;
  margin-left: 3px;
   
}