html,body{
    overflow-y:hidden;
}
#traceNom{
    font-variant: small-caps;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
}
.sportIcon{
    max-height:2.5em;
}
#logoTrace{
    display:block;
    margin:auto;
    max-width: 75%;
    max-height: 20em;
}
#logoTraceMap{
    display:block;
    margin:auto;
    max-width: 90%;
}
.staticMap{
    border-radius:.75em;
}
.credit {
    text-align: center;
    font-size: .5em;
  }
.officiel{
    background-color:#dc3545;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.realise{
    background-color:#4e4e4e;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.reco{
    background-color:#d5a9e6;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.teste{
    background-color:#198754;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.itra{
    background-color:rgb(108, 156, 56);
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.ffa{
    background-color:#0e2267;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.repli{
    background-color: #e09d97;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.univerttrail{
    background-color:#0ad1d4;
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
.espacetrail{
    background-color:rgb(231, 187, 74);
    text-align:center;
    font-weight:bold;
    padding-left:2em;
    padding-right:2em;
}
#traceDescription{
    font-size:.8em;
}


#traceLocalite{
    text-align: center;
    font-size: .9em;
}
#imgAvatar {
    display: block;
    margin: 1em auto 0 auto;
    width: 4em;
    height: 4em;
    border-radius: 50%;
}
#auteurTrace{
    font-size: .7em;
    text-align: center;;
}
.actionUser {
    font-size: .7em;
    font-weight: bold;
    cursor:pointer;
}
#testTrace{
    text-align:center;
    font-size:.8em;
}
#datecompetTrace{
    text-align:center;
    font-size:.8em;
}
#siteweb{
    font-size:.8em;
}
#imgItra{
    max-height:1.6em;
}
.traceLike,.traceChrono{
    top: 15%;
    right: 10%;
    font-size: .5em;
}
.traceDownloads{
    top: 15%;
    right: 10%;
    font-size: .5em;
}  

/* TABLE DES PASSAGES  */
.timeline  {
    width: 100%;
    display: flex;
    padding-top:1em;
}
.timeline .lines {
    margin-left: 10px;
    margin-top: 6px;
    transform: translateY(20px);
}
/* .timeline .lines .dot {
    width: 14px;
    height: 14px;
    background: #D1D6E6;
    border-radius: 7px;
} */
.timeline .lines .line {
    height: 105.5px;
    width: 2px;
    background: #D1D6E6;
    margin-left: 14px;
}
.timeline .lines .lineSize6 {
    height: 115px;
   
}
.timeline .lines .lineSize5 {
    height: 107px;
   
}
.timeline .lines .lineSize4 {
    height: 105.3px;
   
}
.timeline .lines .lineSize3 {
    height: 98px;
   
}
.timeline .lines .lineSize2 {
    height: 85px;
   
}
.timeline .lines .lineSize1 {
    height: 72px;
   
}
.timeline .lines .lineSize0 {
    height: 65px;
   
}
.timeline .cards {
    margin-left: 6px;
    /* transform: translateY(-35px); */
    width: calc(100% - 50px);
}
.timeline .cards .cardTm {
    width: calc(100% - 10px);
    padding: .2em;
    background: #FFFFFF;
    box-shadow: 4px 5px 8px #b6b4b4;
    border-radius: 5px;
    border-top: solid 4px var(--color);
    margin-bottom: 15px;
    cursor: pointer;
}
.timeline .cards .cardTmSize3 {
    height: 100px;
}
.timeline .cards .cardTmSize2 {
    height: 85px;
}
.timeline .cards .cardTmSize1 {
    height: 65px;
}
.timeline .cards .cardTmSize0 {
    height: 45px;
}

.labelPassage {
    color: #7A7A7A;
    font-size: .6em;
    line-height: 1.1em;
}
.titrePassage{
    font-size: .8em;
    text-align: center;
    font-weight: bold;
    line-height: 2em;
    overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titrePassageSmall{
    line-height: .9em !important;
}
.descPassage {
    font-size: .7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* line-height: 1em; */
    text-align:center;
}
.valPassage {
    font-size: .8em;
}
#helpPassages{
    text-align:center;
    color:#4E4E4E;
    font-size:.6em;
}
.timeline .cards .cardInt{
    width:220px;
    height: 25px;
    background-color:#EAEAEA;
    margin-bottom: 10px;
    border-radius:10px;
    font-size: .8em;
    padding: .2em .5em .2em .5em;
}
.imgPi{
    width: 1.4em;
    margin-top: .15em;
}
.iconPi{
    border-radius: 50%;
    width: 1.85em;
    height: 1.85em;
    text-align: center;
    color: white;
    font-family: Arial;
}
.textPi{
    line-height: 1.85em;
}
.dot {
    width: 29px;
    height: 29px;
    background: #D1D6E6;
    border-radius: 14.5px;
    border: solid white 5px;
}
#tools,#traceDescription{
    margin: auto;
    margin-top: auto;
    background-color: #EBEBEB;
    border-radius: .75em;
    margin: 1em 1em;
}
#tools{
    cursor:pointer;
}
.toolIcon {
    text-align: center;
    font-size: 1.2em;
    margin-top: .5em;
}
.toolLabel {
    text-align: center;
    font-size: .7em;
}
.toolsRow{
    width:100%;
    margin:auto;
}
.toolTrace,.toolTrace:visited{
    position: relative;
    color:rgb(48, 50, 61) !important;
    text-decoration:none;
    display:block;
}
.toolTrace:hover{
    background-color:#d8d3d3;
    border-radius: .75em;
    text-decoration:none;
}
.titreTrace{
    text-align: center;
    font-weight: bold;
    font-size:.8em;
}
.bg-wt0 {
    background-color: rgb(244, 130, 244);
}
.bg-wt1 {
    background-color: rgb(255,165,0);
}
.bg-wt2 {
    background-color: rgb(78, 78, 78);
}
.bg-wt3 {
    background-color: rgb(163, 160, 160);
}
.bg-wt4 {
    background-color: rgb(185, 95, 57);
}
.bg-wt5 {
    background-color: rgb(160, 157, 13);
}
.bg-wt6 {
    background-color: rgb(212, 208, 26);
}
.bg-wt7 {
    background-color: rgb(20, 81, 137);
}
.bg-wt8 {
    background-color: rgb(45, 119, 12);
}
.bg-wt9 {
    background-color: rgb(160, 39, 39);
}
.bg-wt10 {
    background-color: rgb(255,192,203);
}

#showTerrainStyle {
    width: 2em;
    display: inline-block;
    cursor: pointer;
  }
#bandeauOfficiel>img{
    max-width: 8em;
}
#labelsPi{
    font-size:0;
}
.labelPi {
    font-size: 10px;
    background-color: #4E4E4E;
    color: #fff;
    padding: 0 .25em;
    border-radius: .25em;
    margin-bottom: .1em;
    display:inline-block;
}
.labelBhDepart{
    background-color: #66c547 !important;
}
.labelBh{
    background-color: #dc3545 !important;
}
.labelBenevoles{
    background-color: #0b4ea2 !important;
}
.infosBen {
    font-size: .8em;
    padding-left: 1em;
}
#traceDescriptionContent.truncated{
    max-height:7.5em;
    overflow:hidden;
}
#traceDescriptionMore{
    text-align:center;
}
#traceDescriptionMore {
    text-align: center;
    font-size: .8em;
    color: #4E4E4E;
    font-weight: bold;
    cursor: pointer;
}
.truncatedNovisible{
    display: none;
}
#blocDetails{
    margin: 1em 1em;
}
.detailLabel{
    font-size:.55em;
    color:#7a7a7a;
}
.detailValue{
    font-size:.8em;
}
.imgSmiley {
    max-height: 1.25em;
    display: inline;
    margin-right:.1em;
}
#modalAvis{
    font-size:.9em;
}
.labelTrace{
    font-weight: bold;
    font-size: .75em;
    position: relative;
}
.note {
    color: rgb(255, 218, 68);
}
.detailRea{
    display: inline-block;
    vertical-align: top;
    font-size: .7em;
    padding-left: .5em;
}
.imgAvatar{
    display: inline-block;
    height: 3.5em;
    width: 3.5em;
    border-radius: 50%;
}
.reaDescription{
    background-color: #EBEBEB;
    padding: .5em;
    font-size: .8em;
    border-radius: .75em;
}
.blocRea{
    border-bottom: solid;
    border-bottom-color: currentcolor;
    border-bottom-width: medium;
    padding-bottom: .5em;
    border-width: .5px;
    border-color: #ebebeb;
}
.creationRea{
    margin-left: 1em;
    font-size: .7em;
}
#btnOwner{
    width: 2em;
    height: 2em;
    float: right;
    background-color: #e9e9e9;
    border-radius: 50%;
    text-align: center;
    color:#4E4E4E;
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
#btnOwner:hover{
 
    background-color: #CACACA;
}
#btnOwner::after{
    display: none;
}
#btnOwner>i{
    line-height: 2em;
}
.titreModal{
    font-size: 1.1em;
    color: var(--color);
}
.actionDownload{
    color:var(--color);
    cursor: pointer;
}