/* =========================================================
   VINTEK MATERIAL GRADES
   Client Reference Style
========================================================= */

.material-table-wrap {
    position: relative;

    width: 100%;
    max-width: 1020px;

    margin: 0 auto;

    background: #ffffff;

    border-radius: 4px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(20, 50, 90, 0.08);
}


/* =========================================================
   TABLE
========================================================= */

.material-grades-table {
    width: 100%;

    margin: 0;

    border-collapse: collapse;

    table-layout: fixed;

    font-size: 15px;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

.material-grades-table .group-column {
    width: 25%;
}

.material-grades-table .material-column {
    width: 75%;
}


/* =========================================================
   HEADER
========================================================= */

.material-grades-table thead th {
    padding: 17px 20px;

    background: linear-gradient(
        135deg,
        #173b6c 0%,
        #214b80 100%
    );

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

    text-align: left;

    border: 1px solid #173b6c;
}


/* =========================================================
   TABLE ROW
========================================================= */

.material-grades-table tbody tr {
    transition: all 0.25s ease;
}


/* =========================================================
   GROUP COLUMN
========================================================= */

.material-grades-table .grade-group {
    position: relative;

    padding: 22px 18px;

    color: #173b6c;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

    vertical-align: middle;

    border-right: 1px solid rgba(30, 60, 90, 0.25);
}


/* =========================================================
   MATERIAL DETAILS
========================================================= */

.material-grades-table .grade-details {
    padding: 15px 25px;

    vertical-align: middle;

    color: #293746;

    font-size: 15px;

    line-height: 1.55;
}


/* =========================================================
   REMOVE DEFAULT LIST STYLE
========================================================= */

.material-grades-table .grade-details ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.material-grades-table .grade-details li {
    position: relative;

    margin: 0;

    padding: 4px 0 4px 24px;
}


/* =========================================================
   CUSTOM BULLETS
========================================================= */

.material-grades-table .grade-details li::before {
    content: "";

    position: absolute;

    left: 3px;
    top: 12px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #28628e;
}


/* =========================================================
   CARBON STEEL
========================================================= */

.grade-carbon {
    background: #eef5fb;
}

.grade-carbon .grade-group {
    color: #173b6c;
}

.grade-carbon .grade-details li::before {
    background: #28628e;
}


/* =========================================================
   LOW ALLOY STEEL
========================================================= */

.grade-low-alloy {
    background: #f2f7e9;
}

.grade-low-alloy .grade-group {
    color: #315d38;
}

.grade-low-alloy .grade-details li::before {
    background: #4d913c;
}


/* =========================================================
   HEAT RESISTANT STEEL
========================================================= */

.grade-heat-resistant {
    background: #fff8eb;
}

.grade-heat-resistant .grade-group {
    color: #b05d29;
}

.grade-heat-resistant .grade-details li::before {
    background: #c8752d;
}


/* =========================================================
   STAINLESS STEEL
========================================================= */

.grade-stainless {
    background: #edf8fa;
}

.grade-stainless .grade-group {
    color: #22596c;
}

.grade-stainless .grade-details li::before {
    background: #27758a;
}


/* =========================================================
   DUPLEX STAINLESS STEEL
========================================================= */

.grade-duplex {
    background: #f5f1fb;
}

.grade-duplex .grade-group {
    color: #5b4480;
}

.grade-duplex .grade-details li::before {
    background: #684b9b;
}


/* =========================================================
   SUPER DUPLEX
========================================================= */

.grade-super-duplex {
    background: #fff1f6;
}

.grade-super-duplex .grade-group {
    color: #9b315c;
}

.grade-super-duplex .grade-details li::before {
    background: #b83c70;
}


/* =========================================================
   NICKEL SUPER ALLOYS
========================================================= */

.grade-nickel {
    background: #fff9e9;
}

.grade-nickel .grade-group {
    color: #9b782c;
}

.grade-nickel .grade-details li::before {
    background: #b18a35;
}


/* =========================================================
   ROW BORDERS
========================================================= */

.material-grades-table tbody tr {
    border-bottom: 1px solid rgba(50, 70, 90, 0.28);
}

.material-grades-table tbody tr:last-child {
    border-bottom: none;
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.material-grades-table tbody tr:hover {
    filter: brightness(0.985);
}


.material-grades-table tbody tr:hover .grade-group {
    padding-left: 23px;
}


/* =========================================================
   GROUP TRANSITION
========================================================= */

.material-grades-table .grade-group {
    transition:
        padding-left 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .material-table-wrap {
        max-width: 100%;
    }

    .material-grades-table {
        min-width: 850px;
    }

    .material-grades-table .grade-group {
        font-size: 16px;
    }

    .material-grades-table .grade-details {
        font-size: 14px;
    }

    .table-responsive {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .material-grades-table {
        min-width: 780px;
    }

    .material-grades-table thead th {
        padding: 14px 16px;

        font-size: 15px;
    }

    .material-grades-table .grade-group {
        padding: 18px 15px;

        font-size: 15px;
    }

    .material-grades-table .grade-details {
        padding: 12px 18px;

        font-size: 13px;
    }

    .material-grades-table .grade-details li {
        padding-left: 20px;

        padding-top: 3px;
        padding-bottom: 3px;
    }

}