.tlm-participants {
    --tlm-primary: #223D57;
    --tlm-accent: #FFA200;
    --tlm-soft: #F6F8FA;
    --tlm-soft-accent: #FFF4DF;
    --tlm-border: rgba(34, 61, 87, .18);
    --tlm-muted: rgba(34, 61, 87, .66);
    color: var(--tlm-primary);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45;
    width: 100%;
}

.tlm-participants * {
    box-sizing: border-box;
}

.tlm-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.tlm-header h2 {
    color: var(--tlm-primary);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 .35rem;
}

.tlm-header p {
    color: var(--tlm-muted);
    font-size: 14px;
    margin: 0;
}

.tlm-toolbar {
    align-items: end;
    background: var(--tlm-soft);
    border-left: 5px solid var(--tlm-accent);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.tlm-toolbar label {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: .35rem;
}

.tlm-toolbar span {
    color: var(--tlm-primary);
    font-size: 13px;
    font-weight: 400;
}

.tlm-toolbar input,
.tlm-toolbar select {
    background: #fff;
    border: 1px solid var(--tlm-border);
    border-radius: .35rem;
    color: var(--tlm-primary);
    font: inherit;
    min-height: 44px;
    padding: .6rem .75rem;
    width: 100%;
}

.tlm-toolbar input:focus,
.tlm-toolbar select:focus {
    border-color: var(--tlm-accent);
    box-shadow: 0 0 0 2px rgba(255, 162, 0, .2);
    outline: 0;
}

.tlm-table-wrap {
    border: 1px solid var(--tlm-border);
    overflow-x: auto;
}

.tlm-table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.tlm-table th,
.tlm-table td {
    border-bottom: 1px solid var(--tlm-border);
    font-size: 14px;
    overflow-wrap: anywhere;
    padding: .7rem .8rem;
    text-align: left;
    vertical-align: middle;
}

.tlm-table th {
    background: var(--tlm-primary);
    color: #fff;
    font-weight: 400;
}

.tlm-table tbody tr:nth-child(even) {
    background: var(--tlm-soft);
}

.tlm-table tbody tr:hover {
    background: var(--tlm-soft-accent);
}

.tlm-table tbody tr:last-child td {
    border-bottom: 0;
}

.tlm-col-participant-number {
    text-align: center !important;
    white-space: nowrap;
    width: 8%;
}

.tlm-col-first-name {
    width: 16%;
}

.tlm-col-last-name {
    width: 16%;
}

.tlm-col-location {
    width: 16%;
}

.tlm-col-team {
    width: 32%;
}

.tlm-col-distance {
    text-align: center !important;
    white-space: nowrap;
    width: 12%;
}

.tlm-number {
    align-items: center;
    background: var(--tlm-accent);
    border-radius: 999px;
    color: var(--tlm-primary);
    display: inline-flex;
    font-weight: 400;
    justify-content: center;
    min-width: 2.5rem;
    padding: .16rem .52rem;
}

.tlm-empty,
.tlm-no-results {
    background: var(--tlm-soft);
    border: 1px solid var(--tlm-border);
    border-left: 5px solid var(--tlm-accent);
    color: var(--tlm-primary);
    padding: 1rem;
}

.tlm-no-results {
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .tlm-toolbar {
        display: block;
    }

    .tlm-toolbar label + label {
        margin-top: .75rem;
    }

    .tlm-table {
        table-layout: auto;
    }

    .tlm-table col,
    .tlm-table thead,
    .tlm-table colgroup {
        display: none;
    }

    .tlm-table,
    .tlm-table tbody,
    .tlm-table tr,
    .tlm-table td {
        display: block;
        width: 100% !important;
    }

    .tlm-table tr {
        border-bottom: 1px solid var(--tlm-border);
        padding: .65rem 0;
    }

    .tlm-table td {
        border-bottom: 0;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: .42rem 1rem;
        text-align: right !important;
    }

    .tlm-table td::before {
        color: var(--tlm-primary);
        content: attr(data-label);
        font-weight: 400;
        text-align: left;
    }

    .tlm-number {
        margin-left: auto;
    }
}