html {
    --bmx-freestyle: #FFC700;
    --bmx-racing: #FF8F1C;
    --indoor-cycling: #7356BF;
    --mountain-bike: #00BAB6;
    --road: #1A6FEF;
    --road-10: #5291F3;
    --track: #DC0914;
    --track-10: #E33A43;
    --trials: #3DBB61;
    --road-alt: #23529b;
    --mountain: #00ADA9;
    --bmx-racing-alt: #ED851A;
    --bmx-freestyle-alt: #EDB900;
    --indoor-cycling-alt: #6B50B2;
    --trials-alt: #39AE5A;
    --track-alt: #CD0813;
}

.schedule-no-medal {
    content: "";
    width: 24px;
    height: 8px;
    display: block;
    transform: skew(-35deg);
}

li.tooltipschedule div {
    display: inline-block;
}

.tooltipschedule-time {
    width: 110px;
}

.tooltipschedule-description {
}

#competitionName img {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 30px
}

#competitionNameHeader img {
    display: block;
    margin: 0 auto;
}


#eventsContainer .container {
    max-width: 1024px;
}

.GOLD .medal-circle, .GOLD .medal-path-2 {
    fill: var(--bmx-freestyle);
}

.GOLD .medal-path-1 {
    fill: var(--bmx-freestyle-alt);
}

.SILVER .medal-circle, .SILVER .medal-path-2 {
    fill: #ccc;
}

.SILVER .medal-path-1 {
    fill: #bfbfbf;
}

.BRONZE .medal-circle, .BRONZE .medal-path-2 {
    fill: #cc8e43;
}

.BRONZE .medal-path-1 {
    fill: #b37d3b;
}

.medal-icon {
    width: 25px;
    height: 42px;
}

.month-title__wrap {
    border-top: 1px solid hsl(0, 0%, 90%);
    position: relative;
    padding-bottom: 1.5rem;
}

.month-title__text {
    font-size: 1.5rem;
    line-height: 1.1;
    top: -15px;
    padding-right: 1.5rem;
    color: hsl(0, 0%, 10%);
    background: #fff;
}

#page-title {
    font-size: xx-large;
    font-weight: 900;
    color: white;
    background-image: url(https://www.cyclingworldchamps.com/static/img/brushstrokes/black-repeater.png);
    text-align: center;
    /*padding: 10px 0px;*/
    margin: 10px 0px;
}

#nav-glasgow2023 {
    text-align: center;
    display: block;
    margin: 0 auto;
   /* width: 150px;*/
   width: fit-content;
    margin: 0 auto;
}

    #nav-glasgow2023 li {
        margin-top: -0.3rem;
    }

    #nav-glasgow2023 a {
        color: #fff;
        opacity: 1;
        padding-top: 0;
        padding-bottom: 0;
    }

        #nav-glasgow2023 a.inactive {
            opacity: 0.65;
            font-size: large;
            margin-top: 0.7rem;
        }

    .medals-standings td {
        padding: 15px 0;
        text-align: right;
    }
        .medals-standings tr.toggle td{
            padding:0;
        }
        .medals-standings td.rank, .medals-standings td.rankByTotal {
            font-weight: 900;
            text-align: center;
            display: block;
            margin-top: 3px;
        }
        .medals-standings td.country {
            text-align: left;
            width: 40%;
            min-width: 200px;
            max-width: 500px;
            position: relative;
        }

        .medals-standings td.country span {
            cursor: pointer;
        }

            .medals-standings td.country span.showMore {
                content: "›";
                position: absolute;
                color: darkgrey;
                font-size: x-large;
                margin-left: 5px;
                top: 10px;
            }


.medals-standings {
    width: 100%;
}


    .medals-standings tr:nth-child(4n+3), .medals-standings tr:nth-child(4n+4) {
        background-color: whitesmoke;
    }

    .medals-standings td {
        text-align: center;
    }

        .medals-standings thead td img {
            display: block;
            width: 50px;
            margin: 0 auto;
        }

.medals-standings tbody td {
    text-align: center;
}

    .medals-standings tbody td img {
        height: 30px;
        margin-right: 1%;
        border: 0.5px solid whitesmoke;
        /*box-shadow: 1px 1px 3px #7e7e7e;*/
    }

h2 {
    padding: 2rem 0 0 0;
}

.medals-standings a {
    color: var(--bs-body-color);
}
    .medals-standings a:hover {
        color: #e10019;
    }

     
.medals-standings thead {
    color: darkgray;
    height: 80px;
}

    .medals-standings tbody {
        vertical-align: top;
    }

    .medals-standings td:nth-child(3), .medals-standings td:nth-child(4), .medals-standings td:nth-child(5), .medals-standings td:nth-child(6) {
        /*background-color: #ffec80;*/
        border-left: 1px solid #fff;
        font-weight: 100;
        width: 10% !important;
    }

.medals-standings thead td:nth-child(3), .medals-standings thead td:nth-child(4), .medals-standings thead td:nth-child(5), .medals-standings td:nth-child(6) {
    font-weight: 600;
}

#eventsContainer .container .medals-standings tr.toggle {
    display: table-row;
    height: fit-content;
    padding: 0 0 0 3.3rem;
    margin: 0;
    color: darkgrey;
}

.medals-standings tr.toggle td>div {
    display: none;
}
#eventsContainer .container .medals-standings tr.toggle ul {
    padding: 0;
    margin: 0;
    padding-left:5%;
}

    .medals-standings tr.toggle td {
        padding-top: 0;
    }

    .medals-standings tr.toggle ul {
        list-style-type: none;
        padding-left: 4.4rem;
    }

    .medals-standings tr.toggle li {
        font-weight: 100;
        height: 8%;
        padding: 0.3rem 0;
        text-align: left;
        display: flex;
        justify-content:flex-start;
        margin:1%;
    }
    .medals-standings tr.toggle li .textMedal{
        display:flex;
        width:auto;
        flex-grow:3;
        flex-basis:92.5%;
    }
.medals-standings tr.toggle li div{
    width:7.5%;
}
    .medals-standings tr.toggle li div svg.medal-icon{
        margin-top:-8px;
    }
    .medals-standings tr.toggle li div.nameMedal.BRONZE {
        color: #cc8e43;
    }
    .medals-standings tr.toggle li div.nameMedal.SILVER {
        color: #cccccc;
    }
    .medals-standings tr.toggle li div.nameMedal.GOLD {
        color: var(--bmx-freestyle);
    }
    .medals-standings tr.toggle li.BMF {
        color: var(--bmx-freestyle);
    }
        .medals-standings tr.toggle li.BMFF {
            color: var(--bmx-freestyle);
        }
        .medals-standings tr.toggle li.BMX {
            color: var(--bmx-racing);
        }

        .medals-standings tr.toggle li.CRD, .medals-standings tr.toggle li.GDF, .medals-standings tr.toggle li.PCRD {
            color: var(--road);
        }

        .medals-standings tr.toggle li.INC {
            color: var(--indoor-cycling);
        }

        .medals-standings tr.toggle li.CTR, .medals-standings tr.toggle li.PCTR {
            color: var(--track);
        }

        .medals-standings tr.toggle li.MTB, .medals-standings tr.toggle li.XCM, .medals-standings tr.toggle li.DHI {
            color: var(--mountain-bike);
        }

        .medals-standings tr.toggle li.TRA {
            color: var(--trials);
        }

        .medals-standings tr.toggle li p {
            display: flex;
            margin: 0;
            width: 92.5%;
            justify-content:space-between;
        }

        .medals-standings tr.toggle li p span:first-of-type {
            color: darkgrey;
        }
            .medals-standings tr.toggle li p span {
                display:block;
            }

            .medals-standings tr.toggle li .medal-icon {
                margin-top: -18px;
            }

.medals-standings td.rank span, .medals-standings td.rankByTotal span {
    display: inline-block;
    width: 25px;
    padding: 3px 0 2px 0;
    text-align: center !important;
    background: #e10019;
    color: #fff !important;
    border: 1px solid #363636;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    line-height: 16px;
}
.medals-standings td.total.rank, .medals-standings td.total.rankByTotal {
    padding-left: 30px;
}
    .medals-standings td.total.rank span, .medals-standings td.total.rankByTotal span {
        margin-left: 10%;
    }

        .medals-standings td span.diminutif {
            display: none;
        }

.maxsize {
    transform-origin: left;
    white-space: nowrap;
}

@media only screen and (max-width: 600px) {
    #eventsContainer .container {
        padding: 0;
    }

    .medals-standings thead td img {
        width: 25px;
    }

    .medals-standings tr.toggle li .textMedal {
        flex-direction: column;
    }

        .medals-standings tr.toggle li .textMedal p {
            flex-direction: column;
        }

    .medals-standings tbody td {
        width: 10%;
        padding: 5px;
    }

        .medals-standings tbody td.total {
            width: 7%;
        }

    .medals-standings thead td.country {
        text-align: center;
    }

    .medals-standings td.country {
        width: 20%;
        min-width: 100px;
        position: relative;
    }

    .medals-standings td span.diminutif {
        display: inline-block;
    }

    .medals-standings td span.full {
        display: none;
    }

    .medals-standings td {
        /*padding: 0;*/
    }

        .medals-standings td.total.rank {
            padding-left: 0px;
        }

    .container.sticky {
        overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
        height: 480px; /* gives an initial height of 200px to the table */
    }

        .container.sticky table.medals-standings thead {
            position: sticky; /* make the table heads sticky */
            top: -5px; /* table head will be placed from the top of the table and sticks to it */
            /*background-color: #fff;*/
            background: rgb(255,255,255);
            background: linear-gradient(180deg, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);
            z-index: 110;
            font-size: smaller;
            line-height: 12px;
            height: 120px;
        }

            .container.sticky table.medals-standings thead td.country {
                z-index: 111;
                background: linear-gradient(270deg, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);
            }

        .container.sticky table.medals-standings td.rank, .container.sticky table.medals-standings thead tr td:first-of-type {
                position: sticky;
                left: 0;
                z-index: 100;
            }
            .container.sticky table.medals-standings td.country {
                position: sticky;
                left: 10%;
                z-index: 100;
            }
            .container.sticky table.medals-standings tbody tr td.country{
                background-color:white;
            }
        .container.sticky .medals-standings tbody tr:nth-child(4n+3) td.country, .container.sticky .medals-standings tbody tr:nth-child(4n+4) td.country{
            background-color:whitesmoke;
        }



        .container.sticky table {
            border-collapse: collapse; /* make the table borders collapse to each other */
            width: 100%;
        }

        .navbar-nav .nav-link {
            padding-left: 0.3rem !important;
            padding-right: 0.3rem !important;
        }

        .medals-standings thead td {
            transform: rotate(-90deg);
            padding: 0;
            min-width:40px;
        }

        

        .medals-standings tr.toggle ul {
            padding-left: 0;
        }

        .medals-standings tr.toggle li {
            width: 100%;
            font-size: smaller;
        }

        .medals-standings td.country span.showMore {
            top: 0;
        }

        .medals-standings tbody td img {
            height: 25px;
        }

        .medals-standings td.rank, .medals-standings td.rankByTotal {
            margin-top: 0;
        }
        .medals-standings tr.toggle li div.pictoMedal{
            margin-right:10px;
        }
        .medals-standings tr.toggle li div svg.medal-icon {
            width: 22px;
            height: 35px;
            margin-right: 10px;
            margin-top: 10px;
        }
}