.text-to-expand {
  max-height: 0;         
  overflow: hidden;     
  transition: max-height 0.5s ease-out;
}
.expanded{
 max-height: 2000px !important;
}
.buttons-collapse {
  display: none;
  margin-top: 10px;
}

.buttons-expand {
  cursor: pointer;
  background: var(--background-grey);
  border-radius: 50%;  
  margin-top: 15px;

  
}
.buttons-expand:hover {
  background: var(--background-grey-very-ligth);
}


.buttons-collapse.showButton {
  display: inline-block; /* Show collapse button when content is expanded */
  cursor: pointer;
  background: var(--background-grey);
  border-radius: 50%;  
}
.buttons-collapse.showButton:hover {
  background: var(--background-grey-very-ligth);
}

/* SHOW LIST PAIR RESPONSE*/
.svg-chat-div-list-pairs {
justify-content: center;
border: 1px solid var(--background-grey);
border-radius: 8px; 
padding: 15px;
width: 92%;
margin-bottom: 30px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.svg-chat-div-list-pairs svg {
margin-bottom: 15px;
}

/* extra data*/

.show-list-pairs-extra-data {
  width: 100% !important;
}
.show-list-pairs-info-block .show-list-pairs-info-button {
width: 100% !important;
border-top:  1px solid rgba(0, 0, 0, 0.1);
padding-top: 10px;
}

.show-list-pairs-info {
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-grey);
padding: 12px 16px;
border-radius: 8px;
font-family: sans-serif;
font-size: 14px;
}




.show-list-pairs-keys {
display: flex;
flex-direction: column;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
font-weight: 600;
color: var(--text-dark);
min-width: 120px;
max-width: 180px;
}

.show-list-pairs-value {
display: flex;
flex-direction: column;
text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 
color: var(--text-black);
flex-grow: 1;
max-width: 300px;
}

.show-list-pairs-info-button {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
margin-top: 15px;
}

/* extra data*/
.show-list-pairs-info-button .show-list-pairs-info {
padding: 0 !important;
background-color: transparent;
margin-bottom: 10px;
}

.show-list-pairs-info-button .show-list-pairs-expand-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
color: var(--text-dark);
}


.key-value-row {
display: table-row;  
position: relative;  
cursor: pointer;  
}
.key-value-row:hover {
  background-color: var(--background-grey); ;
  }
  
.key-value-row span {
display: table-cell; 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 6px;
}

.show-list-pairs-key {
font-weight: 600;
color: var(--text-dark);
}

.show-list-pairs-value {
color: var(--text-black);
padding-right: 10px;  
}

.list-pairs-copy-btn{
cursor: pointer;
color: #0077cc; 
font-size: 1px;
padding: 10px;
width: 40px !important;
height: 36px !important;  /* Fixed height to prevent the div from shifting when hovering */
}

.key-value-row:hover .list-pairs-copy-btn {
font-size: 18px;
}


@media (max-width: 948px) {
  .key-value-row {
    padding: 2px;
      display: flex;
      flex-direction: column; /* Los elementos se apilan verticalmente */
      width: 100%; /* Asegura que el ancho sea completo */
      position: relative;
      padding-right: 25px;
    }
  .key-value-row span {
 padding: 2px;
  }
  .key-value-row:hover .list-pairs-copy-btn {
    font-size: 16px;
    align-self: center;

} 

.key-value-row .material-symbols-outlined{
  position: absolute;
  left: 89%;
  top: 30%;

} 
.show-list-pairs-info{
padding: 0;
font-size: 14px;

} 
}

@media (max-width: 748px) {

  .show-list-pairs-info{
    padding: 0;
    font-size: 10px;
    
    } 
}