.border-color-primary {
  border-color: var(--primary-color);
}

.border-dashed {
  border-style: dashed;
}

.rounded_chip-custom-size {
  width: 48px;
  height: 48px;
}

.bg-primary-background {
  background-color: var(--primary-background);
}

.p-12px {
  padding: 0.75rem;
}

.py-12px {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* classes do v-form-collapse */

.v-form.v-form-collapse .collapse-close {
  border-radius: 4px;
  background: var(--disabled-background);
  /* gap: 0 0.5rem; */
}

.collapse-close input,
.collapse-close select:not(.select2-hidden-accessible),
.collapse-close textarea {
  height: 32px;
}

.collapse-close ~ .collapse-close label {
  display: none;
}

.row.collapse-close {
  --bs-gutter-x: 0.75rem;
}

/* classes que seguem as mesmas do bootstrap mas são ativadas apenas quando o collapse está fechado */
.collapse-close .col-collapse {
  flex: 1 0 0%;
  width: auto;
}

.collapse-close .col-collapse-auto {
  flex: 0 0 auto;
  width: auto
}

.collapse-close .col-collapse-hidden {
  display: none !important;
}

.collapse-close .col-collapse-1 {
  flex: 0 0 auto;
  width: 8.33333333%
}

.collapse-close .col-collapse-2 {
  flex: 0 0 auto;
  width: 16.66666667%
}

.collapse-close .col-collapse-3 {
  flex: 0 0 auto;
  width: 25%
}

.collapse-close .col-collapse-4 {
  flex: 0 0 auto;
  width: 33.33333333%
}

.collapse-close .col-collapse-5 {
  flex: 0 0 auto;
  width: 41.66666667%
}

.collapse-close .col-collapse-6 {
  flex: 0 0 auto;
  width: 50%
}

.collapse-close .col-collapse-7 {
  flex: 0 0 auto;
  width: 58.33333333%
}

.collapse-close .col-collapse-8 {
  flex: 0 0 auto;
  width: 66.66666667%
}

.collapse-close .col-collapse-9 {
  flex: 0 0 auto;
  width: 75%
}

.collapse-close .col-collapse-10 {
  flex: 0 0 auto;
  width: 83.33333333%
}

.collapse-close .col-collapse-11 {
  flex: 0 0 auto;
  width: 91.66666667%
}

.collapse-close .col-collapse-12 {
  flex: 0 0 auto;
  width: 100%
}

/* offset */
.collapse-close .offset-collapse-0 {
  margin-left: 0
}

.collapse-close .offset-collapse-1 {
  margin-left: 8.33333333%
}

.collapse-close .offset-collapse-2 {
  margin-left: 16.66666667%
}

.collapse-close .offset-collapse-3 {
  margin-left: 25%
}

.collapse-close .offset-collapse-4 {
  margin-left: 33.33333333%
}

.collapse-close .offset-collapse-5 {
  margin-left: 41.66666667%
}

.collapse-close .offset-collapse-6 {
  margin-left: 50%
}

.collapse-close .offset-collapse-7 {
  margin-left: 58.33333333%
}

.collapse-close .offset-collapse-8 {
  margin-left: 66.66666667%
}

.collapse-close .offset-collapse-9 {
  margin-left: 75%
}

.collapse-close .offset-collapse-10 {
  margin-left: 83.33333333%
}

.collapse-close .offset-collapse-11 {
  margin-left: 91.66666667%
}

/* width */
.collapse-close .w-collapse-0 {
  width: 0
}

.collapse-close .w-collapse-10 {
  width: 10%
}
.collapse-close .w-collapse-11 {
  width: 11%
}

.collapse-close .w-collapse-15 {
  width: 15%
}

.collapse-close .w-collapse-20 {
  width: 20%
}

.collapse-close .w-collapse-25 {
  width: 25%
}

.collapse-close .w-collapse-30 {
  width: 30%
}

.collapse-close .w-collapse-50 {
  width: 50%
}

.collapse-close .w-collapse-75 {
  width: 75%
}

.collapse-close .w-collapse-100 {
  width: 100%
}

/* orders */
.collapse-close .order-collapse-first {
  order: -1 !important
}

.collapse-close .order-collapse-0 {
  order: 0 !important
}

.collapse-close .order-collapse-1 {
  order: 1 !important
}

.collapse-close .order-collapse-2 {
  order: 2 !important
}

.collapse-close .order-collapse-3 {
  order: 3 !important
}

.collapse-close .order-collapse-4 {
  order: 4 !important
}

.collapse-close .order-collapse-5 {
  order: 5 !important
}

.collapse-close .order-collapse-6 {
  order: 6 !important
}

.collapse-close .order-collapse-last {
  order: 6 !important
}

/* itens que devem ser escondidos quando o collapse está fechado */
.collapse-close .collapse-hide {
  display: none !important;
  transition: all 0.5s ease-in-out;
}

/* ao adicionar a classe .expand-collapse, os itens que estavam escondidos serão exibidos */
.collapse-close.expand-collapse .collapse-hide {
  display: block !important;
  order: 99;
  animation: expand-collapse-animation 0.3s ease-in-out;
}

/* a label deve ser mostrada de todos os itens ao expandir o collapse */
.collapse-close.expand-collapse label {
  display: block;
}

@keyframes expand-collapse-animation {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}