@charset "utf-8";
/*--- live stream widget ---*/
svg { vertical-align:bottom; }

.twdc_eventstreamdiv { display:none !important; }
.bgwoffset { display:none !important; }
.TWDCmapContainer { height:100%; }

.ifouter { height:100%;}
.confetticanvas { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events: none; z-index:2000; }
.donepu { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; font-size: 32px; }
.donepu p { background: #fff; padding: 10px; border-radius: 5px; text-transform: uppercase; color: #fc0; opacity: 0.9; max-width: 80%;
  text-align: center;
  margin: 0 auto;
  font-size: 2rem;}
.twdc_ugdc { padding:20px; }
.inpagemap .twdc_ugdc::before { min-width:200px; }

.temp { color:#444; text-align:center; width:30px; height:30px; border-radius:100%; border:1px solid #fff; }
.temp:before { content:attr(data-t)"\00b0"; position:absolute; width:100%; left:0; top:10px; line-height:10px; z-index:10; padding-bottom: 2px;}

#tempLegend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #7030a2, #3432ff, #c2e0f5, #ffc100, #f79649);
  padding: 5px;
  font-family: sans-serif;
  font-size: 12px;
  color: #000;
  z-index: 9999;
}
.legendvalues::before {
    content:attr(data-min)"°"; position:absolute; left:0; bottom:-3px; font-size:1rem;
}
.legendvalues::after {
    content:attr(data-max)"°"; position:absolute; right:0; bottom:-3px; font-size:1rem;
}


.distanceMarker { 
  margin-left:0 !important;
  padding-top: 8px !important;
}
.tempmarker { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; top:10px; left:30px; margin-left:20px !important;}

.wind { width:30px; height:30px; margin-left:5px; }
.wind:before { background-image:url(https://ultrabritain.com/StravaAPI/Strava-SpineRace/SpineVirtual/IMG/weather/windicon.svg); content:''; position:absolute; top:0; left:0; right:0; bottom:0; }

.cpmarker { height: 100%;
  background-repeat: no-repeat;
  background-position: left;
  border-bottom: 1px solid white; }
.alright { background-position:right; }

.leaflet-div-icon { background: transparent !important; border: 0px !important; outline: none !important; }  
.wspdvalue:after { margin-left:10px; content:attr(data-ws)'kmph'; position:absolute; width:100%; height:100%; z-index:10; text-align:center; line-height:30px; font-weight:bold;}
.vecInPage[data-units='miles'] .wspdvalue:after { content:attr(data-wsmi)'mph'; }
.livestreamheader > div { float:left; width:50%; }

.sideBarMap { box-shadow: 0 1px 2px #ddd; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}

.ac_virtualeventcontainer { height:100%; margin-bottom:20px; box-shadow: 0 1px 10px #ccc; }
.map16x9 { cursor:auto !important; padding-bottom:56.25%;}

.kiliScores { -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0; overflow:hidden; min-width:320px; }
.kiliScores .showhidebtn { display:none; }
.addcalouter { margin-bottom:30px; }
.info { background:#f84; color:#fff; padding:5px; margin-bottom:10px;}
.info:before { content:'\f129'; left:5px; font-size:2rem; color:#f84; background:#fff; border-radius:100%; width:26px; height:26px; text-align:center; margin-right:10px; min-width:26px; max-width:26px;  }
.mapContainer { width:100%; overflow:hidden; }
.canDelete { width:100%; height:100%; }
.canDelete:before { content:'\f1f8'; text-align:center; cursor:pointer; color:#888; transition:all 0.3s;}
.canDelete:hover:before { color:#c40; }

.hasav:before { display:none; }
.ro_mav { min-width:50px; max-width:50px; width: 50px; height:50px; position:absolute; left:5px; top:5px; border-radius:100%; background-position:center; background-size:cover; background-repeat:no-repeat; }

li.eventheader { width:100%; text-align:center;padding:2px !important; }
li.eventheader[data-ev='tsr431km'] { background:#ff6666; }
li.eventheader[data-ev='tsr257km'] { background:#b95f89; }
li.eventheader[data-ev='tsr174km'] { background:#9bbdf9; }
li.eventheader[data-ev='tsr69km'] { background:#c4e0f9; }
li.eventheader[data-ev='tsr43km'] { background:#ccff66; }

li.eventheader:before { display:block;  line-height:1.2rem; font-size:1.2rem; text-transform:uppercase; color:#fff; font-weight:bold; }
li.eventheader[data-ev='tsr431km']:before { content:'Virtual Spine'; }
li.eventheader[data-ev='tsr257km']:before { content:'Virtual Challenger North'; }
li.eventheader[data-ev='tsr174km']:before { content:'Virtual Challenger South'; }
li.eventheader[data-ev='tsr69km']:before { content:'Virtual Sprint'; }
li.eventheader[data-ev='tsr43km']:before { content:'Virtual Dash'; }

.daypicked { background:#4cf; color:#fff; }
.addactCalDay[data-day] { cursor:pointer; }
.invalidday { opacity:0.5; background:#eee; cursor:auto !important;}
.unitsSelected { color:#fff !important; }
.addActIB { margin:0 0 30px 0; }
.addactCalDay { font-family:Montserrat, arial, sans-serif; -webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0; min-height:40px; text-align:center; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; transition:all 0.3s; }
.addactCalDay:last-child { border-right:1px dotted #ccc; }
.actDistance { width:100%; font-size:2rem; padding:0 5px;}
.actDate, .actSource, .actDel { width:100px; min-width:100px; max-width:100px; padding:0 5px;}
.actheader { background:#ccc; color:#fff; }
.actLI { border-bottom:1px dotted #dda; }
.actLI:last-child { border-bottom:none; }
.uploadBox { color:#888; font-size:1.4rem; line-height:2.8rem; padding:10px; }
.vecInPage { margin-bottom:0 !important; }
.onmapcopy { padding:20px; }
.viewperformance { margin:0 5px; z-index:4000; min-height:46px; text-transform: uppercase; background: #4cf; color: #fff; font-size: 2rem; }
.viewperformance.stuck-fixed { right:0%; z-index:6999;}

.distanceMarker {
  border: none;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: normal !important;
  line-height: 14px !important;
  background: none !important;
  color: #333 !important;
  top: 14px;
  left: 1px;
}
.leaflet-tooltip-right::before { display:none !important;}
.leaflet-tooltip-left::before { display:none !important;}

.vab.stuck-fixed { right:0%; z-index:6999; width:100% !important; left:0; padding:5px; background:#fff; box-shadow:0 1px 2px #ccc; }
.vab.stuck-fixed button { float:right;  }
.recordedActivities:empty:before { content:'no activities logged to date'; line-height:60px; margin-bottom:10px; }
.recordedActivities.loading:before { content:'retrieving your activities..'; }
.fourfourfour { color:#444; }

.namesearch { background:#f4f4f4; max-height:50px; min-height:50px; height:50px; width:100%; padding:5px 5px 5px 50px;}
.namesearch:before { content:'\f002'; font-size: 20px; color: #888; display: block; position: absolute; left: 18px; line-height: 38px;}
.namesearch input { margin:0; }
.clearsearch { width:40px; cursor:pointer;}
.clearsearch:before { content:'\f1f8'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showfavs, .showimages { width:40px; cursor:pointer; }
.showfavs:before, .showimages:before { content:'\f06e'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showimages:before { content:'\f030'; }
.showfavs.lit:before, .showimages.lit:before { color:#4cf; }

.doublecontainer { display:grid; grid-template-columns : 1fr 1fr; }
.pacerButton { cursor: pointer;
  background-repeat: no-repeat;
  background-size: 30px;
  background-image: url(https://storage.googleapis.com/ub_event_images/whiterabbit.png);
  background-position: 95% 5px; }
.pacerButton[data-pacer='Y'] { background-color:#0a0; font-size:1.4rem; color:#fff; }
.pacerButton[data-pacer='N'] { background-color:#f40; font-size:1.4rem; color:#fff; background-position:5px 5px;  }
.pacerButton[data-pacer='Y']:before { content: 'PACER ON'; }
.pacerButton[data-pacer='N']:before { content: 'PACER OFF'; }

.savedstairs { margin-right:5px; }
.newstairs { margin-left:5px; padding-left:10px; border-left:1px dotted #ccc; }
.newstairs:hover { opacity:1; }
.stairsouter { padding:10px; background:#f8f8f8; margin-bottom:10px;}

.TWDCCalSingleContainer { width:200%; }
.trLeft50 { transform: translateX(-50%); }
.trRight50 { transform: translateX(50%); }
.TWDCCalSingleContainer { width:200%; }
.TWDCcalSelOuterSingle { padding:0 !important; height:255px !important; box-shadow:0 1px 2px #ddd; background:#f8f8f8; }
.enddatefill:before, .datefill:before { content:'*pick start date*'; color:#c40; }
.enddatefill[data-date]:before { content:attr(data-date); color:#885; }
.datefill[data-dstart]:before { content:''; }
.TWDCweekday { background: #fff; border-right: 3px solid #f8f8f8;}
.TWDCrangeLit { background: #F60 !important; }
.mileagetable { z-index:10; width:100%; bottom:0; overflow:auto; background:#fff; scrollbar-width: none;}

.kilimileagetable { position:absolute; /*height:100%;*/ z-index:10; left:0; top:48px; width:calc(100% + 20px); overflow:auto; bottom:0; background:#fff;}
.kilimileagetable .bigNumber { font-size:26px !important; line-height:30px !important; }
.bigNumber[data-co]{ font-size:16px; }

.bigNumber:before { content:attr(data-km); font-size:34px; line-height:50px; text-align:right;}
.bigNumber:after { content:"km"; font-size:18px; line-height:50px; text-align:right;}
.mileagetable[data-units='miles'] .bigNumber:before { content:attr(data-m);}
.mileagetable[data-units='miles'] .bigNumber:after { content:"mi"; }

.completedroute:after { content:attr(data-d); position:absolute; bottom:2px; right: 17px; }
.resultOuter { transition:all 0.3s; }
.resultOuter:hover { background:#eee; }
.resultOuter[data-strava]:after { white-space: pre; display:block; position:absolute; bottom:0; font-size:12px; color:#bb8; content:"Strava:"attr(data-strava)"\aLast Refreshed:"attr(data-lu); }
.resultOuter[data-strava] { padding-bottom:36px; }
.showhide { opacity:0; position:absolute; right:0; top:0; width:0; height:0; }
#twdc_ac_showtable + label { margin:0; z-index:11; background:#4cf; color:#fff; width:30%; height:30px; line-height:30px; text-align:center; text-transform:uppercase; font-size:2rem;}
.kiliScores #twdc_ac_showtable + label { width:100%; display:none; }
.hidename { display:none !important; }
#twdc_ac_showtable + label:before { box-shadow:none !important; display:block; content:'show table'; }
#twdc_ac_showtable:checked + label:before { content:'hide table'; }
#twdc_ac_showtable ~ ul { /*height:calc(100% - 48px);*/ opacity:1;}

.TWDCleafletMapContainer  { position:absolute; top:0; left:0; right:0; bottom:0; }
/*.mapContainer.showrtr .rtrmapcontainer
.mapContainer.showvs .vsmapcontainer*/
.mapchoicelabel { position:absolute; left:6px; top:70px; z-index:5500;height:70px; background:url(https://storage.googleapis.com/ub_site_images/mapicon.png) no-repeat 5px 5px; width:167px !important;  }
li[data-l]:before { content:''; width:50px; height:50px; top:50%; margin-top:-25px; left:5px; position:absolute; background-position:center; background-repeat:no-repeat; background-size:contain;}

.resultOuter::before { border-radius: 100%;}

li[data-l='431km']:before { border: 3px solid #dd4444; background-image: url("https://storage.googleapis.com/ub_event_images/rtrrunnerSpine.png");}
li[data-l='257km']:before { border: 3px solid #993f69; background-image: url("https://storage.googleapis.com/ub_event_images/rtrrunnerChallenger.png");}
li[data-l='174km']:before { border: 3px solid #6b9dd9; background-image: url("https://storage.googleapis.com/ub_event_images/vsrunnerChallengerNorth.png");}
li[data-l='69km']:before { border: 3px solid #a4b0d9; background-image: url("https://storage.googleapis.com/ub_event_images/vsrunnerSprint.png");}
li[data-l='43km']:before { border: 3px solid #aadd44; background-image: url("https://storage.googleapis.com/ub_event_images/vsrunnerDash.png");}

.mcsouth, [data-goal='173772'] { border:3px solid #6b9dd9; border-radius:100%; }
.mcnorth, [data-goal='257440'] { border:3px solid #993f69; border-radius:100%;}
.mspine, [data-goal='431210'] { border:3px solid #dd4444; border-radius:100%;}
.msprint, [data-goal='69187'] { border:3px solid #a4b0d9; border-radius:100%;}
.mdash, [data-goal='43121'] { border:3px solid #aadd44; border-radius:100%;}

.mad { width: 40px;
  height: 40px;
  border-radius: 100%;
  background-position: center;
  background-size: contain;}


#switchmap:not(:checked) ~ .rtrmapcontainer { z-index:10; opacity: 1;}
#switchmap:not(:checked) ~ .vsmapcontainer { z-index:5; opacity:0; }
#switchmap:checked ~ .rtrmapcontainer { z-index:5; opacity:0; }
#switchmap:checked ~ .vsmapcontainer { z-index:10; opacity: 1; }
.rtrmapcontainer, .vsmapcontainer { transition:opacity 0.5s; }
#unitchoice_km + label { color:#fff; margin:0; padding:6px 5px; text-align:center; left:0; width:100%; background:#bb8; }
#unitchoice_km + label:before { box-shadow:none !important; content:'SWITCH TO MILES'; display:inherit; }
#unitchoice_km:checked + label:before { box-shadow:none !important; content:'SWITCH TO KILOMETRES'; display:inherit; }
.leaflet-top { top: 150px !important; }
#switchmap + label:after { content:"Switch to Virtual Spine"; min-width:140px; text-align:left; color:#444; background: transparent !important; margin-left: 75px; text-transform: uppercase; font-family: montserrat; width:75px !important; text-shadow:0 1px 2px #fff; }
#switchmap:checked + label:after { content:"Switch to Race the Racers"; }

.setfav { position:absolute; right:5px; width:35px; height:100%; bottom:0px; z-index:4000;}
.setfav:before { font-size:2rem; position: absolute; bottom: 0; left: 7px; }
.setfav:before { content:'\f06e'; color:#ccc; }
.fav .setfav:before { content:'\f06e'; color:#4cf; }
.viewImages { position:absolute; right:5px; width:35px; height:40px; top:0; z-index:4500; }
.viewImages:before { content:'\f030'; color:#4cf; cursor:pointer; font-size:2.1rem; position:absolute; top:5px; left:6px; }
.map16x9 { -webkit-box-flex:3;-ms-flex:3 1 0px;flex:3 1 0; }
#twdc_ac_showtable:checked ~ ul { /*height:calc(100% - 78px);*/ opacity:1; }
#twdc_ac_showtable:checked ~ .namesearch { opacity:1; }
/*#twdc_ac_showtable:checked ~ .mileagetable { height:calc(100% - 78px);  }*/
.mileagetable:empty:before { content:'results refreshing..'; padding:20px 10px; font-size:1.4rem;}
.milesWrapper { overflow:auto; }
.adventureWrapper { padding:20px 20px 40px 20px; }
.progressHeadline { font-size:3rem; line-height:3.2rem; font-family:bebas neue; margin-top:20px; color:#4cf;}
.timeline:empty:before { content:'no story updates posted so far'; }

.vecInPageEmbed {
  width:100%;
}

/*photo story*/
.twdc_bigname { color:#fff; font-size: 3rem; line-height: 5rem; text-shadow: 0 1px 2px #aaa; text-align: left; }
.deletePost { position:absolute; cursor:pointer; top:10px; z-index:2010; left:5px; text-align:center; width:26px; height:26px; background:#fff; opacity:0.9; font-size:2rem; display:block;}
.deletePost:before { display:block; content:'\f1f8'; line-height:26px; color:#888; }
.deletePost:hover { opacity:1; background:#f8f8f8; }
.streamElement { /*! margin:10px; */ padding:15px; border-radius:10px; background-color: #f8f8f8; height: 100%;}
.streamElement:hover { background-color:#eee; }
.streamElement_Image { border: 1px solid #f5f7f6; padding: 1.5rem; transition: transform 0.3s ease-in-out; border-radius: 8px; background-color: #fff; box-shadow: 0px 0.5px 0.6px hsl(0deg 0% 61% / 0.3), 0px 1.5px 1.7px -0.9px hsl(0deg 0% 61% / 0.3), 0px 3.9px 4.3px -1.8px hsl(0deg 0% 61% / 0.29), -0.1px 9.4px 10.4px -2.7px hsl(0deg 0% 61% / 0.28);
height:100%; width:300px;
}
.likeheart { left: 8px !important; bottom: -3px !important; top: initial !important; font-size:2.8rem !important;}
.likeheart:before { font-size:2.8rem !important; }
.likeheart:after { top: 0px !important; left: 30px !important; line-height: 2rem !important; font-size: 2rem !important;}
.storycalouter { max-width: 500px; margin: 0 auto; padding: 5px;}
.streamElement_Image .imgbg { background-size:contain; width:280px; height:100%; /*! position:absolute; */ /*! top:10px; */ /*! left:10px; */ background-repeat: no-repeat; background-position: center; }
.imgbg img { max-height:100%; /*! height: 100%; */}
.streamElement_ImageOuter, .streamElement_CommentOuter { height:50%; width:300px; }
.streamDivider { min-height:40px; max-height:40px; height:40px; margin:0 -20px; }
.streamElement_CommentOuter { justify-content: flex-end; padding: 0 0 20px 0; }
.streamElement_ImageOuter { justify-content: flex-start; padding:0 20px 0 0; }
.dividerTimeline { height:3px; background:#ccc; width:100%; margin-top: 18px; position: absolute;}
.timeline { overflow:auto; }
.streamElement_Comment { height:100%; }
.streamElement_Comment span { max-height:75%; overflow:auto; }
.streamElement_Comment span:before { content:'\f10d'; color:#dda; font-size:1.4rem; margin: -2px 0 0 -16px; position:absolute; }
.streamElement_Comment span:after { content: '\f10e'; color: #dda; font-size: 1.4rem; margin: 4px 0 0 5px; position: absolute; }
.streamElement_CommentOuter:before { content:attr(data-date); font-size: 1.8rem; color: #f94;}
.deleteFromStream { color:#888; z-index:200; position: absolute; right: 10px; top: 10px; width: 24px; height: 24px; text-align: center; line-height: 24px; cursor:pointer; }
.deleteFromStream:hover { color:#f40; }
.deleteFromStream:before { content:'\f1f8'; }
.storyul { flex:1; display: flex;flex-direction: column;height: 100%;padding-bottom: 10px;}
.storyul > li { position:absolute; left:0; right:0; bottom:0; top:-20px; opacity:0; z-index:1; }
.timeline { min-height:200px; height: 100%;gap: 10px;}
.panelBoxContainer { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; padding: 0 40px; margin-bottom:10px; }
.panelBox { height:100%; }
ul[data-what='timeline'] li[data-what='timeline'] { top:0; opacity:1; z-index:10; }
ul[data-what='calendar'] li[data-what='calendar'] { top:0; opacity:1; z-index:10; }
ul[data-what='upload'] li[data-what='upload'] { top:0; opacity:1; z-index:10; }
.panels {background: #f8f8f8; padding: 10px; min-width:320px; margin: 0 auto; height:100%;}
.twdcPopUp { height:auto !important;height:90dhv !important; max-height:100dvh !important; align-items:normal !important; }
.fullHeight { left: 50%;
  top: 50%;
  transform:translate(-50% -50%); margin:40px 0 !important; height:auto !important; }
#commentbox { width:100% ; font-size:1.8rem; padding:10px !important;}
#imgselpanel {width:100%; }
#imgselpanel .previewimage { margin-bottom:20px; background:#fff; height:100%; border: 1px dashed #aaa; border-radius: 5px; }
#imgselpanel.hasImage .previewimage { border: none 0 !important; }
.hasImage { border:0 none !important; }
.hasImage .storyImgUpl_btn { display:none; }
.previewimage img { box-shadow: 0px 0.5px 0.6px hsl(0deg 0% 61% / 36%), 0px 1.7px 1.9px -0.8px hsl(0deg 0% 61% / 36%), 0px 4.3px 4.8px -1.7px hsl(0deg 0% 61% / 36%), -0.1px 10.5px 11.8px -2.5px hsl(0deg 0% 61% / 36%); max-height:100%;}
.removeImg { position:absolute; top:10px; right:10px; padding:2px 5px; cursor:pointer; z-index:100; color:#fff; background:#4cf; text-transform:uppercase; }
.removeImg:before { content:'\f1f8 \A remove image'; }
.storyImage { position:absolute; max-width:100%; max-height:100%; }
.inputfile + label::before {
  content: '\f093 \A add a photo';
}

.map16x9 { -webkit-box-flex:3;-ms-flex:3 1 0px;flex:3 1 0; }
#twdc_ac_showtable:checked ~ ul { /*height:calc(100% - 78px);*/ opacity:1; }
#twdc_ac_showtable:checked ~ .namesearch { opacity:1; }
/*#twdc_ac_showtable:checked ~ .mileagetable { height:calc(100% - 78px);  }*/
.mileagetable:empty:before { content:'results refreshing..'; padding:20px 10px; font-size:1.4rem;}

li.completedroute[data-l='431km'] { background:#ff6666; color:#fff;  }
li.completedroute[data-l='257km'] { background:#b95f89; color:#fff;  }
li.completedroute[data-l='174km'] { background:#9bbdf9; color:#fff; }
li.completedroute[data-l='69km'] { background:#c4e0f9; color:#fff; }
li.completedroute[data-l='43km'] { background:#ccff66; color:#fff; }

.completedroute:before { position:absolute; width:70px; height:60px; right:0; font-size:36px; text-align:center; content:'\f11e'; color:#fff; text-shadow: 0 1px 2px #522; opacity:0.9; line-height: 60px; }

.warning { margin-top:0 !important; font-size:12px; padding: 2px 5px; display: inline; text-transform: uppercase; color:#f40; ; border-radius: 3px; }
.bigNumber { font-size:34px; line-height:50px; text-align:right;}
.warning:before { color:#f40; content:'\f071'; margin-right:10px; z-index:10;}
.mileagetable li, .kilimileagetable li { border-bottom:1px dotted #ddd; -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between; color:#888; padding:5px 60px 5px 60px; background:#f8f8f8;}
.kilimileagetable li { padding:8px 60px 8px 10px; }
.resultName { text-align:left;}
.mileagetable li:last-child, .kilimileagetable li:last-child { border-bottom:none; }
.kilimileagetable li:before {  border-radius:100%; line-height:30px; font-size:18px; font-weight:bold; text-align:center; content:attr(data-camp); width:30px; height:30px; position: absolute; right: 10px; color: #fff;}

.twdc_eventLiveStream { column-count:7; margin: 10px 0; padding: 0; moz-column-gap: 10px; -webkit-column-gap: 10px; column-gap: 10px; }
.twdc_sustnImage { background:#f8f8f8; padding:10px; box-shadow:0 1px 2px #ddd; margin-bottom:5px; }
.feed_imgclicktrap { position:absolute; top:0; left:0; right:0; bottom:0; cursor:pointer; z-index:100;}
.feed_imgclicktrap:before { content:'\f004'; transition:all 0.3s; color:#F30; font-size:6rem; line-height:6rem; text-shadow: 0 1px 2px #333; transform:translateY(-50px); opacity:0; }
.curated:before { transform:translateY(0); opacity:1; }

.matchedEntrants:empty:before { content:'no-one matched'; }
.matchedEntrants { padding:10px 0;  }
.matchedEntrants li { background:#eeb; cursor:pointer; font-weight:bold; border:1px dotted #ccc; width:200px; padding:5px; margin:0 5px 5px 0;}
.matchedEntrants li:after { font-weight:normal; margin-top:10px; display:block; content:"UltraBritain ID:"attr(data-id)"\A Event Entry ID:"attr(data-reid); }
.matchedEntrants li:hover { background:#dda; color:#fff; }

@keyframes pulsebg {
  from { fill: #fff;}
  to { fill:#91c453;}
}

.event_progress { z-index:111; font-family: Montserrat; color:#888; font-weight:bold; }
.event_progress .fx1 { text-align:center; }
.livestreamheader { overflow:hidden;z-index:3000; background:#f8f8f8; padding:10px; }

.ripple {
  background-color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  position:absolute;
  left:50%;
  top:50%;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation:inherit;
  animation-delay:1s;
}
.ripple::after {
  animation-delay:2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 16rem rgba(255,255,255, 0);
  }
}

@media only screen and (max-width: 800px) {
	.event_progress { font-size: 1.2rem; line-height: 1.4rem; }
	.kiliScores { max-height:30px; position:absolute; top:0; left:0; bottom:0; width:100%; z-index:2000; }
	.showtabs { bottom : 0 !important;}
	.bigNumber { font-size:2.6rem !important; }
	.mileagetable { background:rgb(255,255,255,0.8); }
	.kiliScores #twdc_ac_showtable + label { width:100%; display:block; }
	#twdc_ac_showtable ~ ul { opacity:0; }
	#twdc_ac_showtable ~ .namesearch { opacity:0; }
  .map16x9 { padding-bottom:100% !important; }
  .tableopen { position:fixed; top:0; left:0; bottom: 0; width:320px; z-index:6000; max-height:100vh !important; }
  .panelBoxContainer { flex: 1; display: flex; flex-direction:column; padding: 0 20px; margin-bottom:0 !important; }
  .panelBoxContainer #commentbox { max-height:50px; height:auto; }
  .panelBoxContainer .panelBox { flex:1; }
  .panelBoxContainer .panelBox:first-child { flex:2; }
  .info { font-size:1rem; margin-bottom:0;}
}

@media only screen and (max-width: 479px) {
	.event_progress { font-size: 1.4rem; line-height: 1.6rem; }
	.onmapcopy { padding:0 !important; }
  .livestreamheader > div { width:100%; }
  .livestreamheader { flex-direction:column; }
  .viewperformance { font-size: 1.2rem !important; padding: 8px !important; }
  .odometer { font-size:4rem !important;}
  .inpagemap .twdc_ugdc:before { min-width: 105px !important; top:-5px; }
}