body {
  font-family: Helvetica, sans-serif;
  scroll-behavior: smooth; /* ✅ Smooth scrolling */
}
.contmupmain {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fff;
            padding: 25px 10px 25px 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 25px;
            text-align: center;
        }
        .table-responsive {
            overflow-x: auto;
            margin-bottom: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 500px;
        }
        table th,
        table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
						font-size:16px;
        }
        table th {
            background-color: #f8f8f8;
            color: #555;
            font-weight: bold;
            cursor: pointer;
            position: relative;
						text-align: center;
						height:50px;
						white-space:nowrap;
						
        }
        table th:hover {
            background-color: #f1f1f1;
        }
        table th .sort-icon {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            margin-left: 8px;
            vertical-align: middle;
						
        }
        table th.asc .sort-icon {
            border-bottom: 5px solid #007bff;
        }
        table th.desc .sort-icon {
            border-top: 5px solid #007bff;
        }
				.contmupsme table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}
        .contmupsme table tbody tr:nth-child(even) {
    background-color: #f2f7ff !important;
}
        table tbody tr:hover {
            background-color: #f5f5f5 !important;
        }

        /* Responsive adjustments */
         @media (max-width: 768px) {
            .table-controls {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        @media (max-width: 480px) {
            h1 {
                font-size: 24px;
            }
            .contmupmain {
							width:100%;
              padding: 25px 5px;
            }
					table{
						min-width:320px !important;
					}
					 
					table th,
            table td {
                padding: 10px 8px;
                font-size: 10px;
            }
        }  
@media (max-width: 375px) {
    /* Container ko screen width ke andar fit rakhne ke liye */
    .contmupmain {
        padding: 10px 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    /* Table container ko horizontally scrollable banane ke liye */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 350px !important; /* 375px ki screen par table properly set ho */
        font-size: 13px !important;
    }

    table th, 
    table td {
        padding: 8px 4px !important;
        font-size: 13px !important; /* 10px se badha kar 13px kiya taaki padhne me aaye */
        white-space: normal !important; /* Lamba text wrap ho jayega, screen nahi todega */
        word-wrap: break-word;
    }

    h1 {
        font-size: 18px !important;
        margin-bottom: 15px;
    }
}