.nav-tab-horizontal-animation-line .tab-box #tabbtn{
    min-width: 78px;
}

.nav-tab-horizontal-animation-line .tab-box #tabbtn.active{
    color: var(--theme-color);
}

.nav-tab-horizontal-animation-line .tab-box{
    width: fit-content;
    flex-wrap: wrap;
}

.nav-tab-horizontal-animation-line .tab-box .line{
    /* width: 90px;
    left: 0; */
    width: 78px;
    left: 8px;
    height: 2px;
    border-radius: 10px;
    bottom: 0;
    background-color: var(--theme-color);
    transition: all .3s ease-in-out;
}

.nav-tab-horizontal-animation-line .content-box .content{
    display: none;
    animation: moving .2s ease-in;
}

@keyframes moving{
    from{ transform: translateX(20px); opacity: 0;}
    to{ transform: translateX(0px); opacity: 1;}
}

.nav-tab-horizontal-animation-line .content-box .content.active{
    display: block;
}

@media screen and (max-width: 768px){
    .nav-tab-horizontal-animation-line .tab-box{
        width: 100%;
    }

    .nav-tab-horizontal-animation-line .tab-box #tabbtn.active{
        color: var(--theme-color);
        border-color: var(--theme-color) !important;
    }

    .nav-tab-horizontal-animation-line .tab-box .line{
        display: none !important;
    }
}

@media screen and (min-width: 768px){
    .nav-tab-horizontal-animation-line .tab-box #tabbtn{
        font-size: 14px !important;
        border: none !important;
    }
}