/* 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 {
  display: flex;
  box-sizing: border-box;
  padding: 0.5em 0;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
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;
}