@charset "UTF-8";

header {
color:#F7F7F7;
}

header a, header a:hover, header a:focus {
color:#F7F7F7;
font-weight:bold;
}

header #iconMenu li {
text-align: center;
}

header #iconMenu span {
width: 100%;
}

header #iconMenu .boxLink {
background:#F7F7F7;
color:#333333;
border:1px solid #F7F7F7;
border-radius: 10px;
}

main {
margin: 25px 0px 25px;
}

.button .material-symbols-outlined, button .material-symbols-outlined, p .material-symbols-outlined {
font-size:inherit;
}

.leftSidebar h3 {
border-bottom: 1px solid #C7C7C7;
}

#profileBlock {
padding:0px;
}

#profileBlock #blockHeader {
border-top-left-radius:10px;
border-top-right-radius:10px;
border: 2px solid #fefefe;
-webkit-box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}

#profileBlock #blockHeadshot {
width:25%;
margin:10px;
border-radius:50%;
}

#profileBlock #blockButtons {
float:right;
padding:10px;
}

#profileBlock #logButton .material-symbols-outlined {
font-size:1rem;
}

#profileBlock #settingsButton .material-symbols-outlined {
font-size:1rem;
}

#profileBlock h4 {
margin:0px;
padding:10px 10px 0px;
}

#profileBlock p {
margin: 0px;
padding:0px 10px 10px;
}

#profileStats p {
margin: 0px;
padding:0px;
}

#profileStats p a {
float:right;
}

#profileQuests h4, #profileParties h4 {
padding-bottom: 0.313rem;
border-bottom:1px solid #C7C7C7;
}

#profileQuests #questPages, #profileQuests #createQuest, #profileParties #partyPages {
float:right;
}

#profileQuests #createQuest {
margin:-10px -10px 0px 0px;
}

#mediaBox #mediaBoxHero {
width:100%;
border-radius:50%;
}

#mediaBox #mediaText, #mediaBox #questText, #partyText, #captureSuccessMessage {
min-height:100px;
}

#mediaBox .button .material-symbols-outlined {
font-size:1.5rem;
}

#newCommentBox {
background:#333333;
margin:5px 0px -15px;
padding:15px;
}

#newCommentBox .callout {
background:#F7F7F7;
margin:0px;
padding:5px !important;
}

#newCommentBox .callout .commentText, #newCommentBox .callout .button {
margin:0px;
}

#newCommentBox .callout .commentText {
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}

#newCommentBox .callout .button[disabled] {
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border: 2.5px solid #333333 !important;
}

#newCommentBox .callout .button {
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border: 2.5px solid #333333 !important;
}

#mediaPosts .callout {
padding-left:0px;
padding-right:0px;
}

#mediaPosts .callout.postBlock {
position:relative;
}

#mediaPosts .callout.postBlock .optionsBox {
position:absolute;
top: 20px;
right: 20px;
background:#FFFFFF;
width:150px;
max-height:160px;
padding: 10px 10px 5px;
border: 1px solid #C7C7C7;
border-radius:8px;
overflow:scroll;
z-index:5;
}

#mediaPosts .callout.postBlock .optionsBox #optionBoxButtons button {
width:100%;
margin-bottom:5px;
}

#mediaPosts .thumbnail {
width:100%;
border-radius:50%;
}

#mediaPosts .mediaPostDetails h4, #mediaPosts .mediaPostDetails p {
margin:0px;
padding:0px;
line-height:125%;
}

#mediaPosts .postOptions, #mediaPosts .adOptions {
float:right;
}

#mediaPosts .lightBoxThis {
position: relative;
display:block;
background-size:cover !important;
aspect-ratio:16/9 !important;
}

#mediaPosts .lightBoxThis.vertical {
display:block;
background-size:cover !important;
aspect-ratio:4/5 !important;
width:100% !important;
max-height:800px !important;
}

#mediaPosts .lightBoxClick {
cursor: pointer;
}

#mediaPosts .lightBoxThis .moreMediaBlock {
position:absolute;
bottom:5px;
right:5px;
padding: 50px;
color:#FFF;
font-size:2.25rem;
font-weight:bold;
z-index: 50;
}

#mediaPosts .mediaBoxDetails {
background:#F7F7F7;
padding:10px 0px;
}

#mediaPosts .mediaBoxDetails.messageThreadClean {
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}

#mediaPosts .mediaBoxDetails h5, #mediaPosts .mediaBoxDetails p {
margin:0px;
padding:0px;
}

#mediaPosts .mediaBoxDetails .button {
margin:0px;
}

#mediaPosts video {
display:block;
width:100%;
height:auto;
}

#mediaPosts .postEngagements {
padding-top:5px;
border-top:1px solid #C7C7C7;
}

#mediaPosts .postEngagements p {
margin:0px;
padding:0px;
}

#mediaPosts .material-symbols-outlined {
font-size: inherit;
}

#mediaPosts .commentBox {
padding:5px 0px 0px;
margin:15px 0px 0px;
border-top:1px solid #C7C7C7;
}

#mediaPosts .commentBox .grid-container {
margin-top:10px;
}

#mediaPosts .commentBox p {
margin:0px;
padding:0px;
line-height:150%;
}

#mediaPosts .deletePost, #mediaPosts .optionsPost {
float:right;
padding: 0px 5px;
font-size:18px;
}

#questSearch .callout {
padding:0px;
}

#questSearch .callout.sponsoredQuest {
position:relative;
}

#questSearch .callout.sponsoredQuest .sponsorBubble {
position: absolute;
top:10px;
left:10px;
background:#333333;
padding:5px 10px;
color:#F7F7F7;
font-weight:bold;
border-radius:10px;
}

#questPills {
margin-bottom:15px;
text-align:center;
border-bottom:1px solid #C7C7C7;
}

#questPills span {
width: 100%;
font-size: 1.75rem;
}

#questSearch .callout.alert p {
margin-top:15px;
font-weight:bold;
}

#questSearch .callout .thumbnail {
border-top-right-radius:10px;
border-top-left-radius:10px;
}

#questSearch .callout h4, #questSearch .callout p {
margin:0px;
padding:0px 15px;
}

#questSearch .callout p:last-child {
margin-bottom: 15px;
}

.adventureList {
padding-top: 10px;
border-top:1px solid #C7C7C7;
}

.adventureList .adventureImage {
margin-bottom:10px;
border-radius:50%;
}

.adventureList .adventureName, .adventureList .adventureLocation, .adventureList .adventureMutual {
margin: 0px;
}

.adventureList .addFriend .button {
display:inline-block;
border-radius:0px;
}

.adventureList .addFriend .button:first-child {
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}

.adventureList .addFriend .button:last-child {
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}

.adventureList .addFriend.small .button .material-symbols-outlined, .adventureList .addFriend .button .material-symbols-outlined {
float:left;
margin-right: 5px;
font-size:inherit;
}

.getMoreAdventures {
display:block;
margin-bottom:15px;
}

#adventureSearch .callout {
padding:0px;
}

#adventureSearch .callout img {
border-top-left-radius:10px;
border-top-right-radius:10px;
}

#adventureSearch .recommendationDetails {
padding:0px 10px 15px;
}

#adventureSearch .recommendationDetails h5, #adventureSearch .recommendationDetails p {
margin:0px;
padding:0px 10px;
line-height:150%;
}

#adventureSearch .recommendationDetails .button {
display:inline-block;
margin:5px 0px 0px;
}

#adventureSearch .callout .button .material-symbols-outlined {
font-size:inherit;
}

#adventurePoints {
width:175px;
}

#adventureDay, #adventureDistance {
width:150px;
}

#adventurePoints a, #adventureDay a, #adventureDistance a {
display: block;
width:100%;
}

#profileHero #profileHeader {
position: relative;
height: auto;
margin-bottom:15px;
padding:0px;
border-radius:10px;
border: 2px solid #fefefe;
-webkit-box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}

#profileHero #profileHeader #sponsorBubble {
position: absolute;
top:15px;
left:15px;
background:#333333;
padding:5px 10px;
color:#F7F7F7;
font-weight:bold;
border-radius:8px;
}

#profileHero #profileHeader #partyMessage {
position: absolute;
top:-2px;
left:50%;
-webkit-transfrom: translateX(-50%);
transform: translateX(-50%);
background:#333333;
padding:5px 10px;
color:#F7F7F7;
font-size:1.25rem;
font-weight:bold;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border: 2px solid #fefefe;
border-top: 2px solid #333;
-webkit-box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}

#profileHero #profileHeadshot {
position: absolute;
bottom: 15px;
left: 15px;
width: 15%;
border-radius:50%;
}

#profileHero #editAlerts {
display:none;
position: absolute;
top: 15px;
left:50%;
-webkit-transfrom: translateX(-50%);
transform: translateX(-50%);
background: #F7F7F7;
padding: 5px 8px;
color: #F00;
font-weight:bold;
border:1px solid #C7C7C7;
border-radius:8px;
}

#profileHero #profileButtons {
position: absolute;
bottom: 15px;
right: 15px;
}

#profileHero #profileButtons .button {
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#profileHero #editProfile {
position: absolute;
bottom: 20px;
left: 20px;
}

#profileHero #editProfile.button {
padding:5px;
}

#profileHero #profileButtons .material-symbols-outlined, #profileHero #editProfile .material-symbols-outlined {
font-size:1rem;
}

#profileHero .button, #profileHero .material-symbols-outlined {
display:inline-block;
margin:0px;
}

#profileHero #profileHeadshot.thumbnail {
margin:0px;
}

#profileHero h1 {
line-height:100%;
}

#profileHero h1, #profileHero h4, #profileHero p {
margin:0px;
}

#profileHero #profileButtons .material-symbols-outlined {
font-size:1rem !important;
}

#profileHero .menu li a {
margin:0px !important;
padding:0px !important;
}

#profileHero .menu li {
margin:0px 10px 0px 0px !important;
padding:5px 20px 5px 0px !important;
position: relative;
text-decoration: none;
display: inline-block;
}

#profileHero .menu li:not(:last-child)::after {
  content: "•";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#profileHero .menu .material-symbols-outlined {
margin-top:-10px;
font-size:inherit;
}

#partyContactList {
max-height:200px;
padding-top:5px;
overflow: scroll;
}

#partyContactList img {
border-radius:50%;
}

#createMilestone.button, #createPoint.button {
margin:-5px -5px 0px 0px;
float:right;
}

#questEditForm {
clear:both;
}

#questDetails, #questDescription, #profileDescription, #reviewDetails, #partyDescription, #milestoneDetails, #questNote {
min-height:250px;
}

.mediaBox {
position:relative;
padding:0px;
}

.mediaBox .thumbnail {
border-top-right-radius:10px;
border-top-left-radius:10px;
}

.mediaBox .reviewRating {
position: absolute;
top:10px;
left:10px;
background:#FFE234;
padding:5px 10px;
color:#333333;
font-weight:bold;
border-radius:10px;
}

.mediaBox h4, .mediaBox p {
margin:0px;
padding:0px 15px;
}

.mediaBox p:last-child {
margin-bottom: 15px;
}

.flexBox {
display: flex;
align-items: center;
}

.flexBox h5 {
font-family: "Oxygen", sans-serif;
font-weight: normal;
}

.flexBox h5 span {
font-family: "Montserrat", sans-serif;
font-style:normal;
font-weight:900;
}

.cleanBottom {
padding-bottom:0px;
}

.green {
color:#55883B;
}

.red, .pcCelebration, .ccCelebration, .rcCelebration, .clearMediaCelebration {
color:#D63B63;
}

.videoPlayer {
position: relative;
user-select: none;
}

.videoPlayer video {
width: 100%;
display: block;
}

.videoPlayer .controls {
position:absolute;
bottom:0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
width:100%;
height:100px;
font-size:inherit;
}

.videoPlayer .controls .play-pause {
position:absolute;
bottom:14px;
left:13px;
}

.videoPlayer .controls .restart {
position:absolute;
bottom:14px;
left:40px;
}

.videoPlayer .controls .time {
position:absolute;
bottom:13px;
left:70px;
}

.videoPlayer .controls .mute {
position:absolute;
bottom:14px;
right:10px;
}

.videoPlayer .controls .fullscreen {
display:none;
}

.videoPlayer .controls .volume-slider {
position:absolute;
bottom:21px;
right:45px;
background: #C7C7C7;
height: 5px;
border-radius: 25px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}

.videoPlayer .controls .volume-slider::-webkit-slider-thumb {
width: 15px;
height: 15px;
background: #FFFFFF;
border-radius: 25px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}

.videoPlayer .controls .volume-slider::-moz-range-thumb {
width: 15px;
height: 15px;
background: #FFFFFF;
border-radius: 25px;
cursor: pointer;
}

.videoPlayer button {
cursor: pointer;
color: #F7F7F7;
font-size:inherit;
}

.videoPlayer input[type=range] {
cursor: pointer;
color: #F7F7F7;
font-size:inherit;
}

.videoPlayer .volume-slider {
width: 100px;
}

.videoPlayer .time {
color: white;
user-select: none;
font-size:inherit;
}

.videoPlayer .progress-bar {
position:absolute;
bottom:50px;
left:15px;
right:15px;
background: #C7C7C7;
height: 5px;
border-radius: 25px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}

.videoPlayer .progress-bar::-webkit-slider-thumb {
width: 15px;
height: 15px;
background: #FFFFFF;
border-radius: 25px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}

.videoPlayer .progress-bar::-moz-range-thumb {
width: 15px;
height: 15px;
background: #FFFFFF;
border-radius: 25px;
cursor: pointer;
}

.postBox {
padding:15px 0px;
}

.postBox #optionBox button {
width:100%;
padding:5px;
text-align:left;
}

.postBox #optionBox button .material-symbols-outlined {
font-size:1rem;
}

.postBox .input-group {
height:2.4375rem;
margin-bottom:.9375rem;
padding:0rem;
}

.postBox .adventureList {
max-height:200px;
margin:0px auto 15px;
border:none;
overflow:scroll;
}

.postBox .adventureList p {
margin:0px;
padding:0px;
font-size:.8rem;
}

.postBox #shareFriends {
position:relative;
width:100%;
}

.postBox #shareFriends h5 {
font-weight:bold;
}

.postBox #shareFriends input[type=checkbox] {
position:absolute;
right:15px;
}

#bigMediaBox {
background:#F7F7F7;
}

#bigMediaBox .mediaBoxCall {
height:100%;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
}

#bigMediaBox .grid-container {
padding:10px;
}

#bigMediaBox #bigImageBox {
position: relative;
display:block;
background: #FFF;
border:1px solid #C7C7C7;
border-right:none;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
overflow: hidden;
}

#bigMediaBox #bigImageBox #bigMediaLogo {
position: absolute;
top:10px;
left:10px;
z-index:75;
}

#bigMediaBox #bigImageBox .bigPrevious {
position: absolute;
top:50%;
left:10px;
background:#333;
padding: 10px;
color:#FFF;
text-align: center;
border-radius:50%;
z-index:75;
}

#bigMediaBox #bigImageBox .bigNext {
position: absolute;
top:50%;
right:10px;
background:#333;
padding: 10px;
color:#FFF;
text-align: center;
border-radius:50%;
z-index:75;
}

#bigMediaBox #bigImageBox .bigPrevious .material-symbols-outlined, #bigMediaBox #bigImageBox .bigNext .material-symbols-outlined {
margin:0px !important;
padding:0px !important;
}

#bigMediaBox #bigImageBox .bigMedia {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}

#bigMediaBox #bigImageBox .bigMedia.vertical {
max-height:100% !important;
}

#bigMediaDetails .thumbnail {
border-radius:50%;
}

#captureHomeText, #captureQuestText, #capturePartyText, #shareMessage, #updateText {
background:#FFFFFF;
width:100%;
height:200px;
border:none;
-webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
resize: none;
overflow: scroll;
}

#shareMessage {
height:100px;
}

input::placeholder, textarea::placeholder {
font-weight: bold;
color:#0a0a0a;
opacity:1 !important;
}

#accountLogin #accountEmail, #accountCodeForm #accountAccessCode {
margin-bottom:0px !important;
}

#accountLogin #emailResponse, #accountCodeForm #codeResponse {
color:#F00;
font-size:inherit;
}

#accountLogin #accountSumbmit, #accountCodeForm #accountSumbmit {
margin-top:15px;
}

.deleteQuest, #deleteParty, .deleteMilestone, .deleteReview, .deletePoint {
float:right;
}

.deleteMilestone {
margin:-5px -5px 0px 0px;
}

#questError, #registationErrors, .error {
color:#F00;
}

#profileEditForm h4, #profileEditForm p {
margin:0px;
padding:0px;
}

#startMessage {
font-size:.75rem;
}

#messageArea {
position:relative;
margin:0px;
padding:0px;
}

#messageArea #messageControlBox {
position:absolute;
bottom:0px;
left:0px;
width:100%;
margin:0px;
}

#messageArea #messageBox {
position:absolute;
top:0px;
left:0px;
bottom:100px;
width:100%;
margin:0px;
overflow:scroll;
}

#messageArea .material-symbols-outlined {
font-size:1.5rem;
}

#messageControl {
position:relative;
width:100%;
height:50px;
max-height:100px;
}

#messageControl #messageBackground {
position:absolute;
top:0px;
left:0px;
right:60px;
background:#F7F7F7;
height:50px;
max-height:100px;
border-radius:8px;
border:1px solid #C7C7C7;
}

#messageControl textarea#messageText {
position:absolute;
top:0px;
left:0px;
right:100px;
background:none;
max-width:85%;
height:50px;
max-height:100px;
padding-top:14px;
border:none;
border-radius:8px;
-webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
resize:none;
overflow: scroll;
}

#messageControl #messageTo {
position:absolute;
top:0px;
left:0px;
right:100px;
background:none;
max-width:85%;
height:50px;
max-height:100px;
padding-top:8px;
border:none;
border-radius:8px;
-webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
resize:none;
overflow: scroll;
}

#messageControl #messageReaction {
position:absolute;
top:1px;
right:65px;
font-size:1rem;
z-index:5;
color:#333333;
}

#messageControl #messageSubmit, #messageControl #messageCelebrate {
position:absolute;
top:0px;
right:0px;
font-size:1rem;
}

#messageControl .material-symbols-outlined {
font-size:1.3rem;
}

#messageControl button {
border:none;
}

#messageBox ::-webkit-scrollbar {
width: 18px;
height: 10px;
}
             
#messageBox ::-webkit-scrollbar-track-piece  {
background: #F7F7F7;
border-left: 1px solid #F7F7F7;
}
             
#messageBox ::-webkit-scrollbar-thumb:vertical {
background: #333333;
height: 25px;
border-radius: 8px;
}

#messageBox .mine, #messageBox .theirs {
padding:5px 10px;
}

#messageBox .mine {
background:#E2F8F9;
}

#messageBox .theirs {
background:#E7E7E7;
}

#messageBox p {
margin:0px;
padding:0px;
}

.loadingDots {
  position: relative;
  font-size: inherit;
}

.loadingDots::after {
  content: '...';
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  animation: dots 2s steps(3, end) infinite;
}

@keyframes dots {
  from { width: 0 }
  to { width: 1.2em } /* Adjust to control the expansion */
}

#messageBox img.threadImage {
margin-bottom:5px;
border-radius:50%;
}

#messageBox .rowSpliter {
position: relative;
width: 100%;
text-align: center;
margin-bottom:15px;
padding-top:12px;
}

#messageBox .rowSpliter p.dateSpliter {
position: relative;
display: inline-block;
background:#F7F7F7;
width:250px;
margin:0px auto 15px;
padding:0px 10px;
border:1px solid #C7C7C7;
border-radius:8px;
z-index: 4;
}

#messageBox .rowSpliter::before,
#messageBox .rowSpliter::after {
  content: "";
  position: absolute;
  top: 50%;
  left:50%;
  height: 1px;
  background-color: #333;
  transform: translateY(-50%, -50%);
  z-index: 0;
  width: 35%;
}

#messageBox .rowSpliter::before {
  left: 12.5%;
}

#messageBox .rowSpliter::after {
  right: 12.5%;
}

#messageBox .seen {
margin:0px;
padding:0px;
text-align:center;
line-height:0px;
}

#messageBox .seen .material-symbols-outlined {
font-size:inherit;
}

#messageBox .messageEmbed img {
width:100%;
margin-bottom:10px;
border-radius:8px;
}

#reviewBlock #reviewNumber {
font-size:50px;
font-weight:bold;
}

#reviewBlock .starReview {
margin:0px;
padding:2px 0px 0px;
}

#reviewBlock .currentStar {
margin:0px;
padding: 0px 5px 0px; 
color: #C7C7C7;
font-size: 2.5rem;
cursor: pointer;
}

#reviewBlock .currentStar.highlight {
  color: gold;
}

#reviewBlock .thumbnail {
border-radius:50%;
}

#reviewBlock h3 {
line-height:50%;
border-bottom:none;
}

.starRating {
margin:0px;
padding:2px 0px 0px;
}

.currentStar {
margin:0px;
padding: 0px 5px 0px;
color: #C7C7C7;
font-size: 1.5rem;
cursor: pointer;
}

.currentStar.highlight {
  color: gold;
}

#editReview .material-symbols-outlined {
font-size:1rem !important;
}

#proTabs li {
width:33.3333333333%;
}

#proTabs li .material-symbols-outlined {
font-size:1.75rem;
}

#proTabs h4 {
margin:0px 0px 5px 5px !important;
padding:0px !important;
line-height:100% !important;
}

#proTabs p {
margin:0px 0px 0px 5px !important;
padding:0px !important;
line-height:100% !important;
}

.timeline .timeline-item::after, .timeline .timeline-item::before {
  clear: both;
  content: '';
  display: block;
  width: 100%;
}

.timeline {
  margin: 30px auto;
  padding: 0 10px;
  position: relative;
  transition: all 0.25s ease-in;
  width: 100%;
}

.timeline::before {
  background: #333333;
  content: '';
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 3px;
}

.timeline::after {
  clear: both;
  content: '';
  display: table;
  width: 100%;
}

.timeline a {
  color: #333333;
  font-weight: bold;
  transition: all 0.25s ease-in;
}

.timeline a:hover {
  box-shadow: 0 1px 0px 0px #fefefe;
  transition: all 0.25s ease-in;
}

.timeline .timeline-item {
  margin-bottom: 50px;
  position: relative;
}

.timeline .timeline-item .timeline-icon {
  background: #333333;
  border-radius: 50%;
  height: 50px;
  left: 50%;
  margin-left: -23px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50px;
  color:#FFF;
}

.timeline .timeline-item .timeline-icon .material-symbols-outlined {
  position: relative;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  
}

.timeline .timeline-item .timeline-content {
  padding: 20px;
  text-align: right;
  transition: all 0.25s ease-in;
  width: 45%;
  background: #F7F7F7;
  border-radius:8px;
}

.timeline .timeline-item .timeline-content p {
  color: #333333;
}

.timeline .timeline-item .timeline-content p {
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content .timeline-content-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content.right {
  float: right;
  text-align: left;
}

.timeline .timeline-item .timeline-content .editMilestone, .timeline .timeline-item .timeline-content .editPoint {
float:left;
}

.timeline .timeline-item .timeline-content.right .editMilestone, .timeline .timeline-item .timeline-content.right .editPoint {
float:right;
}

@media screen and (max-width: 39.9375em) {
  .timeline {
    margin: 30px;
    padding: 0;
    width: 90%;
  }
  .timeline::before {
    left: 0;
  }
  .timeline .timeline-item .timeline-content {
    float: right;
    text-align: left;
    width: 90%;
  }
  .timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {
    border-left: 0;
    border-right: 7px solid #fefefe;
    left: 10%;
    margin-left: -6px;
  }
  .timeline .timeline-item .timeline-icon {
    left: 0;
  }
}

.chart-container {
    width: 100%;
    padding: 10px;
	padding-top: 50%;
    position: relative;
  }
  svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
  .chart-container .x-labels,
  .chart-container .y-labels {
    font-size: .8rem !important;
    fill: #333;
  }
  .y-labels text {
    text-anchor: end;
  }
.line {
    fill: none;
    stroke: #333;
    stroke-width: 1;
  }
.dot {
    fill: #333;
    stroke: #fff;
    stroke-width: 1;
  }
  
  .tooltip {
  position: absolute;
  background: rgba(51,51,51,0.75);
  color: white;
  padding: 8px 11px;
  border-radius: 8px;
  pointer-events: none;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.2s;
  opacity: 0;
}

.tooltip .bigTip {
font-size:16px;
font-weight:bold;
}

.tooltip .littleTip {
color:#C7C7C7;
}
.tooltip.visible {
  opacity: 1;
}

.chart-container .axis-line {
stroke: #C7C7C7;
stroke-width: 1;
}

#performanceMetrics h1, #performanceMetrics h2, #performanceMetrics h3,#performanceMetrics h4, #performanceMetrics h5, #performanceMetrics h6 {
margin:0px 0px 5px;
padding:0px;
border:none;
}

#powerBars p {
margin:0px;
padding:0px;
}

.followStats p {
margin:0px;
padding:0px;
font-size:2rem;
font-weight:bold;
line-height:100%;
}

.followStats .material-symbols-outlined {
margin:10px 0px 0px;
padding:0px;
font-size:1.75rem;
}

#performanceTracker .mb15 {
margin-bottom:15px;
}

#performanceTracker .material-symbols-outlined {
font-size:2rem;
}

.textBox {
background:#333;
padding: 12px 10px 10px;
color:#FFF;
}

.textBox .material-symbols-outlined {
margin:0px;
padding:0px;
line-height:100%;
}

.cleanMargin li {
margin:0px !important;
padding:0px 10px 10px 0px !important;
}

#powerTable th, #powerTable td {
text-align:center;
}

#powerTable .thumbnail {
margin:0px;
}

#adTabs .cleanCallout {
padding:0px;
}

#adTabs .fakeTab {
display:inline-block;
width:100%;
padding: 15px;
border-right: 1px solid #C7C7C7;
}

#adTabs .fakeTab a {
margin:0px;
padding:0px;
line-height:100%;
}

#adTabs .borderBottom {
padding:0px;
margin-bottom:15px;
border-bottom: 1px solid #C7C7C7;
}

#adTabs .borderBottom a {
font-weight:normal;
}

#adTabs .borderBottom.selected {
border-bottom:none;
}

#adTabs .borderBottom.selected a {
font-weight:900;
}

#adTabs .borderBottom .button {
margin:4px 4px 0px 4px;
}

#adTabs .newPadding {
padding:0px 15px;
}

#adTabs table {
margin:0px;
border-spacing:0;
border-collapse: separate;
border-radius:8px;
}

#adTabs table thead, #adTabs table tfoot {
background:#EAEAEA;
color:#333;
}

#adTabs table tfoot th:first-child {
border-bottom-left-radius:10px !important;
}

#adTabs table tfoot th:last-child {
border-bottom-right-radius:10px !important;
}

#adTabs table.hover thead tr:hover {
  background:#EAEAEA;
}
#adTabs table.hover tfoot tr:hover {
  background:#EAEAEA;
}

#adTabs input, #adTabs .switch {
margin:0px;
padding:0px;
}

#adTabs .material-symbols-outlined {
margin:0px;
padding:0px;
font-size:1rem;
}

.my-legend {
  width: 100%;
  overflow:hidden;
}

.my-legend .legend-labels {
  list-style: none;
  padding: 0;
  margin: 0;
}

.my-legend .legend-labels li {
  display: flex;
  float: left;
  align-items: center;
  margin-bottom: 6px;
  margin-right:5px;
}

.my-legend .legend-labels li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #C7C7C7;
}

.piechart-container {
    display: flex;
    align-items: center;
    gap: 20px;
  }

.piechart-container .piechart {
width: 200px;
height: 200px;
border-radius: 50%;
border:1px solid #C7C7C7;
}

.piechart-container .legend {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .piechart-container .legend li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  .piechart-container .color-box {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border-radius: 3px;
	border: 1px solid #C7C7C7;
  }

/* Tooltip container */
.toolinfo {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.toolinfo .material-symbols-outlined {
font-size:1rem;
}

/* Tooltip text */
.toolinfo .tooltext {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 6px;
  position: absolute;
  z-index: 1000;
  bottom: 125%; /* Position above the element */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Avoid tooltip interfering with pointer */
}

/* Tooltip arrow */
.toolinfo .tooltext::after {
  content: "";
  position: absolute;
  top: 100%; /* bottom edge of tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip text on hover */
.toolinfo:hover .tooltext {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* Enable interaction if needed */
}

#launchPage .button.hollow {
background:#FFF;
color:#333;
border:1px solid #FFF;
}

#launchPage .grid-container {
margin: 50px auto 0px;
}

#launchPage #howBox .material-symbols-outlined {
background:#333333;
margin-bottom:15px;
padding: 10px;
color:#FFFFFF;
font-size:3rem !important;
border-radius:50%;
}

#CTABox {
background: #333333;
margin:50px auto -25px;
padding:50px 25px;
color:#FFF;
border-top:1px solid #C7C7C7;
border-bottom:1px solid #C7C7C7;
}

#CTABox .button {
background:#FFF;
color:#333;
}

footer {
background:#333333;
padding: 15px 0px 15px;
color:#FFF;
}

footer .grid-container {
margin-top:25px;
}

footer .fancyMenu.menu a {
margin:0px;
padding:5px 5px 5px 0px;
}

footer .fancyMenu.menu li {
margin:0px 10px 0px 0px;
padding:5px 10px 5px 0px;
position: relative;
text-decoration: none; /* optional, remove underline */
color: #FFF; /* set link color */
display: inline-block;
}

footer .fancyMenu.menu li:not(:last-child)::after {
content: "•";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #FFF;
}

footer a {
color:#FFF;
}

footer a:hover {
color:#F7F7F7;
}

#platformUpdates {
position:fixed;
bottom:0px;
background:#333;
width:100%;
padding:15px;
color:#FFF;
font-weight:bold;
border-top:1px solid #C7C7C7;
z-index: 50;
}

@media print, screen and (max-width: 39.99875em) {
.adventureList .addFriend .button:first-child { border-radius:10px; }
.adventureList .addFriend .button:last-child { border-radius:10px; }
footer .menu li:not(:last-child)::after { content: ""; }
#profileHero .menu li:not(:last-child)::after { content: ""; }
}