.shadow-drop-center {
   animation: shadow-drop-center 0.4s linear both;
}
@keyframes shadow-drop-center {
   0% {
      box-shadow: 0 0 0 0 transparent;
   }
   100% {
      box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.55);
   }
}

body {
   font-family: Roboto, sans-serif;
   font-size: 13px;
   line-height: 1.42857143;
   color: #767676;
   /* background-color: #edecec; */
   background-color: #e5ddd5;
}

.list-group-address {
   max-height: 150px;
   margin-bottom: 10px;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
}

.reset {
   margin: 0px;
   padding: 0px;
}

#messages-main {
   position: relative;
   margin: 0 auto;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   border-color: #d3cac0 !important;
   border: 1px solid #d3cac0 !important;
   border-radius: 4px;
}

#messages-main:after,
#messages-main:before {
   content: " ";
   display: table;
}
#messages-main .ms-menu {
   position: absolute;
   left: 0;
   top: 0;
   border-right: 1px solid #eee;
   padding-bottom: 50px;
   height: 100%;
   width: 240px;
   /* background: #f5f5f5; */
   background: white;
   border-right: 1px solid #d3cac0;
}

@media (min-width: 768px) {
   #messages-main .ms-body {
      padding-left: 240px;
   }
}
@media (max-width: 767px) {
   #messages-main .ms-menu {
      height: calc(100% - 58px);
      display: none;
      z-index: 1;
      top: 58px;
   }
   #messages-main .ms-menu.toggled {
      display: block;
   }
   #messages-main .ms-body {
      overflow: hidden;
   }
}
#messages-main .ms-user {
   padding: 15px;
   /* background: #f5f5f5; */
   background: white;
   border-bottom: 1px solid #d3cac0;
}
#messages-main .ms-user > div {
   overflow: hidden;
   padding: 3px 5px 0 15px;
   font-size: 11px;
}
#messages-main #ms-compose {
   position: fixed;
   bottom: 120px;
   z-index: 1;
   right: 30px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
#ms-menu-trigger {
   user-select: none;
   position: absolute;
   left: 0;
   top: 0;
   width: 50px;
   height: 100%;
   padding-right: 10px;
   padding-top: 19px;
}
#ms-menu-trigger i {
   font-size: 21px;
}
#ms-menu-trigger.toggled i:before {
   content: "\f2ea";
}
.fc-toolbar:before,
.login-content:after {
   content: "";
}
.message-feed {
   padding: 20px;
}
#footer,
.fc-toolbar .ui-button,
.fileinput .thumbnail,
.four-zero,
.four-zero footer > a,
.ie-warning,
.login-content,
.login-navigation,
.pt-inner,
.pt-inner .pti-footer > a {
   text-align: center;
}
.message-feed.right > .pull-right {
   margin-left: 15px;
}
.message-feed:not(.right) .mf-content {
   /* color: black;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

   background-color: #f8f9fa;
   border-radius: 8px;
   padding: 8px 12px;
   border: 1px solid rgb(211, 202, 192); */
}
.message-feed.right .mf-content .palomitas {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   border-radius: 4px;
   clear: both;

   background-color: #e9ecef;
   border-radius: 8px;
   padding: 8px 12px;
}

/* .mf-content {
   padding: 12px 3px 17px 13px;
   border-radius: 2px;
   display: inline-block;
   max-width: 80%;
} */

.mf-content {
   padding: 8px 8px 8px 6px;
   border-radius: 5px;
   display: inline-block;
   max-width: 80%;
   overflow-wrap: break-word; /* Asegura que las palabras largas se dividan */
}

.message-feed.media:hover .mf-content .palomitas {
   background-color: #e2e6ea !important;
}

.mf-date {
   display: block;
   color: #b3b3b3;
   margin-top: 7px;
}
.mf-date > i {
   font-size: 14px;
   line-height: 100%;
   position: relative;
   top: 1px;
}
.msb-reply {
   box-shadow: 0 -20px 20px -5px #fff;
   position: relative;
   margin-top: 30px;
   border-top: 1px solid #eee;
   background: #f8f8f8;
}
.four-zero,
.lc-block {
   box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
}
.msb-reply textarea {
   width: 94%;
   font-size: 13px;
   border: 0;
   padding: 10px 15px;
   resize: none;
   height: 60px;
   background: 0 0;
   border: 1px solid;
}
.msb-reply button {
   position: absolute;
   top: 0;
   right: 0;
   border: 0;
   height: 100%;
   width: 60px;
   font-size: 25px;
   color: #2196f3;
   background: 0 0;
}
.msb-reply button:hover {
   background: #f2f2f2;
}
.img-avatar {
   height: 40px;
   border-radius: 50%;
   width: 40px;
}

.list-group.lg-alt .list-group-item {
   border: 0;
}

.minimo-alto-contactos {
   min-height: 82px;
}

.dividir-columna {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.p-15 {
   padding-top: 15px !important;
   padding-bottom: 15px !important;
   padding-left: 6px !important;
   padding-right: 6px !important;
}
.btn:not(.btn-alt) {
   border: 0;
}
.action-header {
   position: relative;
   /* background: #f5f5f5; */
   background: white;
   padding: 15px 13px 15px 17px;
   border-bottom: 1px solid #d3cac0;
}
.ah-actions {
   z-index: 3;
   float: right;
   margin-top: 7px;
   position: relative;
}
.actions {
   list-style: none;
   padding: 0;
   margin: 0;
}
.actions > li {
   display: inline-block;
}

.actions:not(.a-alt) > li > a > i {
   color: #6b709f;
}
.actions > li > a > i {
   font-size: 20px;
}
.actions > li > a {
   display: block;
   padding: 0 10px;
}
.ms-body {
   /* background: #fff; */
   background-image: url("../img/fondo1.png");
   background-size: contain;
   background-repeat: repeat;
   background-position: center;
}
#ms-menu-trigger {
   user-select: none;
   position: absolute;
   left: 0;
   top: 0;
   width: 50px;
   height: 100%;
   padding-right: 10px;
   padding-top: 19px;
   cursor: pointer;
}
#ms-menu-trigger,
.message-feed.right {
   text-align: right;
}
#ms-menu-trigger,
.toggle-switch {
   -webkit-user-select: none;
   -moz-user-select: none;
}

/*mio*/

/* Make the sticky header stick to the top */
.sticky-header {
   position: sticky;
   top: 10px;
}

/* Scrollable content area */
.scrollable-content {
   max-height: 60vh;
   overflow-y: auto;
}

:root {
   --ancho_pantalla: 64vh;
}

.mi_contenedor_especial {
   max-width: 100%;
   padding: 0px;
   width: 100%;
   height: 100%;
   max-height: 100%;
}

.mi_contenedor_especial_fixed {
   /*  position: fixed;
   max-width: 100% !important;
   width: calc(100% - 250px);
   height: 100%;
   max-height: 100%;
   padding: 0px;
   box-sizing: border-box;   */

   position: sticky;
   top: 0;
}

.cuerpo_mensaje {
   height: var(--ancho_pantalla);
   max-height: 100%;
   overflow-y: auto;
}

.pull-left {
   float: left;
   margin-right: 10px;
}

.pull-left.hidden-xs {
   margin-left: 0px;
}

.visible-xs-mi-clase {
   display: none !important;
}

@media (max-width: 767px) {
   .visible-xs-mi-clase {
      display: block !important;
   }

   .pull-left.hidden-xs {
      margin-left: 34px !important;
   }

   .hidden-xs {
      display: block !important;
   }
}

.mi-bandeja-mensajes-contactos {
   max-height: 100%;
   /* height: calc(var(--ancho_pantalla) + 3vh); */
   height: calc(var(--ancho_pantalla) + 20vh);
   overflow-y: auto;
   /* background-color: #f5f5f5; */
   background-color: white;
}

.sin_mensaje {
   height: var(--ancho_pantalla);
   max-height: 100%;
   overflow-y: auto;
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: center;
}

.pintar_card {
   background-color: #fff;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   border-radius: 4px;
   clear: both;
   padding: 8px 15px;

   width: 40%;
   height: 40%;
   display: flex;
   justify-content: center;
}

.pintar_body_card {
   font-weight: 600;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
/* .pintar_body_card {
   font-weight: 600;
   text-align: center;
   
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   min-width: 100%;
   min-height: 100%;
 
} */

/*cuerpo mensaje*/

.palomitas {
   display: flex;
   justify-content: end;
   flex-direction: column;
   margin-left: 2px;

   /*  */
   color: black;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   background-color: #f8f9fa;
   border-radius: 8px;
   padding: 8px 12px;
   border: 1px solid rgb(211, 202, 192);
}

.palomita_texto {
   float: right;
   /* margin-left: 10px; */
}

.imagen_producto {
   float: right;
}

.margin_left_10 {
   margin-left: 10px;
}

.margin_right_10 {
   margin-right: 10px;
}

.fecha_y_palomitas_izquierda {
   display: flex;
}

.media-body-change-display {
   display: contents;
}

.fecha_y_palomitas {
   display: flex;
   justify-content: space-between;
}

.texto {
   color: black;
   white-space: break-spaces;
}

.tamano_div_imagen {
   width: 100%;
   display: flex;
   justify-content: center;
   /* height: 250px; */
}

.mf-content-imagen {
   width: 40% !important;
}

.imagen_imagen {
   max-width: 100%;
   max-height: 230px;
   object-fit: contain;
   /* border: 1px solid #dee2e6 !important; */
   /* border-radius: 5px;
   box-shadow: 0 0.0625rem 0.125rem #00000026, 0 0.0625rem 0.25rem #00000026; */
}

.msb-footer {
   box-shadow: 0 -20px 20px -5px #f3f1ee;
   /* position: relative; */
   margin-top: 30px;
   border-top: 1px solid #eee;
   /* background: #f5f5f5; */
   background: white;
   /* display: flex;
   justify-content: space-between; */

   border-top: 1px solid rgb(211, 202, 192);

   padding: 10px;
}

textarea {
   /* width: 100%;
   font-size: 13px;
   border: 0;
   padding: 10px 15px;
   resize: none;
   height: 60px;
   background: 0 0; */

   width: 100%;
   min-height: 40px;
   padding: 8px;
   border: 1px solid rgb(211, 202, 192);
   border-radius: 4px;
   font-size: 14px;
   color: black;
   resize: none;
}

.div_footer_text_area {
   /* width: 90%; */

   width: 93%;
}

.mf-content-comentario:hover .palomitas {
   background-color: #e9d5ba !important;
}

.message-feed.media:hover .mf-content-comentario .palomitas {
   background-color: #e9d5ba !important;
}

.img-avatar-small-comentario {
   position: absolute;
   bottom: -5px;
   right: -3px;
   width: 17px;
   height: 17px;
   border-radius: 0%;
}

.btn_footer_enviar_comentario {
   border: 0;
   height: 45px;
   width: 100%;
   font-size: 25px;
   /* color: #6b709f; */
   color: #434343;
   background: 0 0;
   border-radius: 4px;
}

.btn_footer_enviar_comentario:hover {
   color: black;
}

.btn_footer_enviar {
   border: 0;
   height: 100%;
   width: 100%;
   font-size: 25px;
   /* color: #6b709f; */
   color: #434343;
   background: 0 0;
}

.btn_footer_enviar:hover {
   color: black;
}

.footer_text_btn_enviar {
   width: 50px;
   height: 60px;
}

.footer_text_btn_enviar button:hover {
   background: #f2f2f2;
}

.footer_opciones {
   width: 50px;
   height: 60px;
   max-height: 100%;
   display: flex;
}

.btn_footer_opciones {
   border: 0;
   height: 100%;
   width: 100%;
   font-size: 20px;
   color: #6b709f;
   background: 0 0;
}

.dropup button:hover {
   background: #f2f2f2;
}

#fileInput {
   display: none;
}

.image-container {
   position: relative;
   width: 100%; /* Ajusta esto según tus necesidades */
   height: auto; /* Ajusta esto según tus necesidades */
   margin-bottom: 20px; /* Espacio entre imágenes */
}

.spinner {
   font-size: 50px; /* Tamaño del spinner */
   color: #3498db; /* Color del spinner */
   /* animation: spin 2s linear infinite; */ /* Animación de giro */
}
/* @keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
} */

.spinnerv1 {
   font-size: 50px; /* Tamaño del spinner */
   color: #3498db; /* Color del spinner */
   /* color: #dadcf1 !important; */
}

.caption_mensaje {
   margin-top: 10px;
   margin-left: 5px;
   text-align: start;
}

.izquierda {
   text-align: left;
}

.cabecera_informacion {
   /* max-width: 100%;
   width: 100%; */
}

.cabecera_informacion_choose_user {
   padding: 8px;
}

.active-word-wrap {
   padding-left: 5px;
   word-wrap: break-word;
}

.cabecera_perfil_contacto {
   min-height: 71px;
}

.text-color-dark {
   color: #000;
}

.item-contactos {
   cursor: pointer;
   padding-left: 6px;
   padding-right: 6px;

   margin: 5px;
   border-radius: 5px;
   /* border-bottom: 1px solid #dadcf1 !important; */
   /*  background-color: #f5f5f5 !important; */
}

.contenedor_principal {
   display: flex;
   justify-content: center;
}

.cargando {
   width: 100%;
   background-color: white;
   height: var(--ancho_pantalla);
   max-width: 100%;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

   display: flex;
   justify-content: center;
   flex-direction: column;
   text-align: center;

   padding: 0px;
   width: 100%;
   height: 100vh;
   max-height: 100%;
}

.active-display-inline {
   display: inline;
}

a.list-group-item:focus,
a.list-group-item:hover {
   color: #555;
   text-decoration: none;
   background-color: #e2e5ec !important;
   border: 1px solid #ffffff !important;
   border-radius: 4px !important;
}

.item-contacto-seleccionado {
   background-color: #e2e5ec !important;
}

.badge-colors {
   /* color: #fff;
   background-color: #3498db; */
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
   flex: 0 0 auto;
   background-color: #0000ff;
   color: white;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   align-content: center;
}

.etapa_conversacion {
   display: inline-block;
   padding: 0.35em 0.65em;
   font-size: 85%;
   font-weight: 500;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 4px;
}

.badge-container {
   position: absolute;
   bottom: 8px;
   right: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.msb-footer-sin-enviar-mensajes {
   margin-top: 30px;
   border-top: 1px solid rgb(211, 202, 192);
   background: transparent;
   display: flex;
   justify-content: center;
   /* height: 60px; */
   height: 118px;
   text-align: center;
   align-items: center;
   border-top: 1px solid rgb(211, 202, 192);
}

.choose_chat {
   font-size: 13px;
   color: #767676;
   text-decoration: underline;
   font-weight: 600;
}

.choose_chat:hover {
   color: #141414;
}

.offcanvas_ {
   position: fixed;
   top: 0;
   bottom: 0;
   right: -500px; /* Initially hide offcanvas */
   width: 500px;
   background-color: white;
   overflow-y: auto;
   transition: right 0.3s ease-in-out;
   z-index: 2030;
   display: flex;
   flex-direction: column;
   max-width: 100%;
   background-clip: padding-box;
   outline: 0;
   box-shadow: white 0px 3px 6px, #646464 0px 3px 6px !important;
}

.offcanvas-show {
   right: 0; /* Show offcanvas */
}
.offcanvas-backdrop {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
   z-index: 1030;
}

.offcanvas-header {
   display: flex;
   align-items: center;
   /* padding: 1.5rem 1rem; */
   padding: 9px;
   justify-content: space-between;
   border-bottom: 1px solid #b7b7b7;
}

.hover_boton_setting {
   /* margin-bottom: 4px; */
   width: 100%;
   background-color: #001b3b;
   color: #434343;
   height: 100%;
   border: none;
   border-radius: 0px;
}

.hover_boton_setting:hover {
   background-color: #082f5f;
}

.offcanvas-title {
   margin-bottom: 0;
   line-height: 1.5;
   font-weight: 600;
}

.Staff {
   padding: 1.6rem 1rem;
   border-bottom: 1px solid #b7b7b7;
   max-width: 100%;
   width: 100% !important;
}

.Custummers {
   padding: 1.6rem 1rem;
   border-bottom: 1px solid #b7b7b7;
   max-width: 100%;
   width: 100% !important;
}

.select2-container {
   z-index: 2040 !important;
}

.conf_label {
   font-size: 14px;
}

.items_details_custumers {
   height: auto;
   background-color: white;
   padding: 8px;
   border-radius: 2px;
   border-bottom: 1px solid #aaa;
   word-wrap: break-word;
   min-height: 40px;
}

.detalle_custumers {
   border-radius: 3px;
   border: 1px solid #aaa;
   margin-top: 5px;
}

.image-container-perfil {
   position: relative;
   display: inline-block;
}

/*esta clase seria imagen de whatsapp*/
.img-avatar-small {
   position: absolute;
   bottom: -5px;
   right: -3px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   /* border: 2px solid white; */
}

/*esta clase seria para imagen de sms*/
.img-avatar-small-sms {
   position: absolute;
   width: 26px;
   height: 26px;
   bottom: -7px;
   right: -6px;
   border-radius: 50%;
   /* border: 2px solid white; */
}

.staff-asignado-a {
   /*  background: #3498db;
   border-radius: 3px;
   padding: 1px;
   color: white;
   padding-left: 5px;
   padding-right: 5px; */

   display: inline-block;
   padding: 0.35em 0.65em;
   font-size: 85%;
   font-weight: 500;
   line-height: 1;
   color: #fff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 12px;
   background: #434343;
}

.staff-sin-asignar {
   /* background: black;
   border-radius: 3px;
   padding: 1px;
   color: white;
   padding-left: 5px;
   padding-right: 5px; */

   display: inline-block;
   padding: 0.35em 0.65em;
   font-size: 85%;
   font-weight: 500;
   line-height: 1;
   color: #fff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 12px;
   background: #434343;
}

.quitar_paddin_margen {
   padding: 0px;
   margin: 0px;
}

.estilo_select {
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px !important;

   padding-top: 2px;
   padding-bottom: 2px;
}

.margin_responsivo_500px {
   margin-top: 0px;
}

.padding_responsivo_500px {
   padding-right: 0px;
}

/* Media query para pantallas de 0 a 575px */
@media (max-width: 575px) {
   .margin_responsivo_500px {
      margin-top: 10px;
   }

   .padding_responsivo_500px {
      padding-right: 10px !important;
   }
}

.center_mensaje {
   text-align: center;
}

.mi-badge {
   height: 20px;
   width: 20px;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

.reducir_tamano {
   font-size: 8px;
   align-items: center;
}

.mi-texto-cursivo {
   font-style: italic;
}

.mi-texto-normal {
   font-style: normal;
}

#hiddenFileInput {
   display: none; /* Oculta el input de archivo */
}
.contenedor_archivos {
   width: 100%;
   display: flex;
   justify-content: center;
   /* background-color: white;
   border-radius: 5px;

   box-shadow: 0 0.0625rem 0.125rem #00000026, 0 0.0625rem 0.25rem #00000026; */
}

.contenedor_contenido_archivos {
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
}

.nombre_archivo {
   width: 100%;
   display: flex;

   flex-direction: column;
   align-items: center;
   height: auto;
}

.logo_archivo {
   padding-top: 10px;
}

.logo_descargar_archivo {
   width: auto;
   background-color: #eae6df;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 10px;
   padding-top: 10px;
   border-top: 1px solid #414141; /*#A4AEB3*/
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

.imagen {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   width: 35px;
   height: auto;
}

.texto_archivo {
   width: 100%;
   max-width: 100%;
   white-space: normal;
   word-wrap: break-word;
   text-align: center;
   padding: 10px;
}

.mf-content-all {
   width: 40% !important;
}

@media (max-width: 300px) {
   .mf-content-imagen {
      width: 61% !important;
   }
}

.mf-content-documentos {
   width: 40% !important;
}

@media (max-width: 329px) {
   .mf-content-documentos {
      width: 70% !important;
   }

   .mf-content-all {
      width: 70% !important;
   }
}

@media (min-width: 330px) and (max-width: 700px) {
   .mf-content-documentos {
      width: 78% !important;
   }

   .mf-content-all {
      width: 78% !important;
   }
}

@media (min-width: 700px) and (max-width: 1000px) {
   /* .mf-content-documentos {
      width: 90% !important;
   } */
   .mf-content-documentos {
      width: 80% !important;
   }

   .mf-content-all {
      width: 80% !important;
   }
}

@media (min-width: 1010px) {
   .mf-content-documentos {
      width: 40% !important;
   }

   .mf-content-all {
      width: 40% !important;
   }
}

.formatear_margin_0 {
   margin: 0px;
}

.audio-general {
   width: 100%;
   box-shadow: 0 0.0625rem 0.125rem #00000026, 0 0.0625rem 0.25rem #00000026;
   border-radius: 25px;
}

.botones_grupo {
   display: flex;
   height: 100%;
}

.activar_microfono {
   width: 50px;
}

.activar_microfono button:hover {
   background: #f2f2f2;
}

.btn_microfono {
   border: 0;
   height: 100%;
   width: 100%;
   font-size: 25px;
   color: #6b709f;
   background: 0 0;
}

.div_footer_audio {
   width: 100%;
   height: 60px;
}

.msb-footer-audio {
   box-shadow: 0 -20px 20px -5px #fff;
   /* position: relative;  
   margin-top: 30px;*/
   margin-top: 30px;
   border-top: 1px solid #eee;
   background: #f8f8f8;
   /* display: flex;
   justify-content: space-between; */

   border-top: 1px solid rgb(211, 202, 192);
}

.botones_grupo_audio {
   display: flex;
   height: 100%;
   justify-content: end;
}

.canvas_area {
   width: 18%;
   height: 60px;
   border-radius: 10px;
}

.div_eliminar_audio {
   width: 50px;
   height: 100%;
}

.btn_eliminar_audio {
   border: 0;
   height: 100%;
   width: 100%;
   font-size: 25px;
   color: #6b709f;
   background: 0 0;
}

.btn_microfono_activo_inactivo {
   border: 0;
   height: 100%;
   width: 100%;
   font-size: 25px;
   color: red;
   background: 0 0;
}

.div_contador_audio {
   width: 50px;
   height: 100%;
}

.div_contador_audio {
   text-align: center;
   align-content: center;
   font-weight: 600;
}

.canvas_vos_pintado {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}

.boton_send {
   background-color: #f2f2f2 !important;
}

.conjunto-msb-footer {
   display: flex;
   justify-content: space-between;
}

.canal_mensajeria {
   text-align: center;
   cursor: pointer;
}

@media (min-width: 0px) and (max-width: 860px) {
   .pintar_card {
      width: 80%;
   }
}

.video-general {
   width: 100%;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   border-radius: 5px;
}

.div_filtro_plantillas {
   display: flex;
}

#input_nombre_plantilla {
   margin-right: 5px;
}

.centrar {
   text-align: center;
   align-content: center;
}

.configuracion_plantilla {
   /* overflow-y: auto; */
}

.plantilla_vista_previa {
   background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url("../img/fondo1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 300px;
   margin-bottom: 15px;
}

/* Estilo del contenedor principal del select */
#seleccionar_medio_mensaje + .select2-container .select2-selection {
   height: 31.11px !important;
   padding: 0 5px !important;
   display: flex !important;
   align-items: center !important;
   border: 1px solid rgb(211, 202, 192) !important;
   background-color: #f8f9fa !important;
}

/* Ajustar el contenido renderizado (texto + imagen) */
#seleccionar_medio_mensaje + .select2-container .select2-selection__rendered {
   line-height: 31.11px !important;
}

/* Ajustar flecha (dropdown icon) */
#seleccionar_medio_mensaje + .select2-container .select2-selection__arrow {
   height: 31.11px !important;
}

/* Estilo del menú desplegable al abrirlo */
#seleccionar_medio_mensaje + .select2-container .select2-dropdown {
   border: 1px solid rgb(211, 202, 192) !important;
   background-color: #f8f9fa !important;
}

/* Asegurar que el contenedor de resultados tenga el fondo correcto */
#seleccionar_medio_mensaje + .select2-container .select2-results {
   background-color: #f8f9fa !important;
}

/* Estilo de las opciones dentro del menú */
#seleccionar_medio_mensaje + .select2-container .select2-results__option {
   background-color: #f8f9fa !important;
   border: 1px solid rgb(211, 202, 192) !important;
}

/* Anular fondo negro predeterminado para todas las variantes */
#seleccionar_medio_mensaje
   + .select2-container--default
   .select2-results__option {
   background-color: #f8f9fa !important;
   border: 1px solid rgb(211, 202, 192) !important;
}

/* Asegurar que el fondo negro no aparezca en ninguna opción, incluso seleccionada */
#seleccionar_medio_mensaje
   + .select2-container--default
   .select2-results__option[aria-selected="true"] {
   background-color: #f8f9fa !important;
   border: 1px solid rgb(211, 202, 192) !important;
}

/* Cambiar el color de hover a rojo */
/* #seleccionar_medio_mensaje + .select2-container--default .select2-results__option--highlighted {
   background-color: red !important;
   border: 1px solid rgb(211, 202, 192) !important;
   color: #fff !important;  
}
 */
/* Asegurar que el contenedor del dropdown no tenga fondo ni borde oscuro */
#seleccionar_medio_mensaje
   + .select2-container--default
   .select2-dropdown--below {
   background-color: #f8f9fa !important;
   border: 1px solid rgb(211, 202, 192) !important;
}

#seleccionar_medio_mensaje {
   /* background-color: #f5f5f5;
   width: 100%;
   padding: 0 5px;
   margin-bottom: 10px; */

   background-color: #f5f5f5;
   width: 100%;
   padding: 5px;
   border: 1px solid rgb(211, 202, 192);
   border-radius: 4px;
   font-size: 14px;
   color: black;
}

.modal-content {
   background-color: #f5f5f5;
}

.plantilla_vista_previa_headers {
   min-height: 55px;
   background-color: white;
   border-bottom: 1px solid #d3cac0;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   max-height: 100%;
   height: 100%;
}

.extender-contenedores {
   width: 100%;
   max-width: 100%;
}

#texto_header_plantilla_previa {
   font-weight: 600;
   color: black;
   font-size: 18px;
}

.texto_header_mensaje {
   font-weight: 600;
   color: black;
   font-size: 18px;
}

#texto_body_plantilla {
   font-size: 14px;
   color: black;
   white-space: break-spaces;
}

#texto_body_plantilla_previa {
   font-size: 14px;
   color: black;
   white-space: break-spaces;
}

.texto_body_mensaje {
   font-size: 14px;
   color: black;
   white-space: break-spaces;
}

#texto_footer_plantilla {
   color: #8696a0;
   white-space: break-spaces;
}

#texto_footer_plantilla_previa {
   color: #8696a0;
   white-space: break-spaces;
}

.texto_footer_mensaje {
   color: #8696a0;
   white-space: break-spaces;
}

.plantilla-footer {
   margin-top: 6px;
}

.informacion_general_plantilla {
   padding-left: 0px;
}

.descripcion_general_plantilla {
   background-color: white;
   border-radius: 5px;
   border: 1px solid #d3cac0;
   padding: 5px;
   padding-bottom: 11px;
   margin-bottom: 12px;
   padding-left: 0px;
   padding-right: 0px;
}

.separador {
   padding-right: 10px;
}

@media (max-width: 767px) {
   .informacion_general_plantilla {
      padding-right: 0px;
      margin-bottom: 10px;
   }

   .separador {
      padding-right: 0px;
      margin-bottom: 10px;
   }

   .contenido_guardar_plantilla {
      margin-top: 10px;
   }
}

.modal-header {
   min-height: 16.43px;
   padding: 15px;
   border-bottom: 1px solid #d3cac0 !important;
}

#texto_textarea_header {
   /*    min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical; */
   min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   overflow: hidden;
}

#texto_textarea_body {
   /*    min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical; */
   min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   overflow: hidden;
}

#texto_textarea_footer {
   /*    min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical; */
   min-height: 100px;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid #ccc;
   border-radius: 4px;
   resize: vertical;
   overflow: hidden;
}

.contenido_principal_header {
   margin-top: 12px;
}

.contenido_principal_body {
   margin-top: 12px;
}

.contenido_principal_footer {
   margin-top: 12px;
}

.contenido_principal_buttons {
   margin-top: 12px;
}

.contenido_principal_guardar {
   margin-top: 12px;
}

.imagen_header_plantilla {
   background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url("../img/imagen_sinimagen.png");
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 180px;
   margin-bottom: 10px;
}

.imagen_header_plantilla_location {
   background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url("../img/puntero_google_map.png");
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 180px;
   margin-bottom: 10px;
}

.video_header_plantilla {
   background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url("../img/imagen_play.png");
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 180px;
   margin-bottom: 10px;
}

.documento_header_plantilla {
   background-color: #e5ddd5;
   height: 100%;
   padding: 0px;
   background-image: url("../img/imagen_documento.png");
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid #d3cac0;
   border-radius: 5px;
   max-height: 100%;
   min-height: 180px;
   margin-bottom: 10px;
}
.contenedor_header_plantilla {
   /*  background-color: #e5ddd5; */
   height: 100%;
   padding: 0px;
   /*  border: 1px solid #d3cac0; */
   border-radius: 5px;
   max-height: 100%;
   min-height: 180px;
   margin-bottom: 10px;
   align-content: center;
   text-align: center;
}

.color-error {
   border: 1px solid red !important;
}

.mensajes_botones {
   border-top: 1px solid #dadde1;
   text-align: center;
   padding-top: 3px;
}

.angotar_mensajes_botones {
   text-decoration: none !important;
   cursor: default;
}

.div_mensaje_boton {
   margin: 8px;
}

.class_hr {
   border-top: 1px solid #dadde1;
   width: 100%;
   margin-top: 0px;
   margin-bottom: 15px;
}

.quitar_estilo_mensajes_botones {
   border-top: none;
   text-align: center;
   padding-top: 0px;
}

.icono_plantilla {
   width: 17px;
   height: 17px;
}

.margin_bottom {
   margin-bottom: 0px;
}

.item_config {
   text-align: center;
   cursor: pointer;
}

.borde-boton {
   border-color: #d3cac0 !important;
   border: 1px solid #d3cac0 !important;
}

/* Estilo para el botón redondo */
.scroll-button {
   position: fixed;
   bottom: 122px;
   right: 29px;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-color: #ffffff; /* Color de fondo similar a WhatsApp */
   color: #888d90;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   text-align: center;
   align-content: center;
   z-index: 1000;
   display: none; /* Oculto inicialmente */
}

.scroll-button i {
   font-size: 15px;
}

.margin_bottom {
   margin-bottom: 0px;
}

.swal2-container {
   z-index: 9999;
}

h4 {
   color: #767676;
}

.bounce-left {
   animation: bounce-left 0.9s linear both;
}
@keyframes bounce-left {
   0% {
      transform: translateX(-48px);
      animation-timing-function: ease-in;
      opacity: 1;
   }
   24% {
      opacity: 1;
   }
   40% {
      transform: translateX(-26px);
      animation-timing-function: ease-in;
   }
   65% {
      transform: translateX(-13px);
      animation-timing-function: ease-in;
   }
   82% {
      transform: translateX(-6.5px);
      animation-timing-function: ease-in;
   }
   93% {
      transform: translateX(-4px);
      animation-timing-function: ease-in;
   }
   25%,
   55%,
   75%,
   87%,
   98% {
      transform: translateX(0);
      animation-timing-function: ease-out;
   }
   100% {
      transform: translateX(0);
      animation-timing-function: ease-out;
      opacity: 1;
   }
}

.badge-contactos {
   float: right;
}
#opciones_mensajes::after {
   display: none;
}

/* .loader_ws {
   width: 100%;
   height: 4.8px;
   display: inline-block;
   position: relative;
   background: #354e67;
   overflow: hidden;
}
.loader_ws::after {
   content: "";
   width: 192px;
   height: 4.8px;
   background: #fff;
   position: absolute;
   top: 0;
   left: 0;
   box-sizing: border-box;
   animation: animloader 2s linear infinite;
}

@keyframes animloader {
   0% {
      left: 0;
      transform: translateX(-100%);
   }
   100% {
      left: 100%;
      transform: translateX(0%);
   }
}
 */

.loader_ws {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: block;
   margin: 15px auto;
   position: relative;
   color: #354e67;
   left: -100px;
   box-sizing: border-box;
   animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
   0% {
      box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
         0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
   }
   12% {
      box-shadow: 100px 0 #354e67, 0px 0 rgba(255, 255, 255, 0),
         0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
   }
   25% {
      box-shadow: 110px 0 #354e67, 100px 0 #354e67, 0px 0 rgba(255, 255, 255, 0),
         0px 0 rgba(255, 255, 255, 0);
   }
   36% {
      box-shadow: 120px 0 #354e67, 110px 0 #354e67, 100px 0 #354e67,
         0px 0 rgba(255, 255, 255, 0);
   }
   50% {
      box-shadow: 130px 0 #354e67, 120px 0 #354e67, 110px 0 #354e67,
         100px 0 #354e67;
   }
   62% {
      box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #354e67,
         120px 0 #354e67, 110px 0 #354e67;
   }
   75% {
      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
         130px 0 #354e67, 120px 0 #354e67;
   }
   87% {
      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
         200px 0 rgba(255, 255, 255, 0), 130px 0 #354e67;
   }
   100% {
      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
         200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
   }
}

.loader_ld {
   width: 4px; /* más pequeño */
   height: 4px;
   border-radius: 50%;
   display: block;
   margin: 3px 0;
   position: relative;
   color: #354e67;
   box-sizing: border-box;
   animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
   0% {
      box-shadow: -20px -8px, -7px 0, 7px 0, 20px 0;
   }
   33% {
      box-shadow: -20px 0px, -7px -8px, 7px 0, 20px 0;
   }
   66% {
      box-shadow: -20px 0px, -7px 0, 7px -8px, 20px 0;
   }
   100% {
      box-shadow: -20px 0, -7px 0, 7px 0, 20px -8px;
   }
}

.loader_ws_chats {
   position: relative;
   width: 100px;
   height: 100px;
}

.loader_ws_chats:before,
.loader_ws_chats:after {
   content: "";
   border-radius: 50%;
   position: absolute;
   inset: 0;
   box-shadow: 0 0 10px 2px rgb(123 141 159 / 30%) inset;
}
.loader_ws_chats:after {
   box-shadow: 0 2px 0 #354e67 inset;
   animation: animacion_rotate 2s linear infinite;
}

@keyframes animacion_rotate {
   0% {
      transform: rotate(0);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* .loader_ws_chats {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: inline-block;
   border-top: 3px solid #354e67;
   border-right: 3px solid transparent;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
} */

.blur-in {
   animation: blur-in 0.4s linear both;
}
@keyframes blur-in {
   0% {
      filter: blur(12px);
      opacity: 0;
   }
   100% {
      filter: blur(0);
      opacity: 1;
   }
}

.blur-in-expand {
   animation: blur-in-expand 0.2s linear both;
}
@keyframes blur-in-expand {
   0% {
      transform: scale(0);
      filter: blur(12px);
      opacity: 0;
   }
   100% {
      transform: scale(1);
      filter: blur(0);
      opacity: 1;
   }
}

.whatsapp-container {
   display: flex;
   /*  align-items: center; */ /* Alinea verticalmente los elementos */
   gap: 10px; /* Espacio entre el ícono y el texto */
   height: 100%; /* Asegura que el contenedor use el 100% de la altura disponible */
   width: 100%; /* Asegura que el contenedor use el 100% del ancho disponible */
   color: #282e34; /* Color del texto según la imagen */
   padding: 9px;
}

.whatsapp-icon {
   flex-shrink: 0; /* Evita que el ícono se reduzca */
   height: 20px; /* Altura del ícono */
   width: 20px; /* Ancho del ícono */
}

.whatsapp-icon img {
   height: 100%; /* El ícono ocupa el 100% de la altura del contenedor */
   width: 100%; /* El ícono ocupa el 100% del ancho del contenedor */
}

.whatsapp-text {
   flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
   margin: 0; /* Elimina márgenes predeterminados */
}

.whatsapp-text h4 {
   margin: 0; /* Elimina margen superior/inferior del título */
   font-size: 16px; /* Tamaño de fuente aproximado según la imagen */
   font-weight: 600; /* Peso de fuente similar al de la imagen */
   color: #282e34;
}

.whatsapp-text p {
   margin: 0; /* Elimina margen superior/inferior del párrafo */
   font-size: 14px; /* Tamaño de fuente aproximado según la imagen */
}

.custom-btn {
   /* Estilo base del botón */
   background-color: #0d6efd; /* Color azul similar al btn-primary de Bootstrap */
   color: #ffffff; /* Texto blanco */
   padding: 1px 11px; /* Espaciado interno: 10px vertical, 20px horizontal */
   border: none; /* Sin borde */
   border-radius: 5px; /* Bordes redondeados */
   font-size: 16px; /* Tamaño de fuente */
   font-weight: 500; /* Peso de fuente */
   cursor: pointer; /* Cursor de mano al pasar el ratón */
   display: inline-block; /* Asegura que el botón se comporte como inline-block */
   transition: background-color 0.3s ease, transform 0.1s ease; /* Transiciones suaves para hover y click */
}

/* Efecto hover */
.custom-btn:hover {
   background-color: #0b5ed7; /* Color más oscuro para el hover */
}

/* Efecto al hacer clic (active) */
.custom-btn:active {
   transform: scale(0.98); /* Ligeramente más pequeño al hacer clic */
   background-color: #0a58ca; /* Color aún más oscuro al hacer clic */
}

/* Opcional: Estilo para cuando el botón está deshabilitado */
.custom-btn:disabled {
   background-color: #6c757d; /* Gris para estado deshabilitado */
   cursor: not-allowed; /* Cursor de "no permitido" */
   opacity: 0.65; /* Reducir opacidad */
}
