﻿.lastPriceCats {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.lastPriceCats .nav-tabs {
    margin: 0 !important;
    overflow-x: hidden;
}

.lastPriceCats .nav-tabs li {
    background-color: #e5e5e5;
    list-style: none;
    padding: 10px;
    flex: 1 0 min-content;
    cursor: pointer;
    text-align: center;
    border-left: 1px solid #CCCCCC;
}

.lastPriceCats .nav-tabs li.active {
    background-color: var(--accent-color);
    color: #fff;
}

.lastPriceCats .nav-tabs li a {
    color: #3D3D3D !important
}

;

.lastPriceCats .nav-tabs li.active a {
    color: #fff !important;
}

.lastPriceCats .nav-tabs li:last-of-type {
    border-left: none;
}

.lastPriceCats .tab-pane {
    position: absolute;
    width: calc(100%);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    height: calc((100vh + 100vw) * 0.14);
}

.lastPriceCats .tab-pane.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 2;
}

.lastPriceCats .tab-content {
    height: calc((100vh + 100vw) * 0.14);
    width: 100%;
    position: relative;
}

a.viewAllBtn {
    background: #1ABE14;
    display: block;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}


.lastPriceCats .steel-item {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: auto;
    padding: 17px;
    color: #3d3d3d;
    text-align: center;
    position: relative;
}

.lastPriceCats .steel-item span:first-of-type {
    grid-column: 1 / 3;
    text-align: right;
}

.lastPriceCats .steel-item:nth-child(even) {
    background: #f6f6f6;
}

.lastPriceCats .steel-item:nth-child(odd) {
    background: #f0f0f0;
}

/*****************Mobile Responsive*******************/
@media screen and (max-width:480px) {
    .lastPriceCats .tab-pane.active {
        position: relative;
    }

    .lastPriceCats {
        overflow: unset;

        .tab-pane {
            height: unset;
        }

        .tab-content {
            height: unset;
        }
    }

    .lastPriceCats .nav-tabs {
        overflow: auto;

        li {
            flex: 1 0 50%;
        }
    }

    a.viewAllBtn {
        position: relative;
    }
}