:root {
  --tag-border-size: 2px;
  --tag-color-default: #c4006b;
  --tag-color-1: var(--bs-blue);
  --tag-color-2: var(--bs-purple);
  --tag-color-3: var(--bs-indigo);
  --tag-color-4: var(--bs-pink);
  --tag-color-6: var(--bs-orange);
  --tag-color-7: var(--bs-yellow);
  --tag-color-8: var(--bs-green);
  --tag-color-9: var(--bs-teal);
  --tag-color-10: var(--bs-cyan);
}

.dpl-tag-default.tag-template-employee-photo {
  background: #c4006b;
}

.dpl-tag-1.tag-template-employee-photo {
  background: var(--tag-color-1);
  border: var(--tag-border-size) solid var(--tag-color-1);
}

.dpl-tag-2.tag-template-employee-photo {
  background: var(--tag-color-2);
  border: var(--tag-border-size) solid var(--tag-color-2);
}

.dpl-tag-3.tag-template-employee-photo {
  background: var(--tag-color-3);
  border: var(--tag-border-size) solid var(--tag-color-3);
}

.dpl-tag-4.tag-template-employee-photo {
  background: var(--tag-color-4);
  border: var(--tag-border-size) solid var(--tag-color-4);
}

.dpl-tag-6.tag-template-employee-photo {
  background: var(--tag-color-6);
  border: var(--tag-border-size) solid var(--tag-color-6);
}

.dpl-tag-7.tag-template-employee-photo {
  background: var(--tag-color-7);
  border: var(--tag-border-size) solid var(--tag-color-7);
}

.dpl-tag-8.tag-template-employee-photo {
  background: var(--tag-color-8);
  border: var(--tag-border-size) solid var(--tag-color-8);
}

.dpl-tag-9.tag-template-employee-photo {
  background: var(--tag-color-9);
  border: var(--tag-border-size) solid var(--tag-color-9);
}

.dpl-tag-10.tag-template-employee-photo {
  background: var(--tag-color-10);
  border: var(--tag-border-size) solid var(--tag-color-10);
}

/* Override */
.dxbl-tag-box > .dxbl-tag {
  white-space: normal !important;
}

.dxbl-tag-box > .dxbl-tag-tmpl {
  width: 100% !important;
}

.dxbl-tag-box > .dxbl-text-edit-input {
  width: 100% !important;
}

.resources-user-bar > .dxbl-tag {
  display: none !important; /* Remove the tags in the sidebar*/
}

/* search icon*/
.tagbox-search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

[data-bs-theme="dark"]  {
  .dxbs-sc-time-cell.bg-light {
    background-color: var(--bs-gray-800) !important;
  }
}