body {
  font-family: Arial;
  background: #f4f4f4;
}

.container {
  width: 600px;
  margin: 40px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input,
select,
button {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background: #2c7be5;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background: #1a5bb8;
}

.btn-clear{
  background: #6c757d;
}

.btn-clear:hover{
  background: #545b62;
}

.table-container {
  width: 80%;
  margin: 30px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

th {
  background: #2c7be5;
  color: white;
}

.delete {
  background: #e55353;
  padding: 5px 10px;
}

.delete:hover {
  background: #c93030;
}

.edit{
background:#f0ad4e;
color:white;
padding:5px 10px;
border:none;
border-radius:4px;
cursor:pointer;
}

.edit:hover{
background:#d9962d;
}

.menu {
  background: #d6d9df;
  padding: 10px;
  display: flex;
  gap: 10px;
}

.menu button {
  background: #2c7be5;
  border: none;
  color: white;
  padding: 8px 12px;
  cursor: pointer;
}

.menu button:hover {
  background: #2c7be5;
}