:root {
     --dark-blue: #013161;
     --ligth-blue: #B4CFE4;
     --dark-grey: #D9D9D9;
     --ligth-grey: #F4F4F4;
 }

 html,
 body {
     font-family: "Poppins", Arial, sans-serif;
     /* Fuente moderna */
     margin: 0;
     /*background-color: red;*/
     width: 100%;
     height: 100%;

 }

 #chatboxWacChat {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background-color: #ffffff;
 }



 #spinnerLoading {
     margin: 0;
     padding: 0;
 }

 #chatheader {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 25px;
     background-color: var(--ligth-grey);
     color: white;
 }

 #chatheader>div:first-of-type {
     display: flex;
     align-items: center;
 }

 #btnCerrar {
     padding: 0;
 }


 .chatImg {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     margin-right: 20px;
 }

 .chatName {
     font-size: 21px;
     font-weight: bold;
     color: var(--dark-blue)
 }

 #subTitle {
     padding: 0;
     margin: 0;
     margin-top: 5px;
     font-size: 14px;
     color: var(--dark-blue)
 }


 #mensajesWacChat {
     flex-grow: 1;
     display: flex;
     overflow: auto;
     padding: 25px 15px;
     font-size: 14px;
     max-width: 100%;
     flex-direction: column;
 }



 /* Tamaño del scroll */
 #mensajesWacChat::-webkit-scrollbar {
     width: 8px;
     margin-top: 5px;
 }

 /* Estilos barra (thumb) de scroll */
 #mensajesWacChat::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }

 #mensajesWacChat::-webkit-scrollbar-thumb:active {
     background-color: #999999;
 }

 #mensajesWacChat::-webkit-scrollbar-thumb:hover {
     background: #b3b3b3;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
 }

 /* Estilos track de scroll */
 #mensajesWacChat::-webkit-scrollbar-track {
     background: #e1e1e1;
     border-radius: 4px;
 }

 #mensajesWacChat::-webkit-scrollbar-track:hover,
 #mensajesWacChat::-webkit-scrollbar-track:active {
     background: #d4d4d4;
 }


 .usuario,
 .chatbot {
     display: block;
     border-radius: 10px;
     padding: 5px 10px;
     margin-bottom: 5px;
 }

 .usuario {
     background-color: transparent;
     color: #333;
     margin-left: 10px;
 }

 .chatbot {
     background-color: #eee;
     color: #333;
     margin-right: 10px;
     margin-left: 30px;
 }

 #entrada {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 15px;
     /*border-top: 1px solid #adadad;*/
 }

 .textoInput {
     display: flex;
     border: none;
     resize: none;

     /* white-space: pre-wrap;*/
     padding: 10px;
     border-radius: 8px;
     /*word-wrap: break-word;*/
     border: 2px solid;
     border-color: #C0C0C0;
     /* height: 25px; */
     width: 100%;
     font-size: 16px;
     color: black;

     max-height: 200px;
     /*  height: 24px;*/
     overflow-y: hidden;

 }

 .textoWacChat:focus {
     border-color: #808080 !important;
     outline: none !important;
 }

 .textoInput::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #adadad;
     opacity: 1;
     font-family: "Poppins", Arial, sans-serif;
     /* Firefox */
 }

 .buttonGroup {
     display: flex;
     margin-left: 15px;
 }

 .enviarIcon {
     height: 20px;
 }

 button {
     border: none;
     border-radius: 7px;
     padding: 10px;
     cursor: pointer;
     margin: 3px;
     background-color: transparent;

 }

 button:hover {
     background-color: #f1f1f1;
     -webkit-box-shadow: 5px 9px 34px -21px rgba(0, 0, 0, 0.50);
     -moz-box-shadow: 5px 9px 34px -21px rgba(0, 0, 0, 0.50);
     box-shadow: 5px 9px 34px -21px rgba(0, 0, 0, 0.705);

 }


 .resizer {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 20px;
     height: 20px;
     background-color: transparent;
     cursor: se-resize;
 }

 .mssgChatbot {
     margin-top: 0px;
     margin-bottom: 20px;
     padding: 0.5rem 1.5rem;
     border-radius: 5px 5px 5px 0px;
     max-width: 30rem;
     background-color: var(--ligth-blue);
     font-size: 16px;
     word-wrap: break-word;
     width: fit-content;

 }

 #closeButton {
     position: absolute;
     right: 20px;
     top: 15px;
 }

 #closeButton:hover {
     background-color: rgba(0, 0, 0, 0.062);
     border-radius: 5px;
 }

 #closeIcon {
     display: block;
     height: 3px;
     width: 30px;
     background-color: rgb(184, 184, 184);
 }

 .mssgUsuario {
     margin-top: 0px;
     margin-bottom: 20px;
     padding: 0.5rem 1.5rem;
     border-radius: 5px 5px 0px 5px;
     width: fit-content;
     align-self: flex-end;
     font-size: 16px;
     color: black;
     background-color: var(--dark-grey);
     max-width: 30rem;
     word-wrap: break-word;

 }

 #blurContainer {
     position: absolute;
     display: none;
     background-color: rgba(255, 255, 255, 0.548);
     height: 100%;
     width: 100%;
     justify-content: center;
     align-items: center;
 }

 #blurMensajeContainer {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: var(--ligth-grey);
     width: 400px;
     max-width: 90vw;
     padding: 15px;
     border-radius: 5px;

 }

 #blurMensajeContainer p {
     line-height: calc(1ex / 0.32);
     font-size: 14px !important;
     text-align: left;
     hyphens: auto;

 }

 #blurMensajeContainer button {
     padding: 0.5rem 1.5rem;
     margin-top: 10px;
     margin-bottom: 10px;
     border-radius: 5px;
     background-color: var(--ligth-blue);
     width: fit-content;
 }

 #blurMensajeContainer button:hover {
     background-color: var(--dark-grey);
 }

 @media screen and (max-width: 500px) {
     .mssgChatbot {
         width: auto;
     }

     .mssgUsuario {
         width: auto;
     }
 }

 .myTime {
     padding: 0;
     margin: 0;
     text-align: right;
     font-size: 14px;
 }

 .mssgOpcion {
     padding: 5px 10px;
     margin-bottom: 10px;
     margin-top: 0;
     border: 1px solid black;
     border-radius: 7px;
     width: fit-content;
     cursor: pointer;
 }



 /*/spinner*/
 .lds-ellipsis {
     display: inline-block;
     position: relative;
     width: 50px;
     height: 50px;
     ;
     margin-bottom: 40px;
 }

 .lds-ellipsis div {
     position: absolute;
     top: 33px;
     width: 13px;
     height: 13px;
     border-radius: 50%;
     background: #5e5d5d;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }

 .lds-ellipsis div:nth-child(1) {
     left: 8px;
     animation: lds-ellipsis1 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(2) {
     left: 8px;
     animation: lds-ellipsis2 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(3) {
     left: 32px;
     animation: lds-ellipsis2 0.6s infinite;
 }

 .lds-ellipsis div:nth-child(4) {
     left: 56px;
     animation: lds-ellipsis3 0.6s infinite;
 }

 @keyframes lds-ellipsis1 {
     0% {
         transform: scale(0);
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes lds-ellipsis3 {
     0% {
         transform: scale(1);
     }

     100% {
         transform: scale(0);
     }
 }

 @keyframes lds-ellipsis2 {
     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(24px, 0);
     }
 }