@media screen and ( max-width: 767px ) {

     /* Width and Height */

    .compilation-tooltip-wrapper .legal-tooltip {
        width: calc( 100% - (16px * 2) - 2px );
    }

       /* Tabs Position */

    .home .legal-tabs-info .legal-tabs .swiper {
        position: relative;
    }

    .compilation-tooltip-wrapper .legal-tooltip {
        top: calc( 24px + 8px );
        z-index: 1;
    }

    .legal-tabs .legal-tabs-title,
    .compilation-tooltip-wrapper:not( .home .compilation-tooltip-wrapper) {
        margin-bottom: var( --Spacing-07 );
    }

    /* Tabs Typography */

    .home .legal-tabs-title {
        font-size: 1.625rem;
        line-height: 1.75rem;
    }

}

@media screen and ( min-width: 768px ) {

    /* Tabs Display */

    .legal-tabs {
        display: flex;
        flex-wrap: wrap;
    }

    .legal-tabs__swiper_mobile .swiper-wrapper {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .home .legal-tabs .swiper-wrapper {
        gap: 0.5rem;
    }

    .home .legal-tabs .swiper-btn {
        display: none;
    }

    .legal-tabs__swiper_mobile .swiper-btn {
        display: none;
    }

    /* Width and Height */

    .home .legal-tabs-title {
        width: fit-content;
    }
    
    .legal-tabs .legal-tabs-title {
        width: 60%;
    }

    .home .legal-tabs .legal-tab-menu:not( .legal-tabs-info .legal-tab-menu ) {
        min-width: calc( ( 162px * 2 ) + 8px );
    }

    .legal-tabs .legal-tab-menu:not( .legal-tabs-info .legal-tab-menu ) {
        width: 100%;
    }

    .home .legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
        min-width: calc( 162px - ( 24px * 2 ) - 2px );
    }

    .legal-tabs .legal-tab-display:not( .legal-tabs-info .legal-tab-display ) {
        width: 100%;
    }

    .home .legal-tabs-title {
        margin-right: auto;
    }

    .legal-tabs .legal-tooltip {
        width: calc( 320px - (16px * 2) - 2px );
    }

    .compilation-tooltip-wrapper .legal-tooltip {
        z-index: 2;
    }

    .legal-tabs .swiper-btn {
        position: absolute;
        z-index: 1;
        top: 50%;
	    transform: translateY(-50%);
    }

    .legal-tabs .legal-tabs-title,
    .compilation-tooltip-wrapper:not( .home .compilation-tooltip-wrapper ) {
        margin-bottom: var( --Spacing-08 );
    }

    /* Tabs Typography */

    .home .legal-tabs-title {
        font-size: 1.625rem;
        line-height: 1.75rem;
    }

}

/* Tabs Display */

.compilation-tooltip-wrapper .legal-tooltip-control {
    display: flex;
    align-items: center;
    column-gap: 0.25rem;
    cursor: pointer;
}

.legal-tabs .compilation-tooltip-wrapper .legal-tooltip.legal-active {
    display: flex;
}

.legal-tabs .compilation-tooltip-wrapper .legal-tooltip:not( .legal-active ) {
    display: none;
}

.legal-tabs .legal-tab-menu:not( .legal-tabs-info .legal-tab-menu ) {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

.legal-tabs .legal-tab-content:not( .legal-active ):not( .empty-tab-content ) {
    display: none;
}

.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.legal-tabs .legal-tabs-link {
    display: block;
}

.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
    min-height: 2.25rem;
    box-sizing: border-box;
}

/* Tabs Position */

.legal-tabs .legal-tabs-title h2 {
    margin-bottom: 0rem;
}

.legal-tabs .legal-tab-menu:not( .legal-tabs-info .legal-tab-menu ) {
    position: relative;
}

.compilation-tooltip-wrapper .legal-tooltip {
    position: absolute;
    right: 0px;
    padding: 1rem;
}

.legal-tabs .legal-tab-menu:not( .home .legal-tab-menu ) {
    margin-bottom: var( --Spacing-07 );
}

.legal-tabs .legal-tab-display:not( .legal-tabs-info .legal-tab-display ) {
    margin-bottom: var( --Spacing-06 );
}

.legal-tabs .legal-tab-title:not( .home .legal-tab-title )::after {
    margin-left: 0.5rem;
}

.legal-tabs .legal-tab-title[class*="tab-image-"] {
    padding-left: 44px;
}
.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
    padding-right: 24px;
}

.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ):not( .legal-tab-title[class*="tab-image-"] ) {
    padding-left: 24px;
}

.legal-tabs .legal-tabs-description {
    margin-bottom: 15px;
}

.legal-tabs .legal-tabs-link {
    padding-left: 50px;
}

/* Tabs Background */

.compilation-tooltip-wrapper .legal-tooltip {
    border-radius: 0.75rem;
    border: 1px solid var(--Base-base-09);
    background: var(--Base-base-01);
}

.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
    border-radius: 3.75rem;
}

.legal-tabs .legal-tab-title:not( .legal-active ):not( .legal-tabs-info .legal-tab-title ) {
    background-color: var( --Base-base-01 );
    border: 1px solid var( --Base-base-04 );
}

.legal-tabs .legal-tab-title.legal-active:not( .legal-tabs-info .legal-tab-title ) {
    background-color: var( --Primitives-purple-20 );
    border: 1px solid var( --Base-purple_button );
}

.legal-tabs .legal-tab-title:not( .legal-active ):not( .legal-tabs-info .legal-tab-title ):hover {
    background-color: var( --Primitives-purple-20 );
    border: 1px solid var( --Base-purple_button );
}

.legal-tabs .legal-tab-title[class*="tab-image-"] {
    background-position: left 20px center;
    background-repeat: no-repeat;
    background-size: auto;
}

.legal-tabs .legal-tabs-link {
    background-image: url( '../../img/compilation/compilation-all.svg' );
    background-position: left 15px center;
    background-repeat: no-repeat;
    background-size: auto;
}

/* Tabs Typography */

.legal-tabs .legal-tabs-title,
.compilation-tooltip-wrapper .legal-tooltip-control,
.compilation-tooltip-wrapper .legal-tooltip,
.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ),
.legal-tabs .legal-tabs-description,
.legal-tabs .legal-tabs-link {
    font-family: var( --legal-font-primary );
    font-style: normal;
}

.compilation-tooltip-wrapper .legal-tooltip::before,
.legal-tabs .legal-tabs-title,
.legal-tabs .legal-tabs-description {
    color: var(--Base-base-09);
}

.compilation-tooltip-wrapper .legal-tooltip-control:not( .legal-active ),
.legal-tabs .legal-tab-title:not( .legal-active ):not( .legal-tabs-info .legal-tab-title )::after {
    color: var( --Base-base-05 );
}

.compilation-tooltip-wrapper .legal-tooltip-control:not( .legal-active ):hover,
.compilation-tooltip-wrapper .legal-tooltip-control.legal-active {
    color: var(--Base-base-07);
}

.home .legal-tabs-title {
    font-weight: 700;
}

.compilation-tooltip-wrapper .legal-tooltip-control {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.compilation-tooltip-wrapper .legal-tooltip-control::after {
    content: '\F114';
    font-family: var( --legal-font-icons );
    font-size: 24px;
    line-height: 24px;
}

.legal-tabs .legal-tooltip {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.compilation-tooltip-wrapper .legal-tooltip-text::before {
    content: attr( data-tooltip-text );
}

.compilation-tooltip-wrapper .legal-tooltip a {
    text-decoration: none;
}

.legal-tabs .legal-tab-title:not( .legal-tabs-info .legal-tab-title ) {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
}

.legal-tabs .legal-tab-title:not( .legal-active ):not( .legal-tabs-info .legal-tab-title ) {
    color: var( --Base-base-09 );
    transition: 0.5s;
}

.legal-tabs .legal-tab-title.legal-active:not( .legal-tabs-info .legal-tab-title ) {
    color: var( --Base-purple_button_hover );
}

.legal-tabs .legal-tab-title:not( .home .legal-tab-title )::after {
    content:attr( data-billets-count );
}

.legal-tabs .legal-tabs-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

.legal-tabs .legal-tabs-link {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    text-decoration: none;
    color: rgb(89, 151, 227);
}