/* results /////////////////////////// */


/* results col */
#pageColListaRezultate {
    font-size: 1rem;
    width: 90vw;
    display: none;
  
  }
  
  #searchingAnimation {
    display: none;
    width: 60vw;
    height: 0.08em;
    margin:  1rem 0.1rem 0.1rem 0.3rem;
    background: #1f1f1f;
    animation: loading 0.4s infinite;
  }
  
  
  .loading span:nth-of-type(1) {
    background: #4f4f4f5c;
    animation-delay:0.01s;
    width: 10vw;
    
  }
  .loading span:nth-of-type(2) {
    background: #5f5f5fac;
    animation-delay: 0.01s;
    width: 20vw;
  }
  .loading span:nth-of-type(3) {
    background: #6d6d6def;
    animation-delay: 0.01s;
    width: 30vw;
  }
  .loading span:nth-of-type(4) {
    background: #838383ef;
    animation-delay:0.01s;
    width: 40vw;
  }
  .loading span:nth-of-type(5) {
    background: #ffffff;
    animation-delay: 0.01s;
    width: 50vw;
  }
  .loading span:nth-of-type(6) {
    background: #ffffff;
    animation-delay: 0.01s;
    width: 100vw;
  }
  
  @keyframes loading {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 100;
    }
  }
  


/* one row of results */
.tOnlineElements {
    color: #000000;
    padding: 0.1rem,0.1rem,0.1rem,0.1rem;
    
}
  

/* headlines */

/* [data-tonlinenumheadingstotal]{
    order:100;
    font-size: 1rem;
    cursor: pointer;
    color: #0300a5;
    margin-bottom: 3rem;
    display: none;
    
} */



/* the headline block */
.headlines {
    order:11;
    width: 100%;
    margin:  0.5rem 0.1rem 3.5rem 0.1rem;
   
}



.headlines::after {
  content: attr(data-tonlinenumheadingsheadlinesrow) ' headlines (on the original page)  (...) ' ;
  cursor: pointer;
  color: #0300a5;
}



.headlines::before {
  
}



/* the per each headline */
.headings {
 
  display: list-item;
  font-size: 1rem;
  line-height: 1.3rem;
  margin: 0.1rem 0.1rem 0.1rem 1rem;
  color: #000000;
  cursor: pointer;
  width: 65%;
    
}

.headings:last-of-type  {
  margin-bottom: 1rem;
}

.headings:link:after {
    color: #0300a5;
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}





/* one property elements */
[data-toproperty] {
   display: block;
   width: 100%;
   font-size: 1rem;
   
}

[data-toproperty]::before {
    /* content: attr(data-toproperty) ": "; */
    content: none;
    color: #808080;
}

[data-toproperty]::after {
    content: none;
    color: #808080;
  
}





/* the per each headline */
.titledOnlineID {
    margin: 0.1rem 0.1rem 0.1rem 0.1rem;
    cursor: pointer;
    
}
.titledOnlineID:link:after {
    
}
.titledOnlineID:link:before {
    
}

    
/* titles time */
[data-toproperty="time"] {
    order:8;
    cursor: default;
    font-size: 1.2rem;
    color: #808080;
    }

    [data-toproperty="time"]::before {
     
      content: 'Update (from site):';
    }

    [data-toproperty="time"]::after {
      content: ' ';
    }

    [data-toproperty="time"]:hover {
      color: #808080;
    }

   





/* titles author */
    [data-toproperty="HCA"] {
      order: 2;
      font-size: 1.2rem;
      display: inline;
      color: #808080;
      cursor: default;
    }

        [data-toproperty="HCA"]:hover {
          color: #808080;
        }

        [data-toproperty="HCA"]::before {
          content: 'Source: ';
      
        }

        [data-toproperty="HCA"]::after {
        
      
        }




/* titles title */
[data-toproperty="title"] {

    order: 1;
    display: block;
   
    width: 100%;
    line-height: 1.9rem;
    font-size: 1.6rem;
    color: #0300a5;
  

    }


    [data-toproperty="title"]:hover {
    cursor: pointer;
   
    }

    [data-toproperty="title"]::before {
    content: none;
   
    }






/* titles titledOnlineID */
[data-toproperty="titledOnlineID"] {
    order: 0;
    color: #0300a5;
    cursor: pointer;
    font-size: 1.2rem;
   
}

    [data-toproperty="titledOnlineID"]::before {
       
        cursor: pointer;
        color: #0300a5;
        content: "#";
        cursor: default;

    }


  [data-toproperty="titledOnlineID"]::before {

      color: #808080;
      content: "On #";

  }
  [data-toproperty="titledOnlineID"]::after {
      content: " content titled:";
      color: #808080;
  }



/* titles URL */
    [data-toproperty="URL"] {
    order: 10;
    display: none;
    width: 100%;
    color: #0300a5;

    }


        [data-toproperty="URL"]::before {
        content: none;
        
        }

        [data-toproperty="URL"]:hover {
        cursor: default;
        color: #000000;
        }




/* titles AI */
[data-object="chat.completion"] {
  /* data-object="chat.completion" */
  order: 4;
  cursor: default;
  

}

    [data-object="chat.completion"]::before  {
        content: " Update: " attr(data-created) "";
        width: 100%;
        font-size: 1.2rem;
        color: #808080;
        
    }
    [data-object="chat.completion"]  > .choices > .message {
     
    }

    
.choices a {
  color: #000000;
  
}

.message {
  margin: 1.2rem;
  padding: 1.2rem;
  width: 80%;
  font-size: 1.1rem;
}
.message h1,h2,h3,h4,h5,h6 {
  white-space: break-spaces;
  font-size: 1.3rem;
} 
  


/* Your base CSS with one required addition */
[data-toproperty="aidea"] {
    /* Your existing order and margin styles */
    order: 3;
    margin-bottom: 0.1rem;
    /* padding: 0.1rem; */
    font-size: 1.2rem;
    /* These lines create the horizontal layout */
    display: flex;
    align-items: center;

    row-gap: 0.4rem;
    column-gap: 1.5rem;

    flex-wrap: wrap;
}

/* This adds the "Options: " label (Unchanged) */
[data-toproperty="aidea"]::before {
    content: "Options: ";
    color: #808080;
    cursor: default;
    
}

/* This styles the individual links (Unchanged) */
.aidea-menu-item {
    color: #00610a;
    cursor: pointer;
}


/* --- ADD THIS SINGLE RULE --- */
.aidea-feedback-container {
    /* margin: 0.1rem;
    padding: 0.1rem; */
    /* font-size: 1.2rem; */
    display: flex;
    gap: 2rem;
    
}


.aidea-menu-item.selected {
    background-color: #000000; /* A light blue highlight */
    color: #ffffff;
    border-radius: 0.3rem;
    /* padding: 0.3rem; */
    
}

/*
 * Style for the "Streamed" status notice to make it compliant with your design.
 */
.aidea-streamed-notice {
    /* Match the font size of your other menu items */
    font-size: 1.2rem;

    /* Use a neutral color to indicate it's a status, not an action */
    color: #808080;
    
    /* Make it non-interactive */
    cursor: default;
    text-decoration: none;
}

.aidea-streamed-notice:hover {
    color: #808080; /* This keeps the color the same as its non-hover state */
    text-decoration: none; /* This removes the underline */
}

 /*SEARCH RESULT IMPROVE */
/* the row scoring for testing purpose */
/* .row[data-scorerow]:before {
  content: attr(data-posrow);
  
}
.row[data-scorerow]:after {
  content: attr(data-scorerow);
  padding-left: 1%; 
  padding-right: 1%; 
}
.headings[data-scoreheadline]:before {
  content: attr(data-scoreheadline);
  padding-left: 1%; 
  padding-right: 1%; 
} */



/*the updates interface*/
#updates {
    display: none;
    /* height: 1.4rem; */
    font-size: 1.4rem;
    margin: 0.0rem 0.1rem 0.0rem 0.1rem;
    color: #0300a5;
  }
  
  /*the updates interface*/
  #updatesdate {
    cursor: default;
    display: none;
    /* height: 1.8rem; */
    font-size: 1rem;
  
    color: #868686;
  }
  
  /* #updatesdate::before {
    content: " in the -  ";
  } */
  
  /* number of headlines show */
  .headlineUpdates {
    
    content: attr(headlineproperty);
   
  }

  /* The visuals container */
.visuals {
  display: flex;
  flex-wrap: wrap; /* Allow the items to wrap as needed */
  margin: 1rem 0; /* Add some margin at the top and bottom */
}

/* Each image within the visuals container */
.visuals img {
  flex: 1 0 calc(50% - 2rem); /* By default, images take up 50% of the container width (minus some margin) */
  max-width: 100%; /* Ensure images are never wider than their container */
  margin: 1rem; /* Add some margin around each image */
  object-fit: cover; /* Ensure the aspect ratio of the images is preserved */
  height: auto; /* Allow the images to resize in height automatically */
}

/* Adjust the image size for larger screens */
@media (min-width: 900px) {
  .visuals img {
    flex: 1 0 calc(33.333% - 2rem); /* On larger screens, images take up 33.333% of the container width */
  }
}



#homeNetworksList {

}

.homeNetworksNetworkDetails {
  display: block;
  
  text-decoration: none;
  margin: 0rem;
}


ul {
  list-style-type: none;
  padding-left: 1rem;
  margin-bottom: 2rem;
  margin-top: 0.5rem;
}

li {
  font-size: 1.1rem;
  
  padding: 1px;
 
}


/* A refined, modern style for the key-value list */
.key-value-list {
  /* Remove grid layout for a stacked approach */
  padding: 1rem;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
  border-top: 1px solid #e5e7eb; /* Add a subtle line for separation */
  margin-top: 1rem;
}

.key-value-list dt {
  /* Style the key as a small, uppercase label */
  font-size: 0.7rem; /* 12px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7f7f7f; /* A slightly softer grey */
  
  /* Reset properties from the old style */
  text-align: left;
}

.key-value-list dd {
  /* Give the value space from its label and the next pair */
  /* font-variant: ; */
  margin-left: 0;
  margin-bottom: 1.5rem; /* Space between each key-value group */
  color: #111827; /* A slightly darker, more readable black */
  line-height: 1.6; /* Improve readability for paragraphs */
}

/* Ensure the last item has no extra space at the bottom */
.key-value-list dd:last-of-type {
  margin-bottom: 0;
}

/* This handles HTML within the value, like <h4> */
.key-value-list dd > * {
  margin-top: 0.25rem; /* Add a little space if the value is an HTML element */
}