.customer-list { padding: 20px; background-color: #09090B; color: #09090B; border-radius: 8px; max-width: 800px; margin: 0 auto; } .customer-list h1 { color: #F97316; text-align: center; } .customer-actions { display: flex; justify-content: flex-end; margin-bottom: 20px; } .add-customer-button { padding: 10px 20px; background-color: #F97316; color: #09090B; border: none; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; } .add-customer-button:hover { background-color: #F26502; } .customer-table { width: 100%; border-collapse: collapse; margin-top: 20px; } .customer-table th, .customer-table td { border: 1px solid #09090B; padding: 10px; text-align: left; } .customer-table th { background-color: #09090B; } .customer-table tbody tr:nth-child(odd) { background-color: #09090B; } .customer-table tbody tr:nth-child(even) { background-color: #09090B; } .customer-table tbody tr:hover { background-color: #09090B; } .edit-button { padding: 5px 10px; background-color: #F26502; color: #09090B; border: none; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; } .edit-button:hover { background-color: #F26502; } .input-underline { background-color: transparent; border: none; border-bottom: 1px solid #b3b3b3; color: #b3b3b3; width: 100%; padding: 0.5rem 0; margin-bottom: 20px; font-size: 16px; outline: none; } .input-underline:focus { border-bottom-color: #F97316; /* Orange underline on focus */ }