#about-hero {
    background-image: url('../images/herbs/hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 520px;
    background-position: center;
    width: 100%;
    border-bottom-right-radius: 140px;
    border-bottom-left-radius: 140px;
    clear: both;
    /* Put hero back into normal flow but lift it under the nav */
    position: relative;
    margin-top: -102px;
    /* same offset pattern as #home-top-banner */
    z-index: 1;
    /* allow later content to stack above if needed */
}

#herbs-filter {
    position: relative;
    z-index: 100;
}

.hf-box {
    background-color: #FAF5F1;
    padding: 24px 40px;
    border-radius: 24px;
}

#herb-table {
    position: relative;
    padding-bottom: 10%;
}

    #herb-table .container {
        position: relative;
        z-index: 2;
    }

    #herb-table > img {
        position: absolute;
        bottom: -12%;
        mix-blend-mode: multiply;
    }

/* Responsive tweaks */

/* DataTables control styling */
table.table-bordered.dataTable td {
    border: 0px;
    padding: 16px 20px;
    vertical-align: middle;
}

    table.table-bordered.dataTable thead tr:first-child th:nth-of-type(7),
    table.table-bordered.dataTable td:nth-of-type(7){
        box-shadow: -1px 4px 9px 0px #E4E7EC;
    }
table.table-bordered.dataTable tbody tr:last-child td:first-child,
table.table-bordered.dataTable tbody tr:last-child td:nth-of-type(8),
table.table-bordered.dataTable tbody tr:last-child td:last-child {
    box-shadow: 5px 2px 7px 0px #E4E7EC;
}
table.table-bordered.dataTable thead tr:first-child th:nth-of-type(2), table.table-bordered.dataTable td:nth-of-type(2) {
    box-shadow: 5px 2px 7px 0px #E4E7EC;
}

table.table-bordered.dataTable td {
    border: 0px;
    background: white;
    box-shadow: unset;
    border-bottom: 1px solid #E4E7EC;
}

.dt-topbar .dataTables_length label,
.dt-bottombar .dataTables_length label {
    margin: 0;
}



.dt-topbar .dataTables_info,
.dt-bottombar .dataTables_info {
    margin: 0;
    color: #4B4B4B;
    font-weight: 400;
}

/* Table layout */
#herb-table-grid {
    table-layout: auto;
}

/* Narrow horizontal scrollbar (5px) only for herb-table-grid */
#herb-table-grid_wrapper .dataTables_scrollBody {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #D7D7D7 transparent;
    /* thumb / track */
}

    #herb-table-grid_wrapper .dataTables_scrollBody::-webkit-scrollbar {
        height: 5px;
        /* horizontal scrollbar */
    }

    #herb-table-grid_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
        background: transparent;
    }

    #herb-table-grid_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
        background: #D7D7D7;
        border-radius: 6px;
        border: 1px solid #CFCFCF;
        /* subtle edge */
    }

        #herb-table-grid_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
            background: #C9C9C9;
            /* slight darken on hover */
        }
label[for=herb-group-filter] {
    flex: 0 0 auto;
    width: 7.666667%;
}

.choices {
    flex: 0 0 auto;
    width: 83.33333333%;
}

@media (max-width: 1024px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    #about-hero {
        margin-top: 25px;
        border-bottom-right-radius: 120px;
        border-bottom-left-radius: 120px;
        min-height: 450px;
        height: 450px;
        background-size: 150%;
    }

    #herb-table {
        padding: 0px 25px 20%;
        background: url('../images/herbs/herbs-footer.png') no-repeat;
        background-size: cover;
        background-size: 170%;
        background-position-x: inherit;
        background-position-y: 104%;
        margin-bottom: 0px !important;
    }

        #herb-table > img {
            display: none;
        }

    footer {
        margin-top: -5%;
    }
}

@media (max-width: 767px) {
    #about-hero {
        border-bottom-right-radius: 80px;
        border-bottom-left-radius: 80px;
        min-height: 350px;
        height: 350px;
        background-size: 200%;
    }

    #herb-table {
        background-position-y: bottom;
    }

    #herbs-filter .container {
        padding: 0px;
    }

    .hf-box {
        padding-left: 20px;
        padding-right: 20px;
    }

    .form-label {
        min-width: 12%;
    }

    #herb-table {
        padding-left: 0px;
        padding-right: 0px;
    }

    div.dataTables_wrapper div.dataTables_info {
        display: none;
    }

    table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable td {
        padding: 6px 10px;
        font-size: 14px;
    }

    .page-link, .dt-topbar .dataTables_length select.dt-length, .dt-bottombar .dataTables_length select.dt-length {
        font-size: 14px;
    }

    .dt-bottombar .dataTables_length select.dt-length {
        min-width: 60px;
        padding: 8px;
    }
    label[for=herb-category] {
        flex: 0 0 auto;
        width: 7.666667%;
    }
    .choices__inner{
        border-radius:10px!important;
    }
}

@media (max-width:375px) {
    .dt-bottombar {
        display: block !important;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        margin-top: 10px;
    }
}
@media (max-width:360px){
    label[for=herb-group-filter], label[for=herb-category] {
        flex: 1 0 auto;
    }
}