.mainFilterBox {
  position: absolute;
  overflow: auto;
  padding: 16px;
  width: 100%;
  z-index: 111;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.mainFilterBox .fieldLabel {
  color: #575756;
  font-weight: 500;
}

.filterSelectFields div div div {
  padding: 6px 14px !important;
  color: #575756 !important;
}

.filterNumberFields div div input,
.filterTextFields div div input {
  padding: 8px 14px !important;
  color: #575756 !important;
}

.filterSelectFields div,
.filterAutoselectFields p+div {
  border-radius: 12px !important;
  background-color: #fff !important;
}

.filterAutoselectFields div div div div button {
  margin-right: 8px;
}

.filterAutoselectFields div div div {
  border-radius: 12px !important;
  color: #575756 !important;
  padding: 1px 10px !important;
}

.filterDateField div div input {
  padding-top: 8px !important;
}

.filterDateField div {
  background-color: #fff !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}

.filterTable>div {
  background-color: #f6f6f5 !important;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 16px;
  position: relative;
  top: 20px;
  margin-bottom: 12px;
  align-items: flex-end;
}

.filterTable div[aria-label="Table Toolbar"] {
  background-color: #fff !important;
}

.filterTable>div h6 {
  color: #575756 !important;
  font-weight: 600 !important;
}

.filterTable .CustomToolbarBox form div p+div div {
  color: #575756 !important;
}

.filterTable div[aria-label="Table Toolbar"] .filterAutoselectFields div div div {
  padding: 1px 7px !important;
}

.filterTable .CustomToolbarBox form .assignedUser p+div>div>div {
  background-color: #fff !important;
  padding: 4px 7px !important;
}

.CustomToolbarBox form .assignedUser div>div>div {
  padding: 7px !important;
}

.CustomToolbarBox form .assignedUser div>div>div input {
  padding: 0 !important;
}

.mainFilterBox .actionBox,
.filterWrapper .actionBox {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}

.mainFilterBox .actionBox .resetBtn,
.mainFilterBox .actionBox .cancelBtn,
.filterWrapper .actionBox .resetBtn,
.filterWrapper .actionBox .cancelBtn {
  color: #575756;
}

.mainFilterBox .actionBox .cancelBtn,
.filterWrapper .actionBox .cancelBtn {
  border-color: #b0b0b0;
}

.mainFilterBox .actionBox .cancelBtn,
.mainFilterBox .actionBox .applyBtn,
.filterWrapper .actionBox .cancelBtn,
.filterWrapper .actionBox .applyBtn {
  min-width: 120px;
  height: 35px;
}

/* For dark theme  */
.mainFilterBox[data-theme="dark"] .fieldLabel {
  color: #6366F1;
}

.mainFilterBox[data-theme="dark"] .filterSelectFields div,
.mainFilterBox[data-theme="dark"] .filterAutoselectFields p+div,
.mainFilterBox[data-theme="dark"] .filterNumberFields div div input,
.mainFilterBox[data-theme="dark"] .filterTextFields div div input {
  background-color: #2d3748 !important;
}

.mainFilterBox[data-theme="dark"] .filterSelectFields div div div,
.mainFilterBox[data-theme="dark"] .filterAutoselectFields div div div,
.mainFilterBox[data-theme="dark"] .filterNumberFields div div input,
.mainFilterBox[data-theme="dark"] .filterTextFields div div input {
  color: #fff !important;
}

.mainFilterBox[data-theme="dark"] div div div,
.mainFilterBox[data-theme="dark"] input,
.task[data-theme="dark"] .filterTable>div div div,
.task[data-theme="dark"] .filterTable>div div div input {
  background-image: url("../../public/down-chevron-dark.png") !important;
}

.mainFilterBox[data-theme="dark"] .filterDateField div {
  background-color: #2d3748 !important;
  color: #fff !important;
}

.task[data-theme="dark"] .filterTable>div {
  background-color: #1c2536 !important;
}

.task[data-theme="dark"] .filterTable .CustomToolbarBox form .assignedUser p+div>div>div,
.task[data-theme="dark"] .filterTable .CustomToolbarBox form div p+div div {
  background-color: #2d3748 !important;
  color: #fff !important;
  border-radius: 12px !important;
}

.task[data-theme="dark"] .filterTable>div h6 {
  color: rgba(99, 102, 241, 1) !important;
}

.taskFormAutoSelect button {
  margin-top: 20px !important;
}

.mainFilterBox[data-theme="dark"] .actionBox .resetBtn,
.mainFilterBox[data-theme="dark"] .actionBox .cancelBtn,
.filterWrapper[data-theme="dark"] .actionBox .resetBtn,
.filterWrapper[data-theme="dark"] .actionBox .cancelBtn {
  color: #6366F1;
}

.mainFilterBox[data-theme="dark"] .actionBox .cancelBtn,
.filterWrapper[data-theme="dark"] .actionBox .cancelBtn {
  border-color: #6366F1;
}