/* Add any CSS rules for Angular module "crmContactcats" */
crm-contact-category-settings ol {
  padding: 0;
}
crm-contact-category-settings li.deleted {
  opacity: 0.3;
}
/* @keyframes crm-contact-cats-move { */
/*   0%, 90% {transform: none;} */
/*   95% {transform: translateX(0.2em);} */
/*   100% {transform: none;} */
/* } */

crm-contact-category-settings .crm-contact-cats-move-target {
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.001s allow-discrete, max-height 0.3s ease;
  transform-origin: top left;
  display: none;
  text-align: right;
}
crm-contact-category-settings .moving .crm-contact-cats-move-target {
  display: block;
  transform: none;
  opacity: 1;
  max-height: 5rem;
  @starting-style {
    transform: scaleY(0);
    opacity:0;
    max-height: 0;
  }
}

crm-contact-category-settings li.being-moved .panel {
  opacity: 0.8;
}
crm-contact-category-settings .panel {
  margin-bottom: 0;
}
crm-contact-category-settings .panel-body {
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  grid-template-columns:1fr;
  grid-template-rows: auto auto auto;
}
.crm-container crm-contact-category-settings .panel-body {
  padding: var(--crm-padding-small) var(--crm-padding-reg);
}
@media screen and (min-width: 800px) {
  crm-contact-category-settings .panel-body {
    grid-template-columns: minmax(16ch,max-content) 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
  }
}

crm-contact-category-settings .contactcats-label {
}
crm-contact-category-settings .contactcats-description {
}
crm-contact-category-settings .contactcats-actions {
}

crm-contact-category-settings li label {
  display: block;
}
crm-contact-category-settings .name-input-wrapper {
  flex: 0 1 29ch;
}
crm-contact-category-settings .hint {
  display: none;
}
crm-contact-category-settings .name-input-wrapper:focus-within .hint {
  display: block;
}

/* Category Flows page */
.contact-cats-sankey {
  background:white;
  border-radius: 4px;
  padding: 1rem;
}