.div-1 {
       background:white;
    }
	
	
#rightside {
    background-color: yellow;
    font-weight: bold;
	text-align: right;
  }	
  
  table {
  width: 100%;
  border-collapse: collapse; /* Merges adjacent cell borders */
}

/* Style specific to data cells */
td {
  border: 1px solid #dddddd;
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

 .highlight {
  background-color: yellow;
  font-weight: bold;
}

td.highlight {
  background-color: #ff9999; /* A different color for table cells */
  color: green;
  text-align: center;
}



.dash-table th, .dash-table td {
  border: 1px solid #777; /* Optional: Adds borders */
  padding: 10px; /* Optional: Adds spacing within cells */
  text-align: left; /* Optional: Aligns text */
  /* Ensures content doesn't force the column to expand past its width */
  overflow: hidden; 
  word-wrap: break-word; /* Prevents long words from breaking layout */
}

/* Target the specific header class to set the column width */
.column-id {
  width: 80px; /* Set a specific pixel or percentage width */
}

.my-container {
  background-color: #f4f4f4; /* 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: 20px; /* Container ke andar ki jagah */
  border-radius: 8px; /* Kono ko gol karne ke liye */
}




.th-sort-asc::after { content: " ▲"; font-size: 0.8rem; }
.th-sort-desc::after { content: " ▼"; font-size: 0.8rem; }


        body { font-family: Arial, sans-serif; margin: 30px; }
        .table-container { max-width: 800px; margin: auto; }
        h2 { text-align: center; }

        /* Styling for Table */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #dddddd;
            padding: 12px;
            text-align: left;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

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

        /* 1. Default state: Sabhi headers par up-down arrow dikhega */
        table th::after {
              content: "▲\A▼"; /* Dono symbols ko upar neeche stack kiya hai */
            white-space: pre; /* Line break allow karne ke liye */
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.75rem; /* Har single arrow ka relative size */
            line-height: 0.9; /* Dono arrow ke beech ki duri kam karne ke liye */
            letter-spacing: 0px;
            color: #cccccc; /* Default me halka grey color */
            text-align: center;
			font-size: 1.3rem;
        }

        /* 2. Active Ascending State: Click karne par up arrow black ho jayega */
        table th.th-sort-asc::after {
            content: " ▲";
            color: #000000;
			font-size: 1rem;
        }

        /* 3. Active Descending State: Dobara click karne par down arrow black ho jayega */
        table th.th-sort-desc::after {
            content: " ▼";
            color: #000000;
			font-size: 1rem;
        }
		
		
		
		
		
		/* --- 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; 
}