/* ================================= Tab Css Start =========================== */
.common-tab {
    .nav-link {
        &.active {
            color: var(--main-two-600) !important; 
            font-weight: 700 !important;
        }
        &:hover {
            color: var(--main-two-600);
        }
    }
}

.active-text-white {
    .nav-link {
        &.active {
            color: hsl(var(--white)) !important;
        }
    }
}

.active-bg-blue {
    .nav-link {
        &.active {
            background-color: #256BFE !important;
        }
    }
}



.gradient-bg .nav-link.active, .show>.nav-link {
    background: linear-gradient(270deg, #06766E 0%, #20BA8B 100%);
}
.nav-link.active {
    .active-white {
        filter: brightness(0) invert(1);        
    }
}

.active-bg-white-border-primary {
    .nav-link:focus, .nav-link:hover {
        color: var(--black);
    }
    .nav-link.active, .show>.nav-link {
        background-color: #fff;
        color: var(--black);
        border-inline-start: 3px solid var(--main-500) !important;
    }
}


.style-border {
    .nav-link.active, .show>.nav-link {
        background-color: transparent !important;
        color: var(--black);
        border-color: var(--neutral-300) !important;
    }
}


.background {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: var(--main-600);
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0;
    transition: all 0.2s linear;
    border-radius: 50rem;
    pointer-events: none;
    &.style-two {
        height: calc(100% - 6px);
    }
}

.active-triangle-arrow {
    &::before {
        position: absolute;
        content: "";
        width: 12px; 
        height: 10px;
        background-color: inherit;
        background-color: #256BFE;
        inset-block-start: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        clip-path: polygon(50% 100%, 0 0, 100% 0);
        margin-block-start: -10px;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: .2s linear;
    }
}
.active-triangle-arrow {
    &.active {
        &::before {
            margin-block-start: -1px;
            visibility: visible;
            opacity: 1;
        }
    }
}
/* ================================= Tab Css End =========================== */
