.tabs {
    @apply m-4 ;
}

.tabs.tabs-default .nav-tabs {
    @apply list-none m-0 p-0 flex flex-wrap;
    border-bottom: 1px solid #c6c6c6;
}

.tabs.tabs-default  .nav-tabs .nav-item {
    @apply basis-0 grow text-center relative cursor-pointer;
}

.tabs.tabs-default  .nav-tabs .nav-item p {
    @apply inline-block py-5 px-2 text-dark font-semibold -mb-1
}

.tabs .nav-tabs .nav-item .icon-view {
    @apply align-bottom mr-1
}

.tabs.tabs-default  .nav-tabs .nav-item p.active {
    @apply text-primary 
}

.tabs.tabs-default  .nav-tabs .nav-item .nav-link::after {
    content: "";
    background: #5F227B;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
    transform: scale(0);
}

.tabs.tabs-default  .nav-tabs .nav-item .nav-link.active:after {
    transform: scale(1);
}

.tabs .tab-content .tab-pane {
    @apply m-3
}

.tabs .tab-content .tab-pane p {
    @apply m-0 p-0 text-dark
}

.tabs.tabs-default  .nav-tabs .nav-item p.active .icon-view svg {
    @apply fill-primary
}

.tabs.tabs-boxed .nav-tabs {
    @apply list-none m-0 p-0 flex flex-wrap border-2 border-grayDark border-solid rounded-sm;
}

.tabs.tabs-boxed  .nav-tabs .nav-item {
    @apply basis-0 grow text-center cursor-pointer border-r-2 border-solid  border-grayDark;
}

.tabs.tabs-boxed  .nav-tabs .nav-item p {
    @apply p-4 m-0;
}

.tabs.tabs-boxed  .nav-tabs .nav-item p.active {
    @apply bg-primary text-white border-2 border-primary
}

.tabs.tabs-boxed  .nav-tabs .nav-item p.active .icon-view svg {
    @apply fill-white
}