﻿/*      Bootstrap breakpoints.
X-Small             <576px
Small               ≥576px
Medium              ≥768px
Large               ≥992px
Extra large         ≥1200px
Extra extra large   ≥1400px
*/
/*@media (min-width: 768px) {*/
/* Medium */
/*}*/


.ath-header {
    display: flex;
    flex-wrap:wrap;
}
    .ath-header.non-hi {
        min-height:250px;
    }

.profile-pic {
    width: calc(20%);
    position: relative;
}

.pic-wrap {
    border: 2px solid #D02D26;
    border-radius: 100%;
    overflow: hidden;
    padding: 30px;
    aspect-ratio: 1;
    position:relative;
}

.profile-pic img {
    /* width: 100%; */
    height: 110%;
    margin: 0 auto;
    display: block;
}

.profile-pic .bg-image {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 1;
    border-radius: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

.non-hi .profile-pic {
    background-color: #F2F2F2;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding:25px 20px;
}
.non-hi .profile-main {
    width: calc(60%);
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.non-hi .profile-pic .bg-image {
    position: relative;
    transform: none;
    top: 0;
    left: 0;
    margin-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    width: 100%;
}
.switch {
    display: block;
    width: 27px;
    height: 19px;
}

.non-hi .profile-pic .dd-btn-wrap {
    position: relative;
    width:auto;
    height:20px;
}

.non-hi .profile-pic .dd-content {
    position: absolute;
    background-color: #FFFFFF;
    border-color: #D02D26;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    margin-top: 5px;
    z-index: 100;
    padding: 10px;
    width: 150px;
}
#coach-ath-dd {
    position: absolute;
    background-color: #F2F2F2;
    border-radius: 10px;
    z-index: 100;
    min-width: 240px;
    padding: 0;
}
    #coach-ath-dd .athActionTitle {
        background-color: #D02D26;
        color: #FFFFFF;
        text-align: left;
        font-size: 1.1rem;
        padding: 10px 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
        font-weight: 600;
    }
    #coach-ath-dd .athActionBody {
        padding: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-color: #D02D26;
        border-width: 1px;
        border-style: solid;
        font-weight: 500;
    }


.non-hi .profile-pic .dd-content {
    width: 100%;
}


.profile-main {
    width: calc(60% - 5px);
    color: #1F2E57;
    background-color: #F2F2F2;
    border-radius: 15px;
    margin: 0 0 0 5px;
    padding: 25px 10px 25px 20px;
    display: flex;
    line-height: 1.5em;
    position: relative;
    text-transform: uppercase;
}

    .profile-main p a {
        color: #1F2E57;
    }
    .profile-col-1 {
    width: calc(33.33% - 5px);
    border-right: 4px solid #FFFFFF;
    padding: 0 10px 0 0;
    position: relative;
}

    .profile-col-1 .favourite {
        position: absolute;
        top: 0;
        right: 10px;
        width: 30px;
    }

        .profile-col-1 .favourite img {
            width: 30px;
            height: auto;
        }

    .profile-col-1 .name {
        padding: 0 40px 5px 0;
        font-size: 1.4rem;
        font-weight:500;
        text-transform: none;
    }

    .profile-col-1 .surname {
        padding: 0 40px 15px 0;
        font-size: 2rem;
        line-height: 1;
        font-weight: 600;
        color: #D02D26;
    }

    .profile-col-1 .event {
        padding: 0 40px 15px 0;
        font-size: 1rem;
        font-weight: bold;
    }

    .profile-col-1 .no-m a {
        color: #1F2E57;
        font-weight: bold;
    }

p.no-m {
    margin: 0;
}


.profile-col-2 {
    width: calc(30% + 10px);
    border-right: 4px solid #FFFFFF;
    padding: 0 10px 0 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}





.profile-col-3 {
    width: calc(36.66% - 5px);
    padding: 0 10px 0 10px;
    position: relative;
}
.profile-col-3-clubcoaches {
    max-height: 250px;
    overflow-y: auto;
}

    .profile-col-3 .first-int img {
        width: 15px;
        height: auto;
    }

    .profile-col-3 .home-nat p {
        margin: 0;
    }

    .profile-col-3 .club a {
        color: #1F2E57;
    }


.profile-ranking {
    width: calc(20% - 4px);
    color: #FFFFFF;
    background-color: #1F2E57;
    border-radius: 10px;
    margin: 0 0 0 4px;
    text-align: center;
    padding: 20px 10px;
    font-weight: 400;
    line-height: 1.5em;
}

    .profile-ranking a {
        color: #FFFFFF;
    }

    .profile-ranking .ranking-wrap {
        position: relative;
    }

    .profile-ranking > div {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content:space-between;
    }




.ath-det-evntdropdownContainer .ath-det-evntdropdownText {
    font-size: 1em;
}


.middle-section {
    margin: 20px 0 50px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.4em;
}

.achievements-wrap {
    width: calc(20% - 10px);
    background-color: #F2F2F2;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    line-height:1.4rem;
}

    .achievements-wrap .title-header {
        padding: 10px 20px;
        background: #222C53;
        color: #FFFFFF;
        text-align: left;
        font-size: 1.1rem;
        font-weight:600;
    }

.ath-det-summ-mdldisplaycont {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 20px 0 10px 0;
}

.ath-det-summ-mdldisplayitem {
    width: 33.33%;
    text-align: center;
}

.ath-det-summ-mdldisplayitem-img-cont {
    width: 100%
}
.ath-det-summ-mdldisplayitem-left-img-cont {
    width: 50%
}
.ath-det-summ-mdldisplayitem-img {
    width: 50%;
}
.ath-det-summ-mdldisplayitem-left-img {
    width: 100%;
}

.achievements-wrap .achieve-content {
    padding: 20px;
}

    .achievements-wrap .achieve-content .medal {
        color: #B49577;
        font-size: 1.5rem;
        margin-bottom: 16px;
    }

    .achievements-wrap .achieve-content .event {
        color: #222C53;
        font-size: 1.2rem;
        font-weight: bold;
        line-height: 1.8rem;
    }

    .achievements-wrap .achieve-content .result {
        color: #222C53;
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .achievements-wrap .achieve-content .location {
        color: #222C53;
        margin-top: 20px;
        font-size: 1rem;
        line-height: 1.4rem;
    }

        .achievements-wrap .achieve-content .location .date {
            margin-top: 5px;
        }

    .achievements-wrap .achieve-content .meetlong {
        line-height: 1.2rem;
        margin-bottom: 16px;
    }

.prev-next-wrap {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0 0;
}





.middle-section .performances-dash-wrap {
    width: calc(80% - 10px);
    background-color: #F2F2F2;
    padding: 0;
    border-radius: 10px;
}

.performances-dash-wrap .title-header {
    background-color: #D02D26;
    color: #FFFFFF;
    text-align: left;
    font-size: 1.1rem;
    padding: 10px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    font-weight: 600;
}

.performances-dash-wrap .dd-btn-wrap {
    margin: 0;
}

.performances-dash-wrap .chart-btn-wrap {
    display: flex;
    padding: 20px;
    position: relative;
}

    .performances-dash-wrap .chart-btn-wrap .btn-style {
        padding: 8px 15px;
        border-radius: 5px;
        border: 1px solid #1F2E57;
        color: #1F2E57;
        margin-right: 10px;
        line-height: inherit;
    }

        .performances-dash-wrap .chart-btn-wrap .btn-style:hover {
            color: #ffffff;
        }

    .performances-dash-wrap .chart-btn-wrap .dd-btn-style {
        margin-right: 10px;
    }
    .performances-dash-wrap .chart-btn-wrap .dd-btn-style > div {
        width:100%;
        text-align:center;
    }

.chart-main-wrap {
    display: flex;
}

.chart-main {
    width: 80%;
    padding: 0 20px 0 20px;
}

.chart-side {
    width: 20%;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .chart-side .dd-btn-style {
        width: 100%;
    }

.dd-btn-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.dd-btn-style {
    display: inline-flex;
    padding: 8px 15px;
    background: #D02D26;
    color: #FFFFFF;
    justify-content: space-between;
    align-items: center;
    line-height: inherit;
    border-radius: 5px;
    min-width:120px;
}

    .dd-btn-style:hover {
        color: #FFFFFF;
        text-decoration: none;
    }

    .dd-btn-style.dd-btn-gold {
        background: #B49577;
    }



.performances-main-wrap {
    width: 100%;
    padding: 0;
    overflow: hidden;
    margin: 30px 0 0 0;
}

    .performances-main-wrap .title-header {
        background-color: #D02D26;
        color: #FFFFFF;
        text-align: left;
        font-size: 1.1rem;
        padding: 10px 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-weight: 600;
    }

.performance-main-header {
    background-color: #F2F2F2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

    .performance-main-header .year-wrap {
        margin-bottom: 20px;
    }


#natLadderPanel .title, #athDetailPanelRoad .title {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: bold;
    padding: 0 20px 15px 20px;
}

#natLadderPanel .pos {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

#natLadderPanel .info-trigger, #athDetailPanelRoad .info-trigger {
    text-align: center;
    padding: 10px 20px;
}

    #natLadderPanel .info-trigger .info-img, #athDetailPanelRoad .info-trigger .info-img {
        width: 16px;
        height: auto;
    }

#athDetailPanelRoad {
    background-color: #1F2E57;
    text-align: center;
    text-transform: none;
    color: #FFFFFF;
    border-radius: 10px;
    padding: 20px 0;
    height: calc(100% + 50px);
    margin-top: -25px;
    margin-right: -21px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

    #athDetailPanelRoad .copy-wrap {
        padding: 0 20px;
    }

        #athDetailPanelRoad .copy-wrap .ranking, #athDetailPanelRoad .copy-wrap .handicap {
            font-size: 1.4rem;
        }

        #athDetailPanelRoad .copy-wrap .gender {
            text-transform: uppercase;
        }

        #athDetailPanelRoad .copy-wrap .leader {
            margin: 15px 0;
        }

        #athDetailPanelRoad .copy-wrap a {
            color: #FFFFFF;
        }


#natLadderPanel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}

#divFavouriteAjaxError {
    position: absolute;
    background-color: #FFFFFF;
    padding: 10px;
    border: 1px solid #D02D26;
    border-radius: 10px;
    color: #FFFFFF;
    top: 30px;
    left: -90px;
    width: 200px;
    z-index:10;
}

.dd-arrow{
    width: 16px;
    height: 9px;
    margin-left:6px;
}

.popover {
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    overflow: hidden;
}

#chartSelectRecordTrigger {
    display: flex;
    justify-content: space-between;
    align-items:center;
    width:100%;
}

.roadHCap-Chart {
    color: #1F2E57;
    padding:20px 0;
}

.flex-wrap{
    display:flex;
    justify-content:space-between;
}


@media only screen and (max-width: 991px) {
    .ath-header {
        flex-direction: column;
        align-items: center;
    }

    .profile-pic {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .profile-main, .non-hi .profile-main {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .profile-ranking {
        width: 100%;
        margin: 0;
    }

    .middle-section {
        justify-content: center;
    }

    .achievements-wrap {
        width: 100%;
        max-width: 300px;
        margin: 0 0 30px 0;
    }

    .middle-section .performances-dash-wrap {
        width: 100%;
        margin: 0 0 30px 0;
    }
}

@media only screen and (max-width: 767px) {
    .page-intro {
        justify-content: flex-start;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 576px) {


    .profile-main {
        flex-direction: column;
    }

    .profile-col-1, .profile-col-2 {
        width: 100%;
        border-right: none;
        padding: 0 0 10px 0;
    }

    .profile-col-2 {
        padding: 20px 0;
    }

    .profile-col-3 {
        width: 100%;
        padding: 20px 0 0 0;
    }

    .profile-ranking, .achievements-wrap {
        max-width: none;
    }

    .chart-main-wrap {
        flex-direction: column;
    }

    .chart-main {
        width: 100%;
    }

    .chart-side {
        width: 100%;
        padding: 20px;
    }

        .chart-side .dd-btn-style {
            width: auto;
        }

    .performances-dash-wrap .chart-btn-wrap {
        flex-wrap: wrap;
    }

        .performances-dash-wrap .chart-btn-wrap .btn-style {
            margin: 0 10px 10px 0;
        }
    
    #selOrderBy {
        width: 100% !important;
        display: block !important;
    }
}


@media only screen and (max-width: 991px) {
    .ath-header {
        /*flex-wrap:wrap;*/
    }

        .ath-header.non-hi {
            height: auto;
        }


    .middle-section {
        justify-content: center;
    }

    .achievements-wrap {
        width: 100%;
        max-width: 300px;
        margin: 0 0 30px 0;
    }

    .middle-section .performances-dash-wrap {
        width: 100%;
        margin: 0 0 30px 0;
    }
}




.mobile-ath-header {
    display: flex;
    justify-content: space-between;
    margin: 100px 0 30px 0;
}

    .mobile-ath-header .header-wrap {
        width: calc(50% - 2px);
        color: #1F2E57;
        background-color: #F2F2F2;
        border-radius: 15px;
        padding: 25px 20px;
        line-height: 1.5em;
        position: relative;
        text-transform: uppercase;
    }

    .mobile-ath-header .profile-ranking {
        width: calc(50% - 2px);
    }

    .mobile-ath-header .profile-pic {
        border: none;
        padding: 0;
        margin-bottom: 50px;
        width: 100%;
    }

        .mobile-ath-header .profile-pic img {
            height: 100%;
        }

        .mobile-ath-header .profile-pic .pic-wrap {
            position: absolute;
            top: -100px;
            left: 50%;
            width: 150px;
            transform: translateX(-50%);
            aspect-ratio: 1;
            border-radius: 100%;
            overflow: hidden;
            background-color: #FFFFFF;
            padding: 10px;
        }


    .mobile-ath-header .profile-col-1 {
        width: 100%;
        border-right: none;
        padding: 20px 0 0 0;
    }

.mobile-dd-content .col-wrap {
    display: flex;
    justify-content: space-between;
}

.mobile-dd-content .col-6 {
    width: calc(50% - 10px);
}

@media only screen and (max-width: 991px) {
    .mobile-dd-content p, .mobile-dd-content p a, .mobile-ath-header p a {
        line-height: 1.4rem;
        color: #222C53;
    }
    .ath-det-coa-othertitle, .ath-det-coa-othertitle {
        color: #222C53;
        text-transform: uppercase;
    }
}

@media only screen and (max-width: 767px) {
    .profile-col-1 .name, .profile-col-1 .surname {
        padding-right: 0;
    }

    

    .ath-det-summ-mdldisplaycont {
        margin-top: 0;
    }


    .performances-main-wrap .title-header {
        font-size: 1.1em;
        font-weight: 400;
    }

    .form-select {
        display: block;
        width: 100% !important;
        border: 1px solid #222C53;
    }
}

@media only screen and (max-width: 576px) {

    #athInfoDetail {
        width: 100%;
    }

    #selOrderBy {
        width: 100% !important;
        display: block !important;
    }
}





/***********
    \/  \/  \/  \/  \/  \/  \/
        NEW
    \/  \/  \/  \/  \/  \/  \/
***********/
/* Copied from trackroadsearch.css and renamed */
/***********
    Road / Track button selectors
***********/
.btn-runtype {
    padding-right: 0px;
}
.btn-runtype-selected {
    cursor: default;
}
.btn-runtype-unselected {
}
.btn-runtype-image {
    max-height: 70px;
}

.natLadPopHead {
    font-size:1.1em;
    margin:10px 0 5px 0;
    color: #FFFFFF;
    font-weight:bold;
}
.natLadPopHead:first-child {
    margin: 0 0 5px 0;
}































/***********
    \/  \/  \/  \/  \/  \/  \/
        OLD
    \/  \/  \/  \/  \/  \/  \/
***********/




/***********
Athlete Detail Page
***********/
/* Main Layout */
.ath-det-mainText {
    width:100%;
}

.ath-det-main-detailCont {
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.ath-det-main-detail-picCont {
    width: 340px;
    max-width: 40%;
}

.ath-det-main-detail-txtCont {
    width: 500px;
    margin-right: 80px;
    max-width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; /* If not set spaces above event bar. */
}

.ath-det-main-detail-txtCont-quick {
    width: 640px;
    margin-right: 0px;
    max-width: 60%;
}

.ath-det-main-graphCont {
    position: relative; /* Required to allow clip images to absolutely positioned. */
}

.ath-det-main-graphCont-cliptopleft {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0px;
    left: 12px; /* Allow for the padding. */
}

.ath-det-main-graphCont-clipbottomright {
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0px;
    right: 12px; /* Allow for the padding. */
}

.ath-det-main-summariesCont {
    margin-bottom: 20px;
}

.ath-det-main-gridsCont {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.ath-det-main-performancesCont {
    padding-right: 0px;
}

.ath-det-coa-pop-anc {
    height: 0.9rem;
    margin-bottom: 0.2rem;
}

.ath-det-coa-pop-head {
    font-weight: bold;
    height: 1rem;
}

.ath-det-coa-pop-sep {
    margin-top: 15px;
}

.ath-det-coa-othertitle {
    margin-top: 16px;
}

.ath-det-coa-year {
    margin-left: 5px;
}

/* Top Pic */
.ath-det-detail-picContInner {
    background-color: #222C53;
    -webkit-clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
    clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
    margin-left: 15%;
    margin-right: 25%;
}

.ath-det-detail-picContInnerHighPerf {
    background-image: radial-gradient(closest-side at 50% 35%, lightblue, #222C53);
}

.ath-det-detail-pic {
    width: 100%;
}

.ath-det-detail-pic-hiperf {
}

.ath-det-detail-pic-event {
    margin-top: 35px;
    margin-bottom: 35px;
}


/* Top Text */
.ath-det-detail-nameCont {
    width: 55%;
    margin-bottom: 30px;
    position: relative;
}

.ath-det-detail-nameCont-quick {
    width: 50%;
}

.ath-det-detail-rankCont {
    width: 45%;
    text-align: center;
    margin-bottom: 10px;
}

.ath-det-detail-rankCont-quick {
    width: 50%;
}

.ath-det-detail-eventCont {
    width: 100%;
}


/* Favourites */
.ath-det-faveContainer {
    position: relative;
    width: 100%;
}

.ath-det-faveAnchor {
    position: absolute;
    right: 20px;
    top: 5px;
}

.ath-det-faveImage {
    width: 20px;
}


/* Name and Socials */
.ath-det-detail-fname {
    text-transform: uppercase;
    font-size: 1.2rem;
}

.ath-det-detail-lname {
    text-transform: uppercase;
    color: #222C53;
    font-size: 1.5rem;
    font-weight: bold;
}

.ath-det-detail-eventName {
    text-transform: uppercase;
    font-size: 1rem;
}

.ath-det-detail-socials {
    padding-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ath-det-detail-socialitem {
    display: flex;
    width: 40px;
    max-width: 25%;
    background-color: #222C53;
    -webkit-clip-path: polygon(7px 0, 0 7px, 0 100%, calc(100% - 7px) 100%, 100% calc(100% - 7px), 100% 0);
    clip-path: polygon(7px 0, 0 7px, 0 100%, calc(100% - 7px) 100%, 100% calc(100% - 7px), 100% 0);
    margin-right: 15px;
}

.ath-det-detail-socialitemanc {
    width: 100%;
    height: 100%;
}

.ath-det-detail-socialitemimg {
    margin: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

.ath-det-detail-sepnamerank {
    position: absolute;
    width: 1px;
    height: 90%;
    top: 5%;
    right: 0px;
}

/* Ranking */
.ath-det-detail-rank-top {
    text-transform: uppercase;
    font-size: 0.8rem;
}

.ath-det-detail-rank-topmid {
    text-transform: uppercase;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.ath-det-detail-rank-data {
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 5px;
}

.non-hi .ath-det-detail-rank-data {
    color: #FFFFFF;
}

.anchorNoUnderline.bigger {
    font-size: 1.4em;
}

.ath-det-detail-rank-data-quick {
    color: #222C53;
}

.ath-det-detail-rank-event {
    text-transform: uppercase;
    font-size: 0.7rem;
}

.ath-det-detail-rank-info {
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* XC */
.ath-det-detail-XC-pos-data {
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 10px;
}
.ath-det-detail-XC-evnt-data {
    font-size: 1.3rem;
    line-height: 1;
}
.ath-det-detail-XC-loc-data {
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 5px;
}
.ath-det-detail-XC-perf-cont {
    font-size: 1.1rem;
    line-height: 1;
    margin-right: 10px;
}
.ath-det-detail-XC-perf-data {
}

/* Event */
.ath-det-detail-event-pb {
    width: 50%;
    text-align: center;
    position: relative;
}

.ath-det-detail-event-pb-quick {
    width: 100%;
}

.ath-det-detail-event-pbhdr {
    margin-bottom: 5px;
    font-size: 11px;
    color: #B49577;
}

.ath-det-detail-event-pbhdr-quick {
    color: #B49577;
}

.ath-det-detail-event-pbtxt {
    color: #B49577;
    margin-right: 10px;
    font-size: 11px;
}

.ath-det-detail-event-pbtxt-quick {
}

.ath-det-detail-event-pbinfoanc {
}

.ath-det-detail-event-pbinfo {
    height: 0.9rem;
}

.ath-det-detail-event-ltst {
    width: 50%;
    text-align: center;
    position: relative;
}

.ath-det-detail-event-ltst-quick {
    width: 100%;
    margin-bottom: 10px;
}

.ath-det-detail-event-ltsthdr {
    margin-bottom: 5px;
    font-size: 11px;
}

.ath-det-detail-event-ltsthdr-quick {
}

.ath-det-detail-event-ltsttxt {
    color: #FFFFFF;
    margin-right: 10px;
    font-size: 11px;
}

.ath-det-detail-event-ltsttxt-quick {
    color: revert;
}

.ath-det-detail-event-ltstinfoanc {
}

.ath-det-detail-event-ltstinfo {
    height: 0.9rem;
}

.ath-det-detail-seppbltst {
    position: absolute;
    width: 1px;
    height: 90%;
    top: 5%;
    right: 0px;
}

.ath-det-detail-seppbltst-quick {
    display: none;
}

@media (min-width: 1200px) {
    /* Extra Large */
    .ath-det-detail-event-pb-quick {
        width: 50%;
    }

    .ath-det-detail-event-ltst-quick {
        width: 50%;
        margin-bottom: revert;
    }

    .ath-det-detail-seppbltst-quick {
        display: revert;
    }
}


/* Event Drop down */
.ath-det-evntdropdownContainer, .ath-det-chart-RecordsContainer {
    position: absolute;
    background-color: #FFFFFF;
    border-color: #D02D26;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    margin-top: -3px;
    z-index: 100;
    padding: 10px 0 10px 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    max-height: 200px;
    overflow-y: auto;
}

.ath-det-evntdropdownContainerMain {
    /*width: 100%;*/
}

.ath-det-evntdropdownContainerChart {
    width: calc(100% - 10px);
}

.ath-det-evntdropdownContainerChartParent {
    position: relative;
}

.ath-det-evntdropdownInner {
    text-align: center;
    width: 100%;
}

.ath-det-evntdropdownItem td, .ath-det-chart-RecordsContainer td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.ath-det-evntdropdownItemDark {
}

.ath-det-evntdropdownItemLight {
  
}

.ath-det-evntdropdownText {
    font-size: 1rem;
}

#rnkYearDropdown, #rnkYearDropdownMob, #eventDropdownPBMain, #eventDropdownPBMainMob {
    width: 100%;
    min-width: 120px;
    border-color: #1F2E57;
    left: 50%;
    transform: translateX(-50%);
}
    #rnkYearDropdown a, #rnkYearDropdownMob a, #eventDropdownPBMain a, #eventDropdownPBMainMob a {
        color: #747474;
    }


/* Quick View */
.ath-det-quick-lname {
    margin-bottom: 20px;
}

.ath-det-quicktext-pair {
    width: 100%;
    margin-bottom: 5px;
}

.ath-det-quicktext-label {
    color: #222C53;
    font-weight: bold;
}

.ath-det-quicktext-display {
    font-weight: bold;
}

.ath-det-rank-eventag {
    font-weight: bold;
}


/* Road BestKnownPerformances / Handicap carousel */
.roadbkphcap-carousel-arrow {
    width: 1.4rem;
    margin-top: -5px;
    margin-bottom: -5px;
}
#roadbkphcap-carousel {
    padding: 0;
}
    #roadbkphcap-carousel .carousel-inner {
        padding-bottom: 35px;
    }
    #roadbkphcap-carousel .carousel-item {
    }
    #roadbkphcap-carousel .carousel-indicators {
        margin-bottom: 5px;
    }
        #roadbkphcap-carousel .carousel-indicators button {
            width: 5px;
            height: 5px;
            margin-left: 5px;
            margin-right: 5px;
        }



/* BestKnownPerformances and UKRankings Quick view Grids */
.ath-det-grids-bkpCont {
    width: 100%;
    margin-bottom: 20px;
}

.ath-det-grids-bkp-header, .ath-det-grids-ukrnk-header, .ath-det-grids-hcap-header {
    padding: 10px 20px;
    background: #222C53;
    color: #FFFFFF;
    text-align: left;
    font-size: 1.1rem;
    border-radius: 10px;
    margin-bottom: 10px;
}
.ath-det-carousel-ancouter {
    color: white;
}
.ath-det-carousel-ancouter a {
    color: white;
}
    .ath-det-carousel-ancouter a:hover {
        color: white;
    }
.ath-det-carousel-anccont {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.ath-det-grids-ukrnkCont {
    width: 100%;
    margin-bottom: 20px;
}

.ath-det-grids-pbcol {
    color: white;
    background-color: #B49577;
    border-radius:10px;
}

.ath-det-grids-sep-vert-cont {
    height: 100%;
    width: 15px;
    margin-left: 15px;
    display: none;
}

.ath-det-grids-sep-vert {
    width: 1px;
    height: calc(100% - 40px);
    margin-top: 1rem;
}

@media (min-width: 1400px) {
    /* Extra Large */
    .ath-det-grids-bkpCont {
        width: calc(50% - 10px);
        margin-right: 10px;
    }

    .ath-det-grids-ukrnkCont {
        width: calc(50% - 10px);
        margin-left: 10px;
    }

    .ath-det-grids-sep-vert-cont {
        display: block;
    }
}

.ath-det-grids-perf-cont {
    display: flex;
    justify-content: flex-start;
}
.ath-det-grids-perf-pbimgcont {
    width: 20px;
}
.ath-det-grids-perf-pbimg {
    width: 100%;
}
.ath-det-grids-perf-val {
    margin-left: 10px;
}
.ath-det-grids-perf-addinf {
    margin-left: 10px;
}


.ath-det-perf-countcontainer {
    margin-top: 20px;
}

.ath-det-perf-counttext {
    display: block;
    font-weight: bold;
    color: #222C53;
    margin-bottom: 20px;
}

.ath-det-perf-submitlink {
    color: #D02D26;
}

.bkpHide {
    display: none;
}
.bkpSecondRow {
    font-size: 10px;
}

.ukrHide {
    display: none;
}

.ukrSecondRow {
    font-size: 10px;
}

.ath-det-grid-bkprow {
    /*height: 48px;*/
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.ath-det-grid-ukrrow, .ath-det-grid-bkprow, .ath-det-grid-perf {
    height: 44px;
}
    .ath-det-grid-ukrrow td, .ath-det-grid-bkprow, .ath-det-grid-perf td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

.ath-det-grid-lrarrowtd {
    width: calc(1rem + 16px);
    padding-left: 2px;
    padding-right: 2px;
}

.ath-det-grids-lrarrow {
    width: 20px;
}

.ath-det-grids-handtimed {
    width: 1rem;
}

.ath-det-grids-hd-bkp-item {
    /* 2rem = width of 2 arrows
    32px = 4 x 8px padding */
    width: calc( calc( calc(100% - 32px) - 2rem) / 6);
}

.ath-det-grids-hd-ukr-item {
    width: calc( calc( calc(100% - 32px) - 2rem) / 6);
}




/* Charts */
.ath-det-chart-back {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    /*-webkit-clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
*/
    /*AltClip solution - but issue with z-index
    -webkit-clip-path: polygon(15px 0, 0 15px, 0 5000%, 100% 5000%, 100% 101%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
    clip-path: polygon(15px 0, 0 15px, 0 5000%, 100% 5000%, 100% 101%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
*/
}

.ath-det-chart-RecordsContainer {
    z-index: 1100;
    width: 100%;
    position: absolute;
    text-align:center;
    border-color: #B49577;
}
.ath-det-chart-RecordsContainer a {
   text-decoration:none;
}

.ath-det-chart-eventDropCont {
    background-color: rgba(54, 187, 213, 0.5);
    border-color: rgba(54, 187, 213, 0.3);
    border-width: 1px;
    border-style: solid;
    vertical-align: middle;
    text-align: center;
}

.ath-det-chart-selectButton {
    border-width: 1px;
    border-style: solid;
    vertical-align: middle;
    text-align: center;
}

.ath-det-chart-selectButtonSelected {
    background-color: rgba(54, 187, 213, 0.5);
    border-color: rgba(54, 187, 213, 0.3);
}

.ath-det-chart-selectButtonUnselected {
    background-color: rgba(99, 150, 215, 0.2);
    border-color: rgba(54, 187, 213, 0.3);
}

.ath-det-chart-imageText {
    position: absolute;
    top: 45%;
    width: 100%;
    text-align: center;
}


/* Athlete Search */
.ath-det-chart-searchIssueContainer {
    color: #D02D26;
}

.ath-det-chart-searchReqFieldIndic {
    vertical-align: top;
}

.ath-det-chart-searchCont {
    z-index: 9002;
}
    .ath-det-chart-searchCont .search-wrap {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        padding: 0;
        background-color: #F2F2F2;
    }
    .ath-det-chart-searchCont .search-wrap .title-header {
        padding: 20px 20px;
        background: #222C53;
        color: #FFFFFF;
        text-align: left;
        font-size: 1.1rem;
        border-radius:0;
    }
        .ath-det-chart-searchCont .search-wrap .search-inputs {
            padding: 20px 10px;
            display:flex;
        }
        .ath-det-chart-searchCont .search-wrap .search-inputs .search-input {
            width:33.33%;
            padding:0 10px;
        }
            .ath-det-chart-searchCont .search-wrap .search-inputs .search-input label {
                color: #222C53;
            }
            .ath-det-chart-searchCont .search-wrap .search-inputs .search-input input {
                border:none;
                margin-top: 5px;
            }
        .ath-det-chart-searchCont .search-wrap .button-wrap {
            padding: 0 20px 20px 20px;
            display: flex;
        }
            .ath-det-chart-searchCont .search-wrap .button-wrap input {
                padding: 10px 20px;
                margin-right: 10px;
                width: 100px;
                background: #222C53;
                color: #FFFFFF;
                text-align:center;
                border-radius:6px;
                transition:all ease 0.4s;
            }
                .ath-det-chart-searchCont .search-wrap .button-wrap input.btn-search {
                    background: #D02D26;
                }
                .ath-det-chart-searchCont .search-wrap .button-wrap input:hover {
                    background: #FFFFFF;
                    color: #222C53;
                }
        .ath-det-chart-searchCont .search-wrap .results-wrap {
            padding: 0 20px 20px 20px;
            
        }

#divAthleteSearch_Results .ath-results {
    background: #D02D26;
    border-radius: 10px;
    color: #FFFFFF;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.ath-det-chart-SearchResultHeader {
    font-weight: 600;
    padding-right: 5px;
    color: #222C53;    
}
#divAthleteSearch_Results thead td {
    color: #222C53;
    padding: 10px 10px;
}
#divAthleteSearch_Results tbody td {
    background: #FFFFFF;
    color: #222C53;
    padding: 5px 10px;
}
    #divAthleteSearch_Results tbody td:first-child {
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
        
    }
    #divAthleteSearch_Results tbody td:nth-child(7) {
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }
    #divAthleteSearch_Results tbody td:nth-child(8) {
        background: transparent;
    }
        #divAthleteSearch_Results tbody td:nth-child(8) a {
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 5px;
            margin: auto;
            background: #222C53;
            padding:5px;
        }
        #divAthleteSearch_Results tbody td:nth-child(8) a img {
            display: block;
            width: 20px;
            height: 20px;            
        }
.ath-compare-txt {
    margin-top: 20px;
    text-align: right;
    color: #222C53;
}

#div_ChartRemoveAdditionalTop, #div_ChartRemoveAdditionalBottom {
    margin-bottom: 10px;
}



.ath-det-chart-searchHeaderSub {
    margin-left: 30px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.ath-det-chart-searchDisabledText {
    color: #C0C0C0;
    font-size: 0.8rem;
}

.ath-det-chart-mediumHeaderText {
    font-size: 1.5rem;
}

.ath-det-chart-largeHeaderText {
    font-size: 2.0rem;
}

.ath-det-chart-legendLabel {
    font-size: 0.75rem;
    color: #B49577;
    font-weight: 700;
    position: relative;
    top: 0px;
}

@media (min-width: 768px) {
    .ath-det-chart-searchDisabledText {
        font-size: 0.9rem;
    }

    .ath-det-chart-mediumHeaderText {
        font-size: 0.9rem;
    }

    .ath-det-chart-largeHeaderText {
        font-size: 1.1rem;
    }
}

@media (min-width: 992px) {
    .ath-det-chart-mediumHeaderText {
        font-size: 1.15rem;
    }

    .ath-det-chart-largeHeaderText {
        font-size: 1.7rem;
    }
}





.ath-det-chart-pbLRArrow {
    width: 1.6rem;
}

.ath-det-chart-HCapLRArrow {
    width: 1.4rem;
}

.ath-det-chart-chartButton {
    border-radius: 5px;
    text-align: center;
    margin-right: 5px;
    display: inline-block;
    width: 80%;
}

.ath-det-chart-chartButtonRecords {
    background-color: #B49577;
}

.ath-det-chart-chartButtonTop {
    /*background-color: green;*/
}

.ath-det-chart-chartButtonBottom {
    /*background-color: orange;*/
}

.ath-det-chart-chartButtonMore {
    background-color: #D02D26;
}

.ath-det-chart-chartButtonImage {
    width: 16px;
    margin-left:10px;
}

.ath-det-chart-chartButtonImageRecords {
}

.ath-det-chart-chartButtonImageTop {
}

.ath-det-chart-chartButtonImageBottom {
}

.ath-det-chart-chartButtonImageMore {
}





/* Summaries
*/
.ath-det-summ-outer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    color: white;
}

.ath-det-summ-box {
    width: 45%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #222C53;
    -webkit-clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
    clip-path: polygon(15px 0, 0 15px, 0 100%, calc(100% - 15px) 100%, 100% calc(100% - 15px), 100% 0);
}

.ath-det-summ-box-first {
}

.ath-det-summ-box-second {
}

.ath-det-summ-labeldisplaycont {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 5px;
}

.ath-det-summ-labelcont {
    width: 30%;
}

.ath-det-summ-labeltext {
}

.ath-det-summ-displaycont {
    width: 69%;
}

.ath-det-summ-displaytext {
}

.ath-det-summ-bioanc {
}

.ath-det-summ-bioinfo {
    height: 0.9rem;
}

.ath-det-summ-mdlhdr {
    text-align: center;
    margin-bottom: 10px;
}

.ath-det-summ-mdltxt {
    margin-right: 5px;
}

.ath-det-summ-mdlinfoanc {
}

.ath-det-summ-mdlinfo {
    height: 0.9rem;
}

.ath-det-summ-mdldisplayitem-txt {
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    margin-top: 25px;
    color: #1F2E57;
    width: 100%;
}
.ath-det-summ-mdldisplayitem-left-txt {
    width: 50%
}

.ath-det-summ-comp-barcont {
    height: 20%;
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
    padding-bottom: 2px;
}

.ath-det-summ-comp-lblcont {
    height: 100%;
    width: 30%;
    text-align: end;
    margin-right: 7px;
}

.ath-det-summ-comp-barcontinner {
    display: flex;
    justify-content: start;
    width: 70%;
    height: 100%;
}

.ath-det-summ-comp-bar {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 5px;
    height: 100%;
    text-align: right;
    font-weight: bold;
}







/* Performances */
.ath-det-perf-header {
    font-weight: bold;
    color: #222C53;
}

.ath-det-perf-yrSep {
    margin-left: 5px;
    margin-right: 5px;
}

.ath-det-perf-yrSelected {
    font-weight: bold;
    color: #D02D26;
}



#athInfoDetail{
    display:none;
}
    #athInfoDetail .copy-wrap {
        width:100%;
        max-height: 300px;
        overflow: auto;
    }
    #athInfoDetail.has-achieve .copy-wrap {
        width: calc(66.67% - 15px);
        max-height: 400px;
    }
    #athInfoDetail.has-achieve .achievements-wrap {
        width: calc(33.33% - 15px);
    }
    #athInfoDetail .ath-det-summ-mdldisplaycont {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0 0 10px 0;
    }
    #athInfoDetail .achievements-wrap .achieve-content {
        padding: 20px 0;
    }


@media only screen and (max-width: 1299px) {
    .ath-det-detail-event-ltst-quick, .ath-det-detail-event-pb-quick {
        width: 100%;
        margin-bottom: revert;
    }

    .ath-det-detail-event-ltsthdr {
        margin-bottom: 0;
    }

    .ath-det-detail-seppbltst-quick {
        display: none;
    }

    .ath-det-detail-event-pbhdr {
        margin: 0;
    }
}

@media only screen and (max-width: 1046px) {
    .ath-header.non-hi {
        height: auto;
    }
}



#mobileBKPerformances .mobile-dd-content, #mobileRankings .mobile-dd-content {
    display: block;
}

#carouselLadderMobile .carousel-control-prev, #carouselLadderMobile .carousel-control-next {
    bottom: 0;
}

#carouselLadderMobile .carousel-indicators {
    margin-bottom: 5px;
}

#mobileRoadHCap .mobile-dd-content {
    display: block;
}

#spnHiPNoPerfs {
    display: block;
    margin: 20px 0 0 0;
}

.first-int a img {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

@media only screen and (max-width: 991px) {
    .ath-det-detail-event-ltst-quick, .ath-det-detail-event-pb-quick{
        width:50%;
    }
    .ath-det-detail-seppbltst-quick{
        display:block;
    }
}

@media only screen and (max-width: 768px) {
    #mobileBKPerformances .mobile-dd-content, #mobileRankings .mobile-dd-content {
        display: none;
    }

    .ath-det-detail-event-ltst-quick, .ath-det-detail-event-pb-quick {
        width: 50%;
        margin-bottom: revert;
    }

    .ath-det-detail-event-ltsthdr {
        margin-bottom: 5px;
    }

    .ath-det-detail-seppbltst-quick {
        display: block;
    }

    .ath-det-detail-event-pbhdr {
        margin: 0 0 5px 0;
    }

    #athDetailPanelRoad {
        margin-right: 0;
    }

    .ath-det-grids-bkp-header, .ath-det-grids-ukrnk-header {
        font-size: 1em;
    }

    .ath-det-grids-bkpCont, .ath-det-grids-ukrnkCont {
        margin-bottom: 0;
    }

    #mobileBKPerformances .mobile-dd-content {
        padding: 0 0 20px 0;
    }

    #mobileRoadHCap .mobile-dd-content {
        display: none;
    }

    .order-wrap span {
        margin-top: 10px;
    }

    .prev-next-wrap a img {
        width: 20px;
    }

    .achieve-content {
        padding: 0;
    }
    .middle-section{
        margin-top:0;
    }
}

@media only screen and (max-width: 576px) {
    .ath-det-grids-pbcol {
        display: inline-block;
        min-width: 60px;
        margin-top: 8px;
    }

    .mobile-ath-header {
        flex-direction: column;
    }

        .mobile-ath-header .header-wrap {
            width: 100%;
            margin-bottom: 4px;
        }

        .mobile-ath-header .profile-ranking {
            width: 100%;
            margin: 0;
        }

    #athDetailPanelRoad, #natLadderPanel {
        padding-bottom: 40px;
    }
    .mobile-dd-content .col-wrap{
        flex-direction:column;
    }
    .mobile-dd-content .col-6 {
        width: 100%;
    }
    .mobile-dd-content .col-6:first-child {
        margin-bottom:20px;
    }
    .mobile-dd-content{
        padding:0;
    }
    .flex-wrap{
        flex-direction:column;
    }
    #athInfoDetail.has-achieve .copy-wrap {
        width: calc(100%);
        max-height: 300px;
        margin-bottom:30px;
    }
    #athInfoDetail.has-achieve .achievements-wrap{
        width:100%;
        max-width:none;
    }
}

