.value-card-title {
    color: rgb(119, 124, 130);
    font-weight: bold;
  }
  
  /* Bold text are now in primary color */
  strong, b  {
    font-weight: bold;
    color : var(--color-primary);
  }
  
  /* Default card */
  .card.card-bg {
    background: rgba(255, 255, 255, 0.07);  /* translucent */
    border: 1px solid rgba(255, 255, 255, 0.408); /* soft border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);  /* gentle shadow */
    border-radius: 16px;
    color: #0c0303;                             /* optional light text */
    transition: all 0.3s ease; 
    
    /* Center horizontally */
    text-align: center;
  }
  
  /* Hover effect */
  .card.card-bg:hover {
    border-color: #9dc3e03b;;
    box-shadow: 0 0 10px rgba(103, 132, 187, 0.4);  /* optional glow */
    cursor: pointer;  /* gives hint it’s interactive */
  }
  
  .taipy-chart {
  background: transparent !important;
  border-radius: 16px;
  }
  
  
  .taipy-dialog{
    background: rgba(255, 255, 255, 0.35); /* a soft dark veil */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  
  /* Common base for all event_class cells */
  .taipy-table td.pill-inc,
  .taipy-table td.pill-dec,
  .taipy-table td.pill-neutral {
    text-align: center;
    padding: 2px 8px;            /* small and consistent padding */
    border-radius: 9999px;       /* full pill shape */
    font-weight: 600;
    display: inline-block;       /* tight around text */
    width: auto;                 /* hug text width */
    margin: 0 auto;              /* center pill horizontally */
    white-space: nowrap;         /* prevent wrapping */
  }
  
  /* Red pill for INCREASE */
  .taipy-table td.pill-inc {
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid transparent;
  color:  #0a6d3a ;
  }
  
  /* Green pill for DECREASE */
  .taipy-table td.pill-dec {
  background: rgba(231, 76, 60, 0.15) ;
  border: 1px solid transparent;
  color:#b00020 ;
  }
  
  /* Neutral gray pill for others */
  .taipy-table td.pill-neutral {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  color: #333;
  }

  .taipy-expandable .taipy-text {
    text-align: left !important;
  }