/* ******************************************** */
/** Profile tabs
/* ******************************************** */
.c-tabs__icon{
    font-size: 0.9em;
    margin-right: 0.5em;
    display: inline-block;
}

@media (max-width: 767px) {

    .c-profile-info__tabs{
        width: 100%;
        background-color: var(--color-lightest);
        z-index: 200;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        border-bottom: 1px solid var(--color-lightgray);
        box-shadow: rgb(0 0 0 / 15%) 0px 8px 11px -3px;
    }
    
    .c-profile-info__tabs.is-fixed{
        position: fixed;
        top: 55px;
        border-top: 1px solid var(--color-lightgray);
    }

    .c-tabs__tab{
        font-size: 1.5rem;
        padding: 16px 0 18px;
        color: var(--color-darkgray);
        font-weight: 600;
        margin-left: 30px;
    }
    
    .c-tabs__tab:last-child{
        margin-right: 30px;
    }
    
    .c-tabs__tab.is-showing{
        color: var(--color-secondary-dark);
    }


}

/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    .c-tabs{
        display: flex;
        justify-content: space-between;
        height: 48px;
    }

    .c-tabs__tab{
        font-size: 1.5rem;
        padding: 0 22px 2px;
        color: var(--color-lightest);
        font-weight: 600;
    }

    .c-tabs__tab.is-showing{
        background-color: var(--color-lightest);
        color: var(--color-darkest);
        border-radius: 16px 16px 0 0;
    }

}

/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-tabs__tab{
        font-size: 1.6rem;
        padding: 0 34px 2px;
    }
    
    .c-tabs__tab:hover,
    .c-tabs__tab:focus{
        color: var(--color-secondary-light);
    }

}