body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f0f4f7;
    margin: 0;
    padding: 0;
}

.container {
    padding: 0.5rem;
}

.filter-section {
    padding-left: .5rem;
}

.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.filter-section label {
    font-size: 1em;
    font-weight: 600;
    color: #333;
    margin-right: 6px;
    width: 75px;
    display: inline-block;
}

.filter-section select {
    padding: 6px;
    font-size: .9em;
    border-radius: 5px;
}

.search-input {
    padding: 6px;
    font-size: .9em;
    border-radius: 5px;
    border: 2px solid #e9e9e9;
    width: 200px;
    margin-top: 3px;
    margin-bottom: 12px;
    height: 2em;
    width: 235px;
    font-size: 1em;
}

.search-button {
    padding: 6px;
    font-size: .8em;
    border-radius: 5px;
    background-color: #0056b3;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.header-event {
    background-color: #0056b3;
    color: #FFFFFF;
    padding: 12px;
    margin: 0px;
    text-align: center;
    font-weight: 700;
    font-size: 1.6em;
}

.event-details {
    text-align: center;
    padding: 0px;
    color: #efefef;
    font-size: .5em;
}

.notification {
    text-align: center;
    padding: 6px;
    font-size: .9em;
    font-weight: 600;
    border-bottom: 3px solid #0056b3;
}

.head-link {
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
}

.head-link-selected {
    font-weight: 500;
    color: #bcbcbc;
    text-decoration: none;
}

.header-entry {
    background-color: #fff;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Base styles for the table */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

/* Toggle icon style */
.toggle-icon {
    cursor: pointer;
    font-size: 1.2em;
    transition: transform 0.1s;
    user-select: none;
    float: right;
    color: #000;
}

.expanded .toggle-icon {
    transform: rotate(180deg);
}


tr {
    padding: 0px;
    margin: 0px;
}

.responsive-table th, .responsive-table td.data-label {
    padding: 6px;
    text-align: left;
    border: 1px solid #ddd;
    background-color: #0056b3;
    color: #ffffff;
}

#scratch {
    color: #2C2C2C;
    text-decoration: Line-through;
}

#waitlist {
    color: #2C2C2C;
}

.additional-row {
    display: none;
}

.additional-data td {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Additional row styles */
.additional-row td {
    background-color: #f9f9f9; /* Light background for additional text rows */
}

/* FOR WIDE SCREENS */
/* SCRATCH */
#scratch td.data-label {
    color: #2C2C2C;
    text-decoration: Line-through;
    background: #dbdbdb;
    font-weight: 600;
}

#scratch td.data-value {
    color: #2C2C2C;
    text-decoration: Line-through;
    background: #dbdbdb;
    font-weight: 600;
}

/* WAITLIST */

#waitlist td.data-label {
    color: #2C2C2C;
    background: #dbdbdb;
    font-weight: 600;
}

#waitlist td.data-value {
    color: #2C2C2C;
    background: #dbdbdb;
    font-weight: 600;
}

#waitlist.issues td.data-label {
    color: #2C2C2C;
    background: #dbdbdb;
    font-weight: 600;
}

#waitlist.issues td.data-value {
    color: #2C2C2C;
    background: #dbdbdb;
    font-weight: 600;
}

/* ACCEPTED */

#accepted.issues td.data-label {
    color: #ffffff;
    background: #458cd9;
    font-weight: 600;
}

#accepted.issues td.data-value {
    color: #ffffff;
    background: #458cd9;
    font-weight: 600;
}

.schedule-container {
    max-width: 700px;
    margin: 0;
    padding: 10px 0;
    text-align: left;
}

.schedule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}

.line {
    display: grid;
    grid-template-columns: 20px 140px 90px 80px;
    gap: 8px;
    justify-content: start;
    font-size:0.9em;
}

.line span:last-child {
    justify-self: start;
}

.line span {
    white-space: nowrap;
}

/* Styles for screen width 600px and above */
@media screen and (min-width: 600px) {
    .responsive-table thead {
        display: table-header-group;
        background: #0056b3; /* Background color for the label */
        color: #fff;
        padding: 6px;
    }

    .responsive-table th {
        display: table-cell;
        background-color: #0056b3;
        border: 1px solid #fff;
    }

    .responsive-table td {
        display: table-cell;
        /*background-color: #0056b3;*/
        border: 1px solid #fff;
        /*color: #ffffff;*/
    }

    /* Additional row styles */
    .additional-row td {
        background-color: #f9f9f9; /* Light background for additional text rows */
    }
}

/* Styles for screen width less than 600px: stack and wrap columns, hide headings */
@media screen and (max-width: 5999px) {
    .additional-row {
        display: none;
        width: 100%;
    }

    .responsive-table .row-data td {
        text-align: right; /* Align text to the right */
        //position: relative;
        padding-left: 50%; /* Give padding to make room for the labels */
    }

        .responsive-table .row-data td:before {
            content: attr(data-label); /* Use the data-label attribute as the content */
            position: absolute;
            left: 10px;
            width: 100%; /* Width of the label */
            padding-right: 10px;
            font-weight: bold;
            text-align: left;
            white-space: nowrap;
        }

        .responsive-table .row-data td.data-label {
            background: #0056b3; /* Background color for the label */
            font-weight: bold;
            display: block;
            text-align: left;
            padding: 8px;
            color: #fff;
            clear: both; /* Clear floats */
            /*white-space: nowrap;*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

    #waitlist {
        background-color: #9c9c9c;
        color: #ededed;
    }

    #scratch {
        background-color: #9c9c9c;
        color: #cfcfcf;
        text-decoration: Line-through;
    }

    .responsive-table .row-data td.data-value {
        border-top: 0px solid #ddd; /* Add border to separate values */
        display: inline-block; /* Place values inline */
        width: calc(100%); /* Divide the width for three values */
        padding: 3px 3px 0px 0; /* Padding for spacing */
        box-sizing: border-box;
    }

    /* Hide thead on small screens */
    .responsive-table thead {
        display: none;
    }

    /* FOR NARROW SCREENS */
    /* SCRATCH */
    #scratch td.data-label {
        color: #2C2C2C;
        text-decoration: Line-through;
        background: #dbdbdb;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #scratch td.data-value {
        /*color: #dbdbdb;*/
        color: #2C2C2C;
        text-decoration: Line-through;
        background: #fff;
        font-weight: 600;
    }

    /* WAITLIST */
    #waitlist td.data-label {
        color: #2C2C2C;
        background: #dbdbdb;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #waitlist td.data-value {
        /*color: #dbdbdb;*/
        color: #2C2C2C;
        background: #fff;
        font-weight: 600;
    }

    #waitlist.issues td.data-label {
        color: #2C2C2C;
        background: #dbdbdb;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #waitlist.issues td.data-value {
        /*color: #dbdbdb;*/
        color: #2C2C2C;
        background: #fff;
        font-weight: 600;
    }

    /* ACCEPTED */
    #accepted.issues td.data-label {
        color: #ffffff;
        background: #458cd9;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #accepted.issues td.data-value {
        /*color: #dbdbdb;*/
        color: #8a8a8a;
        background: #fff;
        font-weight: 600;
    }
}