/* General form styling */  
  
body {  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
  background-color: #f5e5d8;  
  color: #333;  
  margin: 0;  
}  
  
.card {  
  background-color: #fff;  
  border-radius: 15px;  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
  padding: 30px;  
  max-width: 800px;  
  margin: 20px auto;  
  border: none;  
}  
  
.card-header h2 {  
  font-size: 1.8rem;  
  text-align: center;  
  color: #333;  
  margin-bottom: 20px;  
}  
  
.form-control, .form-select {  
  padding: 10px;  
  border-radius: 8px;  
  border: 1px solid #ccc;  
  width: 100%;  
  margin-bottom: 15px;  
}  
  
.form-control:focus, .form-select:focus {  
  outline: none;  
  border-color: #ff9966;  
}  
  
.form-control[type="button"] {  
  background-color: #de8d38;  
  color: white;  
  font-weight: bold;  
  border: none;  
  cursor: pointer;  
  transition: background-color 0.3s ease;  
}  
  
.form-control[type="button"]:hover {  
  background-color: #008b76;  
}  
  
/* Responsive table styling */  
  
.table-responsive {  
  width: 100%;  
  overflow-x: auto;  
}  
  
.table {  
  border-collapse: collapse;  
  width: 100%;  
  margin-bottom: 20px;  
}  
  
.table th, .table td {  
  padding: 10px;  
  border: 1px solid #ddd;  
  text-align: center;  
}  
  
.table th {  
  background-color: #f0f0f0;  
  font-weight: bold;  
}  
  
.table tbody tr:nth-child(even) {  
  background-color: #f9f9f9;  
}  
  
.table tbody tr:hover {  
  background-color: #f5f5f5;  
}  
  
.fas.fa-trash-alt {  
  color: #ff0000;  
  cursor: pointer;  
}  
  
.fas.fa-trash-alt:hover {  
  color: #ff3333;  
}  
  
/* Make table scrollable on smaller screens */  
  
@media screen and (max-width: 768px) {  
  .table th, .table td {  
   font-size: 0.9rem;  
   padding: 8px;  
  }  
   
  #txttot {  
   font-size: 1.2rem;  
  }  
  #btnpay, #btnverify {  
   padding: 8px 15px;  
   font-size: 1rem;  
  }  
}  
  
#txttot {  
  font-size: 1.5rem;  
  text-align: center;  
  color: #ff9966;  
  border: none;  
  background-color: transparent;  
  font-weight: bold;  
  margin-bottom: 20px;  
}  
  
#btnpay, #btnverify {  
  background-color: #de8d38;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  padding: 10px 20px;  
  font-size: 1.1rem;  
  cursor: pointer;  
  transition: background-color 0.3s ease;  
}  
  
#btnpay:hover, #btnverify:hover {  
  background-color: #008b76;  
}  
  
footer {  
  font-size: 0.9rem;  
  text-align: center;  
  margin-top: 50px;  
  color: #999;  
}  
  
/* Responsive layout for small screens */  
  
@media (max-width: 600px) {  
  .flex-container {  
   flex-direction: column;  
  }  
  .brek {  
   width: 100%;  
  }  
  .form-group {  
   display: block;  
   margin-bottom: 15px;  
  }  
  .form-group .col-md-2 {  
   width: 100%;  
   margin-bottom: 10px;  
  }  
  .form-control, .form-select {  
   width: 100%;  
   margin-bottom: 10px;  
  }  
  /* Adjust table columns and font sizes for small screens */  
  .table th, .table td {  
   padding: 5px;  
   font-size: 0.85rem;  
  }  
  #txttot {  
   font-size: 1.2rem;  
  }  
  #btnpay, #btnverify {  
   font-size: 1rem;  
   padding: 10px 15px;  
  }  
  .table-responsive {  
   overflow-x: auto;  
   -webkit-overflow-scrolling: touch;  
  }  
  .table th, .table td {  
   white-space: nowrap;  
  }  
}