.tabs-block {
    display:block;
    border-radius:3px;
    overflow:hidden
}

.tab-link {
    padding:0 20px;
    font-size:10pt;
    height:40px;
    line-height:40px;
    color:#bbb;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    cursor:pointer
}

.tab-link.active {
    background:rgba(77,77,77,.4);
    color:#fff
}

.tab-content-block {
    display:block;
    padding:25px 10px;
    color:rgba(255,255,255,.85)
}

.tab-content-block2 {
    display:block;
    padding:25px 10px;
    color:rgba(255,255,255,.85)
}

.tab-content:not(.active) {
    display:none
}

.tab-link {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    transition:all linear .2s
}

@media all and (min-width:850px) {
    .blockrl {
        padding:0px 20px
    }

    .tab-link:not(.active):hover {
        background:rgba(77,77,77,.2);
        box-shadow:-3px 0 0 0 var(--span-color) inset
    }

    .tab-link-block {
        display:block;
        overflow:hidden;
        box-shadow:-1px 0 0 0 #2b2b2b inset
    }

    .tabs-block {
        display:grid;
        grid-template-columns:250px auto;
        grid-gap:0
    }

    .tabs-block .tab-link {
        display:block
    }

    .tabs-block .tab-link.active {
        box-shadow:-3px 0 0 0 var(--span-color-back) inset
    }
}

@media(min-width:451px) and (max-width:850px) {
    .blockrl {
        padding:none
    }

    .tab-link:not(.active):hover {
        background:rgba(77,77,77,.2);
        box-shadow:0 -3px 0 0 var(--span-color) inset
    }

    .tab-link-block {
        display:block;
        background:var(--hover);
        overflow:hidden
    }

    .tabs-block .tab-link-block::after {
        content:'';
        display:block;
        clear:both
    }

    .tabs-block .tab-link {
        display:inline-block;
        float:left;
        min-width:calc(50px - 20px);
        max-width:250px;
        margin-right:2px
    }

    .tabs-block .tab-link.active {
        box-shadow:0 -3px 0 0 var(--span-color-back) inset
    }

    .tabs-block .tab-link:last-child {
        margin-right:0
    }
}

@media all and (max-width:450px)0 {
    .blockrl {
        padding:30px 0
    }

    .tab-link:not(.active):hover {
        background:rgba(77,77,77,.2);
        box-shadow:-3px 0 0 0 var(--span-color) inset
    }

    .tab-link-block {
        display:block;
        text-align:center;
        overflow:hidden;
        box-shadow:-1px 0 0 0 #2b2b2b inset
    }

    .tabs-block .tab-link {
        display:block;
        width:100%
    }

    .tabs-block .tab-link.active {
        box-shadow:-3px 0 0 0 var(--span-color-back) inset
    }
}