/* bootstrap media queries */
/* X-Small devices (portrait phones, less than 576px)  */
@media (max-width: 575px) {
    .hidden-xs {
        display: none;
    }
    .visible-xs {
        display: revert;
    }
    .hidden-sm {
        display: none;
    }
    .hidden-md {
        display: none;
    }

    td, th {
        padding: calc(var(--pico-spacing)/ 2) calc(var(--pico-spacing) / 2);
    }

    .container {
        padding-right: calc(var(--pico-spacing) / 2);
        padding-left: calc(var(--pico-spacing) / 2);
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hidden-sm {
        display: none;
    }
    .hidden-md {
        display: none;
    }

    .visible-xs {
        display: none;
    }
    .visible-sm {
        display: revert;
    }

    .container {
        padding-right: calc(var(--pico-spacing) / 4);
        padding-left: calc(var(--pico-spacing) / 4);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .hidden-sm {
        display: revert;
    }

    .hidden-md {
        display: none;
    }

    .visible-sm {
        display: none;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .hidden-md {
        display: revert;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}

/* ---- table in general --------------------------------------------------- */
header div.brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- table in general --------------------------------------------------- */

table.striped thead tr th {
    background-color: hsl(from var(--pico-table-row-stripped-background-color) h s calc(l - 80));
}

/* ---- competition -------------------------------------------------------- */

section.comp header {
    padding: calc(var(--pico-spacing)/ 2) calc(var(--pico-spacing) / 2);
    background-color: hsl(from var(--pico-table-row-stripped-background-color) h s calc(l ) / 0.15);
}

section.comp header span.class {
    font-size: 2.5em;
    font-weight: 550;
    line-height: 125%;
    display: block;
    float: left;
    max-width: 50%;
    padding-right: 0.5ex;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

section.comp header div.info {
    white-space: nowrap;
    overflow: auto;
}

/*
section.comp header div.race-info {
}

section.comp header div.comp-info {
}
*/

section.comp div.team {
    font-weight: 600;
}

section.comp table th.lane,
section.comp table td.lane {
    width: 4.5em;
    text-align: center;
}

section.comp table th.rank,
section.comp table td.rank,
section.comp table th.bib,
section.comp table td.bib {
    width: 4.5em;
    text-align: center;
}

section.comp table th.split,
section.comp table td.split {
    vertical-align: top;
    text-align: right;
    text-wrap: nowrap;
    width: 7.5em;
}

/* ---- competition (live) ------------------------------------------------- */

section.comp.live div.result.empty {
    display: none;
}

section.comp.live div.result.first div.delta {
    display: none;
}

section.comp.live div.result.irm div.delta,
section.comp.live div.result.irm div.net span.rank {
    display: none;
}

section.comp.live th.split.current,
section.comp.live td.split.current {
    display: revert !important;
}

section.comp.live div.state {
    /*border: thin solid var(--pico-color);*/
    height: .5rem;
}

section.comp.live div.state_planned { background-color: var(--pico-color-azure-150) }
section.comp.live div.state_scheduled { background-color: var(--pico-color-blue-200) }
section.comp.live div.state_started { background-color: var(--pico-color-lime-100) }
section.comp.live div.state_false_start { background-color: var(--pico-color-pink-250) }
section.comp.live div.state_official { background-color: var(--pico-color-pumpkin-200) }
section.comp.live div.state_finished { background-color: var(--pico-color-purple-100) }
section.comp.live div.state_fotofinish { background-color: var(--pico-color-fuchsia-350) }
section.comp.live div.state_cancelled { background-color: var(--pico-color-zinc-600) }
section.comp.live div.state_getting_ready { background-color: var(--pico-color-orange-100) }
section.comp.live div.state_draft_startlist { background-color: var(--pico-color-yellow-50) }

section.comp.live td div.team {
    text-wrap: nowrap;
    overflow: ellipsis;
}

section.comp.live.vanish {
    animation: fadeout 2s ease-out forwards;
    overflow: hidden
}

@keyframes fadeout {
    from {
        opacity: 1;
        display: block;
        max-height: 750px;
        /*height: calc-size(auto, size);*/
    }
    to {
        opacity: 0;
        display: none;
        max-height: 0px;
        /*height: 0px;*/
    }
}

/* ---- schedule  ---------------------------------------------------------- */

table.schedule tr.day,
table.schedule tr.day td {
    background-color: hsl(from var(--pico-table-row-stripped-background-color) h s calc(l - 40));
}

table.schedule tr td.race {
    white-space: nowrap;
}

table.schedule td img {
    height: 1em;
}

/* ---- races -------------------------------------------------------------- */

section#race-categories,
section#race-list {
    columns: 3 250px;
}

section#race-categories h2,
section#race-list h2 {
    column-span: all;
}


section#race-categories ul,
section#race-list ul {
    list-style: none;
    padding: 0;
}

section#race-categories ul li,
section#race-list ul li {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

section#race-categories section,
section#race-list section {
    break-inside: avoid;
}

/* ---- entries ------------------------------------------------------------ */
section.entries ul {
    list-style: none;
    padding: 0;
}

section.entries ul li {
    display: block;
}

entry {
    display: block;
    min-height: 3em;
}

entry crew {
    display: block;
    padding-left: 2.75em;
}

entry crew athlete {
    /*color: var(--);*/
    text-wrap: nowrap;
}

entry div.label {
    font-weight: 600;
}

/*
entry crew athlete span.last_name {
    text-transform: uppercase;
}
*/

entry span.bib {
    display: block;
    float: left;
    max-width: 2.25em;
    min-width: 2.25em;
    min-height: 2.25em;
    border: thin solid var(--pico-primary);
    background-color: var(--pico-background-color);
    text-align: center;
    padding-top: 0.25em;
    margin-top: 0.5em;
    margin-right: 0.5em;
    box-shadow: 0px 0px 4px var(--pico-color);
    /*box-shadow: 0px 0px 4px var(--pico-primary-border);*/
    font-weight: bolder;
}

entry.cancelled span.bib {
    border: thin solid var(--pico-del-color);
    box-shadow: 0px 0px 4px var(--pico-del-color);
}

div.cancel_marker,
entry.cancelled,
entry.cancelled div.label a,
entry.cancelled crew a {
    color: var(--pico-del-color);
    text-decoration-color: var(--pico-del-color);
}

div.cancel_marker {
    display: inline;
}

/* summary views for athletes and clubs */
section.athletes-container,
section.clubs-container {
    columns: 3 250px;
}

section.athletes,
section.clubs {
    break-inside: avoid;
}

section.athletes ul,
section.clubs ul {
    list-style: none;
    padding: 0;
}

section.athletes ul li,
section.clubs ul li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

h1 small {
    color: var(--pico-secondary);
}