@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; }
.twdc_ugdc { padding:20px; }
..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; }

li.eventheader { width:100%; text-align:center;padding:2px !important; }
li.eventheader[data-ev='rtr435km'] { background:#ff6666; }
li.eventheader[data-ev='rtr174km'] { background:#b95f89; }
li.eventheader[data-ev='tsr431km'] { background:#2ec0f9; }
li.eventheader[data-ev='tsr257km'] { background:#67aaf9; }
li.eventheader[data-ev='tsr174km'] { background:#9bbdf9; }
li.eventheader[data-ev='tsr69km'] { background:#c4e0f9; }
li.eventheader[data-ev='tsr43km'] { background:#ccff66; }
li.eventheader[data-ev='rtr43km'] { background:#bcef56; }
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='rtr435km']:before { content:'Race the Racers - Spine'; }
li.eventheader[data-ev='rtr174km']:before { content:'Race the Racers - Challenger'; }
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'; }
li.eventheader[data-ev='rtr43km']:before { content:'Dash in a Day'; }

.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; min-height:170px; }

.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 { width:40px; cursor:pointer; }
.showfavs:before { content:'\f06e'; display: block; font-size: 20px; color: #888; line-height: 38px; text-align: center;}
.showfavs.lit:before { color:#4cf; }

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

//calendar adjustments
.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;}
#unitchoice_km:checked + label + .mileagetable .bigNumber:before { content:attr(data-m);}
#unitchoice_km:checked + label + .mileagetable .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;  }

.rtrmapcontainer, .vsmapcontainer { transition:opacity 0.5s; }
#unitchoice_km + label { color:#fff; margin:0; padding:6px 5px; text-align:center; left:0; width:100%; background:#dda; }
#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; ext-shadow:0 1px 2px #fff; }
#switchmap:checked + label:after { content:"Switch to Race the Racers"; }

.setfav { position:absolute; left: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; }

.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[data-l='435km'] { border-left:8px solid #2ec0f9; }
li[data-l='257km'] { border-left:8px solid #67aaf9; }
li[data-l='174km'] { border-left:8px solid #9bbdf9; }
li[data-l='69km'] { border-left:8px solid #c4e0f9; }
li[data-l='43km'] { border-left:8px solid #ccff66; }
li[data-l='415km'][data-ev='rtr'] { border-left:8px solid #ff6666; }
li[data-l='174km'][data-ev='rtr'] { border-left:8px solid #b95f89; }

li.completedroute[data-l='431km'] { background:#2ec0f9; color:#fff;  }
li.completedroute[data-l='257km'] { background:#67aaf9; 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; }
li.completedroute[data-l='415km'][data-ev='rtr'] { background:#ff6666; color:#fff; }
li.completedroute[data-l='174km'][data-ev='rtr'] { background:#b95f89; 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 10px; 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 { background:#f8f8f8; 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 { position:absolute; top:0; left:0; bottom:0; width:320px; 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; }
}

@media only screen and (max-width: 479px) {
	.event_progress { font-size: 1.4rem; line-height: 1.6rem; }
	.viewperformance.stuck-fixed { width:100% !important; }
	.onmapcopy { padding:0 !important; }
  .livestreamheader > div { width:100%; }
  .livestreamheader { flex-direction:column; }
  .kiliScores { max-height:30px; }
  .tableopen { position:fixed; top:0; left:0; bottom: 0; width:320px; z-index:20000; max-height:100vh !important; }
}