.accordion {
    @apply bg-gray grid grid-cols-1 gap-2;
}

.accordion .accordionTitle {
    @apply p-4 bg-grayDark border-2 border-solid border-borderColors cursor-pointer;
}

.accordion .accordionTitle h3 {
    @apply font-bold m-0 text-dark;
}

.accordion .accordionTitle span {
    @apply inline-block w-4 text-center;
    transition: all 0.4s ease;
}

.accordion .accordionTitle span.left{
    @apply inline-block float-left mx-[10px] my-[5px];

}

.accordion .accordionTitle span.right{
    @apply inline-block float-right mx-[5px];
}

.accordion .accordionItem .accordionContent {
    @apply py-0 px-4 overflow-hidden h-0;
    transition: all .1s ease-in-out;
    transform: scaleY(0);

}

.accordion .accordionItem .accordionContent p {
    @apply m-0;
}

.accordion .accordionItem.active .accordionContent {
    @apply h-auto p-4 border-2 border-solid border-borderColors ;
    transform: scaleY(1);

}

.accordion .accordionItem.active .accordionTitle h3 {
    @apply text-white;
}
.accordion .accordionItem.active .accordionTitle{
    @apply bg-secondary mb-2;
}
.accordion .accordionItem.active .accordionTitle span{
    @apply text-white;
    /* transform: rotateZ(90deg); */
}
.accordion .accordionItem .accordionTitle svg{
    @apply fill-dark w-4 h-4;
}
.accordion .accordionItem.active .accordionTitle svg{
    @apply fill-white w-4 h-4;
}


.rounded-default{
    @apply rounded-none;
}

.rounded-small{
    @apply rounded-sm;
}

.rounded-medium{
    @apply rounded-md;
}

.rounded-large{
    @apply rounded-xl;
}