bg-resultview
.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.page-event-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100vw;
    height: 100vh;        
}

.event-img-background {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    
}
.page-offline {
    border-radius: 5px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.page-offline-banner {
    background-color: rgba(129,0,0,0.8) !important;
    color: white;
    font-weight: 400;
    height: 2rem;
    cursor: pointer;
    border-radius: 5px;
    text-align:center;
}

.navbar-dark.navbar-toggler-icon {
    color: #f00 !important;
}


.uci-small {
    width: 30px;
    height: 10px;
}

.program-module {
    border-radius: 10px;
}

.event-module {
    border-radius: 10px;
}

.event-header-wrapper {
    background-color: rgba(190,190,190,0.0);
    flex-direction: row;
    margin-bottom: .25rem;
    margin-top: 0rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(220, 220, 220,0.9);
}
.event-top-line {
    background-color: silver;    
    padding-top: 5px;    
    color: black;    
    font-weight: 600;
   
}
.event-header {
    font-weight: bolder;
    padding: 0;
    background: linear-gradient(90deg, rgba(220, 220, 220,0.9) 50%, rgba(220,220, 220,0.1) 80%, rgba(240, 240, 240,0.9) 100%);
}
.header-flag {
    width: 4.0rem;
    height: 4.0rem;
    
    background-position: center;   
    
}
.header-date {
    font-size: 1rem;    
    padding-left: 0rem;    
}

.header-venue {
    font-size: 1rem;
    width: 18rem;
}

.header-location {
    font-size: 1rem;
    width: 8rem;
}

.header-uci {
    width: 4rem;
}


.event-name{
    color: black;
    font-weight: lighter;    
}
.event-logo {
    width: 7rem;
    padding: 5px 0px 5px 0px;        
}
.acc-cover {
    padding: 0;  
}

.accordion {
    border-radius: 5px;    
    backdrop-filter: blur(5px);
    width: 100%;
    
}

.accordion-item {
    background-color: rgba(200,200,200,0.1) !important;
    color: black;
    font-weight: 400;
}
.accordion-button {
    font-family: 'Encode Sans';
    font-weight: bold;
    height: 1rem;
    padding-bottom: 1rem;
}

.accordion-body {
    background-color: rgba(255,255,255,0.7) !important;
    padding-left: 0.1em;
    padding-right: 0.1em;
    padding-top: 0.1rem;
}


.accordion-button:not(.collapsed) {
    background-color: white !important;
}
.accordion-button.classification-button.collapsed {
    background-color: rgba(0,76,129,0.5) !important;
    color: white;
    font-weight: 400;
    padding-bottom: 0.8rem;
    cursor: pointer;
}
.accordion-button.classification-button:not(.collapsed) {
    background-color: rgba(0,76,129,0.5) !important;
    color: white;
    font-weight: 400;
    padding-bottom: 0.8rem;
    cursor: pointer;
}

.final-classification-button {
    font-family: 'Encode Sans';
    font-weight: bold;
    height: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

.final-classification-button.collapsed {
    background-color: rgba(0,76,129,0.5) !important;
    color: white;
    font-weight: 400;
    height: 2rem;
    cursor: pointer;
    border-radius: 5px;
}

.final-classification-button:not(.collapsed) {
    background-color: rgba(0,76,129,0.5) !important;
    color: white;
    font-weight: 400;
    height: 2rem;
    cursor: pointer;
    border-radius: 5px;
}
.final-classification {
    border-radius: 5px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}


button.accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.classification-item {
    background-color: rgba(44,133,166,0.8) !important;
    color: white;
    font-weight: 400 !important;
    cursor: pointer;
    padding-left: 4rem;
    transition: all .2s ease-out;
}
.classification-item::before {
        content: '| ';
        color: rgba(249,115,27);
        opacity: 0;
        
}
.classification-item:hover {
        background-color: rgba(0,76,129,0.9) !important;
}

.classification-item:hover::before {
        content: "| ";
        opacity: 1;
        color: rgba(249,115,27);
}

.program-line::before {
    content: '|';
    color: rgba(249,115,27);
    opacity: 0;
} 

.program-line {
    border-bottom: 1px solid silver;  
}
.program-line:hover {
    background-color: rgba(0,0,0,0.1)
}
    .program-line:hover::before {
        content: "|";
        opacity: 1;
        color: rgba(249,115,27);
    }

.program-startlist-header,
.program-result-header {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: var(--bs-success);
    background-color: var(--bs-light);
}

.program-startlist,
.program-result {
    font-size: 0.95rem;
    font-weight: 400;
    color: white;
    background-color: rgba(0,76,129,0.5);
    /*    border:1px solid  var(--bs-secondary);*/
    padding-left: 5rem;
    padding-right: 5rem;
    margin: 5px;
    line-height: 1.5rem;
    width: 2rem;
    text-align: center;
    border-radius: 5px;
    transition: 0.2s ease-in-out;
}

    .program-startlist:hover,
    .program-result:hover {
        color: var(--bs-light);
        background-color: rgba(0,76,129,0.9) !important;
        
    }

.program-time{
    font-weight: 500;
    width: 3rem;
}
.program-title{
    font-weight: 600;
    font-size: 1rem;
/*    width: 25rem;*/
    
}
.program-rider {
    font-weight: 400;
    font-size: 1rem;
/*    width: 13rem;*/
}
.program-distance {
    font-weight: 400;
    font-size: 0.8rem;
/*    width: 14em;*/
    padding-left: 0rem;
    
}
.program-status {
    /*    background-color: rgba(0,128,0,0.3);
    color: white;    */
    border-radius: 5px;

}
.program-status.web-result {    
    color: white !important;    
}

.program-status-finished {
    border-left: 4px solid green !important;   
    background-color: rgba(0,0,0,0.2)
} 

.program-dataavailable{
    border-bottom: 1px solid silver;
}

.bg-resultview {
    background: rgba(0, 76, 118, 0.3) !important;
    border-radius: 5px;
}

.result-icon,
.startlist-icon{
    font-size: 1.2rem;
    cursor: pointer
}

.sr-document-wrapper {   
    margin-top: .5rem;
    background-color: rgba(249,249,249,0.8);
    border-radius: 5px;
    padding-top: 5px;
    padding-left:5px;
    color: black;
}

.sr-document-header {    
    font-size: 1.5rem;    
    justify-content: flex-start;    
    font-weight: 500;
}
.sr-document-type {
    font-size: 1rem;    
    justify-content: flex-start;
}
.sr-document-date {
    font-size: 0.95rem;    
    justify-content: flex-end;
}
.sr-document-title {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    font-size: 1.5rem;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.sr-document-flag {
    width: 37px;
}
table .sr-document-table {
    
    
}

sr-document-table thead {
    
    vertical-align: middle;    
    
}

.sr-document-table tr .startlist {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(255,255,255,0.4);
    
}


.sr-document-table thead .startlist {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(200,200,200,0.8);
    font-size: 1.2rem;
    font-weight: 600;
    
}

.sr-document-table thead .t-number.startlist {
    width: 4rem;    
    vertical-align: middle;    
}
.sr-document-table thead .t-name.startlist {
    justify-content: flex-start;    
    padding-left: 2rem;  
   
}
.sr-document-table thead .t-country.startlist {
    width: 4rem;
    vertical-align: middle;
}



.sr-document-table .t-number.startlist {
    width: 4rem;
    vertical-align: middle;    
    
}

.sr-document-table .t-name.startlist {
    justify-content: flex-start;
    max-width: 40rem;
    padding-left: 2em;    
    font-weight: 600;
}

.sr-document-table .t-country.startlist {
    width: 4rem;
    vertical-align: middle;
}


.sr-document-table thead .result {
    line-height: 1rem;
    vertical-align: middle;
    background-color: rgba(200,200,200,0.8);
    font-size: 1.2rem;
    font-weight: 600;
}
.sr-document-table thead .t-rank.result {
    width: 1rem;
    text-align: center;
    vertical-align: middle;    
}

.sr-document-table thead .t-number.result {
    width: 4rem;
    text-align: center;
    vertical-align: middle;   
}


.sr-document-table thead .t-name.result {
    justify-content: flex-start;
    padding-left: 1rem;    
    
}

.sr-document-table thead .t-country.result {
    width: 2rem;
    
}
.sr-document-table thead .t-laps.result {
    width: 3rem;
   
    padding-left: 2rem;
}
.sr-document-table thead .t-points.result {
    width: 4rem;    
    padding-left: 3rem;
}
.sr-document-table thead .t-time.result {
    width: 4rem;
    
    padding-left: 3rem;
}
.sr-document-table thead .t-speed.result {
    width: 4rem;
    
    padding-left: 0rem;
    text-align: center;
}

.sr-document-table .t-rank.result {
    font-size: 1rem;
    font-weight: 600;
    width: 4rem;
}
.sr-document-table .t-number.result {
    font-size: 1rem;
    font-weight: 600;
    width: 4rem;
}
.sr-document-table .t-name.result {
    font-size: 1rem;
    font-weight: 600;
    padding-left: 10px;
}
.sr-document-table .t-country.result {
    font-size: 0.86rem;
    font-weight: 600;
    padding-left: 10px;
}

.sr-document-table .t-laps.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 4rem;
}
.sr-document-table .t-points.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;    
}
.sr-document-table .t-time.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;
}

.sr-document-table .t-speed.result {
    font-size: 0.86rem;
    font-weight: 600;
    width: 8rem;
    text-align: center;
}

.result-parent:nth-child(1) .p-number {
    color: black !important;
    font-size: 1rem;
    
    
}
.result-parent:nth-child(2) .p-number {
    color: black !important;
    font-size: 1rem;
    
}
.result-parent:nth-child(3) .p-number {
    color: black !important;
    font-size: 1rem;
    
}
.p-number{
    color: black;
    font-size: 1rem;
    background-color: var(--bs-light);
}



.text-lightgray{
    color: rgba(220, 220, 220,0.9)
}


.culture-flag {
    width: 2rem;   
    background-position: center;
}







@media (max-width: 920.98px) {

    

    .event-top-line {
        background-color: silver;
        padding-top: 2px;
        color: black;
        font-weight: 400;
        font-size: 0.75rem;
    }
    .event-header {
        font-weight: bolder;
        padding: 0;
        background: linear-gradient(90deg, rgba(220, 220, 220,0.9) 0%, rgba(100,180, 190,0.6) 100%);
    }
    .header-flag {
        width: 4.0rem;
        height: 4.0rem;
        background-position: center;
    }
    .header-date {
        font-size: 0.85rem;
        width: 6rem !important;
        font-weight: 600;
        
    }
    .header-venue {
        font-size: 0.85rem;        
        font-weight: 600;
        width: 8rem !important;
    }
    .header-location {
        font-size: 1.2rem;
        width: 8rem;
        font-weight: 600;
    }
    .header-uci {
        
    }
    .accordion-item {
        background-color: rgba(200,200,200,0.8) !important;
        color: black;
        font-weight: 400;
        font-size: 0.8rem;
    }
    .program-uci{
        visibility: hidden;
    }
    .sr-document-wrapper {
        align-items: center;
        margin-top: .5rem;
        width: 96%;
    }
    .sr-document-table{
       width: 100%;
    }

    .program-startlist,
    .program-result {
        font-size: 1.2rem;
        font-weight: 600;
        color: white;
        rgba(0,76,129,0.5);
        padding-left: 1em;
        padding-right: 1rem;
        margin: 5px;
        line-height: 2rem;
        text-align: center;
        border-radius: 5px;
    }

    .program-startlist:hover,
    .program-result:hover {
        color: white;
        background-color: green;
    }

    .program-time {
        font-size: 0.85rem;
        font-weight: 600;
        /*        width: 1rem;*/
        /*padding-left: 0rem;*/
/*        background-color: rgba(0,76,129,0.5) !important;*/
    }

    .program-title {
        font-weight: 600;
        font-size: 0.95rem;        
        
    }

    .program-rider {
        font-weight: 400;
        font-size: 0.85rem;
/*        width:10rem;*/
    }

    .program-distance {
        font-weight: 400;
        font-size: 0.85rem;        
    }

    .sr-document-table th .result {
        line-height: 1rem;
        vertical-align: middle;
        background-color: rgba(200,100,200,0.8);
        font-weight: 100;
        
    }

    .sr-document-table thead .t-rank.result {
        width: 1rem;
        text-align: center;
        vertical-align: middle; 
        padding-left: 0rem;
    }

    .sr-document-table thead .t-number.result {
        width: 0rem;
        text-align: center;
        vertical-align: middle;
        padding-left: 0rem;
        
    }


    .sr-document-table thead .t-name.result {
        justify-content: flex-start;
        padding-left: 0rem;
    }

    .sr-document-table thead .t-country.result {
        width: 1rem;
        padding-left: 0rem;
        font-weight: 600;
    }

    .sr-document-table thead .t-laps.result {
        width: 0rem;        
        padding-left: 0rem;
    }

    .sr-document-table thead .t-points.result {
        width: 1rem;        
        padding-left: 0rem;
    }

    .sr-document-table thead .t-time.result {
        width: 0.5rem;
        padding-left: 0rem;
    }

    .sr-document-table thead .t-speed.result {
        width: 1rem;
        padding-left: 1rem;
        text-align: center;
    }

    .sr-document-table tbody .t-rank.result {
        font-size: .9rem;
        font-weight: 600;        
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-number.result {
        font-size: 0.7rem;
        font-weight: 600;
        width: 1rem;
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-name.result {
        font-size: 0.76rem;
        font-weight: 600;
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-country.result {
        font-size: 0.76rem;
        font-weight: 600;
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-laps.result {
        font-size: 1rem;
        font-weight: 400;
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-points.result {
        font-size: 1rem;
        font-weight: 600;
        padding-left: 0rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-time.result {
        font-size: 0.86rem;
        font-weight: 600;
        padding-left: 0rem;
        width: 0.5rem;
        vertical-align: middle;
    }

    .sr-document-table tbody .t-speed.result {
        font-size: 0.7rem;
        font-weight: 600;
        padding-left: 0rem;
        text-align: center;
        vertical-align: middle;
    }

    .sr-document-flag {
        width: 25px;
    }
    .result-parent:nth-child(1) .p-number {
        color: black !important;
        font-size: .9rem;
        
    }

    .result-parent:nth-child(2) .p-number {
        color: black !important;
        font-size: .9rem;
    }

    .result-parent:nth-child(3) .p-number {
        color: black !important;
        font-size: .9rem;
    }

    .p-number {
        color: black;
        font-size: .9rem;
        background-color: rgba(0,0,0,0.1);        
        
    }
}