/* =========================================================
   THE OCEANS POST
   ARTICLE TABLES
   Matches the article description/content width
========================================================= */


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

.article-tables {
    width: 100%;
    max-width: 850px;
    margin: 35px auto;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   INDIVIDUAL TABLE BLOCK
========================================================= */

.article-table-block {
    width: 100%;
    margin: 0 0 35px;
    padding: 0;
    box-sizing: border-box;
}


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

.article-table-title {
    margin: 0 0 16px;
    padding: 0;

    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;

    color: #111;
}


/* =========================================================
   TABLE SCROLL CONTAINER
========================================================= */

.article-table-scroll {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;
}


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

.article-table {
    width: 100%;
    min-width: 600px;

    margin: 0;
    padding: 0;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: auto;

    font-family: inherit;
    font-size: 15px;

    background: #fff;

    border: 1px solid #d5d5d5;
    border-radius: 8px;

    overflow: hidden;
}


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

.article-table thead th {
    padding: 16px;

    text-align: left;
    vertical-align: middle;

    font-weight: 700;

    color: #111;

    background: #eaf7fb;

    border-bottom: 1px solid #cfdfe4;
}


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

.article-table tbody td {
    padding: 16px;

    text-align: left;
    vertical-align: middle;

    color: #222;

    background: #fff;

    border-bottom: 1px solid #e1e1e1;
}


/* =========================================================
   REMOVE LAST ROW BORDER
========================================================= */

.article-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   ROW HOVER
========================================================= */

.article-table tbody tr:hover td {
    background: #f8fafb;
}


/* =========================================================
   FIRST COLUMN
========================================================= */

.article-table tbody td:first-child {
    font-weight: 600;
}


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

@media (max-width: 768px) {

    .article-tables {
        width: 100%;
        max-width: 850px;

        margin: 30px auto;

        padding: 0;
    }


    .article-table-title {
        font-size: 20px;
        margin-bottom: 14px;
    }


    .article-table {
        min-width: 600px;
        font-size: 14px;
    }


    .article-table thead th,
    .article-table tbody td {
        padding: 13px 14px;
    }

}


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

@media (max-width: 480px) {

    .article-tables {
        margin-top: 25px;
        margin-bottom: 25px;
    }


    .article-table-title {
        font-size: 19px;
    }


    .article-table {
        min-width: 560px;
    }


    .article-table thead th,
    .article-table tbody td {
        padding: 12px;
    }

}