@charset "UTF-8";
/* CSS Document */

@-ms-viewport {
	width: device-width;
}

* { -webkit-text-size-adjust: none; margin: 0; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-family: "Racing Sans One", Arial, Helvetica, sans-serif; }

*:after, *:before { font-family:'fontawesome', Roboto, arial, sans serif; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
* { position:relative; }

button { border:0 none; background-color:transparent; }
body {
	color:#484848; width: 100%; margin:0; overflow-x: hidden; font-size:1.4rem;
 /* background: rgb(237,174,42);
  background: radial-gradient(circle, rgba(237,174,42,1) 0%, rgba(253,141,45,1) 100%); */
  background: rgb(255,220,36);
  background: radial-gradient(circle, rgba(255,220,36,1) 0%, rgba(255,165,5,1) 100%); 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  height: 100vh; /* old browsers */  
  height: 100dvh; /* new browsers */ 
  transition:background 0.3s;   
}

body[data-frame='leaderboardfilter'] {
  background: url("../IMG/EventLogos/UCClubLogoFade1000.png"), 
  radial-gradient(circle, rgba(33,64,255,1) 0%, rgba(3,34,255,1) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center;

}
body[data-frame='leaderboard'], body[data-frame='myaccount'], body[data-frame='linkexpired'], body[data-frame='404'] {
  background: url("../IMG/EventLogos/UCClubLogoFade1000.png"), 
  radial-gradient(circle, rgba(255,220,36,1) 0%, rgba(255,165,5,1) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

H3 { font-size: 2rem;
  color: #fff;
  letter-spacing: 1px;
  font-weight: normal; margin: 12px 0 5px 0; }
H2 { font-size:4rem; line-height: 6rem; color:#fff; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);}
ul { list-style: none;  padding: 0; margin: 0; }
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

label { color: #fff;
  font-size: 2.2rem; 
  display: flex;
  align-items: center;}
.black { color:#333 !important; }

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
	height: 100vh; /* old browsers */  
  height: 100dvh; /* new browsers */
	font-size:62.5%;
}

a {
	text-decoration: none;
	color: inherit;
 	outline: none;
	transition: color 0.5s ease;
}

img { max-width:100%; }
a img { cursor:pointer; }

p  {
	margin-bottom: 20px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #e9967a; font-size:1.2rem; font-family:Roboto, sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #e9967a; font-size:1.4rem; font-family:Roboto, sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #e9967a; font-size:1.4rem; font-family:Roboto, sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  color: #e9967a; font-size:1.4rem; font-family:Roboto, sans-serif;
}

/*-----------------------------gallery page --------------------------------*/
#msgcontent { margin:20px 0; font-size:2rem; font-family:Lato, sans-serif; }
#msgcontent p {font-family:Lato, sans-serif !important; }
.galleryList { width:30%; min-width:150px; float:left; }
.galleryName { color:#666; font-size:1.6rem; margin:5px 0; cursor:pointer;}
#twdctp { float:left; margin-left:10px; width:60%; }
.galleryimagelist { display:none; }
.TWDCthumbnail { width:120px; cursor:pointer; height:120px; float:left; margin:5px; transition:opacity 0.4s;  }
.TWDCthumbnail IMG:hover { box-shadow:0 0 2px #ccc; }
.hidden { display:none; }
.trans { opacity:0; }
.trans IMG { opacity:0; }
.imgclicktrap { z-index:2000; position:absolute; top:0; left:0; right:0; bottom:0; }
.clicktrap, .groupclicktrap, .grpclicktrap { cursor:pointer; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:3000; }
.isGallery .imgclicktrap { cursor:pointer; }
.TWDCloading { background:url(https://storage.googleapis.com/ub_site_images/waitcursor.gif) no-repeat center center;}
#twdcFullImage { opacity:0; transition:opacity 0.3s; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index:7500;}
#twdcCentredImage { position:absolute; top:0; left: 0; width:100%; height:100%; transition:all 0.3s;
 display:flex;
-webkit-box-orient:horizontal; -webkit-box-direction:row; -ms-flex-direction:row; flex-direction:row;
 -ms-flex-align:center; align-items:center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#twdcCentredImage IMG { max-height:100%; max-width:100%; }
.twdcnext, .twdcprevious { vertical-align:middle; z-index:100; transition:all 0.3s; width:50%; height:100%; position:absolute; top:0; left:0; }
.twdcnext { left:50%; }
.imgct1 .twdcprevious { display:none; }
.imgct1 .twdcnext { display:none; }
.twdc_galleryImages { max-height:95dvh; max-width:95dvw; height:95dvh; width:95dvw; background-size:contain; background-repeat:no-repeat; background-position: center; transition:all 0.3s; opacity:0; transform:translateY(-100px); position:absolute; }
.twdcprevious:hover:before { left:10px; opacity:1; }
.twdcnext:hover:before { right:10px; opacity:1; }
.twdcprevious:before, .twdcnext:before { opacity:0; transition:all 0.3s; font-size:12rem; color:#fff; line-height:12rem; position:absolute; top:50%; margin-top:-60px; }
.twdcprevious:before { left:100px; content:'\2039'; }
.twdcnext:before { content:'\203a'; right:100px; }
#event-select:empty { grid-template-columns: 1fr !important; }
#event-select:empty:before { 
  content:"There have been no events since you last submitted your history"; font-size:2rem;
}

#twdcCloseGallery { height:50px; width:50px; transition:all 0.3s; top:15px; right:25px;  background-image:url("../IMG/close.svg"); background-repeat:no-repeat; background-size:contain;cursor: pointer; z-index: 9001; position:fixed; background-color:#fff; border-radius:100%; }
#twdcCloseGallery:hover { background-color:#f40; }
#twdcCommentsPanel { bottom:0; width:100%; color:#fff; text-shadow:1px 1px 2px #333; font-size:1.6rem; text-align:center; position:absolute; padding:10px; }
.expandFadeOut { transform:translateY(200px) rotate(14deg) !important; opacity:0 !important; }
.expandFadeIn { transform:translateY(0) !important; opacity:1 !important; }

[data-tooltip] {
  position:relative;
  display:inline-block
}
[data-tooltip]:after,
[data-tooltip]:before {
  position:absolute;
  left:50%;
  transform:translate(-50%,-12px);
  z-index:1000;
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  opacity:0;
  transition:opacity .35s ease .25s
}
[data-tooltip]:before {
  content:attr(data-tooltip);
  background:#333;
  color:#eee;
  padding:8px 12px;
  white-space:nowrap;
  bottom:100%;
  border-radius:3px;
  box-shadow:0 5px 15px -5px rgba(0,0,0,.65)
}
.arcOuter[data-tooltip]::before { bottom: 16px !important;}
[data-tooltip]:after {
  content:"";
  background:transparent;
  border:8px solid transparent;
  border-top-color:#333
}
[data-tooltip]:active:after,
[data-tooltip]:active:before,
[data-tooltip]:focus:after,
[data-tooltip]:focus:before,
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
  opacity:1
}
[data-tooltip].tooltip-multiline:before {
  width:100vw;
  max-width:240px;
  white-space:normal
}
[data-tooltip][class*=tooltip-bottom]:after,
[data-tooltip][class*=tooltip-bottom]:before {
  transform:translate(-50%,12px)
}
[data-tooltip][class*=tooltip-bottom]:before {
  bottom:auto;
  top:100%
}
[data-tooltip][class*=tooltip-bottom]:after {
  bottom:0;
  border:8px solid transparent;
  border-bottom-color:#333
}
[data-tooltip].tooltip-bottom-left:before {
  transform:translate(-24px,12px)
}
[data-tooltip].tooltip-bottom-right:before {
  left:auto;
  right:50%;
  transform:translate(24px,12px)
}
[data-tooltip].tooltip-top-left:before {
  transform:translate(-24px,-12px)
}
[data-tooltip].tooltip-top-right:before {
  left:auto;
  right:50%;
  transform:translate(24px,-12px)
}

.toggle-container {
  display: flex;
  align-items: center;
  position: relative;
  border-radius:0.375em;
  width: 3em;
  height: 1.5em;
  background-color: rgba(255,255,255,0.9);
  box-shadow: inset 0 0 0.0625em 0.125em rgba(255, 255, 255, 0.2), inset 0 0.0625em 0.125em rgba(0, 0, 0, 0.4);
  transition:background-color 0.4s linear;
} 
.toggle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 0.5em;
  padding: 0.125em;
  width:5rem;
  margin-bottom:10px;
}
.toggle-wrapper:before { content:"edit profile"; position: absolute; left: 100%; width: 100px; font-family: Roboto; font-weight: bold;}

.toggle-checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.toggle-checkbox:checked + .toggle-container {
  background-color: #33f;
}

.toggle-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0.0625em;
  border-radius: 0.3125em;
  width: 1.375em;
  height: 1.375em;
  background-color: #e4ddcf;
  box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgba(0, 0, 0, 0.1), inset 0 -0.125em 0.0625em rgba(0, 0, 0, 0.2), inset 0 0.1875em 0.0625em rgba(255, 255, 255, 0.3), 0 0.125em 0.125em rgba(0, 0, 0, 0.5);
  transition: left 0.4s;
}
.toggle-checkbox:checked + .toggle-container > .toggle-button {
  left: 1.5625em;
}

.toggle-button-circles-container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  gap: 0.125em;
  position: absolute;
  margin: 0 auto;
}

.toggle-button-circle {
  border-radius: 50%;
  width: 0.125em;
  height: 0.125em;
  background-image: radial-gradient(circle at 50% 0, #f6f0e9, #bebcb0);
}
#switch_btn { background: red;
  color: #fff; float: right; cursor: pointer; display: flex; align-items: center; font-size: 1.6rem; line-height: 1.6rem;}
#switch_btn:before { animation:rotateBg 6s infinite linear; content:''; background-image:url('../IMG/rotate.svg'); background-position:center; background-size:cover; background-repeat:no-repeat; width:24px; height:24px; margin-right:5px; }

#positionbygender, #positionbykm, #positionbyentrycount { width:100%;display:flex; justify-content:center; margin-top:30px; }
.rankBox { width:75%; height:50px; border:1px dashed #000; background: #22C1C3; background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);}
.rankBox::before { content:attr(data-max); left: -6px;
  position: absolute;
  bottom: -20px;
  padding-left: 18px;
  font-weight: bold;
  background-image: url(../IMG/flame.svg);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  height: 20px;
  line-height: 20px;}
.posMarker { transition:all 0.6s; margin:0 auto; position:absolute; left:0; top:0; height:54px; top:-2px; width:2px; background:blue; }
.posMarker:before { content:attr(data-v); position:absolute; top: -20px;
  height: 20px;
  background: blue;
  padding: 3px;
  color: #fff;
  border-radius: 0 4px 4px 0px;}
.opr { opacity:0; transform:translateX(100px); }
/*------------------------file uploader-------------------------------*/
.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.docContMask { position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2);
  width: 100%;
  z-index: 9999;}
.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #fff;
}

.twdc_isWaiting { transform: rotateX(5deg); transform-origin: 50% 0%; transform-style: preserve-3d; }
.popupBoxContent.twdc_isWaiting { transform: rotateX(5deg) translateY(0) !important; }

.dragbox { width:40px; height:40px; position:absolute; }
.dragbox:before { content:''; position:absolute; background:transparent; border:5px solid #ccc; opacity:0.8; left:5px; top:5px; width:30px; height:30px; border-radius:100%; transition:background 0.3s; }
.dragbox:hover:before { background:#fff; }
#ctl { top:-20px; left:-20px; cursor:se-resize;}
#ctr { top:-20px; right:-20px; cursor:ne-resize;}
#cbl { bottom:-20px; left:-20px; cursor:ne-resize;}
#cbr { bottom:-20px; right:-20px; cursor:se-resize;}
.dragging .vline, .dragging .hline { opacity:1; }
.vline, .hline { transition:opacity 0.3s; cursor:pointer; opacity:0; position:absolute; }
.vline { width:1px; border-left:1px dotted #fff; top:0; height:100%; }
.hline { height:1px; border-bottom:1px dotted #fff; left:0; width:100%; }
.hl1 { top:20%; }
.hl2 { top:40%; }
.hl3 { top:60%; }
.hl4 { top:80%; }
.vl1 { left:20%; }
.vl2 { left:40%; }
.vl3 { left:60%; }
.vl4 { left:80%; }
#cropper .selected { cursor:auto; }
.clipbox { background:#fff; opacity:0.4; position:absolute; }
.cboxleft { left:0; }
.cboxtop { top:0; left:0; right:0; }
.cboxright { right:0;}
.cboxbottom { bottom:0; left:0; right:0; }

.uplImg { max-width:100%; max-height:100%; position:absolute; top:0; left:0;}

.cropper { cursor:move; border:1px dotted #fff; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; }
.re-aspect { transition:all 0.3s; }

#previewOuter { position:absolute; top:20px; left:20px; }
#preview { background:#fff; height:100%; }
.previewtools { height:80px; min-height:80px; max-height:80px; }

#preview img { max-width:100%; max-height:100%; position:absolute; top:0; left:0;}
#imgplaceholder { width:100%;  display:flex;  -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:100%; max-width:100%; max-height:100%; overflow:hidden; }

.predrag { cursor:crosshair;}
#clipboxtop, #clipboxright, #clipboxbottom, #clipboxleft { z-index:10; position:absolute; background:#333; opacity:0.3;}

#stats {width:310px; float:right; padding:5px; background:#eee; }
.label { margin:0 0 5px 0; font-size:1.2rem; color:#666; clear:both; float:left; width:150px; }
.datafield { margin:0 0 5px 0; float:left; width:130px; }

#uploadfilename { width:135px; }
#imagezoom { margin:0 auto; }
#imgcrop { background-position:0 -125px; clear:both; float:right; margin:-40px 0 10px 0;}
#imgscale { background-position:0 -165px; clear:both; float:right; margin:-40px 0 10px;}
#imgcrop:hover { background-position:-85px -125px;}
#imgscale:hover { background-position:-85px -165px;}
.stdbutton { float:left; width:80px; height:34px; background:url(https://storage.googleapis.com/ub_site_images/AdminSprite.png);}
#theirAvatar.noavatar { background-position:10px 10px; }

#aspectRatioButtons { position:absolute; width:50px; height:300px; top:50%; margin-top:-150px; left:0; }
#aspectRatioButtons li { cursor:pointer; width:50px; height:50px; float:left; background-color:#ccc; transition:all 0.3s; background-size:cover; }
.freehand { background-image: url(https://storage.googleapis.com/ub_site_images/freeformatratio.png); }
.ar1x1 { background-image: url(https://storage.googleapis.com/ub_site_images/1x1ratio.png); }
.ar4x3 { background-image: url(https://storage.googleapis.com/ub_site_images/4x3ratio.png); }
.ar16x9 { background-image: url(https://storage.googleapis.com/ub_site_images/16x9ratio.png); }
.ar3x4 { background-image: url(https://storage.googleapis.com/ub_site_images/3x4ratio.png); }
.ar9x16 { background-image: url(https://storage.googleapis.com/ub_site_images/9x16ratio.png); }
.selected { background-color:#fc0 !important; cursor:auto !important;}

#IMGuploader { float:right; width:150px; }
.file-uploader2 { float:left; }
.footerButtons { display:flex; }
.qq-upload-button {background:#fc0; text-align: center; padding:3px 15px 6px 15px; transition:all 0.3s; font-size:1.6rem; color:#fff; }
.qq-upload-button:hover { background:#fd0;}
#file-uploader2 .qq-upload-button { padding:2px; width:auto !important; height:auto !important; float:none; transition:all 0.3s; }
#file-uploader2 .qq-upload-button:hover { background:#fd0; }
.ulbutton::before { content: "\f093  upload a file"; font-size:1.6rem; }

.lockbutton, .unlockbutton { cursor:pointer; position:absolute; top:112px; left:106px; background:url(https://storage.googleapis.com/ub_site_images/AdminSprite.png) -81px -83px; width:40px; height:34px; float:left; }

.unlockbutton { background-position:-125px -83px; }
#scaleoptions {  clear:both; }
#nWidth, #nHeight { width:50px; }

.ulfile { width:298px; float:left; text-align:center; padding-top:7px; display:block; height:25px; background:url(https://storage.googleapis.com/ub_site_images/bgGIF.gif) no-repeat -300px 0; border:1px solid #fff; box-shadow:0 0 2px #ccc;}
.assetIListIMG { width:50%; float:left; min-height:40px; }
.assetIListIMG IMG { width:100%; }
.assetIListIMG span { width:100%; position:absolute; overflow:hidden; bottom:0; left:0; max-height:30px; color:#FFF; font-size:1rem;	background-color:#333; opacity:0.8; word-wrap:break-word;
}
.fullPGimgEditor { background:#fff; width:100%; height:100%; z-index:8800; }
.arcOuter { height: 150px; display: flex; flex-direction: column; justify-content: end; }
#agerangechart { display:flex; margin: 20px 10%; overflow: auto; border-radius: 5px;}
#agerangechart .arcOuter { width:10%; margin:0 5px; }
#popularEventsContainer .palmares { border: 1px dashed #fff;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.4); }

#popularEventsContainer {
  display: grid;
  grid-template-rows: 1fr;
  margin: 0 auto;
}
.barRange { text-align:center;  max-height: 25px; min-height: 25px; line-height:1rem ; display: flex; align-items: center;
  justify-content: center;}
.barOuter { background: linear-gradient(rgb(9, 9, 121) 0%, rgb(0, 212, 255) 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.3); height: 20px;
  line-height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; transition:all 0.6s; 
 }
#aboutYou { margin-bottom:40px; }
.fullImage, .fadeImage { width:200px; height:200px; background-size:contain; background-repeat:no-repeat; position:absolute; bottom:0; left:0; width:100%; }
.nextAwardOuter { height: 200px; width: 154.4px; margin: 30px auto;}
.nextAwardOuter::after { content:attr(data-togo); position:absolute}
.fadeImage { opacity:1; }
.fullImage { display:none; background-size: cover; background-position: bottom;}
h3 { width:100%; text-align:center; margin:20px 0; text-shadow: 0 1px 2px rgba(0,0,0,0.5);}
.fullImage::before { content:''; position:absolute; top:0; left:-5px; width:calc(100% + 10px); border-bottom: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);}
.headline { font-size: 2rem;
  width: 80%;
  margin: 0 auto;
  text-align: center;}
/*------------------------end file uploader-------------------------------*/

.wrapper {
  height: 60px;
  width: 60%;
  display: flex;
  overflow: hidden;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84%;
  width: 20%;
  margin: 0 5px;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  color: #000;
  font-size: 2rem;
  cursor: pointer;
  min-width:70px; text-align:center;
  background:#fff;
}

.fixedbox { position:absolute; left:0; top:0; }
.selectedbox { background:#f40; color:#fff; }
.active { background-color:#fff !important; color:#f40 !important;  }

.selectedTarget { position: absolute;
  top: 0;
  margin: 0 auto;
  width: calc(20% + 10px);
  border: 3px solid #f40;
  height: 100%;
  left: calc(40% - 5px);
  z-index: 9;
  pointer-events: none; }

  #filterLeaderboard_btn { margin-top:20px; }
/*---------------------popupbox----------------------------------*/
.popupTitle { display: flex;
  margin: -10px -10px 0 -10px;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  background: #33f;
  color: #fff;
  font-size:2rem; 
}

.twdcPopUp { z-index:6000; right:0; bottom:0; left:0; top:0; position:fixed; z-index:8000; -webkit-box-align: center; -ms-flex-align: center;  align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center; -webkit-perspective:600px; perspective:600px; transition: opacity 0.5s; opacity:0;}
.twdc_showPopUp { opacity:1; }
.twdcPopUp:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.6); }
.popupBoxContent { min-height:28px; padding:10px 10px 0 10px; overflow:auto; background:#fff; box-shadow:0 0 14px #333; margin:auto; left:0; right:0; max-height: 100dvh !important; border-radius: 3px; }

.popupIB { width:100%; height:28px; font-size:1.6rem; font-weight:normal; border:1px solid #ccc; background:transparent; margin-bottom:5px; display:block; text-align:left; }
.popupSB { width:100%; height:28px; font-size:1.6rem; font-weight:normal; border:1px solid #ccc; background:transparent; margin-bottom:5px; display:block; }
.puButtons { margin: 0 -10px 0 -10px; min-height: 51px; overflow: hidden; padding: 5px 10px 0 10px; display:flex; background: rgb(237,174,42);
  background: radial-gradient(circle, rgba(237,174,42,1) 0%, rgba(253,141,45,1) 100%);
  background: rgb(255,220,36);
  background: radial-gradient(circle, rgba(255,220,36,1) 0%, rgba(255,165,5,1) 100%);
}
.popUpInner { font-family:Roboto, sans-serif; background:#eee; overflow:auto; margin:0 -10px 0 -10px; padding:10px 10px 0 10px; height:100%; max-height: 100dvh;}
.fullHeight .popUpInner { max-height:100dvh; max-height:100%; background: #fff; padding: 0; margin: 0; }
.fullHeight { padding:0 !important; }
.fullHeight .puButtons { margin:0 !important; }
#messageBox { position:absolute; top:0; left:0; right:0; bottom:0; z-index:999; display:none; justify-content: center; align-items: center;   font-size: 2rem; background: rgba(0,0,0,0.1);}
#messageBox a, #noticeBox a { margin-left: 5px; color: #fff; text-decoration: underline; cursor:pointer;}
.popupTA { width:100%; height:65px; font-family: sans-serif, arial; color:#888; }
.popupSELsmall { width:100px !important; }
.originalValue { font-weight:bold; display:block; font-size:1.6rem; clear:both; }
.popupInternal { margin-top:10px; width:100%; overflow:hidden; height:auto; }

.modalbutton, .modalok, .modalcancel, .modalunsub, .modalsub {
	display:block;
  font-family:Roboto, sans-serif;
	text-align:center;
	font-size:1.6rem;
	color:#fff;
	margin:0 0 5px 5px;
	border: 0 none;
	transition:all 0.3s;
	padding:9px 20px 11px 20px;
	min-width:40px;
	cursor:pointer;
}
.modalbutton { float:left; clear:both; background:#66b2ff; }
.modalbutton:hover { color:#fff; background: #76c2ff; }


.awardWrapper { display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900; }
.awardBurst { width: 1000px;
  height: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: visible; }

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

@keyframes draw {
  to {
    stroke-dashoffset: 40;
  }
}

.awardBurst:before { animation:spin 10s linear infinite; content:''; background-image: url('../IMG/sunburst.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 1000px; width: 1000px; display: block;}
.awardImage { height:60vh; width:60vh; background-size:contain; background-position:center; background-repeat:no-repeat; }
.LBIB { background: #eee; border: none; outline: none; font-size: 3rem; margin: 10px 0; }

.modalok { background:#ac0; }
.modalok:hover { background:#bd0; color:#fff;}
.modalcancel { background: #fa0; }
.modalcancel:hover { background: #f86042; color:#fff;}

.twdc_tbCancel { position:absolute; top:0; right:0; height:100%; transition:background 0.3s; display:flex;  -ms-flex-align:center; align-items:center; cursor:pointer; background-image: url("../IMG/closeWhite.svg"); width: 40px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.twdc_tbClose { position:absolute; top:0; right:0; height:100%;  display:flex;  -ms-flex-align:center; align-items:center; cursor:pointer; }
.twdc_tbClose:before { content:'close'; transition:background 0.3s; background:#fa0; color:#fff; height:100%; font-size:1.4rem; padding:5px; }
.twdc_tbCancel:hover, .twdc_tbClose:hover:before { background-color:#44f; }
/*-------------------- end popup ------------------------*/
.ynwrapper {
  width: 12rem;
  height: 4rem;
  position: relative;
  margin: 10px 0;
  border-radius: 2rem;
  background: rgba(0,0,0,0.1);
  box-shadow: inset 1px 2px 3px rgba(0,0,0,0.1);
}
.ynwrapper .toggle {
  width: 4.8rem;
  height: 4.8rem;
  position: absolute;
  left: 3.6rem;
  top: -0.4rem;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.1rem solid #ff6c00;
  background: #ff8933;
  box-shadow: 0 0 0.2rem 0.1rem #ff6c00 inset, 0 0 0.2rem 0.1rem #ff6c00;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ynwrapper label {
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 1;
  display: inline-block;
  text-align: center;
  line-height: 4rem;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  color: white;
}

.yl { background-image: url(../IMG/plaintick.svg); background-size: 80%;
  background-repeat: no-repeat;
  background-position: center; }
.nl { background-image: url(../IMG/closeWhite.svg); background-size: 80%;
  background-repeat: no-repeat;
  background-position: center; }

.ynwrapper input {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.yr:checked {
  background: red;
}
.yr:checked ~ .toggle {
  border: 0.1rem solid #008000;
  background: #00b300;
  box-shadow: 0 0 0.2rem 0.1rem #008000 inset, 0 0 0.2rem 0.1rem #008000;
  left: -0.4rem;
}

.nr:checked {
  background: red;
}
.nr:checked ~ .toggle {
  border: 0.1rem solid #ff0000;
  background: #ff3333;
  box-shadow: 0 0 0.2rem 0.1rem #ff0000 inset, 0 0 0.2rem 0.1rem #ff0000;
  left: 7.6rem;
}

.mr, .ml {
  left: 33.33333%;
}

.nr, .nl {
  left: 66.66667%;
}

.ml {
  -webkit-animation-delay: 2s;
  -o-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}

.nl {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  -moz-animation-delay: 4s;
  animation-delay: 4s;
}
.ovfa { overflow:auto; scrollbar-width:none;}

@keyframes rotateBg {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg); /* hold for pause */
  }
}

/*#leaderboard[data-section='leaderboard'] .toggleFrame[data-what='lb'] { opacity:1; pointer-events: inherit; z-index:2; }
#leaderboard[data-section='stats'] .toggleFrame[data-what='stats'] { opacity:1; pointer-events: inherit; z-index:2; }*/
#leaderboard[data-section='leaderboard'] .toggleFrame[data-what='lb'] {  transform: rotateY(0deg); z-index:100;}
#leaderboard[data-section='stats'] .toggleFrame[data-what='stats'] { transform: rotateY(0deg); z-index:100;}
#leaderboard[data-section='leaderboard'] .toggleFrame[data-what='stats'] { transform: rotateY(-140deg); z-index:1;}
#leaderboard[data-section='stats'] .toggleFrame[data-what='lb'] { transform: rotateY(140deg); z-index:1; }
.toggleFrame[data-what='stats'] { background:rgba(255,255,255,0.2); z-index:1;}
.searchBar { opacity:1; transition:all 0.6s; }
#leaderboard[data-section='stats'] .searchBar { opacity:0; pointer-events:none; }
#leaderboard[data-section='stats'] .back_btn, #leaderboard[data-section='stats'] .forward_btn {opacity:0; pointer-events:none; }
#leaderboard[data-section='stats'] #filterEnglish {opacity:0; pointer-events:none; }
#theirstats { font-size: 1.8rem; margin: 10px 10px 10px 0; background: rgba(255,255,255,0.1); padding: 5px 10px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
#theirstats span { color: white; font-size: 2.6rem; }
.expand { cursor:pointer; transition:all 0.3s;}
.expand:hover { background-color:rgba(255,255,255,0.05); }
.fullHBar { background-color:rgba(255,255,255,0.1); }
.achievedBar { background-color:rgba(33, 64, 255,0.8); border-left: 5px solid rgba(255,255,255,0.3); transition:all 0.8s; margin: 0 3px; pointer-events:none;}
.expand:hover .achievedBar { background-color:rgba(237,6,0,0.9); }
.fullHBar .achievedBar { height:100%; }
#leaderboardsvgPAR { display:none; }
#leaderboardsvgLAR { max-height:100%; width:100%;}
.leaderBoardOuter { width:100%; height:100%; box-shadow: 1px 1px 17px -1px rgba(0,0,0,0.1); perspective:1300px; overflow:hidden;}
.toggleFrame { width:100%; height:100%; transition:all 0.3s; position:absolute;top:0; left:0; transition: transform 1500ms; transform-style: preserve-3d; transform-origin: left center; backface-visibility: hidden;}

.barGraphName { width:400px; position: absolute; bottom: -14px; left: 5px; transform: rotate(-90deg); transform-origin: left top; line-height: 2.3rem; font-size: 2.3rem; color: #003; transition:all 0.3s; opacity:1; pointer-events:none; }

.fullHBar .barGraphName{ transform:none; bottom:0; font-size:1.7rem; z-index:10;}

.moving .barGraphName { opacity:0; }

.graphScale div { transition:all 0.3s; position: absolute; width:100%; border-top: 1px dashed rgba(255,255,255,1);}
.graphScaleP div { transition:all 0.3s; position: absolute; height:100%; border-right:1px dashed rgba(255,255,255,1);}

.barGraphDist { font-size: 1.4rem; color: #fff; position: absolute; top: 0; right: 4px; text-align: right; width: 100%;}
.axisticker { color:#fff; pointer-events:none;}
.g11 { background-color:rgba(255,255,255,0.43); }
.g10 { background-color:rgba(255,255,255,0.40); }
.g9 { background-color:rgba(255,255,255,0.37); }
.g8 { background-color:rgba(255,255,255,0.34); }
.g7 { background-color:rgba(255,255,255,0.31); }
.g6 { background-color:rgba(255,255,255,0.28); }
.g5 { background-color:rgba(255,255,255,0.25); }
.g4 { background-color:rgba(255,255,255,0.22); }
.g3 { background-color:rgba(255,255,255,0.19); }
.g2 { background-color:rgba(255,255,255,0.16); }
.g1 { background-color:rgba(255,255,255,0.13); }
.g0 { background-color:rgba(255,255,255,0.1); }
.graphScale div:before, .graphScaleP div:before { content:attr(data-level); position:absolute; top: 5px; font-size:1.8rem; width: 80px; text-align: right; padding-right: 5px; color: #44f; font-family:"Racing Sans One", sans-serif ;}
.graphScaleP div:before { font-size:1rem; right:0; padding-right:3px; }
.forward_btn, .back_btn { box-shadow: 0 3px 4px rgba(0,0,0,0.1); display:none; cursor:pointer; z-index:8000; border-radius:100%; width:5rem; height:5rem; position:absolute; top:50%; margin-top:-2.5rem; left: 15px; outline: none; border: none; background-image:url("../IMG/chevron-left.svg"); background-size:cover;}
.subEventName { background-image: url("../IMG/route.svg"); background-size: contain; background-repeat: no-repeat; background-color: #fff; height: 80px; padding: 5px 10px 5px 100px; display: flex;  align-items: center; font-size: 3rem; background-position: 5px top; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); cursor:pointer; width: 100%;
  max-width: 400px; line-height:3rem; }
.tookpart:before, .registered:before, .booked:before { content:''; position:absolute; left:-15px; top:-10px; width:45px; height:45px; background-size:cover; transform: rotate(8deg); z-index:10; border-radius: 100%; box-shadow: 0px 0px 12px rgb(255, 255, 255);}
.tookpart:before { background-image:url("../IMG/medal.svg"); }
.registered:before { background-image:url("../IMG/tick.svg"); transform: rotate(0deg);}
.booked:before { background-image:url("../IMG/ticket.svg"); }

.forward_btn { right:15px; left:inherit; background-image:url("../IMG/chevron-right.svg");}
.morebefore .back_btn { display:block; }
.moreafter .forward_btn { display:block; }

.fspage { 
    position:absolute; width:100vw; height:100vh; transition:all 0.3s; 
}
.fspage.hidden {
    opacity:0; 
}

.fsfixedpage { 
    position:absolute; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; background:#fff;
}

.confirmActionContent {
	width:100%;
	max-width:600px;
	height:auto;
	min-height:200px;
	background:#fff;
	z-index:8001;
	transition:all 0.3s;
  transform:translate(50px);
	opacity:0;
}
#confirmAction { transition:opacity 0.3s; z-index:8200; opacity:0; display:none; bottom:0; right:0; left:0; top:0; position:fixed; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;  -ms-flex-align:center; align-items:center; }
#confirmAction:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:#333; opacity:0.4; }
.twdc_caDisplay { opacity:1 !important; }
.twdc_caDisplay > .confirmActionContent { transform:translate(0px) !important; opacity:1 !important; border-top:10px solid #ccc;}

.cfmsg { font-family:Roboto, sans-serif; width:100%; min-height:100px; position:relative; padding:20px 20px 40px 20px; color:#333; font-size:1.6rem; line-height:2.4rem;}

#cfbuttons {
	position:absolute; display:flex; bottom:5px; height:auto; right:10px;
}

.shakeerror {
	animation: kf_shake 0.4s 1 linear;
}

@keyframes kf_shake {
	0% { transform: translate(30px); background-color:#f40;}
	20% { transform: translate(-30px); }
	40% { transform: translate(15px); }
	60% { transform: translate(-15px); }
	80% { transform: translate(8px); }
	100% { transform: translate(0px); background-color:inherit;}
}

.blinking {
  -webkit-animation: 2s blink ease infinite;
  -moz-animation: 2s blink ease infinite;
  -ms-animation: 2s blink ease infinite;
  -o-animation: 2s blink ease infinite;
  animation: 2s blink ease infinite;  
}

@keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.stuck-fixed, .stuck-tobasexxx { position:fixed !important; top:0; z-index:7000;}
.stuck-tobase { position:absolute !important; bottom:0px !important; top:inherit !important; }

#validated { display:flex; align-items:center; }
#notvalidated { font-size: 1.5rem; color: #338; }
#validateEmail[data-status='v'] #validated { display:flex; }
#validateEmail[data-status='v'] #notvalidated { display:none; }
#validateEmail[data-status='unv'] #validated { display:none; }
#validateEmail[data-status='unv'] #notvalidated { display:flex; }
#validateEmail { margin:-20px 0 20px 0; }
#validated:before { margin-right:5px; content:''; background-image:url("../IMG/tick.svg"); width:20px; height:20px; background-size:contain; }
#notvalidated::before, .notsubmitted::before { font-size:1.4rem; line-height:16px; animation:blink 2s infinite; margin-right:5px; border-radius:100%; content:'!'; background-color:#f40; width:15px; height:15px; text-align: center; font-weight: bold; color: #fff;}
.resendlink { margin-left:5px; text-decoration:underline; color:#333; cursor:pointer; }

#mainMenuBar { display:flex; }
.flexWrap { display:flex; flex-direction:column; height:100%; }
.menuBar { display:flex; padding:10px 20px; justify-content:center; }
.page { left:100%; transition:all 0.5s; opacity:0; position:absolute; top:0; width:100vw; height:100vh; height: 100%;}
#AppOuterFrame { display: flex; flex-direction: column; height: 100%; z-index:1;}
[data-frame='help'] #mainMenuBar { display:none; }

.container404 { 
  display:flex; flex-direction:column; height:100%; align-items:center; font-size:2.6rem; justify-content:center; 
}
.link404 { text-decoration:underline; cursor:pointer; }
#pageContainer { flex: 1; height: 100%; overflow:hidden;}
body[data-frame='editevents'] div[data-what='editevents'] { left:0%; opacity:1;}
body[data-frame='login'] div[data-what='login'] { left:0%; opacity:1;}
body[data-frame='showaccount'] div[data-what='showaccount'] { left:0%; opacity:1;}
body[data-frame='404'] div[data-what='404'] { left:0%; opacity:1;}
body[data-frame='linkexpired'] div[data-what='linkinvalid'] { left:0%; opacity:1;}
body[data-frame='linkexpiredNSI'] div[data-what='linkinvalidNSI'] { left:0%; opacity:1;}
body[data-frame='leaderboard'] div[data-what='leaderboard'] { left:0%; opacity:1;}
body[data-frame='help'] div[data-what='help'] { left:0%; opacity:1;}
body[data-frame='myaccount'] div[data-what='myaccount'] { left:0%; opacity:1;}
body[data-frame='landing'] div[data-what='landing'] { left:0%; opacity:1;}
body[data-frame='leaderboardfilter'] div[data-what='leaderboardfilter'] { left:0%; opacity:1;}
body[data-frame='leaderboardfilter'] #mainMenuBar { display:none !important; }
body[data-frame='myaccount'] .whitebtn[data-what='myaccount'], 
body[data-frame='leaderboard'] .whitebtn[data-what='leaderboard'], 
body[data-frame='login'] .whitebtn[data-what='login'], 
body[data-frame='showaccount'] .whitebtn[data-what='leaderboard'], 
body[data-frame='editevents'] .whitebtn[data-what='editevents'] { color: #888; border-bottom: 1px dashed #888; cursor: auto; display:none;}
body[data-frame='landing'] #mainMenuBar, body[data-frame='login'] #mainMenuBar { display:none !important; }

#helpbox { height:100%; overflow:auto; padding:20px; }
#helpbox div { margin:0 0 10px 0; }
#myACWrapper { max-width:75%; margin:0 auto; padding: 5px 10px 0 10px; display: flex; flex-direction: column; height:100%; }
.scrollAuto { display:flex; flex-direction:column; overflow:auto; padding-bottom:5px; scrollbar-width: none; }
.login-page { width: 360px; padding: 8% 0 0; margin: auto; }
#showACWrapper { background: #2bd;
  max-width: 75%;
  margin: 0 auto;
  min-width: 800px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: 90%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5); }
#show-account { display:none; opacity: 0; align-items: center; justify-content: center; position: absolute; z-index: 900; width: 100%; height: 100%; z-index:1000; transition:all 0.6s; }

#landingPage { display:none; position:absolute; top:0; left:0; right:0; bottom:0;}
body[data-frame='landing'] #landingPage { display:Block; }
.centreContainer { display:flex; flex-direction:column; height:100%; }
.TLmenu { height:120px; min-height:120px; max-height:120px; display:flex; justify-content:center; flex-wrap:wrap; }
.TBlogo { background-image:url("../IMG/EventLogos/UCClubLogo.png"); background-size:contain; flex:1; background-repeat:no-repeat; background-position:center; }
#formLogoOuter { height: 70px;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-bottom: 10px;
}
#formLogoText { text-align: left;
  font-size: 2rem;
  flex: 2;
}
#formLogo { height:100%; flex: 1;}

#show-account:before { content:''; position:fixed; top:0; left:0; bottom:0; right:0; height:100%; width:100%; background:rgba(0,0,0,0.3);}
.hideForm { opacity:0; height:0px; }
.showForm { opacity:1; }
form, .fpw-form { opacity:0; height:0; transition:all 0.6s; overflow:hidden;}
#newfield form { opacity:1; height:auto; }
.noTrans { transition:none !important; }
.smallText { font-size:1rem; text-align:left; font-family: Roboto, sane-serif;}
.stafter { margin: -10px 0 10px 0; }
.stafter span { font-family:arial, sans-serif; color:#484848; }
.stafter span.matched { color:#0c0; }

.cafPages { padding:0 10px; display:flex; width:100%; transition:left 0.3s; left:0; flex-direction:column; overflow:auto;}
.cafPages[data-page='1'] { left:0; }
.cafPages[data-page='2'] { left:-100%; }

#fields1, #fields2 { flex:1;}
#tsize, #tcountry, #newtsize, #newcountry { width: 100%; border:none; outline:none; height: 45px; margin-bottom: 10px; padding: 15px; font-size: 1.4rem;font-family: Roboto, sans-serif; background: #eee;}

.palName { font-family: Roboto, sans-serif; font-weight: bold;}
.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  padding: 35px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  transition:all 0.6s;
  overflow:hidden;
}
#newfield .form {
  padding:20px;
  max-width:80%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  margin:20px auto 20px auto; 
}

.form input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;  font-family:Roboto, sans-serif;
  font-size: 1.8rem;
}
.form button {
  text-transform: uppercase;
  outline: 0;
  background: #33f;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFF;
  font-size: 1.8rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}
.form button:focus { outline:1px dotted #333; }
input:focus { background-color:#ddf; }
.form button:hover,.form button:active {
  background: #6df;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
  font-family:Roboto, sans-serif;
}
.form .message a {
  color: #888;
  text-decoration: underline;
  font-weight: bold;
  cursor:pointer;
  font-family:Roboto, sans-serif;
}
.container {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: 0 auto;
}
.container:before, .container:after {
  content: "";
  display: block;
  clear: both;
}
.container .info {
  margin: 50px auto;
  text-align: center;
}
.container .info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 36px;
  font-weight: 300;
  color: #1a1a1a;
}
.container .info span {
  color: #4d4d4d;
  font-size: 12px;
}
.container .info span a {
  color: #000000;
  text-decoration: none;
}
.container .info span .fa {
  color: #EF3B3A;
}

.fpFlex {
    display: grid;
    gap: 20px;
    padding: 20px;
    max-width: 90%;
	  height:100%;
    overflow:auto;
    justify-content: center;
    width:100%;
    margin:0 auto;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateX(20px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.list-item {
  opacity: 0; /* Hide initially */
  animation: slideIn 0.5s ease-out forwards;
}

#helppage .list-item { font-family:Roboto, sans-serif; font-size:2rem; }
#helppage .UB-QSmallTitle { font-family:"Racing Sans One", Arial, Helvetica, sans-serif; font-size:3rem; }
#ceMessage { 
  font-family: Roboto;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.cta + .cta, button + button { margin-left:10px; }
.cta + .ctacancel { margin-left:10px; }
.ctacancel + .cta { margin-left:10px; }
.cta, .ctacancel, .modalopen {
  display: flex;
  padding: 5px 0px 5px 10px;
  text-decoration: none;
  font-size: 1.8rem;
  color: white;
  background: #6225E6;
  background: linear-gradient(90deg,#33f 0%, #44f 100%);
  transition: 1s;
  box-shadow: 6px 6px 0 black;
  transform: skewX(-12deg);
  min-height:35px; 
  align-items:center;
  text-transform:uppercase;
  max-height: 35px;
}
#cfbuttons .cta, #cfbuttons .ctacancel, #cfbuttons .modalopen, .puButtons .cta, .puButtons .ctacancel, .puButtons .modalopen { 
  padding:5px 10px; 
} 

.ctacancel {
  background: linear-gradient(90deg,#f33 0%, #f44 100%);
}

.cta.red { background: red !important;
  position: absolute;
  right: 15px; }
.puButtons .cta {
  height: 34px; min-height:34px; 
}

.cta:focus {
 outline: none; 
}

.cta:hover, .ctacancel:hover, .modalopen:hover, openfilelabel:hover {
  transition: 0.5s;
  box-shadow: 10px 10px 0 #FBC638;
}

.cta span:nth-child(2) {
  transition: 0.5s;
  margin-right: 0px;
}

.cta:hover  span:nth-child(2) {
  transition: 0.5s;
  margin-right: 15px;
}

.cta span {
  transform: skewX(15deg);   
  text-transform:uppercase; font-size:1.6rem; letter-spacing: 1px;
  pointer-events:none; line-height:1.6rem;
}
.cta span:nth-child(2) {
  width: 20px;
  margin-left: 10px;
}

/**************SVG****************/

path.one {
  transition: 0.4s;
  transform: translateX(-60%);
}

path.two {
  transition: 0.5s;
  transform: translateX(-30%);
}

.cta:hover path.three {
  animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
  transform: translateX(0%);
  animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes color_anim {
  0% {
      fill: white;
  }
  50% {
      fill: #FBC638;
  }
  100% {
      fill: white;
  }
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.15s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }
.list-item:nth-child(4) { animation-delay: 0.45s; }
.list-item:nth-child(5) { animation-delay: 0.6s; }
.list-item:nth-child(6) { animation-delay: 0.75s; }
.list-item:nth-child(7) { animation-delay: 0.9s; }
.list-item:nth-child(8) { animation-delay: 1.05s; }
.list-item:nth-child(9) { animation-delay: 1.2s; }
.list-item:nth-child(10) { animation-delay: 1.35s; }
.list-item:nth-child(11) { animation-delay: 1.5s; }
.list-item:nth-child(12) { animation-delay: 1.65s; }
.list-item:nth-child(13) { animation-delay: 1.8s; }
.list-item:nth-child(14) { animation-delay: 1.95s; }
.list-item:nth-child(15) { animation-delay: 2.1s; }
.list-item:nth-child(16) { animation-delay: 2.25s; }
.list-item:nth-child(17) { animation-delay: 2.4s; }
.list-item:nth-child(18) { animation-delay: 2.55s; }
.list-item:nth-child(19) { animation-delay: 2.7s; }
.list-item:nth-child(20) { animation-delay: 2.85s; }
.backButton { text-transform: uppercase; color: #888; background-color:transparent; border:0 none; background-image: url("../IMG/levelup.svg"); background-size: contain; background-repeat: no-repeat; cursor: pointer;  width:50px; height:50px; cursor:pointer; transition:all 0.3s; background-color: #fff;
  border-radius: 100%;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4); border: 4px solid #d40;}
.backButton:hover { background-position: 0px -2px; }
.backButton:before { content: attr(data-text);
  cursor: auto;
  left: 45px;
  font-size: 1.3rem;
  width: 74px;
  color: #d40;
  position: relative;
  display: inline-block;
  text-align: left;
  font-weight: bold;
  line-height: 1.3rem;}
.evTitle { text-align:right; }
.fbx { display:flex; }
.fx1 { flex:1; }
.choicesWrapper { padding:0 60px; width:100%; margin:0 auto; overflow:hidden; height:100%; flex:4; display:flex; flex-direction:column;}
.choicesOuter {  transition: all 0.3s; height:100%; width:300%; display:flex; flex-direction:row; overflow:hidden; position:absolute; left:0; top:0; }
.tshirtIcon { display:flex; flex-direction:column; justify-content:center; align-items:center; width:80px; height:80px; background-image: url("../IMG/tshirt.svg"); background-size: contain; background-repeat: no-repeat;}
.tshirtIcon:before { content:attr(data-size); font-size:2rem; }
.favfilter[data-filter='N'] { background-image: url("../IMG/heartoutline.svg"); }
.lbdfilter[data-filter='N'] { background-image: url("../IMG/filter.svg"); }
.lbdleaders[data-filter='N'] { background-image: url("../IMG/crown.svg"); }
.help, .helpfixed { background-image: url("../IMG/help4.svg"); background-size: contain; background-repeat: no-repeat; cursor: pointer;  width:42px; height:42px; position:absolute; right:0; }
.helpfixed { position:fixed; bottom:15px; right:10px; z-index:9999; transition:all 0.3s; }
.helpfixed:after { content:'help'; position:absolute; left:0; bottom:-12px; font-size:1rem; font-family:Roboto, sans-serif; text-align: center; width: 100%;}
.helpfixed:hover { background-color:#fff; border-radius:5px; }
[data-frame='help'] .helpfixed { background-image:url("../IMG/closeWhite.svg"); background-size:90%; background-position:center; background-color:#f40;}
[data-frame='help'] .helpfixed:after { content:'close'; }
#helpbox { max-width:80%; margin:0 auto; }

.favfilter[data-filter='Y'] { background-image: url("../IMG/redheart.svg"); }
#filterEnglish { font-size:2rem; margin:5px 0; }
.favfilter,.lbdleaders, .lbdfilter  { background-size: contain; background-repeat: no-repeat; cursor: pointer;  width:50px; height:50px; }
.findme { background-image: url("../IMG/person.svg"); background-size: contain; background-repeat: no-repeat; cursor: pointer;  width: 46px;   height: 46px; cursor: pointer; top: 2px;; cursor:pointer;}
.toggleOuter { width: 120px;
  height: 40px; background-image: url("../IMG/heartoutline.svg");  background-size: contain; background-repeat: no-repeat; cursor: pointer; background-color: rgba(255,255,255,0.1); border-radius: 5px; display: flex; align-items: center;}
.redheart { transition:all 0.5s; position:absolute; left:0; top:0; height:100%; width:40px; background-image:url("../IMG/redheart.svg"); background-size:contain; background-repeat:no-repeat; pointer-events:none; }
.toggleOuter[data-lit='Y'] .redheart { animation:bounce-in 0.5s forwards; }
.toggleOuter[data-lit='N'] .redheart { animation:bounce-out 0.5s forwards; }
.toggleOuter:after { position: absolute; right: 5px;}
.toggleOuter[data-lit='Y']:after { content:'following'; }
.toggleOuter[data-lit='N']:after { content:'not following'; }

#closeProfile_btn { height:40px; width:40px; position:absolute; top:15px; right:25px;  background-image:url("../IMG/close.svg"); background-repeat:no-repeat; background-size:contain;cursor: pointer; z-index: 9001;}
.bigClose { 
  height:60px; width:60px; position:absolute; top:15px; right:15px;  background-image:url("../IMG/closeWhite.svg"); background-repeat:no-repeat; background-size:contain;cursor: pointer; z-index: 9001;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

@keyframes bounce-out {
  0% { transform: scale(1); }
  25% { transform: scale(.95); }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(.3);
  } 
}

/*initial CSS for login and store history period only*/
.lip { display:none; }



.twdc_tfi { opacity:0 !important; }
.twdc_fi { opacity:1 !important; }
.trAll600ms { transition:opacity 0.6s; }
.showhide { background-image: url("../IMG/hide.svg"); background-repeat:no-repeat; background-size:30px 30px; background-position:center; width:40px; cursor:pointer; background-color:#eee;}
input[type='password'] + .showhide { background-image: url("../IMG/show.svg"); }
.scoreBoard { flex:1; background: rgba(200,200,220,0.5); min-width:200px; border-left: 1px dotted #fff; align-items: center; justify-content: center; padding:20px; display: flex; flex-direction: column;}
#personaldetails { margin-left:5px; display:flex; flex-direction:column; max-width:50%; }
.UB-QSmallTitle { font-size:1.8rem; color: #224; margin:5px 0; }
.searchBar { flex:1; min-width:200px; margin: 10px 0; align-items: center; justify-content: center; padding:10px;}
.searchBar:before { content:''; background-image:url("../IMG/magglass.svg"); background-size:contain; width:45px; height:45px; margin-right:5px; background-repeat:no-repeat;}
#searchbox { transition:all 0.3s; outline: none;  border: none; background: transparent; border-bottom: 1px solid #dda;  font-size: 3rem; line-height: 4rem; width:180px; margin-right:10px; }
#searchbox:hover { background:rgba(255,255,255,0.1);}
#searchbox::placeholder { color:#888; font-size:1.6rem; }
.odoOuter { font-size:2rem; line-height:2.1rem; display:flex; align-items: baseline;}
.odometer { margin-top:-4px; }
#myKmCounter, #myEvCounter, #myNSKmCounter, #myNSEvCounter { font-size: 2rem; line-height: 2.1rem; color: #46f;}
.sidebarTitle { font-size:2rem; }
.sidebarexp { font-size:1.6rem; margin:10px 0 5px 0; font-family:Roboto, sans-serif; }
.choicesOuter > div { height:100%; width:33.33333%; }
.eventSelector { display:flex; flex-direction:column; }
.hidden { pointer-events:none; width:0; height:0;}
.hidden .bigSelector { opacity:0; }
.bigSelector { transition:all 0.3s; border-radius:10px; border:5px solid #000; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:5rem; width:14vw; height:80px; cursor:pointer; scroll-snap-align: center; }
.bigSelector:hover { background:#ccc; text-shadow: 3px 3px 0px rgba(0,0,0,0.2);}
.eventName { font-size: 2rem;
  display: flex;
  align-items: center;max-height: 160px; 
  justify-content: center;
  transition: all 0.3s;
  list-style: none;
  cursor: pointer;
  width: 100%;
  text-shadow: 0 1px 3px rgba(255,255,255,0.3);
  flex-direction: column;
  background: rgba(255,255,255,0.2);
  padding: 10px;
  height: 100%;
  border-radius: 3px; text-align:center; }
.eventName span, .subEventName span { pointer-events: none;}
.eventName:hover {  background-color:rgba(255,255,255,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.1); border-radius: 5px;}
.evName { color: #224; font-family: Roboto; }
.subEventName .evName { color:#888; }
.eventLogo200 { background-size:contain; display:inline-block; height:80px; min-height:80px; min-width:80px; flex:1; background-repeat:no-repeat; background-position:center left; }
.explanation { font-family: Roboto, sans-serif !important; font-size: 1.6rem; padding: 0 20px; max-width: 96%; margin: 10px auto 0 auto; color: #666; font-weight: normal; text-align: left; }
.explanation * { font-family:Roboto, sans-serif !important; }
.subevYear, .chosenName { font-weight:bold; color:#444; }
.lighten { max-width: 50%; background: rgba(255,255,255,0.4); border-radius:5px; padding:20px; height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); margin: 5px 5px 5px 0;}
.headerBox { z-index:99; border-radius:3px; background: rgba(255,255,255,0.3); padding: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
#login { display: flex; align-items: center; justify-content: center; flex-direction:column;}
#add-event { box-shadow: 1px 1px 17px -1px rgba(0,0,0,0.1); transition:background-color 3s; width: 90%; margin: 0 auto; height: 95%; background: rgba(255,255,255,0.1);}
#add-event[data-stage='1'] .choicesOuter { left:0; }
#add-event[data-stage='2'] .choicesOuter { left:-100%; }
#add-event[data-stage='3'] .choicesOuter { left:-200%; }
.btncontainer { width:100%; max-width:360px; margin-top:20px; }
#reviewStatus { color:#f40; margin:10px 0; }
#adminlink { position:absolute; top:5px; left:5px; height:30px; width:30px; z-index:9999; }
#adminlink a { position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-image:url(../IMG/admin.svg); background-size:contain; }
#adminlink a:before { content:"ADMIN"; position:absolute; left:0; bottom:-10px; font-size:1rem;}
.UB-QSubTitle { display:flex; align-items:center; justify-content:center; height: auto !important; font-size: 4rem; padding: 20px 0; font-weight: bold;}
.subtitle { font-family:Arial, Helvetica, sans-serif; font-size:1.4rem; line-height:1.5rem; }
.subtext { font-size:1.4rem; margin-top:10px; background:rgba(255,255,255,0.2); padding: 5px 10px; border-radius: 3px;}
.subtext span { display:inline-block; font-family:Arial, Helvetica, sans-serif; font-size:1.4rem !important; line-height:1.6rem; }
.isHeader { padding: 10px; border-bottom: 1px dotted #fff; margin-bottom: 10px; }
#expandNS { margin:10px 0; }
#expandNS:empty::before { content:'No events selected'; }
.graphScaleP, .graphScale { width:100%; height:100%; }
.graphScaleP { display:none; }

.barsOuter { height: 100%; display:flex; width: 100%;}
.stcontainer { display:flex; flex-direction:column; gap:5px; }
/*transitions*/

.kontext .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	/*box-shadow: 0px 0px 120px rgba( 0, 0, 0, 0.8 );*/
}

.kontext .layer.show {
	visibility: visible;
}

.kontext {
	-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
	        perspective: 1000px;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.kontext .layer {
	-webkit-transform: translateZ( -100px );
	   -moz-transform: translateZ( -100px );
	        transform: translateZ( -100px );
}

.kontext .layer.show {
	-webkit-transform: translateZ( 0px );
	   -moz-transform: translateZ( 0px );
	        transform: translateZ( 0px );
}

.kontext.animate .layer.show.right {
	-webkit-animation: show-right 1s forwards ease;
	   -moz-animation: show-right 1s forwards ease;
	        animation: show-right 1s forwards ease;
}

.kontext.animate .layer.hide.right {
	-webkit-animation: hide-right 1s forwards ease;
	   -moz-animation: hide-right 1s forwards ease;
	        animation: hide-right 1s forwards ease;
}


/* CSS animation keyframes */

@-webkit-keyframes show-right {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide-right {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-right {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide-right {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-right {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide-right {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}

/* Dimmer */

.kontext .layer .dimmer {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	background: transparent;
}

	.kontext.animate .layer .dimmer {
		-webkit-transition: background 1s ease;
		   -moz-transition: background 1s ease;
		        transition: background 1s ease;
	}

	.kontext.animate .layer.hide .dimmer {
		visibility: visible;
		background: rgba( 0, 0, 0, 0.7 );
	}
/*end transitions*/

.spaceForScale { width:80px; min-width:80px; display:block;}
.fullVBar { height:100%; flex:1; display:block; }
.fullHBar { width:100%; flex:1; display:none; }
.graphDataWrapper { display:flex; position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility:hidden; }
.spacerH { display:none; border-bottom:1px dashed #000;}
.hBarWrapper { display:none; }
.whitebtn, .myacbtn { background: transparent; color:#fff; text-transform:uppercase; cursor:pointer; outline: none; border: none; height: 38px; font-size:1.8rem;font-weight:bold; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.loginbtn:before { content:'Sign In or Sign Up'; }
.myacbtn:before { content:'Your Profile'; }

.fbxai { display:flex; align-items:center; }
.fbxcol { display:flex; flex-direction:column; }
.mb10 { margin-bottom:10px; }
.mb10 input { margin-bottom:0; }
.ml10 { margin-left:25px; }
#lbrdfilter { justify-content:center; flex-direction:column;}
.profileField { font-size:2.6rem; margin:0 20px 20px 0; line-height:2.9rem; font-family:Roboto, sans-serif; }
.profileField[data-what="photo"] { width:120px; margin-top:10px; height:120px; border:1px dashed #fff; display:flex; flex-direction:column; align-items:center;justify-content:center; border-radius:100%; font-size: 2rem; text-align: center; background-size:cover; background-repeat:no-repeat; }
.profileField[data-ha="N"]:before { content:"no photo"; }
#theirAvatar, .profileField[data-ha="Y"] { border:4px solid #fff; }

.profileField[data-what='address']:empty:before { content:"no address on file"; font-size:2rem;}
.profileField[data-what='email'] { word-break: break-all; }

#TLmenu { display:none; }
body[data-frame='landing'] #TLmenu { display:flex; }

.menuBar button, .TLmenu button { display:none; }
.menuBar button[data-s='any'], .TLmenu button[data-s='any']   { display:flex; }
body[data-status='NLI'] button[data-s='NLI'] { display:flex; }
body[data-status='signedin'] button[data-s='signedin'] { display:flex; }
.ifLI { display:none; }
body[data-status='signedin'] .ifLI { display:flex; }
body[data-status='signedin'] .sionly { display:flex; }
body[data-status='NLI'] .sionly { display:none; }
.badgelist, #race-list, .photolist { width:100%; margin-bottom:30px; }
.photolist {
  column-count: 3;
  column-gap: 5px;
  width: 100%;
  margin-bottom:0;
  max-height: 400px;
  overflow: auto;
}
#race-list { max-height:400px; overflow:auto; }
body[data-frame='leaderboard'] button[data-what='leaderboard'] { display:none; }
body[data-frame='leaderboard'] button[data-what='leaderboardfilter'] { display:none; }
body[data-frame='myaccount'] button[data-what='myaccount'] { display:none; }
body[data-frame='editevents'] button[data-what='editevents'] { display:none !important; }

.shine:after {
  content : '';
  z-index:20;
	background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-animation-name: shine;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  position:absolute;
  height:100%;
  width:100%;
  background: linear-gradient(66deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 47%, rgba(250, 250, 250, 1) 52%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.2;
}

@-webkit-keyframes shine {
	0%, 10% {
		left: -100%;
	}
	
	100% {
		left: 100%;
	}
}

.gender { margin: 10px 0 0px 35px;
  justify-content: center;
  gap: 55px; }
#genderOuter { 
  gap: 55px;
  background: #eee;
  padding: 10px 10px 10px 35px;
  margin: 0 0 10px 0 !important;
}
.photolist > div {
    margin: 0;
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
    cursor:pointer;
    transition:opacity 0.3s;
    background-size: contain;
    background-repeat: no-repeat;
}
.photolist div:hover { opacity:0.8; }
.photolist img { vertical-align: bottom; box-shadow: 0 1px 3px rgba(0,0,0,0.3);}

/*radio button*/
input[type='radio'] { display:none; }
label {
  display: inline-block; height: 3rem;
  line-height: 3rem;
}

.gender input[type='radio'] + label:before {
  content: "";
    position: absolute;
    width: 3rem;
    height: 3rem;
    background: #f40;
    border-radius: 50%;
    transition: all .2s;
    left: -35px;
    border: 3px solid #f40;
    top: 0px;
}

.gender input[type='radio'] + label:after {
  content: "";
  position: absolute;
  width:3rem;
  height: 3rem;
  border-radius: 50%;
  left: -35px;
  border: 3px solid #333;
}
label.black:after { border: 3px solid #333; }

.gender input[type='radio']:checked + label:after {
  background: transparent;
  transition: all .5s;
  transform: scale(1);
}

.gender input[type='radio'] + label:before {
  transform: scale(0);
}
.gender input[type='radio']:checked + label:before {
  transform: scale(1);
  transition: all .4s;
}

.gender input[type='radio']:checked + label { color:#f40; }

.racelist:empty:before { content:'no events recorded'; }
.photolist:empty:before { content:'no photos stored'; }
.badgelist:empty:before { content:'no badges earned yet'; }
.badgelist { display: grid; flex-wrap: wrap; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.emptybadge { background-image: url("../IMG/emptyBadge2.png"); width: 100%; height: 120px; z-index: 9999; background-position: center; background-size: contain; background-repeat: no-repeat; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.emptybadge:before { content:attr(data-km)'km'; color:rgba(0,0,123,0.5);}
.awarded:before { display:none; }
#profileColumns { display:flex; flex-direction:row; padding-bottom: 5px; }
.profileFieldOuter { display:flex; align-items:center; }
.editMe { margin-right:10px; }


.editMe:before { 
  cursor: pointer;
  content: 'edit';
  display: block;
  background-color: transparent;
  transition: all 0.3s;
  border-radius: 3px;
  height: 2rem;
  width: 5rem;
  background-image: url(../IMG/edit.svg);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 2px;
  padding-left: 20px;
  line-height: 1.8rem;
  background-color: #33f;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.editMe:hover:before { background-color:#99f; }
.ypdivider { border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(255,255,255,0.2); margin:10px -20px; }
#yearfilter { display:flex; overflow:auto; scrollbar-width: none; }

.galleryControl .inputfile + label, .editGallery:before, .dashedbtn:before { width:auto; cursor:pointer; content:'edit'; background:transparent; transition:all 0.3s; border-radius:3px; font-size:1rem; color:#222; border:1px dashed #666; padding: 2px 3px; font-family:Roboto, sans-serif; display:block; line-height:1rem; height:16px;}
.dashedbtn[data-what='contactus']:before { content : 'request a change'; }
.dashedbtn[data-what='editnewevents']:before { content : 'add a new event'; }
.dashedbtn[data-what='submit']:before { content : 'submit events'; }
.dashedbtn[data-what='viewnewevents']::before { content: 'review'; }
.dashedbtn[data-what='viewnewevents'] {  position: absolute; top: 5px; right: 5px; }
.dashedbtn:hover:before { background-color:#fff; }
.dashedbtn { padding:0 !important; margin-bottom:10px;  }
.acTA { font-size:1.6rem; font-family: 'Lato', sans-serif; margin:20px 0 20px 0; border:0 none; height:140px; width:100%; resize:none; }
#imagelist { flex-wrap: wrap; margin-bottom:20px;}
#imagelist div { display:flex; align-items:center; justify-content:center; margin:5px; width:100px; max-width:100px; max-height:140px; transition:all 0.3s; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.1); min-height: 140px; background: #fff;}
#imagelist div:hover { opacity:0.6; }
#imagelist .selected { border:3px solid #f40; }
#imagelist:empty:before { content:'You have no images in your gallery'; font-family:Roboto, sans-serif; margin:20px; }
.inputfile + label { margin-right:10px; }

.inputfile + label:hover, .editGallery:hover:before { background-color:#fff; }
#myACWrapper[data-em='off'] .editMe, #myACWrapper[data-em='off'] #fulabel { display:none; }
#myACWrapper[data-em='on'] .deleteImage, #myACWrapper[data-em='on'] .setAvatar { display:block; } 

/*.galleryControl[data-edit='N'] .editGallery:before { content:'edit gallery'; }
.galleryControl[data-edit='Y'] .editGallery:before { content:'finished edit'; }*/
.galleryControl { display:flex; margin-bottom:10px; }
.deleteImage, .setAvatar { background-size: contain; background-repeat: no-repeat; display:none; z-index:10; position:absolute; background-color:#fff; width:20px; height:20px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.deleteImage { bottom:2px; right:2px; background-image: url("../IMG/close.svg"); }
.setAvatar { top:2px; left:2px; background-image: url("../IMG/profile.svg"); }
.deleteImage:hover { background-color:#f40; }
.setAvatar:hover { background-color:#0c0; }
.galleryControl[data-edit='Y'] ~ ul .deleteImage, .galleryControl[data-edit='Y'] ~ ul .setAvatar { display:block; } 
.palLogo { width:60px; min-width:60px; height:40px; margin-right:10px; background-repeat:no-repeat; background-size:cover; background-position:center; }
.palmares { display:flex; align-items:center; }
#bookedEvList .palmares { justify-content: space-between; }

#accessControlOuter { overflow:auto; margin:10px; display:flex; flex-direction:column;  }
#regform { display:flex; flex-direction:column; }
.code-input { 
  border: 1px solid #aaa !important;
  width: 40px !important;
  text-align: center !important;
  font-size: 4rem !important;
  margin: 5px 5px 5px 0 !important;
  padding: 0 !important;
}
#code-container { margin:20px auto; display:flex; }

.explain { font-family: Roboto, sans-serif; }
#noticeBox { background:#f40; background: linear-gradient(90deg,rgba(255, 68, 0, 1) 0%, rgba(255, 136, 0, 1) 100%); color:#fff; padding:10px; font-size:2rem; border-radius: 5px; }

#noticeBox:after { content: '';
  background-image: url(../IMG/flame.svg);
  background-size: 200px;
  background-position: right;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  z-index: 10; }
#completedPrompt { 
  font-size: 1.7rem;
  background: #f40;
  color: #fff;
  line-height: 3rem;
  padding: 0 10px;
  text-align: center;
}

.chartWrapper_dbl { display:flex; }
.chartWrapper_dbl .chart { flex:1; }
.chartWrapper_dbl .databox { flex:1; flex-direction:column;}

@keyframes rise {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.chartsvg {
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}
.chartsvg text {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transform: translateY(20%);
    text-anchor: middle;
    dominant-baseline: middle;
    animation: rise 900ms ease-in forwards 200ms;
    position:absolute !important;
 }

 circle { 
    transform: rotate(-90deg);
    transition: stroke-dashoffset 3s;
 }
.nomessage { display:none; }
.pcafter::after { content:'%'; font-weight:bold;  }
.pcafter { position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  align-items: center;
  font-size: 5rem;
}
.chart > .chartTitle { text-align:center; font-size:4rem; margin-top:30px; }
h2.chartTitle { width:100%; text-align:center; margin-top:30px; }
#totalmembers_field, #totalkm_field, #totalevents_field { font-size: 4rem; margin: 0 auto;}
.databox .chartTitle { text-align:center; font-size:1.6rem; }

.subtext .odometer-value { font-weight:bold; } 

@media (max-width: 800px) {
  .profileField[data-what="photo"] { width:90px; min-width:90px; min-height:90px; height:90px; max-height:90px; max-width:90px; }
  .stcontainer { flex-direction:row;  }
  #noticeBox { font-size:1.4rem; }
  .fullVBar { width:100%; flex:1; }
  .odometer { margin-top:0; }
  .favfilter,.lbdleaders, .lbdfilter { width:35px; height:35px; }
  .findme { width:32px; height:32px; }
  #myACWrapper { max-width: 90%; }
  .hBarWrapper { display: flex; scrollbar-width: none; flex-direction: column; height: 100%; overflow: auto;}
  .graphScale { display:none; }
  .graphScaleP { display:block; }
  .barsOuter { flex-direction:column;}
  .fullVBar { display:none; }
  .fullHBar { display:block; max-height: 36px; margin: 2px 0;}
  .spaceForScale { display:none; }
  .searchBar { margin:0; padding:10px 0; justify-content: left;}
  .searchBar:before { width: 30px; height: 30px;}
  .helpfixed { width: 32px; height: 32px;}
  .choicesWrapper { flex:5; padding:0 25px; }
  .spacerH { width:100%; display:block; height:30px; min-height:30px; max-height:30px; }
  .barGraphName { max-width:100%; min-width:50%;}
  .barGraphDist { font-size: 1.1rem; top: 5px; right: 2px; height: 25px; pointer-events:none; min-width:25px; }
  .fullHBar[data-hide='Y'] { max-height:0;}
  .back_btn { left:5px; width:3rem; height:3rem; margin-top:-1.5rem;}
  .forward_btn { right:5px; width:3rem; height:3rem; margin-top:-1.5rem;}
  .achievedBar { margin:0; border-left:0 none;}
  .fsfixedpage { flex-direction:column; }
  .bigSelector { width: 25.8vw; height: 50px; font-size: 2.5rem; border-width: 3px; }
  .scoreBoard { padding:5px; border-left:none;}
  .UB-QSubTitle { font-size:1.8rem; padding:10px;}
  .btncontainer { max-width:90%; }
  .chartWrapper_dbl { flex-direction:column; }
  .databox .chartTitle { margin-top:20px; }
  .rankBox { width:75%; }
  #searchbox { width:70px; }
  #accessControlOuter { max-width:90%; }
  #profileColumns { flex-direction:column; }
  #personaldetails { max-width:inherit; }
  .profileField { font-size:1.8rem; } 
  .eventLogo200 { height:50px; min-height:50px; max-height:50px; min-width:50px; }
  .eventName { font-size:1.6rem;}
  .evName { font-size:1.2rem; }
  .sidebarTitle { font-size:1.4rem; }
  .sidebarexp { font-size:1.2rem; }
  .odoOuter { font-size:1.4rem; line-height:1.4rem; }
  .explanation { font-size:1.4rem; max-width:95%; padding:0 10px;}
  .subEventName { height:50px; padding-left:60px; font-size:2rem; width: 85%; line-height:2rem;}
  .whitebtn { padding:0 10px; }
  .lighten { max-width:100%; width:100%; }
  #myEvCounter, #myKmCounter { font-size:1.2rem; line-height:1.3rem; }
  #showACWrapper { max-width:90%; min-width:90%; }
  .cta { padding:5px 10px; }
  .cta span {
    font-size: 1.2rem; line-height: 1.3rem;
  }
  .fpFlex { grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px; max-width:100%; }
  .cta span:nth-child(2) { margin-left:10px; width:10px;}
  .registered::before { width:30px; height:30px; left:-10px; }
  .box { font-size:1.4rem; }
  .wrapper { width:95%; }
  .eventLogo200 { margin-right:5px; }
  h2 { line-height: 3.6rem; font-size:3.2rem; }
  #theirProfileColumns { flex-direction:column; }
  #add-event {width: 97%; }
}