body {
    display: flex;
    flex-direction: column;
    margin: 0; 
    height: 100vh;
  }
  








   /* LOGIN FRAME */

  #geowallet_brand {
    width: 100%;
    border-radius: 10px;
    /* background-color: white; */
  }

  #geowallet_brand img {
    width: 100%;
    padding:5px;
  }

  #login_frame {
    display:flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    width: 100%;
    text-align:center;
    font-size: 10px;
    padding-bottom:30px;
  }

  .login_form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 5px;
  }

  /* label & text */
  .login_form label,
  .login_form p {
    font-family: "OCR A Std", monospace;
    color: white;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
  }

  /* input */
  .login_form input {
    width: 60%;
    height: 20px;
    text-align: center;
  }

  /* button */
  .button_log,
  .button_caccount {
    display: flex;
    width: 60%;
    justify-content: space-around;
    margin: 10px;
    padding: 5px;
  }

  .login_form button{
    font-family: "OCR A Std", monospace;
    color: white;
    padding: 5px;
    font-size: 10px;
    font-weight: bold;
    border-color: white;
    appearance: none;
  }










  /* CONTAINER A : MAP BACKGROUND*/

  .map {
    position: relative;
    justify-content: space-between;
    height: 100%; /* S'assurer que la carte prend toute la hauteur de la vue */
    width: 100%;
    z-index: 0;
    overflow:hidden;
  }










  /* CONTAINER A1:LEGEND */
  #map_legend {
    position: absolute;
    width: 10%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    background-color: rgba(29, 35, 49, 1); 
    /*background-color: rgba(227, 219, 181, 0.8); */
    border-style: solid;
    border-color: white;
    border-width: 0.1em;
    box-shadow: 6px 0 15px rgba(0, 0, 0, 0.6);
    margin: 10px;
    border-radius: 10px;
    z-index: 1;
    left: 0;
    bottom: 0;
  }

  .group_legend {
    display: flex;
    color: white;
    font-family: "OCR A Std", monospace;
    background-color: rgba(66, 7, 37, 0.8);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); /* Ombre en bas */
    font-size: 13px;
    font-weight: bold;
    justify-content: center;
    margin: 0;
    padding: 5px;
    width: 100%;
  }

  .sublegend_frame {
    width: 100%;
    height: auto;
    color: rgba(66, 7, 37, 0.8);
    overflow-y: auto;
    background-color: rgba(227, 219, 181, 1);
    opacity:70%;
    text-align:center;
    font-size: 10px;
    padding:10px;
  }

  .sublegend_frame th {
    display:none;
  }

  .legend_table {
    width:100%;
  }

  .legend_perf td {
    padding-bottom:10px;
    font-weight: bold;
    font-size :12px;
    font-style:italic;
  }

  #legend_green {
    padding-top:20px;
  }
























  /* TITLE MENU/SUBMENU */

  .title_menu {
    background-color: rgba(25, 0, 45, 1);
    display: flex;
    color: yellow;
    font-family: "OCR A Std", monospace;
    font-size: 13px;
    font-weight: bold;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 3px;
  }

  .typ_layer {
    display: flex;
    color: white;
    font-family: "OCR A Std", monospace;
    /*background-color: rgba(66, 7, 37, 0.8);*/
    background-color: rgba(0, 9, 39, 0.8);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); /* Ombre en bas */
    font-size: 10px;
    font-weight: bold;
    justify-content: center;
    margin: 0;
    padding: 5px;
    width: 100%;
  }

  .sublist_legend {
    /* SELECTION LIST */
    color: blue;
    background-color: white;
    font-family: "OCR A Std", monospace;
    font-style: italic;
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .suggest_li:hover {
    background-color: orange;
  }





 







  /* TEMPLATES FOR LEGEND FRAME */

  /* --------- NAVIGATION MENU TEMPLATE---------- */

  .nav_legend {
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin: 0;
  }

  .navlegend_select {
    display: flex;
    justify-content: space-around;
    background-color: white;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .comm_layer,
  .macro_layer {
    display: flex;
    justify-content: center;
    width: 20%;
    padding: 5px;
    cursor: pointer;
  }

  .comm_layer img,
  .macro_layer img {
    width: 20px;
    height: 20px;
  }

  .comm_layer:hover,
  .macro_layer:hover {
    /* li*/
    background-color: orange;
  }

  .comm_layer.active,
  .macro_layer.active {
    /* li*/
    background-color: rgba(196, 196, 196, 0.8);
  }

  /* LEGEND TITLE */
  #legend_title {
    border-radius: 15px 15px 0px 0px;
  }




  /* CONTAINER A1-X: FOREX LEGEND */
 



  

  /* CONTAINER A1-X COMMODITIES FRAME */








  /* CONTAINER A2: TIME NAVIGATION */

  #timenav_frame {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 30%;
    /*background: linear-gradient(to bottom, indigo, purple);*/
    background: linear-gradient(to bottom, rgba(0, 11, 46, 0.8), rgba(26, 39, 81, 0.8));
    left: 35%;
    box-shadow: 6px 0 15px rgba(0, 0, 0, 0.6);
    border-radius: 0px 0px 20px 20px;
    z-index: 1;
    list-style: none;
    padding: 5px;
  }

  #timenav_select {
    display: flex;
    list-style: none;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: 1px;
  }

  .nav_time {
    display: flex;
    justify-content: center;
    font-family: "OCR A Std", monospace;
    text-align: center;
    color: white;
    font-size: 11px;
    list-style: none;
    margin: 0;
    width: 11%;
  }

  .nav_time:hover {
    /* imd*/
    font-size: 15px;
  }

  .nav_time.active {
    font-weight: bold;
    font-size: 15px;
  }









  /* CONTAINER A3: TOOLS FRAME */
  #tools_frame {
    position: absolute;
    display: flex;
    right: 0;
    width: 20%;
    margin: 15px; /* Marging inside the map */
    z-index: 1;
    height:auto;
    max-height:90%;
    overflow:hidden;
    
  }

  #tool_windows {
    width: 100%;
    display: flex;
    z-index: 1;
  }

  .tool_frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*background: linear-gradient(to bottom, purple, red);*/
    background: linear-gradient(to bottom, rgba(36, 49, 92, 1), rgba(76, 96, 160, 1));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    margin: 0;
    width: 100%;
    border-color:white;
    border-style: solid;
    border-width: 0.1em;
    
  }


  /* CONTAINER A3-2: TOOLS NAVIGATION */

  #tools_nav {
    width: 40px;
    z-index: 2;
  }

  .tools_icon {
    /* <ul> */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    align-items: baseline;
    list-style: none;
    padding: 0; /* Supprime l'espace créé par list-style */
    margin: 0; /* Supprime la marge de différence avec tools_frame */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  .tool_icon {
    display: flex;
    justify-content: center;

    background-color: white;
  }


  .tool_icon img {
    /* imd*/
    width: 40px;
    height: 40px;
    padding: 5px;
  }

  .tool_icon:hover {
    /* li*/
    background-color: orange;
  }

  .tool_icon.active {
    /* li*/
    background-color: rgba(196, 196, 196, 0.8);
  }

  

  /* TEMPLATES FOR TOOLS FRAME
  
  /* ---------SEARCH BAR  TEMPLATE---------- */
  .search_bar {
    display: flex;
    width: 100%;
  }

  .search_bar input {
    width: 100%;
    height: 35px;
  }

  .search_bar img {
    background-color: green;
    width: 35px;
    height: 35px;
    padding: 5px;
  }

  /* ---------- PRICE OVERVIEW TEMPLATE ----------- */

  .price_title {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(112, 0, 58, 0.8);
    font-family: "OCR A Std", monospace;
    font-style: italic;
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 2px;
    margin: 0;
  }

  .price_overview {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: baseline;
    margin: 0;
  }

  .price_evol,
  .price_current {
    display: flex;
    font-family: "OCR A Std", monospace;
    gap: 5px;
    margin: 0;
    padding: 0;
  }

  .price_current {
    display: flex;
    justify-content: center;
    font-weight: bold;
    font-size: 17px;
    background-color: white;
    width: 40%;
    color: purple;
  }

  .price_evol {
    font-style: italic;
    font-weight: bold;
    color: white;
  }

  /* LAST 52 WEEKS */

  .last52W_min,
  .last52W_max {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "OCR A Std", monospace;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    color: white;
    margin: 0;
    width: 25%;
  }

  .last52W_range {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
















  /* ---------- SELECTION ANALYSIS TEMPLATE ----------- */
  .slct_graph {
    width: 100%;
    display: flex;
    justifify-content: center;
    align-items: center;
  }

  .slct_graph_title {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(112, 0, 58, 0.8);
    font-family: "OCR A Std", monospace;
    font-style: italic;
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 2px;
    margin: 0;
  }

  .slct_graph img {
    width: 99%;
  }

  .slct_profit_frame {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background-color: yellow;
  }

  .profit_button {
    width: 50%;
    background-color: rgba(65, 0, 153, 0.8); /* red-purple */
    color: white;
  }

  .expenses_button {
    width: 49%;
    color: white;
    background-color: rgba(65, 0, 153, 0.8); /* red-purple */
  }

  .debts_button {
    width: 49%;
    color: white;
    background-color: rgba(65, 0, 153, 0.8); /* red-purple */
  }

  .dvds_button {
    width: 49%;
    color: white;
    background-color: rgba(65, 0, 153, 0.8); /* red-purple */
  }

  .sectors_table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    justify-content: center; /* Centrer les tables */
    gap: 20px; /* Espace entre les tables */
    padding: 5px;
  }

  .sectors_table td {
    display: flex;
    justify-content: center;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
  }

  .countries_table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: space-around; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement dans la même hauteur */
    gap: 20px; /* Espacement entre la table et le diagramme */
    padding: 20px;
    margin: 0;
  }

  .countries_table td {
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    color: white;
  }

  .countries_table img {
    width: 20px;
  }






  /* ---------- STARS RANGE TEMPLATE ----------- */

  .stars_range {
    display: flex;
    justify-content: space-around;
    padding: 5px;
  }

  .star_checked {
    color: orange;
  }

  .fa-star {
    cursor: pointer;
    font-size: 17px; /* Stars size */
  }









  .tool_name {
    background-color: rgba(25, 0, 45, 1);
    display: flex;
    color: white;
    font-family: "OCR A Std", monospace;
    font-size: 15px;
    font-weight: bold;
    justify-content: center;
    width: 100%;
    padding: 5px 0px; /* 5px top-bottom */
    margin: 0;
  }

  .tool_filter {
    width: 100%;
  }

  .range_slider {
    display: flex;
    justify-content: center;
    padding: 5px;
  }

  .values_range {
    display: flex;
    justify-content: space-between;
    color: white;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .range_slider input {
    height: 5px; /* Specified height */
    width: 90%;
    background: #d3d3d3; /* Grey background */
  }

  .filtering_selection {
    display: flex;
    flex-direction: column;
    justify-center: center;
    align-items: center;
    background-color: green;
    padding: 5px;
  }

  .filtering_selection p {
    color: white;
    font-family: "OCR A Std", monospace;
    font-style: italic;
    font-size: 15px;
    margin: 0;
  }

  .filtering_result {
    font-weight: bold;
    margin: 0;
  }










  /* CONTAINER A3-11: CLIENT ACCOUNT FRAME */

  /* CONTAINER A3-61: PROFIL FRAME */
  #profil_frame {
    width: 100%;
  }



  /* CONTAINER A3-615: PROFIL USER */

  .profil_image {
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    padding:10px;
  }

  .profil_image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.2em;
    border-color: white;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  }

 
  #welcome_message {
    font-size: 20px;
    color: white;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    padding:10px;
    text-align: center;

  }

  .profilinvest_table {
    width: 100%;
    font-size: 10px;
    color: white;
    font-family: "OCR A Std", monospace;
  }

  .profilinvest_table tr {
    padding:10px;
  }

  .profilinvest_table th {
    background-color: rgba(90, 0, 47, 0.8);
    padding:10px;
  }

  .profilinvest_table td {
    font-style: italic;
    text-align: center; 
    padding:10px;
  }

  .profil_invest_table .fa-star {
    font-size: 10px; /* Stars size */
  }


















  /* CONTAINER A3-13: QUICK SELECTION FRAME */

  /* frame */

  #qsinfo_table_frame {
    width: 100%;
    margin:0;
  }

  /* table */

  .qsinfo_table {
    width: 100%;
  }

  /* tr */

  .qsinfo_colname {
    background-color: rgba(112, 0, 58, 0.8);
    display: flex;
    font-style: italic;
  }

  .qsinfo_rowdata {
    display: flex;
    align-items: center;
  }

  .qsinfo_spread {
    display: flex;
    width:100%;
    justify-content: space-between;
    align-items: center;
    background-color: white;
  }



  /* td */

  .qsinfo_table td {
    text-align: center;
    color: white;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
  }

  .title_onecol,
  .data_onecol {
    width:100%;
  }

  .title_onecol{
    font-size: 10px;
  }

  .data_onecol {
    padding:10px;
    font-size: 20px;
  }

  .rowicon_title_img,
  .rowicon_title_text{
    width:50%;
    font-size: 10px;
  }

  #qsinfo_pricediff_24h,
  .rowicon_img,
  .rowicon_text {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width:50%;
    font-size: 11px;
  }

  .rowicon_text{
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: white;
  }


  .spread_value {
    width: 25%;
    font-size: 10px;
  }

  .spread_bar {
    width: 50%; /* S'assure que la largeur est flexible */
  }

  #quick_spread {
    width:100%;
    font-size: 10px;
  }

  .w3-dark-grey{
    width: 50%; 
    height:20px;
  }

  /* img */

  #qsinfo_sector {
    background-color: white;
    border-style: solid;
    border-color: black;
    border-width: 0.1em;
    padding: 1px;
    height: 20px;
  }

  #qsinfo_sector {
    width: 40px;
    height: 40px;
  }

  #qsinfo_country,
  #qsinfo_exchange{
    width: 60px;
    height: 30px;
  }

  
  /* Analysis */

  .qsanalysis_colname{
    width:100%;
    background-color: rgba(44, 8, 67, 0.8);
    color:white;
  }

  #qsanalysis td {
    font-size: 10px;

  }

  .qsanalysis_stats {
    background-color: rgba(80, 0, 130, 0.8);
  }









  /* CONTAINER A3-3 : INDICES MENU */

  regionidx_frame {
    width: 100%;
    color: rgba(66, 7, 37, 0.8);
    font-size: 10px;
    overflow-y: auto;
  }

  
  .indices_table {
    display: table;
    width: 100%; /* La table prend toute la largeur disponible */
    border-collapse: collapse; /* Supprime les espaces entre les cellules */
  }

 

  #regionidx_frame .indices_table td {
    text-align: center;
    font-family: "OCR A Std", monospace;
    color: white;
    font-size: 10px;
  }

  .indice_flag {
    width: 25px; /* Définit une largeur fixe pour les drapeaux */
  }

  .indice_pts {
    width: 100px; /* Définit une largeur fixe pour les points */
  }

  .indice_name {
    width: auto; /* Prend tout l'espace restant */
    text-align: left; /* Alignement du texte à gauche */
  }



/* CONTAINER A3-4 : FOREX MENU */

#forex_frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2px;
}

#regionfx_frame {
  width: 100%;
  color: rgba(66, 7, 37, 0.8);
  font-size: 10px;
  overflow-y: auto;
}


/* SELECT CCY */
  #forex_ccy {
    font-size: 20px;
    margin:0;
  }

  .select_ccyref {
    color: white;
    background-color: rgba(112, 0, 58, 0.8);
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    width: 100%;
    text-align: center;
    font-size: 10px;
    margin:0;
  }

  .select_ccyref option {
    text-align: center; /* Ajustement pour les navigateurs (Chrome, Safari) */
    font-size: 10px;
    font-family: "OCR A Std", monospace;
    color: white;
  }





  .continentfx_ccy td {
    background-color:white;
    text-align: center;
    font-size: 13px;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    color: black;
    margin:3px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
  }

  .regionfx_ccy {
    font-family: "OCR A Std", monospace;
    background-color: rgba(25, 0, 45, 1);
    font-weight: bold;
    font-size: 10px;
    text-align: center;
    color:white;
    
  }

  .forex_row img {
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    border-radius: 50%;
  }

  

  .forex_row:hover {
    background-color: yellow;
  }

  #ccy_valtdy,
  .forex_row .ccy_from {
    text-align: right;
    padding-right:2px
  }

  

 








/* CONTAINER A1-2X: COMMODITIES MENU*/

  #commodities_layers {
    width:100%;
    overflow-y: auto;
  }

  #commodities_table {
    width: 100%;
    border-collapse: collapse;
  }

  #commodities_table th {
    width: 10%;
    color:white;
    font-size: 0.6em;
    margin: 3px;
    text-align: center;
    position: sticky; /* Propriété clé pour figer */
    top: 0; /* Garde le <thead> en haut */
    z-index: 1; /* Priorité sur les autres éléments du tableau */
    background-color: rgba(66, 7, 37, 0.8);
  }


  .comm_category {
    background-color:white;
    text-align: center;
    font-size: 0.8em;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    color: black;
    margin:3px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
  }

  .comm_category img {
    width: 23px;
    margin-right:8px;
  }



  .cat_com_icon img:hover {
    background-color: orange;
  }

  .cat_com_icon img.active {
    background-color: white;
  }

  

  .commodities_row td {
    font-family: "OCR A Std", monospace;
    width: 16%;
    font-weight: bold;
    font-size: 8px;
    padding: 1px;
    color: white;
  }

  .commodities_row img {
    width: 28px;
    background-color: grey;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    padding: 2px;
    cursor: pointer;
  }

  .commodities_row .comm_1dy,
  .commodities_row .comm_ytd,
  .commodities_row .comm_10yr {
    font-size: 0.6em;
    text-align: center;
    background-color: darkslategray;
    padding:0;
    margin : 0;

  }









  /* CONTAINER A3-7: GEOSCREENER */
  
  #geoscreen_button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    font-family: "OCR A Std", monospace;
    color:rgba(215, 0, 127, 0.8);
  } 

  #geoscreen_button img {
    width: 35px;
    height: auto; /* permet de garder les proportions */
    transition: transform 0.2s ease;
  }
  
  #geoscreen_button img,
  #geoscreen_button p {
    transition: transform 0.2s ease;
  }
  
  #geoscreen_button:active {
    font-size: 15px; /* Réduction du texte */
  }
  
  #geoscreen_button:active img,
  #geoscreen_button:active p {
    transform: scale(0.85); /* Réduction image + texte */
  }






  
  .filters_frame {
    width: 100%;
    color: white;
    font-family: "OCR A Std", monospace;
    
    
  }

  /* GEOSCREENER CHECKBOX TEMPLATE */
  .gs_checkbox {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 110px;
    gap: 15px;
    width:100%;
    padding: 10px;
    height: 110px;
  }

  .gs_checkbox label {
    display: flex;
    align-items: center;
    font-style: italic;
    font-size: 11px;
    font-weight: bold;
    padding: 3px;
    gap:10px;
  }

  .gs_checkbox img {
    width: 25px;
  }


  /* GEOSCREENER SECTORS CHECKBOX */

  #sectors_filter img {
    padding: 3px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: black;
  }



  /* GEOSCREENER PER RANGE */
 
  #per_range {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(to right, blue, green, orange, red);
    font-weight: bold;
    font-size: 10px;
   
  }

  #per_range p {
    display: flex;
    justify-content: center;
    width: 20%;
    margin: 0;
  }

  #per_value {
    display: flex;
    justify-content: space-between;
    color: white;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
  }

  #per_value p {
    display: flex;
    justify-content: center;
    margin: 0;
  }

  /* GEOSCREENER YEAR-OVER-YEAR GROWTH */
  #growth_select {
    display: flex;
    flex-direction: column;
    padding: 3px;
  }

  #growth_range {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    font-size: 10px;
    background-color: white;
    padding: 3px;
  }

  .bearbull_frame {
    display: flex;
    justify-content: center;
    width: 50%;
  }

  #growth_range img {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 3px;
  }

  #growth_value {
    display: flex;
    background: linear-gradient(to right, red, orange, blue, green);
    justify-content: space-around;
    font-weight: bold;
    font-size: 10px;
  }

  #growth_value p,
  #dvdyield_value p {
    display: flex;
    justify-content: center;
    margin: 0;
  }


  /* GEOSCREENER DIVIDENDS PERFORMANCE*/

  #dvdyield_value {
    display: flex;
    background: linear-gradient(to right, red, orange, blue, green);
    justify-content: space-between;
    font-weight: bold;
    font-size: 10px;
    margin: 0;
  }






 













  /* CONTAINER A3-9: GEOETF OVERVIEW MENU */

  #geoetf_24h {
    width: 100%;
  }

  /* GEOETF OVERVIEW */
  #geoetf_overview {
    width: 100%;
  }

  /* GEOETF OVERVIEW : BASICS INFORMATION */
  #geoetfbasics_table {
    width: 100%;
    padding: 5px;
  }

  #geoetfbasics_table td {
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    color: white;
  }

  .geoetf_data {
    display: flex;
    justify-content: center;
    border-left-style: groove;
  }

  /* GEOETF OVERVIEW : TOP 10 HOLDINGS */

  #top10_table {
    width: 100%;
    padding: 5px;
  }

  #top10_table img {
    width: 25px;
    height: 25px;
    border-style: solid;
    border-width: 0.1em;
  }

  .top10_sector {
    background-color: white;
    border-color: black;
    border-size: 1px;
  }

  .top10_stock {
    width: 50%;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    overflow: hidden; /* Cache le texte qui dépasse la largeur du conteneur */
    text-overflow: ellipsis; /* Affiche "..." pour indiquer qu'il y a plus de texte */
    max-width: 50%; /* Ajustez la largeur maximale selon vos besoins */
  }

  .top10_loc img {
    background-color: rgba(178, 249, 255, 1);
    border-radius: 50%;
    padding: 1px;
    cursor: pointer;
  }

  #top10_table tr {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    color: white;
    padding: 1px;
  }

  /* GEOETF OVERVIEW : COUNTRIES */
  .circle-diagram {
    width: 200px; /* Tu peux ajuster la taille selon tes besoins */
    height: 200px;
    background-color: lightgray; /* Couleur de fond pour test */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*
#circle_countries {
  border-style:solid;
  border-color:white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: conic-gradient(
    grey 0% 7.66%, 
    rgba(0, 255, 3, 0.8) 7.66% 9.25%, 
    rgba(0, 231, 2, 0.8) 9.25% 11.07%,
    rgba(0, 208, 2, 0.8) 11.07% 13.20%,
    rgba(0, 188, 2, 0.8) 13.20% 15.80%,
    rgba(0, 159, 2, 0.8) 15.80% 18.51%,
    rgba(0, 132, 1, 0.8) 18.51% 21.28%,
    rgba(0, 117, 1, 0.8) 21.28% 24.94%,
    rgba(0, 94, 1, 0.8) 24.94% 30.63%,
    rgba(0, 77, 1, 0.8) 30.63% 100%);
}
*/

  /* GEOETF OVERVIEW : SECTORS */

  .etfsectors_stock img {
    width: 30px;
    height: 30px;
    background-color: white;
    border-style: solid;
    border-color: black;
    border-width: 0.1em;
    padding: 1px;
  }

  /* GEOETF OVERVIEW : CURRENCY RISK */
  .etfccy_table {
    width: 100%;
  }

  .etfccy_namecol {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
    background-color: rgba(130, 1, 51, 0.8); /* red-purple */
    width: 25%;
    padding: 3px;
    border-style: solid;
    border-color: white;
    border-width: 0.1em;
  }

  .etfccy_table td {
    display: flex;
    justify-content: center;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
  }

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

  .etfccy_name img {
    width: 25px;
    height: 25px;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    border-radius: 50%;
  }

  .etfccy_weight,
  .etfccy_impactFund,
  .etfccy_impactPortfolio {
    text-align: center;
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    color: white;
  }

  #etfccy_byHoldings_frame {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #etfccy_byHoldings_frame p {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
    text-align: center;
    background-color: rgba(130, 1, 51, 0.8); /* red-purple */
    width: 100%;
    margin: 0;
    padding: 3px;
  }

  #etfccy_byHoldings_button {
    display: flex;
    justify-content: space-around;
  }

  .etfccy_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 49%;
    font-style: italic;
    color: rgba(65, 0, 153, 0.8); /* red-purple */
    background-color: white;
    padding: 3px;
  }

  .etfccy_button:hover {
    background-color: orange;
  }

  .etfccy_button img {
    width: 25px;
  }

  /* GEOETF OVERVIEW : ESG */

  .etfesg_table {
    width: 100%;
  }

  .etfesg_score {
    width: 25px;
    height: 25px;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
    text-align: center;
    border-style: solid;
    border-color: white;
    border-width: 0.1em;
  }

  .etfesg_loc {
    padding: 1px;
    cursor: pointer;
  }

  .etfesg_loc img {
    background-color: rgba(178, 249, 255, 1);
    border-radius: 50%;
    width: 25px;
    height: 25px;
  }

  .etfesg_loc img:hover {
    background-color: orange;
  }

  .etfesg_weight {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    color: white;
    text-align: center;
  }

  /* GEOETF OVERVIEW : DIVIDENDS */
  .etfdvd_button {
    width: 19%;
    color: white;
    background-color: rgba(65, 0, 153, 0.8); /* red-purple */
  }

  /* CONTAINER A3-45 : ETFs COMPARABLES */

  #geoetf_comparables {
    width: 100%;
  }

  .etfcompar_frame {
    display: flex;
    justify-content: space-around;
  }
  .etfcompar_button {
    width: 24%;
    color: white;
    background-color: rgba(130, 1, 51, 0.8); /* red-purple */
  }

  .etfcompar_button:hover {
    background-color: orange;
  }






















  /* CONTAINER A3-5: GEOWALLET */

  #portfolio_frame {
    width: 100%;
  }

  /* CONTAINER A3-51: PORTFOLIO PERFORMANCE */

  .portfolio_perf {
    width: 100%;
    background: linear-gradient(to bottom, purple, red);
  }

  .portfolio_perf thead {
    background-color: rgba(130, 1, 51, 0.8); /* red-purple */
  }

  .portfolio_perf th,
  .portfolio_perf td {
    width: 20%;
    font-family: "OCR A Std", monospace;
    color: white;
    text-align: center;
    font-size: 11px;
  }

  .portfolio_perf th {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  /* CONTAINER A3-52: PORTFOLIO TABLE */
  .portfolio_table {
    width: 100%;
  }

  .portfolio_table {
    width: 100%;
  }

  .portfolio_table thead {
    background-color: rgba(130, 1, 51, 0.8); /* red-purple */
  }

  .portfolio_table tr {
    width: 100%;
    margin: 0;
  }

  .portfolio_table th,
  .portfolio_table td {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    color: white;
    text-align: center;
  }

  .portfolio_table th {
    font-size: 10px;
  }

  .portfolio_table td {
    font-size: 8px;
  }

  .portf_tool {
    width: 100%;
  }

  .portf_asset:hover {
    background-color: rgba(74, 72, 0, 0.8);
    cursor:pointer;
  }














  /* CONTAINER  A3-11: CHATBOT */

  .chat_frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: white;
    padding: 5px;
  }

  /* CONTAINER  A3-621: CHAT FRAME */

  .chat_wally,
  .chat_user {
    display: flex;
    width: 70%;
    border-style: solid;
    border-width: 0.1em;
    border-radius: 10px 10px 10px 10px;
    padding: 3px;
    margin: 3px;
  }

  .chat_wally {
    background-color: green;
    border-color: rgba(7, 60, 0, 0.8);
    align-self: flex-start; /* Positionne à gauche */
  }

  .chat_user {
    background-color: rgba(218, 218, 218, 0.8);
    border-color: rgba(177, 177, 177, 0.8);
    align-self: flex-end; /* Positionne à droite */
  }

  .chat_wally img,
  .chat_user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.2em;
    border-color: white;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  }

  .chat_wally p,
  .chat_user p {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 10px;
    width: 100%;
    padding: 3px;
  }

  .chat_wally p {
    color: white;
  }

  .chat_user p {
    color: black;
  }

  .chat_ask {
    width: 100%;
  }

  .chat_ask {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    background-color: #f9f9f9; /* Optionnel, juste pour l'esthétique */
  }

  .chat_ask input {
    flex: 1; /* Prend toute la largeur restante */
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .chat_ask img {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Espacement entre l'input et l'image */
    cursor: pointer; /* Change le curseur en pointer pour le clic */
  }
















  /* CONTAINER B: NEWS BANNER */
  #news_banner {
    display: flex;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    z-index: 1;
    overflow: hidden;
    height: 50px;
  }


  /* CONTAINER B1: LIVE CLOCK*/
  .clock_live_frame {
    justify-content: center;
    text-align: center;
    background-color: rgba(17, 16, 16, 0.8);
    z-index: 1;
    padding: 5px;
  }

  #clock_live {
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 8px;
  }

  /* CONTAINER B2: LATEST NEWS */
  #news_video {
    display: flex;
    z-index: 1;
  }

  #lastest_news {
    background-color: red;
    color: white;
    font-family: "OCR A Std", monospace;
    font-weight: bold;
    font-size: 12px;
    padding: 10px 30px; /* Ajustez selon vos besoins */
    margin: 0;
    position: relative;
    display: flex;
    clip-path: polygon(
      0 0,
      calc(100% - 8px) 0,
      100% 50%,
      calc(100% - 8px) 100%,
      0 100%
    );
  }

  #news_video img {
    box-shadow: 10px 0px 15px -5px rgba(0, 0, 0, 0.5);
    width: 35px;
    height: 35px;
    padding: 5px;
  }





  /* CONTAINER B2: LIVE NEWS */
  #live_news {
    display: flex;
    background-color: white;
    justify-content: space-between;
    overflow: hidden;
  }





  /* CONTAINER B3: NEWS FRAME*/
  .news {
    display: flex;
    background-color: white;
    width: 23%;
    animation: scroll 45s linear infinite; /* Adjust timing as needed */
    margin: 0;
  }

  @keyframes scroll {
    0% {
      transform: translateX(500%); /* animation commence */
    }
    100% {
      transform: translateX(-450%); /* animation se termine */
    }
  }

  /* Pour que le contenu défile en boucle continue */

  .news p {
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    padding: 5px;
  }

  .news a {
    text-decoration: none;
  }

  /* CONTAINER B2a: TIME NEWS */
  .clock_news {
    background-color: rgba(23, 23, 23, 0.8);
    color: white;
    margin: 0;
  }

  /* CONTAINER B2b: CATEGORY NEWS */
  .cat_news {
    background-color: rgba(105, 32, 70, 0.8);
    color: white;
    margin: 0;
  }

  /* CONTAINER B2c: INFO NEWS */
  .info_news {
    background-color: white;
    margin: 0;
  }

  /* CONTAINER B2d NEWS AD */

  #news_ad img {
    height: 50px;
  }












  /* NEW CSS */

   /* frame */

   .table_frame {
    width: 100%;
    margin:0;
    overflow-y:auto;
  }

  /* table */

  .infra_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    overflow-y:auto;
    
  }

  .infra_table thead {
    margin:0;

  }

  .infra_table th {
    color:white;
    font-size: 10px;
    position: sticky; /* Propriété clé pour figer */
    top: 0; /* Garde le <thead> en haut */
    z-index: 1; /* Priorité sur les autres éléments du tableau */
    background-color: rgba(25, 0, 45, 1);
    
  }

  /* tr */

  .tr_cellsgroup {
    background-color: rgba(0, 9, 39, 0.8);
    display: flex;
    font-style: italic;
    font-weight: bold;
  }

  .tr_colname {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width:100%;
    background-color: rgba(142, 30, 88, 0.7);
    color: white;
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    font-weight: italic;
    text-align:center;
  }

  /* Historical & Ranking */
  .tr_colperf {
    width:100%;
    background-color: rgba(142, 30, 88, 0.7);
    color: white;
    font-family: "OCR A Std", monospace;
    font-size: 10px;
    font-weight: italic;
    text-align:center;
  }

  .tr_legend {
    display:flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
  }
  

  .tr_ranking {
    border-top-style: solid;
    border-top-color: white ;
    border-top-width: 0.05em;
  }

  #tr_company {
   display :flex;
  }


  
  /* td */

  .infra_table td {
    text-align: center;
    color: white;
    font-family: "OCR A Std", monospace;
    
  }

  .period_cell,
  .date_cell,
  .val_cell,
  .ticker_cell,
  .asset_cell,
  .posranking_cell,
  .diff_cell,
  .ccy_cell,
  .var_cell {
    font-size: 10px;
  }

  .date_cell,
  .val_cell,
  .diff_cell,
  .loc_cell,
  .var_cell {
    border-left-style: solid;
    border-left-color: white ;
    border-left-width: 0.05em;
  }


  .title_onecol,
  .data_onecol {
    width:100%;
  }

  .name_asset {
    width:100%;
    padding:10px;
    font-size: 20px;
  }

  .title_onecol{
    font-size: 10px;
  }

  .data_onecol {
    padding:10px;
    font-size: 20px;
  }

  .rowicon_title_img,
  .rowicon_title_text{
    width:50%;
    font-size: 10px;
  }

  .rowicon_img,
  .rowicon_ccy,
  .rowicon_text {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width:100%;
    font-size: 11px;
  }

  .rowicon_ccy {
    border-radius:50%;
  }

  .rowicon_text,
  .right_cell{
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: white;
  }

  .left_cell, 
  .right_cell{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width:50%;
    font-size: 12px;
  }

  

  /* ALLOCATION CHARTS */


.name_barchart {
  color: white;
  background-color: rgba(142, 30, 88, 0.7);
  font-family: "OCR A Std", monospace;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
}

.barchart4alloc {
  overflow-y: auto;
  max-height: 300px;
}

.barchart {
  display: flex;
  flex-direction: column; /* ✅ Met les enfants (info_barchart et bar_barchart) en colonne */
  align-items: flex-start; /* ✅ Alignement à gauche */
  gap: 5px; /* ✅ Ajoute un espace entre les éléments */
  padding:10px;
}

.info_barchart {
  display: flex; /* ✅ Affiche en ligne */
  align-items: center; /* ✅ Centre verticalement */
  gap: 8px; /* ✅ Ajoute un espace entre les éléments */
}

.info_barchart .loc_icon {
  background-color:white;
  border-color: white;
  border-style: solid;
  border-width: 0.1em;
  border-radius: 50%; /* ✅ Garde le border-radius pour .loc_icon */
 
}

.info_barchart .sector_icon {
  background-color:white;
  border-color: black;
  border-style: solid;
  border-width: 0.1em;
  border-radius: 0; /* ❌ Supprime le border-radius de .cat_icon */
  padding:3px;
}


.info_barchart p {
  color: white;
  font-family: "OCR A Std", monospace;
  font-size: 10px;
  margin: 0; /* ✅ Supprime l'espace supplémentaire */
}

.bar_barchart {
  display: flex;
  align-items: center; /* ✅ Centre la barre et le pourcentage */
  gap: 5px; /* ✅ Ajoute un petit espace entre la barre et le texte */
  width: 100%; /* ✅ Assure que la barre prend toute la largeur */
}


.bar_barchart .w3-gray {
  flex-grow: 1; /* ✅ La barre prend tout l'espace disponible */
  height: 23px;
  border-color: white;
  border-style: solid;
  border-width: 0.01em;
  
}

.bar_barchart p {
  color: white;
  font-family: "OCR A Std", monospace;
  font-size: 10px;
  white-space: nowrap;
  
}


/* GLOBAL TABLE */

.table_group {
  background-color:white;
  text-align: center;
  font-size: 0.8em;
  font-family: "OCR A Std", monospace;
  font-weight: bold;
  color: black;
  margin:3px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.table_group img {
  width: 23px;
  margin-right:8px;
}


.cat_com_icon img:hover {
  background-color: orange;
}

.cat_com_icon img.active {
  background-color: white;
}


.commodities_row td {
  font-family: "OCR A Std", monospace;
  width: 13%;
  font-weight: bold;
  font-size: 8px;
  padding: 1px;
  color: white;
}

.commodities_row img {
  width: 28px;
  background-color: grey;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding: 2px;
  cursor: pointer;
}

.commodities_row .comm_1dy,
.commodities_row .comm_ytd,
.commodities_row .comm_10yr {
  font-size: 0.6em;
  text-align: center;
  background-color: darkslategray;
  padding:0;
  margin : 0;

}


/* EQUITY */

.display_noequity {
  
  display:flex;
  flex-grow: 1;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.display_noequity .info_use {
  font-size :13px;
  font-family: "OCR A Std", monospace;
  font-weight: bold;
  text-align: center;
  padding: 25px;
  color: white;

}

.display_noequity .info_added {
  font-size :10px;
  font-family: "OCR A Std", monospace;
  font-weight: bold;
  text-align: center;
  color: white;

}

.display_noequity img{
  font-size :13px;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  border-radius:50%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); 

}