.tablist {
    display: flex;
    gap: 20px;
    list-style: none;
}

.tablist > li {
    display: inline-flex;
}

.tabpanel {
    display: none;
}

.tabpanel.visible {
    display: block;
}

.tabs {
    /*position: relative;*/
    /*margin-bottom: 2.5rem;*/
    /*border-top-right-radius: 64px;*/
    /*border-top-left-radius: 64px;*/
    /*background: #FFFFFF;*/

    /*@media (min-width: 992px) {*/
    /*    margin-bottom: 2rem;*/

    /*    &:before {*/
    /*        content: '';*/
    /*        display: block;*/
    /*        position: absolute;*/
    /*        width: 100%;*/
    /*        height: 100%;*/
    /*        background: var(--color-light-blue);*/
    /*        z-index: -1;*/
    /*    }*/
    /*}*/

    /*.tablist {*/
    /*    display: flex;*/
    /*    position: sticky;*/
    /*    top: -1px;*/
    /*    padding: 1rem .5rem;*/
    /*    overflow: scroll;*/
    /*    scroll-behavior: smooth;*/
    /*    z-index: 2;*/
    /*    background: var(--color-white);*/

    /*    &:before {*/
    /*        display: block;*/
    /*        position: absolute;*/
    /*        width: 138px;*/
    /*        height: 6px;*/
    /*        background: var(--color-green-light);*/
    /*        bottom: 0.5rem;*/
    /*        left: 0.5rem;*/
    /*        border-radius: 4px;*/
    /*        transition: all .35s ease-in-out;*/
    /*    }*/

    /*    @media (min-width: 992px) {*/
    /*        position: relative;*/
    /*        top: inherit;*/
    /*        justify-content: center;*/
    /*        padding: .5rem;*/
    /*        transform: translateY(-50%);*/
    /*        border-radius: 24px;*/
    /*        border: 4px solid var(--color-light-blue);*/
    /*        width: max-content;*/
    /*        margin: 0 auto 2rem;*/
    /*        box-shadow: 4px 4px 0 rgb(0 0 0 / 3%);*/
    /*        overflow: auto;*/

    /*        &:before {*/
    /*            width: 202px;*/
    /*            height: 54px;*/
    /*            top: 0.5rem;*/
    /*            bottom: auto;*/
    /*            z-index: -1;*/
    /*            border-radius: 16px;*/
    /*        }*/
    /*    }*/

    /*    li {*/
    /*        padding: 0 .5rem;*/

    /*        @media (min-width: 992px) {*/
    /*            padding: 0;*/
    /*        }*/
    /*    }*/

    /*    .tab {*/
    /*        display: flex;*/
    /*        align-items: center;*/
    /*        text-align: center;*/
    /*        position: relative;*/
    /*        font-family: 'Rubik', sans-serif;*/
    /*        font-size: 18px;*/
    /*        font-weight: 600;*/
    /*        height: 100%;*/
    /*        background: none;*/
    /*        color: var(--color-black);*/
    /*        cursor: pointer;*/
    /*        text-decoration: none;*/
    /*        line-height: 26px;*/
    /*        white-space: nowrap;*/

    /*        &[aria-selected="true"] {*/
    /*            box-shadow: none;*/
    /*            @media (min-width: 992px) {*/
    /*                background: var(--color-green-light);*/
    /*            }*/
    /*        }*/

    /*        @media (min-width: 992px) {*/
    /*            display: flex;*/
    /*            font-size: 20px;*/
    /*            border: none;*/
    /*            border-radius: 16px;*/
    /*            padding: 0 1.5rem;*/
    /*            height: 54px;*/
    /*            margin: 0;*/
    /*            line-height: 30px;*/
    /*            white-space: inherit;*/
    /*        }*/
    /*    }*/
    /*}*/

    /*.tabpanel {*/
    /*    &:not(:target):not(.visible) {*/
    /*        display: none;*/
    /*    }*/
    /*}*/

    /*&__separator {*/
    /*    background: var(--color-light-blue);*/
    /*    height: 6px;*/
    /*    border: 0;*/
    /*    border-radius: 11px;*/
    /*    margin-bottom: 1.5rem;*/
    /*    margin-top: 0;*/
    /*}*/
}

.tab {
    display: flex;
    position: relative;
    align-items: center;
    height: 40px;
    padding: 0 .5rem;
    gap: 1.5rem;
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: unset;
    border-radius: 5px;
    border: 1px solid #E9E9EC;
    box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.16);
}


.tab[aria-selected="true"],
.tab[aria-selected="true"]:hover {
    color: #598CE4;
}

.tab[aria-selected="true"]:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #598CE4;
}

.tab[aria-selected="true"] > svg {
    transform: rotate(180deg);
}

.tab[aria-selected="true"] svg path {
    fill: #598CE4;
}

.tab:hover {
    text-decoration: none;
    color: inherit;
}

.tab > div {
    display: flex;
    align-items: center;
    gap: .5rem;
}