.basic-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
    margin-right: auto;
    background-color: #f1f3f4;
    border-bottom: 1px solid var(--c-border-isdark);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}
.basic-tabs-nav {
    position: relative;
    height: 4.7rem;    
}

.basic-tabs__content {
    overflow: auto;
}

.basic-tabs .basic-tabs__link {
    padding: 1.8rem 2.4rem;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5rem;
    color: #8b8b8b;
    transition: color .2s ease;
    position: relative;
    border: none;
    width: 100%;
   background-color: #f1f3f4;
    order: 1;
}
.basic-tabs .basic-tabs__link.active {
    order: 0;
background-color: #f1f3f4;
}

.basic-tabs .basic-tabs__link.active, .basic-tabs .basic-tabs__link:hover {
    border: none;

}

.basic-tabs .basic-tabs__link:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 2px;
    display: inline-flex;
    background-color: #86c4f5;
    opacity: 0;
    visibility: hidden;

}

.basic-tabs .basic-tabs__link.active:before {
    opacity: 1;
    visibility: visible;

}
.basic-tabs .basic-tabs__link.active:after {
    content: url(../../assets/icons/chevron-down.svg);
    z-index: 3;
    display: inline-block;
    margin-left: 2rem;
}

.basic-tabs-toggler {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 3;
    background-image: url(../../assets/icons/chevron-down.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}
button.basic-tabs-toggler:focus {
    outline: none;
    box-shadow: none;
}
.basic-tabs-nav.show .basic-tabs {
    height: auto;
}
.basic-tabs-nav.show .basic-tabs .basic-tabs__link.active:after {
    transform: rotate(180deg);
}
.basic-tabs-nav > .nav li {
    width: 100%;
    order: 1;
}
ul.basic-tabs li.active {
    order: 0;
}
@media (min-width: 992px) {
    .basic-tabs-nav > .nav li {
        width: auto;
    }
    .basic-tabs .basic-tabs__link {
        width: auto;
    }
    .basic-tabs-toggler, .basic-tabs .basic-tabs__link.active:after {
        display: none;
    }
    .basic-tabs {
        height: auto;     
        position: relative;   
    }
    .basic-tabs-nav {
        height: auto;
        
    }
    .basic-tabs .basic-tabs__link.active {
        order: 1;
    }
}