/* Margins */
.m-0 {
  margin: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mr-20 {
  margin-right: 20px;
}

.w-full {
  width: 100%;
}

.p-0 {
  padding: 0 !important;
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}
.row-reverse {
  flex-direction: row-reverse;
}

.flex-1 {
  flex-grow: 1;
}

/* GAPS */
.gap-5 {
  gap: 5px;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.gap-48 {
  gap: 48px;
}

/* Font Weight */
.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.bg-white {
  background-color: #fff;
}

.text-muted {
  color: var(--default-gray);
}

.rounded {
  border-radius: 10px;
}

.transition {
  transition: all 0.3s;
}

.clearfix {
  clear: both;
}

.border-top-0 {
  border-top: 0 !important;
}

.relative {
  position: relative;
}

@media(min-width: 992px) {
  .lg\:p-48 {
    padding: 48px;
  }

  .lg\:gap-48 {
    gap: 48px;
  }
}

@media(max-width: 991px) {
  .md\:p-24 {
    padding: 24px;
  }

  .md\:gap-24 {
    gap: 24px;
  }
}

#tasks-pane {
  background-color: var(--light-gray);
  margin-left: -2px;
}

#tasks-pane.minimized .tasks-header, 
#tasks-pane.minimized .tasks-list-category {
  display: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: var(--border-color);
}

/* DataGrid */
.dx-datagrid-headers .dx-datagrid-content {
  margin: 0 !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-row:not(.dx-freespace-row) > td a {
  font-weight: 500;
  color: var(--default-blue) !important;
}

.dx-datagrid.dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #ADB5BD;
  line-height: 20px;
  padding: 0;
  margin: 0;
  opacity: 1;
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-datagrid-filter-row .dx-texteditor {
  border: 0 !important;
}

.dx-datagrid-rowsview .dx-datagrid-content .dx-datagrid-table .dx-row:first-child {
  border-top: 0 !important;
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row,
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td {
  font-size: 14px;
  font-weight: 500;
  height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0 !important;
  background-color: var(--light-gray);
}
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td::before {
  width: 1px;
  height: 48px;
  top: 4px;
  left: 0;
  content: "";
  position: absolute;
  border-left: 1px solid var(--border-color);
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td:first-child::before {
  display: none;
}

.dx-datagrid-content .dx-datagrid-table .dx-row:not(.dx-freespace-row) > td:after {
  display: none;
}

.dx-datagrid .dx-row > td {
  font-size: 12px;
  font-weight: 500;
  padding: 16px 14px;
}

.dx-datagrid .dx-link:not([class*="fas"]) {
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--default-blue) !important;
}
.dx-pager .dx-pages, .dx-pager .dx-pages .dx-page-indexes {
  display: flex;
  align-items: center;
}
.dx-pager .dx-pages .dx-next-button,
.dx-pager .dx-pages .dx-prev-button {
  font-size: 14px;
  line-height: 20px;
  height: auto;
  padding: 0 5px;
}
.dx-pager .dx-pages .dx-next-button::before,
.dx-pager .dx-pages .dx-prev-button::before {
  position: relative;
  top: inherit;
  margin: 0;
  left: inherit;
  width: 20px;
}

.dx-pager .dx-pages .dx-page {
  padding: 2px 4px;
}

.dx-pager .dx-pages .dx-light-pages {
  display: flex;
  align-items: center;
}
.dx-pager .dx-pages .dx-page-index {
  margin-left: 10px;
}
.dx-pager .dx-pages .dx-info {
  margin: 0;
  padding: 0 5px;
}

.dx-pager .dx-pages .dx-pages-count {
  padding: 0;
}

.dx-pages .dx-texteditor-input-container input {
  min-height: 22px;
  text-align: center;
  padding: 0;
}

.dx-pager .dx-texteditor-input-container .dx-texteditor-input {
  padding: 5px 10px;
  min-height: 22px;
  font-size: 12px;
}

.dx-checkbox-icon {
  border-radius: 4px;
}

.dx-datagrid-checkbox-size .dx-checkbox-icon {
  width: 20px;
  height: 20px;
}

.dx-datagrid-checkbox-size.dx-checkbox-indeterminate .dx-checkbox-icon::before {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
}

.dx-checkbox .dx-checkbox-icon,
.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
  border-color: #8BA7F2;
}

.dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
  color: #fff;
  border-color: var(--default-blue);
  background: var(--default-blue);
}

.dx-datagrid.dx-datagrid-borders > .dx-datagrid-pager {
  background-color: var(--light-gray);
  border-top: 1px solid var(--border-color);
}

.dx-checkbox.dx-state-hover .dx-checkbox-icon,
.dx-checkbox.dx-state-focused .dx-checkbox-icon {
  border: 1px solid var(--default-blue);
}

.dx-checkbox.dx-state-active .dx-checkbox-icon {
  border-color: #ccc;
}

.dx-checkbox-indeterminate .dx-checkbox-icon::before {
  background-color: var(--default-blue);
}

.dx-pager .dx-pages .dx-selection {
  font-weight: 500;
  color: var(--default-gray);
  background-color: rgba(222, 226, 230, 0.87);
}

.dx-datagrid-borders > .dx-datagrid-pager {
  padding: 10px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td:first-child {
  padding-left: 14px !important;
  text-align: left !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgRed > td {
  color: #F76E6E !important;
  background-color: #FDE2E2 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgYellow > td {
  color: #2E2925 !important;
  background-color: #FEF7ED !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgBlue > td {
  background-color: #ECF0FD !important;
  color: #1238A0 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgGreen > td {
  background-color: #E5F7F3 !important;
  color: #2F8641 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgGreen > td {
  background-color: #E5F7F3 !important;
  color: #2F8641 !important;
}