:root {
  --color-bg: #f9fafc;
  --color-text: #333;
  --color-white: #fff;
  --color-border: #ddd;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-secondary: #9ca3af;
  --color-secondary-hover: #6b7280;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-success: green;
  --color-inactive: red;
  --color-preview: #38bdf8;
  --color-preview-hover: #0ea5e9;
  --color-edit: #facc15;
  --color-edit-hover: #eab308;
  --color-table-head: #e5f0ff;
  --color-row-hover: #f9fafb;
  --font-family: "Segoe UI", sans-serif;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.main-filter {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}
.main-filter .filter-group {
  display: flex;
  flex-direction: column;
}
.main-filter .filter-bar input,
.main-filter .filter-bar select {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  transition: border 0.3s ease;
  background: var(--color-white) !important;
  width: 100%;
}
.main-filter .filter-bar input:focus,
.main-filter .filter-bar select:focus {
  border-color: var(--color-primary);
  outline: none;
}
.main-filter .filter-bar .clear-date-btn {
  margin-top: 5px;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border: none;
  border-radius: var(--radius-xs) !important;
  background: var(--color-danger);
  color: var(--color-white);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s ease;
}
.main-filter .filter-bar .clear-date-btn:hover {
  background: var(--color-danger-hover);
}
.main-filter .filter-bar button {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}
.main-filter .filter-bar button.btn-filter {
  background: var(--color-primary);
  color: var(--color-white);
}
.main-filter .filter-bar button.btn-filter:hover {
  background: var(--color-primary-hover);
  transform: scale(1.05);
}
.main-filter .filter-bar button.btn-reset {
  background: var(--color-secondary);
  color: var(--color-white);
}
.main-filter .filter-bar button.btn-reset:hover {
  background: var(--color-secondary-hover);
  transform: scale(1.05);
}
.main-filter table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.main-filter table thead {
  background: var(--color-table-head);
}
.main-filter table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.main-filter table tbody td {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
}
.main-filter table tbody tr:hover {
  background: var(--color-row-hover);
  transition: background 0.2s ease;
}
.main-filter .status-active {
  color: var(--color-success);
  font-weight: bold;
}
.main-filter .status-inactive {
  color: var(--color-inactive);
  font-weight: bold;
}
.main-filter .action-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  border: none;
  margin-right: 5px;
  transition: background 0.2s ease;
}
.main-filter .action-btn.preview-btn {
  background: var(--color-preview);
  color: var(--color-white);
}
.main-filter .action-btn.preview-btn:hover {
  background: var(--color-preview-hover);
}
.main-filter .action-btn.edit-btn {
  background: var(--color-edit);
  color: black;
}
.main-filter .action-btn.edit-btn:hover {
  background: var(--color-edit-hover);
}
.main-filter .action-btn.delete-btn {
  background: var(--color-danger);
  color: var(--color-white);
}
.main-filter .action-btn.delete-btn:hover {
  background: var(--color-danger-hover);
}
.main-filter .table thead tr th:nth-child(1) {
  min-width: 20px !important;
}
.main-filter .table thead tr th:nth-child(2),
.main-filter .table thead tr th:nth-child(3),
.main-filter .table thead tr th:nth-child(4),
.main-filter .table thead tr th:nth-child(5),
.main-filter .table thead tr th:nth-child(7) {
  min-width: 100px !important;
}
.main-filter .table thead tr th:nth-child(6),
.main-filter .table thead tr th:nth-child(8) {
  min-width: 104px !important;
}
.main-filter .table-responsive {
  overflow-x: auto;
}
.main-filter td .btns {
  display: flex;
}
.main-filter td .images {
  height: 50px;
  width: 50px;
}
.main-filter td .images img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}/*# sourceMappingURL=filter-formDesign1.css.map */