.auto-container {
    overflow-x: auto;
    /* -webkit-overflow-scrolling: touch; */
}

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

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

thead th {
    background-color: #383839;
    color: white;
}

tbody td {
    background-color: white;
    color: #383839;
}

.container {
    padding-left: 10px; 
    padding-right: 10px;
}

@media (min-width: 480px) {
    .container {
        padding-left: 20px; 
        padding-right: 20px;
    }
}

@media (min-width: 768px) {
    .container {
        padding-left: 30px; 
        padding-right: 30px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 10%;
        padding-right: 10%;
    }
}