.my-container {
  background-color:#F6E5B4; /* Background rang (Light Grey) */
  font-family: 'Arial', sans-serif; /* Font ka naam */
  font-size: 16px; /* Font ka size */
  font-weight: normal; /* Font ka wazan (bold ya normal) */
  color: #333333; /* Text ka rang (Dark Charcoal) */
  padding: 15px; /* Container ke andar ki jagah */
  border-radius: 8px; /* Kono ko gol karne ke liye */

} 


/* --- TABLE & ID BASED STYLING --- */ 
#dash-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
} 

#dash-table th, #dash-table td { 
    border: 1px solid #dddddd; 
    padding: 12px; 
    text-align: left; 
} 

#dash-table tr:nth-child(even) { 
    background-color: #f9f9f9; 
} 

/* --- ARROWS LOGIC START --- */ 
/* Table headers styling with pointer cursor */ 
#dash-table th { 
    cursor: pointer; 
    position: relative; 
    user-select: none; 
    padding-right: 25px; /* Arrow ke liye space */ 
    background-color: #f2f2f2; 
} 

/* 1. Default state: Dono symbols upar-neeche stack dikhenge */ 
#dash-table th::after { 
    content: "▲\A▼"; 
    white-space: pre; 
    position: absolute; 
    right: 5px; 
    top: 50%; 
    transform: translateY(-50%); 
    line-height: 0.9; 
    color: #cccccc; /* Default me halka grey color */ 
    text-align: center; 
    font-size: 1.2rem; 
} 

/* 2. Active Ascending State: Class lagne par sirf up arrow black dikhega */ 
#dash-table th.th-sort-asc::after { 
    content: "▲"; 
    color: #000000; 
    font-size: 1rem; 
} 

/* 3. Active Descending State: Class lagne par sirf down arrow black dikhega */ 
#dash-table th.th-sort-desc::after { 
    content: "▼"; 
    color: #000000; 
    font-size: 1rem; 
}