@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.42em;
    color: #A7A1AE;
    background-color: #1F2739;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    text-align: center;
    display: block;
    line-height: 1em;
    padding-bottom: 2em;
    color: #FB667A;
}

h2 a {
    font-weight: 700;
    text-transform: uppercase;
    color: #FB667A;
    text-decoration: none;
}

.blue {
    color: #185875;
}

.yellow {
    color: #FFF842;
}

table {
    width: 100%; /* Make the table take full width */
    max-width: 700px; /* Limit the table width on larger screens */
    margin: 0 auto;
    border-collapse: collapse;
    overflow: hidden;
}

.container22 th h1 {
    font-weight: bold;
    font-size: 1em;
    text-align: left;
    color: #185875;
}

.container22 td {
    font-weight: normal;
    font-size: 1em;
    box-shadow: 0 2px 2px -2px #0E1119;
    padding: 10px;
}

.container22 {
    text-align: left;
    margin: 0 auto;
    padding: 0 0 8em 0;
}

.container22 td,
.container22 th {
    padding-bottom: 2%;
    padding-top: 2%;
    padding-left: 2%;
    text-align: left;
}

/* Background-color of the odd rows */
.container22 tr:nth-child(odd) {
    background-color: #323C50;
}

/* Background-color of the even rows */
.container22 tr:nth-child(even) {
    background-color: #2C3446;
}

.container22 th {
    background-color: #1F2739;
    color: #FB667A;
    text-transform: uppercase;
}

.container22 td:first-child {
    color: #FB667A;
}

.container22 tr:hover {
    background-color: #464A52;
    box-shadow: 0 6px 6px -6px #0E1119;
}

/* Responsive Design */
@media (max-width: 800px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    .container22 {
        padding: 0; /* Remove padding to better fit smaller screens */
    }

    /* Hide table headers (th) */
    .container22 thead {
        display: none;
    }

    .container22 tr {
        margin-bottom: 15px;
        display: block;
        border-bottom: 1px solid #2C3446;
        padding: 10px;
    }

    .container22 td {
        display: block;
        text-align: left;
        position: relative;
        padding-left: 10%;
        box-shadow: none; /* Remove shadow on mobile */
    }

    .container22 td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #FB667A;
    }

    /* Remove unnecessary columns */
    .container22 td:nth-child(4) {
        text-align: center;
        padding-left: 0;
    }
}