.layout-tabs {
    font-family: sans-serif;
    width: 100%;
    height: 46px;
    display: flex;
    background-color: #d0d0d0;
}

.layout-tabs-line {
    width: 100%;
    height: 1px;
}

.tab-list {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    overflow: visible;
    z-index: 100;
}

    .tab-list::-webkit-scrollbar {
        display: none;
    }

.tab {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    background-color: #c6c6c6;
    border-left: 2px solid transparent;
    border-right: 2px solid #b6b6b6;
    position: relative;
}


    .tab.active {
        background: #fff;
        border-right: 2px solid #007bff;
        border-left: 2px solid #007bff;
        box-shadow: -2px 0 0 0 #c6c6c6;
    }

    .tab:first-child.active {
        box-shadow: none;
    }

.tab-close:hover {
    color: red;
}

.tab-cover {
    display: none;
}

.tab.active .tab-cover {
    display: block;
    position: absolute;
    left: 0px;
    right: 0;
    bottom: -2px;
    height: 5px;
    background-color: white;
}

.tab:first-child.active .tab-cover {
}

.layout-tabs-buttons {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

.layout-tabs-button {
    position: relative;
    top: 1px;
}