.section-table table {
    width: 100%;
    border-collapse: collapse;
   
}

    .section-table table tr a {
        text-decoration: underline;
        word-break: break-word;
    }

    .section-table table a:hover {
        text-decoration: none;
    }

    .section-table table tr {
        border-bottom: 1px solid #f0f0f0;
    }

    .section-table table th {
        font-size: 1em;
        font-weight: 400;
    }

    .section-table table tr td {
        padding-top: 15px;
        padding-bottom: 15px;
    }

.section-table table.small-font tr td {
    font-size: 13px;
}

        .section-table table tr td:first-child {
            font-weight: 400;
            padding-left: 40px;
        }

    .section-table table tr th:first-child {
        padding-left: 40px;
    }

    .section-table table tr td:last-child, #shops table tr th:last-child {
        padding-right: 40px;
    }

    .section-table table td, th {
        text-align: left;
    }

    .table-colored-legend {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        margin: 0 15px;
        top: 4px;
        border-radius: 50%;
    }
        
        .purple-legend {
            background: #ae599e;
        }

        .green-legend {
            background: #30ac67;
        }

        .red-legend {
            background: #eb5d40;
        }

        .grey-legend {
            background: #9d9c9c;
        }

        .yellow-legend {
            background: #fecc53;
        }

@media only screen and (min-width: 768px) {
    .section-table table tbody tr:hover {
        background: #ef7e13;
        color: #fff;
        border: 1px solid white;
    }

        .section-table table tbody tr:hover a {
            color: #fff;
        }
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
     .section-table table,  .section-table thead,  .section-table tbody,  .section-table th,  .section-table td,  .section-table tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
         .section-table thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

     .section-table tr {
        border: 1px solid #ccc;
    }

     .section-table td, .section-table table tr td:first-child {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }


         .section-table td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        .section-table table tr
        {
            border-bottom: 1px solid #a0a0a0;
            margin-bottom: 10px;
        }
    /*
		Label the data
		*/
     .section-table table tr td:before {
        content: attr(data-title);
    }
}