body { font-family:Helvetica, sans-serif;scroll-behavior:smooth;} .AllotMain { max-width:1300px;margin:0 auto 30px auto;background-color:#fff;padding:25px 10px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);} h1 { color:#333;font-size:28px;margin-bottom:25px;text-align:center;} .top-controls-wrapper { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;width:100%;} .controls-left { display:flex;align-items:center;} .controls-right { display:flex;align-items:center;gap:10px;} .controls-left select, .controls-right input { padding:8px 10px;font-size:14px;border-radius:5px;border:1px solid #ccc;} .controls-right input { min-width:200px;} #refreshBtn { background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;} #refreshBtn svg:hover { transform:rotate(90deg);transition:transform 0.3s ease;} .status-bar { display:flex;justify-content:center;align-items:center;gap:10px;margin:0;} .status-bar .tag { padding:6px 12px;background-color:#f1f3f5;border:1px solid #e9ecef;border-radius:4px;font-size:13px;color:#333;cursor:pointer;transition:all 0.2s ease;} .status-bar .tag:hover { background-color:#e2e6ea;} .status-bar .tag.active-filter { background-color:#e2e6ea;border-color:#adb5bd;font-weight:bold;} .table-responsive { width:100%;position:relative;margin-bottom:20px;} table { width:100%;border-collapse:collapse;min-width:800px;} table td { padding:10px 8px;font-size:13px;font-family:roboto, sans-serif;color:#333;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:middle;} table th { font-family:lato, sans-serif;background-color:#e2e8f0;color:#1a202c;font-weight:700;font-size:11px;text-transform:uppercase;padding:12px 8px;text-align:left;cursor:pointer;position:sticky;top:0;z-index:100;border-bottom:2px solid #cbd5e1;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);} table th:hover { background-color:#cbd5e1;} table th .sort-icon { display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #888;margin-left:5px;vertical-align:middle;opacity:1;} table th.asc .sort-icon { border-top:none;border-bottom:5px solid #007bff;} table th.desc .sort-icon { border-bottom:none;border-top:5px solid #007bff;} table tbody tr:nth-child(odd) td { background-color:#ffffff;} table tbody tr:nth-child(even) td { background-color:#f4f7f9;} table tbody tr:hover td { background-color:#e2e8f0;transition:background-color 0.2s ease;} .btn-check-status { display:inline-block;padding:6px 14px;background-color:#059669;color:#ffffff !important;text-decoration:none !important;font-size:12px;font-weight:bold;border-radius:4px;transition:background-color 0.2s ease, transform 0.1s ease;text-align:center;white-space:nowrap;box-shadow:0 2px 4px rgba(5, 150, 105, 0.3);} .btn-check-status:hover { background-color:#047857;transform:translateY(-1px);} #pagination { margin-top:15px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;} #pagination button { padding:6px 12px;border:none;border-radius:5px;background-color:#e4e4e4;cursor:pointer;transition:background-color 0.25s ease, transform 0.2s ease;} #pagination button.active, #pagination button:disabled { background-color:#007bff;color:white;cursor:default;} #pagination button:hover { transform:scale(1.05);background-color:#d0e4ff;} @media (max-width:1024px) { .top-controls-wrapper { flex-wrap:wrap;justify-content:center;gap:15px;} .table-responsive { overflow-x:auto;} }