@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;500;600;700;800&display=swap');/*================================
  ====All custom css goes here====*/

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #efeded;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #989898;
}

.chart-icon-cus:hover {
  color: #39e8be !important;
}

.chart-icon-cus {
  color: #bdbdbd;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.active a
  {
  background: linear-gradient(118deg, #f37700, rgb(255 157 65/ 82%))
    !important;
  box-shadow: 0 0 10px 1px #e8a768 !important;
  color: #ffffff !important;
}

.customPreview div {
    margin: 0 !important;
}

a.navbar-brand {
  pointer-events: none;
  -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* .timeExceded { */
/*  background-color:#ffe3e3 !important */
/* } */

.loader_div {
    position: fixed !important;
    background: #F0F8FE !important;
}

li.breadcrumb-item > a {
    user-select: none;
    pointer-events: none;
    color: #363a77;
    font-weight: 600;
}

.avatar-status-offline {
    background-color: #82868B !important;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    width: 13px;
    height: 13px;
    position: relative;
    right: 6px;
    top: 4px;
}

#whatsNewLi span.badge.badge-pill.badge-primary.float-right.position-relative {
    display: none !important;
}

.chat-application .sidebar-content .chat-user-list-wrapper li.active {
    background: #ecebeb !IMPORTANT;
    background-repeat: repeat-x;
}

.chat-whisper .chat-content {
    border: 1px solid rgb(0 0 0 / 12%);
}

.main-menu.menu-dark, .main-menu.menu-dark .navigation {
    color: black !important;
    background: #10163a !important;
}

.main-menu.menu-dark .navigation > li.active > a {
  background: #eef3f2 !important;
    color: black !important;
    box-shadow: 0 0 10px 1px rgb(214 219 218 / 35%) !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.active a {
    background: #d6dbda !important;
    box-shadow: 0 0 10px 1px rgb(214 219 218 / 35%) !important;
    color: #000000 !important;
}

.nav-pills .nav-link.active {
    border-color: #595b79 !important;
    box-shadow: 0 4px 18px -4px rgb(89 91 121 / 44%) !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #FFFFFF;
    background-color: #595b79 !important;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
}

#advanced-search-datatable .card-body.mt-1 {
    position: fixed;
    z-index: 1;
    width: 91.5%;
    display: block;
}

#advanced-search-datatable .card-datatable {
    display: block;
    top: 196px;
    position: relative;
    height: 50vh;
    overflow: auto;
}

.form-border-2 {
    border: 2px solid #ebe9f1;
}

.border-rad-20 {
    border-radius: 20px;
}

.goog-te-combo {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0/ 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0/ 8%);
}

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

body>.skiptranslate {
  display: none;
}

body {
  top: 0 !important;
}

.spinner-border.text-warning {
  color: #ea6060 !important;
}

.select2-selection__rendered .fab.fa-facebook-messenger  {
    background: -moz-linear-gradient(top, #e72c83 0%, #a742c6 100%);
    background: -webkit-linear-gradient(top, #e72c83 0%,#a742c6 100%);
    background: linear-gradient(to bottom, #e72c83 0%,#a742c6 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color:transparent;
}

.select2-selection__rendered i.fab.fa-whatsapp {
    color: #2BB741;
}

#help-widget {
  bottom: 80px;
  position: fixed;
  right: 10px;
  z-index: 1015;
  width: fit-content;
}

#help-widget a {
  background-color: #363a77;
  border-radius: 20px 20px 2px 20px;
  box-shadow: 0 5px 20px 0 rgb(12 73 84/ 20%);
  cursor: pointer;
  display: block;
  font-size: 14px;
  line-height: normal;
  padding: 17px 10px 16px;
  text-decoration: none;
  transition: 0.3s all;
}

#help-widget-toggle:hover {
  background-color: #5562b1;
}

#help-widget a .zorse-help-text {
  color: #fff;
  font-weight: 500 !important;
  user-select: none;
}

#help-widget:after, #isc-help-widget:after {
  content: "";
  display: table;
  clear: both;
}

#main-widget {
  position: fixed;
    width: 25%;
    top: 0;
    right: 20px;
    z-index: 9999999;
    height: 100%;
    background: #f8f8f8;
    border-left: 1px solid #e1e0e0;
}

#main-widget .card-link {
  text-decoration: underline;
}

.card.card-congratulations.m-0 {
  background: none;
  color: black;
}

#back-btn-main {
  color: #7367F0;
}

.chatt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20rem;
  height: 38rem;
  z-index: 2;
  box-sizing: border-box;
  border-radius: 3rem;
  background: white;
  box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 0rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
  border: 6px solid #c3c3c3;
}
.chatt .contact.bar {
  margin: 1rem;
  box-sizing: border-box;
}
.chatt .messages {
  padding: 1rem;
  background: #F7F7F7;
  flex-shrink: 2;
  overflow-y: auto;
  box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
  min-height: 400px;
  border: 1px solid #c9c9c9;
}
.chatt .messages .time {
  font-size: 0.8rem;
  background: #EEE;
  padding: 0.25rem 1rem;
  border-radius: 2rem;
  color: #999;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.chatt .messages .message {
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin: 1rem;
  background: #FFF;
  border-radius: 1.125rem 1.125rem 1.125rem 0;
  min-height: 2.25rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 66%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
}
.chatt .messages .message.parker {
  margin: 1rem 1rem 1rem auto;
  border-radius: 1.125rem 1.125rem 0 1.125rem;
  background: #ff5a00;
  color: white;
}
.chatt .messages .message .typing {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0rem;
  box-sizing: border-box;
  background: #ccc;
  border-radius: 50%;
}
.chatt .messages .message .typing.typing-1 {
  -webkit-animation: typing 3s infinite;
          animation: typing 3s infinite;
}
.chatt .messages .message .typing.typing-2 {
  -webkit-animation: typing 3s 250ms infinite;
          animation: typing 3s 250ms infinite;
}
.chatt .messages .message .typing.typing-3 {
  -webkit-animation: typing 3s 500ms infinite;
          animation: typing 3s 500ms infinite;
}
.chatt .input {
  box-sizing: border-box;
  flex-basis: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5rem 0 1.5rem;
}
.chatt .input i {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #666;
  cursor: pointer;
  transition: color 200ms;
}
.chatt .input i:hover {
  color: #333;
}
.chatt .input input {
  border: none;
  background-image: none;
  background-color: white;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  border-radius: 1.125rem;
  flex-grow: 2;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
  /*font-family: Red hat Display, sans-serif;*/
  font-weight: 400;
  letter-spacing: 0.025em;
}
.chatt .input input:placeholder {
  color: #999;
}

@-webkit-keyframes typing {
  0%, 75%, 100% {
    transform: translate(0, 0.25rem) scale(0.9);
    opacity: 0.5;
  }
  25% {
    transform: translate(0, -0.25rem) scale(1);
    opacity: 1;
  }
}

@keyframes typing {
  0%, 75%, 100% {
    transform: translate(0, 0.25rem) scale(0.9);
    opacity: 0.5;
  }
  25% {
    transform: translate(0, -0.25rem) scale(1);
    opacity: 1;
  }
}

#statistics-card .avatar {
    cursor: initial;
}

#conversationalCalendar {
    background: #fff;
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid #d8d6de;
    width: 100%;
    border-radius: 5px;
}

.scroll-pane
    {
      width: 100%;
      height: 200px;
      overflow: auto;
    }
    
.kb-search-section__title_inner {
    font-size: 22px;
    line-height: 2rem;
}

.kb-search-section.kb-search-section--full {
    -webkit-box-align: start;
    align-items: flex-start;
    padding: 1.8rem 0;
    min-height: 200px;
}

.text-muted {
    color: #686868 !important;
}

.openNewTab:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, .chat-content, label, .divider-text, small.notification-text, .top-tabs-chat-nav .btn-flat-primary, .nav-tabs .nav-link, .table {
  color: #303130;
}

.chat-body, .card {
    word-break: break-word !important;
}

#timer p {
  color: #ea6060 !important;
}

.header-navbar .navbar-container .dropdown-menu-media .media-list .media {
    border-bottom: 1px solid #cccad3 !important;
}


.dropdown-notification > .dropdown-menu {
    background: #fff;
    /*overflow-y: auto;*/
}

.btn-flat-primary:active, .btn-flat-primary.active, .btn-flat-primary:focus {
    color: #fff !important;
}

/* #main-navbar {
    border: 1px solid #dcdedf;
    box-shadow: none !important;
} */

.top-tabs-chat-nav .btn {
    padding: 0.586rem 1.5rem;
}

.mentiony-container, .chat-app-window .chats .chat-whisper .chat-body .chat-content {
  background: #fffbdf !important;
}

.logo-footer {
  -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  image-rendering: -moz-crisp-edges;
  image-rendering:   -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.chevron-collapse {
    float: left;
    position: absolute;
    left: 8px;
    top: 16px;
}

.top-tabs-chat-nav .btn-flat-primary:hover:not(.disabled):not(:disabled) {
    background: #7478b1 !important;
    color: #fff !important;
}

#Slider {
    top: auto !important;
}
  
#Slider::before, #Slider::after {
    opacity: 0;
}

.btn-light {
    color: #2A2E30;
    background-color: #e9e9e9 !important;
    border-color: #e9e9e9 !important;
}

.dropdown-menu.dropdown-menu-right.drop_user.show {
    width: auto !important;
}

.online-dot {
  height: 10px;
  width: 10px;
  background-color: #28C76F;
  border-radius: 50%;
  display: inline-block;
}
.offline-dot {
  height: 10px;
  width: 10px;
  background-color: #ff9f43;
  border-radius: 50%;
  display: inline-block;
}
.away-dot {
  height: 10px;
  width: 10px;
  background-color: #ca2222;
  border-radius: 50%;
  display: inline-block;
}

.unavailable-dot{
  height: 10px;
  width: 10px;
  background-color: #808080;
  border-radius: 50%;
  display: inline-block;

}
#contactSupport .file-input.file-input-ajax-new {
    display: none !important;
}

.markAllRead {
  left: 160px;
    top: 21px;
}

/* #whatsappnumber {
    font-size: 14px !important;
} */
/* add style for PSID */
#whatsappnumber {
  padding-left: 6px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #FFFFFF;
    border-color: #363a77 !important;
    background-color: #363a77 !important;
}

.reply {
    overflow-y: auto;
    max-height: 280px !important;
    word-break: break-word;
    color: #fff !important;
}

.disabledd {
    pointer-events: none !important;
    background-color: #EFEFEF !important;
}


/*.replyBtn {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 1px solid #dddddd;
}*/

.reply {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.warning_banner {
    top: 0;
    z-index: 999;
    left: 5%;
    padding: 15px;
    border-radius: 0;
}

.close_banner {
    position: absolute;
    right: 10px;
    top: 3px;
}

.customPreview {
    max-height: 400px;
    overflow: hidden;
    width: 100%;
    overflow-y: auto;
}

.customPreview div {
    margin: 0 !important;
}

.actionBtnPanel button {
    color: #00a5f6 !important;
}

.selectAllCamps, .deleteCampBtnTemplate, .deleteCampBtn, .clearAllCamps, .clearAllCampsTemplate, .archiveCampBtn {
    color: #363a77 !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #363a77 !important;
    background-color: rgb(54 58 119 / 23%) !important;
}

a:hover {
    color: #363a77;
    text-decoration: none;
}

.avatar.bg-light-primary {
    color: #363a77 !important;
}


/***** Chat Widget ****/
.styles_wrapper__d7uG7 {
    position: fixed;
    z-index: 100;
    right: 50px;
    bottom: 100px;
    box-shadow: 0 0 24px 0 rgb(104 121 146 / 20%);
    border-radius: 16px;
}

.styles_wrapper__2J-67 {
    background-color: #363a77;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    outline: none;
    box-sizing: border-box;
    padding-top: 2px;
    opacity: 1;
    transition: opacity .1s ease .6s;
}
.styles_opened__3NvNz {
    box-shadow: 0 0 24px 0 rgb(104 121 146 / 20%);
    border-radius: 16px;
    -webkit-animation: styles_slide-up__1ZeLY .6s ease;
    animation: styles_slide-up__1ZeLY .6s ease;
    opacity: 1;
    pointer-events: all;
}
.styles_widget__2g5UX {
    position: fixed;
    width: 376px;
    min-height: 250px;
    max-height: 400px;
    bottom: 190px;
    right: 52px;
    box-sizing: border-box;
    border-radius: 16px;
    z-index: 1000;
    overflow: scroll;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: all;
}

.styles_widgetContainer__1GpQ0 {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}

.styles_header__1c59U {
    position: relative;
    background-color: #0089ff;
    padding: 40px 20px;
    color: #fff;
    height: 175px;
    min-height: 175px;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}

.styles_logoWrapper__3V29E {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    width: 180px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.styles_logo__1ZE0j {
    width: 150px;
}

.styles_homeWrapper__3VIPb {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: -104px;
}

.styles_widgetBody__2PS3E {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-top: 8px;
}

.styles_widgetWrapper__1LyF3 {
    position: relative;
    margin: 0 16px 8px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #f1f3f8;
    -webkit-animation: styles_slide-up__1ZeLY .6s ease;
    animation: styles_slide-up__1ZeLY .6s ease;
}

.styles_startScreen__3kFbp {
    position: relative;
    padding: 24px 16px;
    z-index: 2;
}

.styles_channel__396ZG.styles_whatsapp__80fGh {
    border-color: #0089ff;
}

.styles_channel__396ZG {
    border-radius: 4px;
    border: 1px solid #d9e1ec;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px;
    text-decoration: none;
    cursor: pointer;
}

.styles_whatsapp__80fGh:hover {
    background-color: #24d366;
}

.styles_channelIcon__1i0qs {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    border-radius: var(--radius-main);
    border: 1px solid transparent;
    background-color: transparent !important;
    margin-right: 8px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.styles_channelName__Q8vJ4 {
    font-size: 14px;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #283f59;
    max-width: 260px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}

.styles_footer__1DjbU {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 17px;
}

.styles_footer__2XYQk {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.styles_footerLink__17d3m {
    text-decoration: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.styles_footer__2XYQk p {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #687992;
margin-bottom: 0;}

.styles_companyName__1s5d9 {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.styles_channel__396ZG.styles_whatsapp__80fGh:hover {
    border-color: #fff;
}

.styles_whatsapp__80fGh:hover {
    background-color: #24d366;
}

.styles_channel__396ZG:hover .styles_channelName__Q8vJ4 {
    color: #fff;
}

.styles_channelIcon__1i0qs.styles_insta__80fGh {
    background-color: #8a3ab9;
    color: #fff;
}

.styles_insta__80fGh:hover {
    background-color: #8a3ab9;
}

.styles_connectChannelWrapper__LI3lB {
    margin-top: 20px;
    padding: 20px 40px;
    overflow: scroll;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    
}

.styles_header__1-MXj {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px;
    margin-left: -22px;
}

.styles_goBackLink__1mMU8 {
    cursor: pointer;
    margin-right: 8px;
    line-height: 32px;
    outline: none;
}

.styles_title__3HfAu {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

.styles_extraAction__1X5Ng {
    margin-bottom: 12px;
}

.styles_link__10bJC:hover {
    background-color: #f1f3f8;
}
.styles_link__10bJC {
    display: inline-block;
    font-weight: 600;
    border-radius: 4px;
    
    border: 1px solid #d9e1ec;
    text-decoration: none;
    color: #24374e;
    
    font-size: 14px;
    padding: 9px 12px;
}

ol {
    padding-left: 16px;
}

.styles_facebook__1JafZ:hover {
    background-color: #0084ff;
}

.styles_channel__396ZG:hover .styles_channelName__Q8vJ4 {
    color: #fff;
}

.companyLogoHolder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 70px;
}


.required-field:after {
  content:" *";
  color: red;
}
  
/*#phone-preview-modal .mockchat {
  max-width: 85% !important;
}*/

#imgCompLogo, #compLogo {margin-bottom: 30px !important;}

.daterangepicker .ranges li.active {
    background-color: #ffffff;
    color: #000;
}

.colorPicker {
    position: absolute;
    top: 4px;
    right: 20px;
    border: 0;
    padding: 0;
    margin: 0;
    height: 30px;
    width: 18% !important;
}

#chatobotBuilderLi #chatAnchor {
    border-top: 1px solid #999999;
   /* margin-top: 6%;*/
}

#teammanagementLi a.d-flex.align-items-center {
    border-bottom: 1px solid #999999;
}
  
  img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }
  
  .left {
    min-width: 350px;
    max-width: 350px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  
  .left > .top {
    position: relative;
    min-height: 60px;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 0.5px solid #76767637;
    display: flex;
    align-items: center;
  }
  
  .left > .top > .tub {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    width: 100%;
  }
  .left > .top > .tub > .username {
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .left > .top > .tub > .username > .down-arrow {
    cursor: pointer;
  }
  
  .left > .top > .card {
    position: absolute;
    padding: 0 10px;
    right: 10px;
  }
  .left > .top > .card > button {
    background-color: #ffffff;
    border: 0.5px solid #76767637;
    padding: 4px 8px;
    color: #323232;
    font-weight: 700;
    font-size: 12px;
    border-radius: 12px;
    cursor: pointer;
  }
  .left > .top > .card > button:hover {
    color: #767676;
  }
  
  .left > .conversations {
    overflow-y: scroll;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-x: hidden;
  }
  
  .conversations > .person {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    gap: 10px;
  }
  
  .conversations > .person:hover {
    background-color: #f0f0f0af;
    cursor: pointer;
  }
  
  .conversations > .person > .information {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    overflow: hidden;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }
  
  .conversations > .person > .information > .username {
    font-size: 14px;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 4px;
    width: 100%;
    align-items: center;
  }
  
  .conversations > .person > .information > .content {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    color: black;
  }
  
  .conversations > .person > .information > .content > .message {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
  }
  
  .conversations > .person > .information > .content > .new {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    font-weight: 700;
  }
  
  .conversations > .person > .box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .conversations > .person > .box > .image {
    width: clamp(50px, 50px, 50px);
    height: clamp(50px, 50px, 50px);
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .conversations > .person > .box > .online {
    min-width: 1.1rem;
    min-height: 1.1rem;
    background-color: lawngreen;
    border-radius: 100%;
    position: absolute;
    border: 3px solid white;
    right: 0;
    bottom: 0;
  }
  
  .conversations > .person > .status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
  }
  
  .conversations > .person > .status > .point {
    min-height: 8px;
    min-width: 8px;
    background-color: #0084ff;
    border-radius: 100%;
  }
  
  
  
  .right > .top {
    width: 100%;
    display: flex;
    min-height: 60px;
    align-items: center;
    padding: 0 20px;
    border-bottom: 0.5px solid #76767637;
    gap: 1rem;
  }
  
  .right > .top > .box {
    position: relative;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .right > .top > .box > .image {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 100%;
    overflow: hidden;
  }
  
  .right > .top > .box > .online {
    position: absolute;
    min-width: 12px;
    min-height: 12px;
    background-color: lawngreen;
    border-radius: 100%;
    border: 2px solid #ffffff;
    right: 0;
    bottom: 0;
  }
  
  .right > .top > .information {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    gap: 0;
    text-overflow: ellipsis;
  }
  
  .right > .top > .information > .username,
  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  .right > .top .information > .username {
    font-weight: 400;
    font-size: 15px;
    display: flex;
  }
  .blue-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: default;
  }
  
  .right > .top > .information > .username > a {
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5px;
  }
  
  .right > .top .information > .name {
    font-weight: 400;
    font-size: 12px;
    color: #707070;
  }
  
  .right > .top > .options {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .right > .top > .options > .info {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  

  .messages {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 2.5px;
  }
  
  .received > .text {
    background-color: white;
    border: 0.5px solid #80808080;
  }

  .right > .bottom {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
  }
  
  .cup {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 0.5px solid #7676765c;
    width: 100%;
    gap: 10px;
    padding: 2px 15px;
    border-radius: 40px;
    overflow: hidden;
  }
  
  .cup > .picker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: clamp(35px, 35px, 35px);
    height: clamp(35px, 35px, 35px);
    user-select: none;
  }
  
  .cup > textarea {
    font-size: 0.85rem;
    font-weight: 400;
    border: none;
    outline: none;
    padding: 0 5px;
    width: 100%;
    resize: none;
    max-height: 100px;
  }
  
  .cup > .send {
    border: none;
    padding: 5px 10px;
    background-color: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #0084ff;
  }
  
  .send:disabled {
    color: #0084ff8d;
  }
  
  .st0 {
    fill: #0084ff;
  }
  
  .st1 {
    fill: none;
    stroke: #0084ff;
    stroke-miterlimit: 10;
  }
  
  .st2 {
    fill: #ffffff;
    stroke: #ffffff;
    stroke-width: 0.25;
    stroke-miterlimit: 10;
  }
  
  .ht0 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 8;
    stroke-miterlimit: 10;
  }
  
  .ip0 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 3;
    stroke-miterlimit: 10;
  }
  
  .ip1 {
    stroke: #000000;
    stroke-miterlimit: 10;
  }
  
  .ep0 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 5;
    stroke-miterlimit: 10;
  }
  
  .ep1 {
    stroke: #000000;
    stroke-width: 5;
    stroke-miterlimit: 10;
  }
  
  .info0 {
    fill: #ffffff;
    stroke: #000000;
    stroke-width: 2;
    stroke-miterlimit: 10;
  }
    
  .info {
    stroke: #000000;
    stroke-width: 0.25;
    stroke-miterlimit: 10;
  }

.css-1uhfn2z {
    height: 88%;
    border: 2px solid rgb(233, 237, 244);
    /* display: flex; */
    /* flex-direction: column; */
    /* -webkit-box-pack: justify; */
    /* justify-content: space-between; */
    /* border-radius: 5px; */
    width: 100%;
}

.css-exyduu {
    padding: 16px 8px 4px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
    color: rgb(154, 168, 189);
}

.css-1j0yq15 {
    height: 60px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.css-1gd309n {
    transform: rotate(180deg);
    cursor: pointer;
}

.app {padding: 0 !important;/*top: 0 !important;overflow-y: auto !important;height: 114% !important;*/}

.css-dvxtzn {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.css-18hpu7h {
    transform: rotate(90deg);
    cursor: pointer;
}

.css-1ncbgs {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgb(233, 237, 244);
    margin: 16px 0px;
}

.css-c5jww6 {
    word-break: break-all;
    color: #000000;
}

.css-1ncbgs img {
    width: inherit;
    height: inherit;
    clip-path: circle(29px at 50% 50%);
}




.css-1nylpq2 {
    display: flex;
    align-items: flex-end;
}

.css-nt5fm1 {
    width: 35px;
    height: 35px;
    background: rgb(233, 237, 244);
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 17.6px;
}

.css-nt5fm1 img {
    width: inherit;
    height: inherit;
    clip-path: circle(18px at 50% 50%);
}

.css-1hbj5v0 {
    width: 75%;
}

.css-hgbnki {
    margin-left: 6px;
    margin-top: 4px;
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.css-hgbnki {
    margin-left: 6px;
    margin-top: 4px;
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.css-7uevvx {
    background: rgb(233, 237, 244) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    width: fit-content !important;
    word-break: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    color: #000000;
}

.css-vc69eo {
    margin-left: 6px;
    margin-top: 4px;
    display: inline-block;
    max-width: 150px;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px;
}

.css-1imw36t {
    width: 100%;
    height: 38px;
    outline: none;
    border-radius: 30px;
    padding: 0px 12px;
    border: 1px solid rgb(233, 237, 244);
}

.css-1ch6n70 {
    position: absolute;
    right: 25px;
    top: 20px;
    transform: rotate(45deg);
    color: rgb(154, 168, 189);
    cursor: pointer;
}

.select2-selection__rendered i.fab.fa-instagram {
  color: #8134AF;
}

.select2-selection__rendered i.fab.fa-google {
  color: #4285f4;
}




.marvel-device .screen {
  text-align: left;
}

.screen-container {
  height: 100%;
}

/* Status Bar */

.status-bar {
  height: 25px;
  background: #004e45;
  color: #fff;
  font-size: 14px;
  padding: 0 8px;
}

.status-bar:after {
  content: "";
  display: table;
  clear: both;
}

.status-bar div {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 8px;
  font-weight: 600;
}

/* Chat */

.chat {
  /* height: calc(100% - 69px); */
}

.chat-container {
  height: 100%;
}

/* User Bar */

/*.user-bar {
  height: 90px;
  background: #008f7f;
  color: #fff;
  padding: 0 8px;
  font-size: 24px;
  position: relative;
  z-index: 1;
}*/

.user-bar:after {
  content: "";
  display: table;
  clear: both;
}

/*.user-bar div {
  float: left;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}*/

.user-bar .actions {
  float: right;
  margin: 0 0 0 20px;
}

.user-bar .actions.more {
  margin: 0 12px 0 32px;
}

.user-bar .actions.attachment {
  margin: 0 0 0 30px;
}

.user-bar .actions.attachment i {
  display: block;
  transform: rotate(-45deg);
}

.user-bar .avatar {
  margin: 0 0 0 5px;
  width: 36px;
  height: 36px;
}

.user-bar .avatar img {
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  display: block;
  width: 100%;
}

.user-bar .name {
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  margin: 0 0 0 8px;
  overflow: hidden;
  white-space: nowrap;
  width: 110px;
}

.user-bar .status {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}


/* Messages */

.messages {
  color: #000;
  clear: both;
  line-height: 18px;
/*  font-size: 15px;
  padding: 8px;*/
  position: relative;
/*  margin: 8px 0;
  max-width: 95%;*/
  word-wrap: break-word;
  z-index: -1;
  font-size: 14px !important;
}

.messages:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.metadata {
  display: inline-block;
  float: right;
  padding: 0 0 0 7px;
  position: relative;
  bottom: -4px;
}

.metadata .time {
  color: rgba(0, 0, 0, .45);
  font-size: 11px;
  display: inline-block;
}

.metadata .tick {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}

.metadata .tick svg {
  position: absolute;
  transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
          transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(0deg);
          transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
  -webkit-transform: perspective(800px) rotateY(0);
          transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
          transform: perspective(800px) rotateY(-179.9deg);
}

.messages:first-child {
  margin: 10px 0 8px;
}

.messages.received {
  background: #fff;
  border-radius: 0px 5px 5px 5px;
  float: left;
}

.messages.received .metadata {
  padding: 0 0 0 16px;
}

.messages.received:after {
  border-width: 0px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  top: 0;
  left: -10px;
}

.messages.sent {
 /* background: #e1ffc7;
  border-radius: 5px 0px 5px 5px;
  float: right;
  z-index: 9;*/
}

.messages.sent:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #e1ffc7;
  top: 0;
  right: -10px;
}

/* Compose */

.conversation-compose {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  overflow: hidden;
  height: 40px;
  width: 100%;
  z-index: 2;
}

.conversation-compose div,
.conversation-compose input {
  background: #fff;
  height: 100%;
}

.conversation-compose .emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 5px 0 0 5px;
  flex: 0 0 auto;
  margin-left: 8px;
  width: 48px;
}

.conversation-compose .input-msg {
  border: 0;
  flex: 1 1 auto;
  font-size: 16px;
  margin: 0;
  outline: none;
  min-width: 50px;
}

.conversation-compose .photo {
  flex: 0 0 auto;
  border-radius: 0 0 5px 0;
  text-align: center;
  position: relative;
  width: 48px;
}

.conversation-compose .photo:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 0;
  right: -10px;
}

.conversation-compose .photo i {
  display: block;
  color: #7d8488;
  font-size: 24px;
  transform: translate(-50%, -50%);
  position: relative;
  top: 50%;
  left: 50%;
}

.conversation-compose .send {
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0;
  position: relative;
  outline: none;
}

.conversation-compose .send .circle {
  background: #008a7c;
  border-radius: 50%;
  color: #fff;
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-compose .send .circle i {
  font-size: 15px;
  margin-left: -4px;
}

/* Small Screens */

@media (max-width: 768px) {
  .marvel-device.nexus5 {
    border-radius: 0;
    flex: none;
    padding: 0;
    max-width: none;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  .marvel-device > .screen .chat {
    visibility: visible;
  }

  .marvel-device {
    visibility: hidden;
  }

  .marvel-device .status-bar {
    display: none;
  }

  .screen-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .conversation {
    height: calc(100vh - 55px);
  }
  .conversation .conversation-container {
    height: calc(100vh - 120px);
  }
}

.whatsapp-preview .messages.sent {
  /*background:rgb(255 255 255) !important;*/
}
/*whatsapp preview end*/


.group_1 label.btn.btn-outline-primary.waves-effect, 
.group_2 label.btn.btn-outline-primary.waves-effect, 
.group_3 label.btn.btn-outline-primary.waves-effect {
  min-width: 70px !important;
}

html .content .content-wrapper .content-header-title {
  font-weight: 600 !important;
  color: #000000 !important;
}

html body {
  background-color: #F0F8FE !important;
}

.card.box-shadow-0 {
  box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%) !important;
}

#totalFed {
  font-weight: 600 !important;
}

#myTab a.nav-link {
  font-weight: 600 !important;
}

.table:not(.table-dark):not(.table-light) thead:not(.thead-dark) th, .table:not(.table-dark):not(.table-light) tfoot:not(.thead-dark) th {
  background-color: #ffffff !important;
}

.navbar-floating .header-navbar-shadow {
  background: #f0f8fe !important;
}

.lead.collapse-title {
  font-weight: 600;
}

.fa-comments-alt:before {
  content: "\f4b6";
}

.navbar-floating .header-navbar-shadow {
  z-index: 0 !important;
}

html .content.app-content {
  padding: calc(2rem + 3.15rem + 0.1rem) 2rem 0 !important;
}

.quickReplyBtnPanel {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
/*
.quickReplyBtnPanel .btn {
  flex: 1;
}
*/
.order1 {
  -webkit-order: 1;
  order: 1;
}
.order2 {
  -webkit-order: 2;
  order: 2;
}
.order3 {
  -webkit-order: 3;
  order: 3;
}

#quickReplyDropdown {
   width: 30rem; 
  /* width: 53rem !important; */
}

div#quickReplyDropdown {
  left: -8px !important;
  overflow-x: hidden;
}

.fa-file-download{
margin-left: 0.2rem;
}


.modalBorderSpacer{
    border-bottom: solid 1px #d1cfcb7d  !important;
}

.modalBorderRadius {
    border-radius: 12px ;
}

.fa-info-circle{
	font-size: 13px !important;
}

/* Tanzeel Add class for Skeleton Effect 6/5/2024  */

.skeleton {
	background-color: #a5a5a5;
	animation: skeleton-animation 1s infinite ease-in-out;
}

@keyframes skeleton-animation {
     0% {
         opacity: 0.2;
     }

     50% {
         opacity: 0.5;
     }

     100% {
         opacity: 0.2;
     }
 }

.skeleton-text {
     width: 100%;
     height: 1.5rem;
     margin-bottom: 0.5rem;
     border-radius: 0.25rem;
 }

.skeleton-text__body {
     width: 75%;
 }

.skeleton-footer {
     width: 30%;
 }

 .skeleton-chart {
  width: 100%;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

.copy-icon {
  width: 12px;
  margin-right: 4px;
}