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

* {
}

::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    opacity: 0.5;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
    transition: 0.2s;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #cccccc;
        transition: 0.2s;
    }
.wrapContent::-webkit-scrollbar {
    display: block;
    width: 20px;
    z-index: 400;
    padding-top: 120px;
}


.wrapContent::-webkit-scrollbar-track {
    background-color: #f6f6f6;
}

.wrapContent::-webkit-scrollbar-track {
    background-color: transparent;
}

.wrapContent::-webkit-scrollbar-thumb {
    opacity: 0.7;
    background-color: #cccccc;
    border: 0;
}

.wrapContent::-webkit-scrollbar {
    height: 5px;
}

.wrapContent::-webkit-scrollbar-thumb:hover {
    background-color: #bbbbbb;
}

.bodySchedule .wrapContent::-webkit-scrollbar-thumb {
    display: none;
}

.bodySchedule .wrapContent::-webkit-scrollbar {
    height: 0;
}
        @media only screen and (max-width: 1560px) {
    #eventsContainer .container div.wrapSchedule{
        padding-left:5vw;
    }
}
@media only screen and (max-width: 1325px) {
    #eventsContainer .container div.wrapSchedule {
        padding-left: 1vw;
    }
}


    @media only screen and (max-width: 1200px) {
   
        #eventsContainer .container .wrapSchedule  .wrapContent{
            overflow-x: auto;
            max-width:65%;
        }
        #eventsContainer .container .wrapSchedule div.scrollSchedule {
           /*width:1000px;*/
        }
            #eventsContainer .container .wrapSchedule div.reWrapScroll {
                /*width: 725px;*/
                /*overflow: hidden;*/
            }
            #eventsContainer .container .wrapSchedule div.scrollSchedule .row .scrollingContent>div{
               width:5%;
               min-width:60px;
            }
        #eventsContainer .container .wrapSchedule div.row {
            min-height:60px;
            flex-wrap:nowrap;
        }
        .container .medal-icon{
            width:25px;
            height:42px;
        }
        #eventsContainer .container .wrapSchedule .headSchedule a {
            font-size: 0.8em;
        }
        #eventsContainer .container .wrapSchedule div.row div.SportTitleTable, #eventsContainer .container .wrapSchedule div.row div.colHeader{
            min-width: 140px;
        }

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

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

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

    .BMF .schedule-no-medal {
        background-color: var(--bmx-freestyle);
    }

    /* COLOR MEDALS*/
    .BMFF .medal-circle, .BMFF .medal-path-2 {
        fill: var(--bmx-freestyle);
    }

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

    .BMFF .schedule-no-medal {
        background-color: var(--bmx-freestyle);
    }

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

    .BMX .medal-path-1 {
        fill: var(--bmx-racing-alt);
    }

    .BMX .schedule-no-medal {
        background-color: var(--bmx-racing);
    }

    .CRD .medal-circle, .CRD .medal-path-2 {
        fill: var(--road);
    }

    .CRD .medal-path-1 {
        fill: var(--road-alt);
    }

    .CRD .schedule-no-medal {
        background-color: var(--road);
    }

    .CTR .medal-circle, .CTR .medal-path-2, .PCTR .medal-circle, .PCTR .medal-path-2 {
        fill: var(--track);
    }

    .CTR .medal-path-1, .PCTR .medal-path-1 {
        fill: var(--track-alt);
    }

    .CTR .schedule-no-medal {
        background-color: var(--track);
    }

    .CTR, .CTR a:visited {
        fill: var(--track);
    }

    .DHI .schedule-no-medal {
        background-color: var(--mountain);
    }

    .DHI, .DHI a:visited {
        fill: var(--mountain);
    }

    .GFD .medal-circle, .GFD .medal-path-2 {
        fill: var(--road);
    }

    .GFD .medal-path-1 {
        fill: var(--road-alt);
    }

    .GFD .schedule-no-medal {
        background-color: var(--road);
    }

    .INC .medal-circle, .INC .medal-path-2 {
        fill: var(--indoor-cycling);
    }

    .INC .medal-path-1 {
        fill: var(--indoor-cycling-alt);
    }

    .INC .schedule-no-medal {
        background-color: var(--indoor-cycling);
    }

    .INC, .INC a:visited {
        fill: var(--indoor-cycling);
    }

    .MTB .medal-circle, .MTB .medal-path-2, .DHI .medal-circle, .DHI .medal-path-2, .XCM .medal-circle, .XCM .medal-path-2 {
        fill: var(--mountain-bike);
    }

    .MTB .medal-path-1, .DHI .medal-path-1, .XCM .medal-path-1 {
        fill: var(--mountain);
    }

    .MTB .schedule-no-medal {
        background-color: var(--mountain);
    }

    .MTB, .MTB a:visited {
        fill: var(--mountain);
    }

    .PCRD .medal-circle, .PCRD .medal-path-2 {
        fill: var(--road);
    }

    .PCRD .medal-path-1 {
        fill: var(--road-alt);
    }

    .PCRD .schedule-no-medal {
        background-color: var(--road);
    }

    .PCTR .schedule-no-medal {
        background-color: var(--track);
    }

    .PCTR, .PCTR a:visited {
        fill: var(--track);
    }

    .TRA .medal-circle, .TRA .medal-path-2 {
        fill: var(--trials);
    }

    .TRA .medal-path-1 {
        fill: var(--trials-alt);
    }

    .TRA .schedule-no-medal {
        background-color: var(--trials);
    }

    .TRA, .TRA a:visited {
        fill: var(--trials);
    }

    .XCM .schedule-no-medal {
        background-color: var(--mountain);
    }

    .XCM, .XCM a:visited {
        fill: var(--mountain);
    }

#eventsContainer .container .wrapSchedule .bodySchedule .row div.DetailsDay {
    width: 0%;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: solid #BBBBBB 0.5px;
    padding:0;
}

#eventsContainer .container .wrapSchedule .headSchedule .row div.DetailsDay{
    width:0;
}
#eventsContainer .container .wrapSchedule .bodySchedule .row div.DetailsDay >div {
    width: 100%;
    text-align: left;
    padding-left: 15px;
    color: #202020;
    margin-top:5px;
    margin-bottom:2px;
}
        #eventsContainer .container .wrapSchedule .bodySchedule .row div.DetailsDay div span{
            font-weight:300;
            color:black;
            text-shadow:0.2px 0 0 black;
            margin-right:5px;
            width:100%;
            display:block;
            text-align:left;
        }
#eventsContainer .container .wrapSchedule .bodySchedule .row:hover div.DetailsDay div{
    color: white;
}
    #eventsContainer .container .wrapSchedule .bodySchedule .row:hover div.DetailsDay div span {
        color: white;
        text-shadow: 0.2px 0 0 white;
    }

            .container::-webkit-scrollbar {
                display: none;
            }

    .header-day a {
        color: black;
        opacity: 0.75;
        text-decoration: none;
        line-height:1em;
        padding-top:10px;
    }

        .header-day a.active {
            opacity: 1;
        }

        .header-day a:hover, .header-day.active a {
            color: #e10019;
        }

    .medal-icon {
        width: 35px;
        height: 59px;
    }

    .medal-icon {
        max-height: 80%;
    }

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


    .schedule-no-medal {
        content: "";
        width: 70%;
        min-height: 8px;
        max-height: 10px;
        display: block;
        transform: skew(-35deg);
        margin-left: 13%;
        margin-top: 25%;
    }

    /* DAY SORT CSS*/
    .toSort, .header-day {
        width: 80px;
        transform-origin: left;
        flex-grow:1;
    }

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

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

    #eventsContainer .container .bodySchedule .row {
        width: 100%;
    }
#eventsContainer .container .wrapSchedule .headSchedule{
    position:sticky;
    top:15px;
    z-index:300;
    background-color:white;
    padding-right:20%;
    padding-left:20%;
    margin-left:-20%;
    margin-right:-20%;
}
    #eventsContainer .container .wrapSchedule .headSchedule .row {
        border-bottom: 1px solid #bbbbbb;
        -webkit-box-shadow: 0 8px 6px -6px #bbbbbb;
        -moz-box-shadow: 0 8px 6px -6px #bbbbbb;
        box-shadow: 0 8px 6px -6px #bbbbbb;
    }

#eventsContainer .container .bodySchedule .row div.scrollingContent, #eventsContainer .container .headSchedule .row div.scrollingContent {
    display: flex;
    flex-direction: row;
}
    #eventsContainer .container .headSchedule .row  div.scrollingContent{
        flex-grow:1;
    }
        #eventsContainer .container .bodySchedule .row div .scrollingContent > div, #eventsContainer .container .headSchedule .row div .scrollingContent > div {
            background-color: white;
            padding: 0;
            width: 3.3%;
            display: flex;
            align-items: center;
           min-width:min-content;
           transform-origin:left;
        }
            #eventsContainer .container .bodySchedule .row div .scrollingContent > div>div, #eventsContainer .container .headSchedule .row div .scrollingContent > div>div{
                min-width:60px;
            }
            #eventsContainer .container .bodySchedule .row div .scrollingContent, #eventsContainer .container .headSchedule .row div .scrollingContent {
                min-width: 10px;
            }

            #eventsContainer .container .headSchedule .nDay-header {
                font-size: 1.8em;
            }

    #eventsContainer .container .bodySchedule .row > div  .scrollingContent div {
        width: 100%;
        flex-grow:1;
    }
#eventsContainer .container .bodySchedule .row div.SportTitleTable::after {
    content: "";
    position: absolute;
    height: 100%;
    right: 0;
    width: 5px;
    z-index: 200;
    background: linear-gradient(270deg, rgba(255,255,255,0) 20%, rgba(187,187,187,1) 100%);
}
#eventsContainer .container .bodySchedule .row:hover div.SportTitleTable a {
    color: #FFFFFF;
}

    #eventsContainer .container .bodySchedule .row:hover div.SportTitleTable {
        background-color: #101010;
    }

    #eventsContainer .container .bodySchedule .row {
        min-height: 70px;
        flex-wrap:nowrap;
    }
#eventsContainer .container .bodySchedule .row>div {
    border-top: solid #BBBBBB 0.5px;
}

#eventsContainer .container .wrapSchedule .bodySchedule .row:hover > div, #eventsContainer .container .wrapSchedule .bodySchedule .row:hover > div > div > div{
    background-color: #101010;
}

    #eventsContainer .container .wrapSchedule * {
        text-align: center;
        vertical-align: middle;
    }
#eventsContainer .container .wrapSchedule .reWrapScroll{
    /*width:1200px;*/
    /*overflow:hidden;*/
}

#eventsContainer .container .wrapSchedule .bodySchedule .row .wrapContent, #eventsContainer .container .wrapSchedule .headSchedule .row .wrapContent {
    width: 78%;
    display: flex;
    padding: 0;
    min-width:60px;
    transform-origin:left;
    overflow-y:hidden;
}
    #eventsContainer .container .wrapSchedule .headSchedule .row .back{
        display:none;
        position:absolute;
        bottom:0;
        right:10px;
    }
        #eventsContainer .container .wrapSchedule .headSchedule .row .back .btn{
            border-radius:2px;
            font-size:0.55em;
            background-color:#bbbbbb;
            color:white;
            padding:5%;
        }
        #eventsContainer .container .wrapSchedule .bodySchedule .row .wrapContent.stopOverflow, #eventsContainer .container .wrapSchedule .headSchedule .row .wrapContent.stopOverflow {
            overflow-x: hidden;
            overflow-y:hidden;
        }
            
            #eventsContainer .container .wrapSchedule .bodySchedule .row .wrapContent .scrollingContent {
                width: 100%;
                display: flex;
            }
    #eventsContainer .container .wrapSchedule .headSchedule .row .scrollingContent > div {
    width: 3.3%;
    justify-content: center;
    padding-top: 10px;
}


    #eventsContainer .container .wrapSchedule .headSchedule {
        font-size: 1.5em;
        font-weight: 800;
    }
        #eventsContainer .container .wrapSchedule .headSchedule a span {
            margin-bottom: -5px;
        }

#eventsContainer .container .wrapSchedule .row div.SportTitleTable, #eventsContainer .container .wrapSchedule .row div.colHeader {
    text-align: left;
    padding-left: 2%;
    padding-right: 2%;
    min-width: 190px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    width: 20%;
    justify-content: left;
    position:relative;
}
    #eventsContainer .container .wrapSchedule .row div.colHeader .month-title{
        line-height:1em;
        text-align:left
    }
        #eventsContainer .container .wrapSchedule .row div.colHeader .month-title .month-title__wrap{
            text-align:left;
        }

        #eventsContainer .container .wrapSchedule div.SportTitleTable a {
            text-decoration: none;
            color: black;
            font-weight: 700;
            text-align: left;
            line-height: 1rem;
        }

    #eventsContainer .container .wrapSchedule:hover {
        cursor: pointer;
    }

    #eventsContainer .container .wrapSchedule {
        display: flex;
        flex-direction: column;
        position: relative;
       padding-left: 10vw;
        width:100%;
    }
        #eventsContainer .container .wrapSchedule .scrollSchedule {
            margin-right: 0%;
            max-width:100%;
            padding-top:3%;
        }

        #eventsContainer .container .wrapSchedule .row .scrollingContent>div:nth-child(2n) {
            background-color: whitesmoke;
        }


    #eventsContainer .container {
        max-width: 1600px;
        padding-bottom: 5%;
        display: flex;
        justify-content: center;
        flex-direction:column;
    }
        #eventsContainer .container #headingSchedule {
            display: none;
        }

        #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;
        }


#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;
}

@media only screen and (max-width: 600px) {
    .navbar-nav .nav-link {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }
}
@media only screen and (max-width: 1000px) {
    #eventsContainer .container .wrapSchedule .headSchedule .row .wrapContent.stopOverflow .header-day {
        padding-bottom: 5px;
    }
}

/*------LEGEND------*/

.container .legendSchedule {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-height: 60px;
    width:100%;
    padding-right:2%
}
.container .legendSchedule > div{
    display:flex;
    flex-direction:row;
    align-items:center;
    min-width:150px;
    margin-left:3%;
    font-size:0.75em;
    font-weight:normal;
}
    .container .legendSchedule > div p{
        margin-bottom:0;
    }
    .container .legendSchedule > div svg{
        margin-right:5%;
        max-height:45%;
    }
    .container .legendSchedule .schedule-no-medal {
        width: 10%;
        background-color: #000000;
        margin: 0;
        margin-right: 5%;
        min-height:4px;
        opacity:0.5;
    }
    .container .legendSchedule > div svg .medal-path-1{
        fill:rgba(0,0,0,0.5)
    }
    .container .legendSchedule > div svg .medal-path-2 {
        fill: rgba(0,0,0,0.4)
    }