/* ================================================================================== */
/* == Normalize.css v8.0.1 ========================================================== */
/* ================================================================================== */

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none }

/* Viewport Sizing */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}



/* ================================================================================== */
/* == Variables ===================================================================== */
/* ================================================================================== */

:root { 
  --text-darkest: #353A40;
  --text-default: #6F7780;
  --text-lightest: #9EA4AE;	

  --color-blue: #475FCD;
  --color-blue-grad: linear-gradient(90deg, #5B85F1 0%, #3044a6 100%);
  --color-blue-grad: linear-gradient(90deg, #5777E3 0%, #3044a6 100%);
  --color-blue-grad: linear-gradient(90deg, #5777E3 0%, #2A51C3 100%);
  --color-blue-grad: linear-gradient(90deg, #5B85F1 0%, #2A51C3 100%);
    --color-blue-grad-vert: linear-gradient(180deg, #5B85F1 0%, #2A51C3 100%);

  
  --color-yellow: #FDD948;
  --color-yellow2: #F6C35A;
  
  
  --color-orange: #F09162;
  --color-orange2: #F1A446;
  --color-orange-grad: linear-gradient(90deg, #F6C35A 0%, #F09162 100%);
  --color-orange-grad: linear-gradient(90deg, #F4B95B 0%, #F09162 100%);
    --color-orange-grad-vert: linear-gradient(180deg, #F4B95B 0%, #F09162 100%);
  //--color-orange-grad: linear-gradient(90deg, #F6D252 0%, #EF8264 100%);


  --color-green: #46B328;
  --color-green-grad: linear-gradient(90deg, #93D86E 0%, #46B328 100%);
  --color-green-grad: linear-gradient(90deg, #7FCE5C 0%, #46B328 100%); 
    --color-green-grad-vert: linear-gradient(180deg, #7FCE5C 0%, #46B328 100%); 
  //--color-green-grad: linear-gradient(90deg, #46B328 0%, #11998e 100%); 

  
  --color-red: #F86B67;
  --color-red-grad: linear-gradient(90deg, #F56685 0%, #EB4D6F 100%); 
    --color-red-grad-vert: linear-gradient(180deg, #F56685 0%, #EB4D6F 100%); 
 
  
  --color-border: #EBEBEF;
  
  --bg-main: #F4F7FB;
  --bg-main: #EBEBEF;
  
  --bg-splash: radial-gradient(circle at 30% 10%, #546AD5 0%, #3044a6 100%);
  --bg-splash: linear-gradient(180deg, #5777E3 0%, #3044a6 100%);


  --bg-header: linear-gradient(180deg, #5B85F1 0%, #3044a6 100%);
  //--bg-header: linear-gradient(180deg, #5B85F1 0%, #2A51C3 100%);
  
}



/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html,body { font-family: 'proxima-soft', Proxima Nova, Source Sans Pro, sans-serif; min-height: 100vh; background: var(--bg-main); color: var(--text-default); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.homepage { padding-bottom: 51px; }

.desktop-container { max-width: 800px; padding: 0 20px; margin: 0 auto; position: relative; }

h1, h2, h3, h4, h5, strong { color: var(--text-darkest); }

a { text-decoration: none; color: var(--color-blue); transition: all 0.218s; }
a:hover { color: var(--color-orange); }

.button { display: inline-block; border: none; background: var(--color-blue); padding: 10px 15px; color: #fff; border-radius: 5px; }
.button:hover { color: #fff; }


/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

.page-header { text-align: center; color: #fff; padding: 22px 0 21px 0; position: relative; }
.page-header .page-title h1 { font-family: bebas-neue, sans-serif; font-weight: normal; font-size: 46px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); margin: 0 0 -1px 0; line-height: 1; }
.page-header .page-title h1 a { color: #fff; }
.page-header .page-title p { text-shadow: 0 1px 3px rgba(0,0,0,0.5); opacity: 0.75; }
.page-header .back-button { position: absolute; top: 0px; left: 0; background: url(img/icon-arrow-back-white.svg) no-repeat center left; background-size: 25px; text-indent: -9999px; width: 50px; height: 75px; opacity: 0.7 }
.page-header .settings-link { position: absolute; top: 0px; right: 0; background: url(img/icon-settings.svg) no-repeat center right; background-size: 22px; text-indent: -9999px; width: 50px; height: 75px; opacity: 0.6; }


.header-color { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: var(--bg-header);
transform: skewY(-5deg); height: 400px; top: -180px; overflow: hidden; }
/*.header-color:before { content: ""; background: var(--bg-splash); position: absolute; height: 290px; width: 100%; transform: skewY(-5deg); opacity: 0.75; }
.header-color:after { content: ""; background: var(--bg-splash); position: absolute; height: 290px; width: 100%; transform: skewY(15deg); opacity: 0.75; }*/


/* Pull to refresh page */
.ptr--icon,
.ptr--text { position: relative; z-index: 9999; }
.ptr--text { color: rgba(255,255,255,0.5) !important; font-weight: 500; text-align: center; text-transform: uppercase; font-size: 12px; }
.ptr--box { padding: 15px 10px 5px 10px !important; }
.ptr--icon .refreshing-arrow { display: block; width: 20px; height: 20px; background: url(img/icon-refreshing-arrow.svg) no-repeat center top; background-size: auto 15px; opacity: 0.6; margin: 0 auto; }
.ptr--icon .refreshing-icon { display: block; width: 20px; height: 20px; background: url(img/loader9.svg) no-repeat center; background-size: 100%; margin: 0 auto; }


/* Pigeon Status Widget */
.pigeon-widget-status { position: relative; z-index: 9; background: rgba(0,0,0,0.2); text-align: right; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); padding: 0 10px; }
.pigeon-widget-status li { display: inline-block; }
.pigeon-widget-status li a { display: block; color: rgba(255,255,255,0.8); padding: 10px; }



/* ================================================================================== */
/* == Content ======================================================================= */
/* ================================================================================== */

.homepage .desktop-container { max-width: 1000px; }

.content { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.15); position: relative; margin-bottom: 40px; }

.profile-pic { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; overflow: hidden; background: var(--bg-header); color: #fff; font-size: 1em; font-weight: 900; }
.profile-pic:hover { color: #fff; }
.profile-pic svg { display: block; width: 100%; height: 100%; }

.people-list {  }
.people-list li { overflow: hidden; margin-bottom: 20px; }
.people-list li:last-child { margin-bottom: 0; }
.people-list li .profile-pic { float: left; width: 40px; height: 40px; }
.people-list li .info { float: right; width: calc(100% - 50px); font-size: 15px; font-weight: 600; color: var(--text-darkest); }
.people-list li .name { float: left; margin-bottom: 5px; }
.people-list li .reps { float: right; }


/*Reps slider bar*/
.people-list li .track { height: 100%; width: 100%; background: var(--color-border); border-radius: 10px; overflow: hidden; clear: both; height: 8px; }
.people-list li .track .track-inner { margin-left: -2px; width: calc(100% + 2px); height: 100%; }
.people-list li .track .exercise { float: left; border-radius: 0; position: relative; transition: width 1s ease-in-out; height: 100%; box-shadow: inset 2px 0 0 var(--color-border); }
.people-list li .track .exercise[data-difficulty="0.25"] { background: var(--color-blue-grad); }
.people-list li .track .exercise[data-difficulty="0.50"] { background: var(--color-green-grad); }
.people-list li .track .exercise[data-difficulty="1.00"] { background: var(--color-orange-grad); }
.people-list li .track .exercise[data-difficulty="1.50"],
.people-list li .track .exercise[data-difficulty="2.00"] { background: var(--color-red-grad); }
.people-list li .track .exercise:last-of-type:after { content: ""; position: absolute; top: 0; right: 0px; width: 4px; height: 100%; background: url(img/rounded-corners.svg) no-repeat left; background-size: 100% 100%; z-index: 999; } /*This makes rounded corners.*/


/* Breakdown Stats */
.people-list li .breakdown { background: linear-gradient(180deg, #fff 0%, #EBEBEF 100%); border-radius: 8px; padding-bottom: 15px; }
.people-list li .breakdown div { padding: 15px 18px 0 20px; overflow: hidden; }
.people-list li .breakdown strong { float: left; }
.people-list li .breakdown span { float: right; }
.people-list li .breakdown .delete { float: right; background: var(--color-red); color: #fff !important; font-size: 0.8rem; line-height: 1.35rem; padding: 0 5px; border-radius: 4px; margin-left: 10px; border: none; cursor: pointer; }
.people-list li .breakdown .exercise[data-difficulty="0.25"] span { color: var(--color-blue); }
.people-list li .breakdown .exercise[data-difficulty="0.50"] span { color: var(--color-green); }
.people-list li .breakdown .exercise[data-difficulty="1.00"] span { color: var(--color-orange); }
.people-list li .breakdown .exercise[data-difficulty="1.50"] span,
.people-list li .breakdown .exercise[data-difficulty="2.00"] span { color: var(--color-red); }


/*Add Bar*/
.add-bar { position: fixed; bottom: 0; width: 100%; background: #fff; color: var(--text-darkest); text-align: center; box-shadow: 0 0px 15px rgba(0,0,0,0.07); border-top: 1px solid var(--color-border); background: linear-gradient(180deg, #fff 0%, #F8F8FA 100%); z-index: 9; }
.add-bar .desktop-container { display: flex; }
.add-bar .exercise-reps { padding: 14px 0 0 25px; }
/*.add-bar .exercise-reps:after { content: " Reps"; font-size: 12px; font-weight: 500; }*/
.add-bar .exercise-reps span { float: left; background: var(--color-orange); color: #fff; border-radius: 4px; font-weight: 600; font-size: 14px; padding: 2px 7px; }
.add-bar .exercise-reps[data-difficulty="0.25"] span { background: var(--color-blue-grad-vert); }
.add-bar .exercise-reps[data-difficulty="0.50"] span { background: var(--color-green-grad-vert); }
.add-bar .exercise-reps[data-difficulty="1.00"] span { background: var(--color-orange-grad-vert); }
.add-bar .exercise-reps[data-difficulty="1.50"] span,
.add-bar .exercise-reps[data-difficulty="2.00"] span { background: var(--color-red-grad-vert); }

.add-bar .add-button { border-left: 1px solid var(--color-border); padding: 15px 0; cursor: pointer; width: 80px;}
/*.add-bar .add-button:hover { background: linear-gradient(180deg, #f7f7f7 0%, var(--color-border) 100%); }*/
.add-bar .add-button:active { background: var(--color-blue); color: #fff; }

@media only screen and (min-width: 1000px) {
  .add-bar .desktop-container { border-right: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
}


/*Exercise Selector*/
.exercise-selector { flex: 1 1 0; position: relative; cursor: pointer; text-align: left; }
.exercise-selector .placeholder { padding: 15px 35px 15px 15px; background: url(img/dropdown-arrow.svg) no-repeat right 19px center; }
.exercise-selector ul { display: none; position: absolute; width: 150px; bottom: 60px; left: 0; background: #fff; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.25); border-radius: 8px; overflow: hidden; }
.exercise-selector.open ul { display: block; }
.exercise-selector ul li { padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.exercise-selector ul li:active { background: var(--color-blue); color: #fff; }


@media only screen and (max-width: 400px) {
  .add-bar .exercise-reps { padding-left: 15px; }
  .exercise-selector .placeholder { background-position: right 14px center; }
  .add-bar .add-button { width: 64px; }
}





/*Hello User*/
.hello-user { display: none; }
.hello-user { position: relative; float: left; width: 300px; padding: 0 20px 0 0; text-align: center; }
.hello-user .day-heading { display: block; padding: 15px 20px; }
.hello-user .profile-pic { display: block; width: 100px; height: 100px; margin: 0 auto; }
.hello-user h3 { margin: 20px -20px 10px; padding: 15px 0 0 0; border-top: 1px solid var(--color-border); }
.hello-user ul li { overflow: hidden; margin-bottom: 10px; }
.hello-user ul li strong { float: left; font-weight: 500; }
.hello-user ul li span { float: right; font-weight: 700;}
.hello-user ul li[data-difficulty="0.25"] span { color: var(--color-blue); }
.hello-user ul li[data-difficulty="0.50"] span { color: var(--color-green); }
.hello-user ul li[data-difficulty="1.00"] span { color: var(--color-orange); }
.hello-user ul li[data-difficulty="1.50"] span,
.hello-user ul li[data-difficulty="2.00"] span { color: var(--color-red); }


/* Daily Activity */
.day-heading { display: flex; justify-content: space-between; align-items: center; text-align: center; border-bottom: 1px solid var(--color-border); margin: -20px -20px 20px -20px; }
.day-heading .day-nav-btn { height: 90px; width: 70px; border: none; text-indent: -9999px; }
.day-heading .day-nav-btn:disabled { opacity: 0; cursor: not-allowed; }
.day-heading .prev-day { background: url(img/chevron-left.svg) no-repeat center; background-size: 55%; }
.day-heading .next-day { background: url(img/chevron-right.svg) no-repeat center; background-size: 55%; }
.day-heading .date { padding: 15px; }
.day-heading .date p { color: var(--text-default); }


@media only screen and (min-width: 900px) {
  .homepage .page-body { float: right; width: calc(100% - 300px); }
  .hello-user { display: block; }
}



/* ================================================================================== */
/* == Join Page ===================================================================== */
/* ================================================================================== */

.page-join {}
.page-join .desktop-container { max-width: 950px; }
.page-join .header-color { height: 550px;}
.page-join .page-header { padding: 50px 0; }
.page-join .page-header h1 { font-size: 90px; }
.page-join .page-header p { font-size: 32px; }

@media only screen and (max-width: 600px) {
  .page-join .page-header { padding: 40px 0 50px; }
  .page-join .page-header h1 { font-size: 80px; }
  .page-join .page-header p { font-size: 27px; }
}
@media only screen and (max-width: 420px) {
  .page-join .page-header h1 { font-size: 70px; }
  .page-join .page-header p { font-size: 23px; }
}

.page-join .content { padding: 0; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.page-join section { padding: 50px; overflow: hidden; }
.page-join .content p { margin-bottom: 1rem; }
.page-join .content h1 { margin-top: 0; }
.page-join .content h2 { margin: -0.3em 0 1rem 0; font-size: 3rem; text-align: center; line-height: 1.15; color: #3045a5; }
.page-join .content h3 { margin: 2rem 0 1rem 0; font-size: 1.25rem; }
.page-join .content ul { margin-left: 1.5em; }
.page-join .content ul li { margin-bottom: 1rem; list-style: disc; }
.page-join .content ul li::marker { color: var(--color-green); }

.page-join .quick { padding-bottom: 0; text-align: center; overflow: visible; }
.page-join .quick .banner { display: block; margin: -75px auto 40px; max-width: 600px; background: var(--color-yellow); color: var(--text-darkest); font-weight: 500; font-size: 1.25rem; padding: 15px 18px; border-radius: 2px; box-shadow: 0 5px 12px -5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.2); transform: rotate(-1deg); }
.page-join .quick .button { display: inline-block; text-align: center; width: 210px; margin: 0.5em; font-size: 1.25rem; font-weight: 600; padding: 0.65em; }
.page-join .quick .button:first-of-type { background: var(--color-blue-grad-vert); border: 1px solid var(--color-blue); text-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 5px -1px rgba(0,0,0,0.3), 0 5px 20px -5px rgba(0,0,0,0.15); }
.page-join .quick .button:last-of-type { background: #f5f5f7; border: 1px solid var(--color-border); color: var(--text-default); }
@media only screen and (max-width: 600px) {
  .page-join .quick .banner { margin: -65px auto 25px; }
  .page-join .quick .button { width: 100%; margin: 1em 0 0 0; }
}
@media only screen and (max-width: 420px) {
  .page-join .quick .banner { margin: -65px -10px 20px -10px; }
}

.page-join .goal { }

.page-join .exercises { border: 1px solid var(--color-border); border-radius: 8px; margin-top: 40px; }
.page-join .exercises p { text-align: center; font-size: 1.25rem; border-bottom: 1px solid var(--color-border); background: #f5f5f7; padding: 25px; }
.page-join .exercises ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; padding: 0 25px; margin: 2rem 0; }
.page-join .exercises ul li { list-style: none; margin: 0; }
.page-join .exercises li strong { display: block; color: #dc763c; }
.page-join .exercises li span { font-size: 0.85em; }

.page-join .left { float: left; width: calc(50% - 25px); }
.page-join .right { float: right; width: calc(50% - 25px); }
.page-join .left h2 { text-align: left;}
.page-join img { display: block; max-width: 100%; width: 100%; border-radius: 8px; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2); }

.page-join .mix { border-top: 1px solid var(--color-border); }
.page-join .how { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: #f5f5f7; }

.page-join .join { border-bottom: 1px solid var(--color-border); }
.page-join .join .button { display: block; text-align: center; margin: 1em auto 0; font-size: 1.5rem; font-weight: 600; padding: 0.8em; }
.page-join .join .button:first-of-type { width: 300px; background: var(--color-blue-grad-vert); border: 1px solid var(--color-blue); text-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 5px -1px rgba(0,0,0,0.3), 0 5px 20px -5px rgba(0,0,0,0.15); }
.page-join .join .button:last-of-type { width: 230px; background: #f5f5f7; border: 1px solid var(--color-border); color: var(--text-default); font-size: 1.25rem; }

@media only screen and (max-width: 450px) {
  .page-join .join .button { width: 100% !important; }
}

/* FAQ */
.page-join .faq {}
.page-join .faq h2 { margin-bottom: 35px; }
.faq-accordion { border-top: 1px solid var(--color-border); }
.faq-accordion .faq-item { border-bottom: 1px solid var(--color-border); padd/ing: 15px 0 }
.faq-accordion .faq-question { background: #fff url(img/chevron-down.svg) no-repeat right center; background-size: 24px; border: none; font-weight: 600; font-size: 1.25rem; padding: 25px 35px 25px 0; width: 100%; text-align: left; color: var(--text-darkest); }
.faq-accordion .is-open .faq-question { background: #fff url(img/chevron-up.svg) no-repeat right center; background-size: 24px; }
.faq-accordion .faq-item .faq-answer { padding: 0 35px 10px 0; margin-top: -10px; }

@media only screen and (max-width: 700px) {
  .page-join .mix .left,
  .page-join .mix .right { float: none; width: 100%; }
  .page-join .mix img { margin: 50px auto 0; max-width: 360px; }
}

@media only screen and (max-width: 600px) {
  .page-join section { padding: 40px 30px; }
  .page-join .content h2 { font-size: 2.5rem; margin: 0 0 1rem 0; }
}

@media only screen and (max-width: 500px) {
  .page-join .how .left,
  .page-join .how .right { float: none; width: 100%; }
  .faq-accordion .faq-question { font-size: 1rem; }
}



/* ================================================================================== */
/* == Offline Page ================================================================== */
/* ================================================================================== */

.page-offline { background: var(--bg-splash); text-align: center; color: #fff; }

.page-offline .splash-content img { width: 160px; margin-bottom: 40px; }
.page-offline .splash-content p { font-weight: 300; margin-top: 5px; }
.page-offline .splash-content a { color: #fff; font-size: 13px; }



/* ================================================================================== */
/* == Congratulations Pop-ups ======================================================= */
/* ================================================================================== */

.splash { background: var(--bg-splash); width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999; text-align: center; color: #fff; overflow: hidden; }
.splash #header { padding-bottom: 0; height: 90px; }

/*.congrats-splash { display: block !important; }*/

.splash-container { height: calc(100vh - 90px); }
.splash-content { text-align: center; position: relative; top: 50%; transform: translateY(-50%); text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.splash-content .reps { display: block; font-size: 40px; font-weight: 100; }
.splash-content img { display: block; margin: 0 auto; width: 500px; max-width: 90%; }



/* ================================================================================== */
/* == Profile Page ================================================================== */
/* ================================================================================== */

.page-profile {  }

.page-profile .back-button { position: absolute; top: 0px; left: 15px; background: url(img/icon-arrow-back-white.svg) no-repeat center; background-size: 25px; text-indent: -9999px; width: 50px; height: 50px; opacity: 0.7; }
.page-profile .profile-pic { display: block; margin: 30px auto; width: 130px; height: 130px; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2); }

.page-profile h3 { margin: 0 0 12px 0 }
.page-profile .content ul li { overflow: hidden; margin-bottom: 10px; }
.page-profile li strong { float: left; font-weight: 500; }
.page-profile li span { float: right; font-weight: 700;}
.page-profile li:nth-child(1) span { color: var(--color-orange); }
.page-profile li:nth-child(2) span { color: var(--color-green); }
.page-profile li:nth-child(3) span { color: var(--color-blue); }
.page-profile li:nth-child(4) span { color: var(--color-red); }
.page-profile li:nth-child(5) span { color: var(--color-blue); }
.page-profile li:nth-child(6) span { color: var(--color-orange); }
.page-profile li:nth-child(7) span { color: var(--color-green); }
.page-profile li:nth-child(8) span { color: var(--color-red); }



/* ================================================================================== */
/* == Settings Page ================================================================= */
/* ================================================================================== */

.page-settings {  }

.settings-block { margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid #e3e3e3; }
.settings-block p { margin-bottom: 10px; }
.settings-block input { border: 1px solid var(--text-lightest); width: calc(100% - 120px); padding: 10px; border-radius: 5px; }
.settings-block button { width: 100px; }
.settings-block:last-child { margin: 0; padding-bottom: 10px; border: none; }

#avatar-block.settings-block {}
#avatar-block.settings-block .profile-pic { display: block; width: 100px; height: 100px; margin: 10px 0 15px 45px; }
#avatar-block.settings-block .button { width: 190px; text-align: center; }


/* ================================================================================== */
/* == Avatar Builder ================================================================ */
/* ================================================================================== */

.avatar-builder { padding: 30px 0 0 0; }
.avatar-builder #avatar-preview { display: block; border-radius: 10%; overflow: hidden; width: 200px; height: 200px; margin: 0 auto 30px auto; box-shadow: 0 5px 20px -5px rgba(0,0,0,0.15); }
.avatar-builder #avatar-preview svg { height: 100%; width: 100%; }
.avatar-builder .avatar-controls { }
.avatar-builder .control-group { margin-bottom: 40px; }
.avatar-builder .control-group:last-child { margin-bottom: 0; }
.avatar-builder .control-group h3 { font-size: 18px; margin-bottom: 15px; color: var(--text-darkest); font-weight: 600; }
.avatar-builder .option-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.avatar-builder .option-btn { padding: 10px 20px; background: white; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 14px; font-weight: 500; }
.avatar-builder .option-btn:hover { border-color: var(--color-blue); background: #f8f9ff; }
.avatar-builder .option-btn.active { background: var(--color-blue); color: white; border-color: var(--color-blue); }
.avatar-builder .visual-buttons .option-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; min-width: 80px; }
.avatar-builder .visual-buttons .component-preview { display: block; border-radius: 4px; background: #f5f5f5; width: 70px; height: 70px; }
.avatar-builder .visual-buttons .label { font-size: 12px; text-align: center; }
.avatar-builder .visual-buttons .option-btn.active .label { color: white; }
.avatar-builder .color-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-builder .color-btn { width: 50px; height: 50px; border: 3px solid transparent; border-radius: 50%; cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.avatar-builder .color-btn:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.avatar-builder .color-btn.active { border-color: var(--color-blue); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-blue); }
.avatar-builder .save-button-container { text-align: center;  padding: 20px; }
.avatar-builder .save-avatar-btn { padding: 15px 40px; background: var(--color-blue); color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(71, 95, 205, 0.3); }
.avatar-builder .save-avatar-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(71, 95, 205, 0.4); }
.avatar-builder .save-avatar-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.avatar-builder .save-message { margin-top: 15px; font-size: 16px; font-weight: 500; min-height: 24px; }

.avatar-builder .tabs-container { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); position: relative; }
.avatar-builder .tabs-container:before { content: ""; width: 25px; height: 56px; position: absolute; top: 0px; left: 0;  z-index: 2; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 100%); }
.avatar-builder .tabs-container:after  { content: ""; width: 25px; height: 56px; position: absolute; top: 0px; right: 0; z-index: 2; background: linear-gradient(-90deg,rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 100%); }
.avatar-builder .tab-list { border-bottom: 1px solid var(--color-border); padding: 8px 10px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior: contain auto; }
.avatar-builder .tab-list ul { display: flex; }
.avatar-builder .tab-list li { float: left; padding: 8px 15px; border-radius: 5px; cursor: pointer; color: var(--text-lightest); font-weight: 600; }
.avatar-builder .tab-list li.active { backgr/ound: var(--color-blue); co/lor: #fff; color: var(--text-darkest); position: relative; }
.avatar-builder .tab-list li.active:after { content: ""; width: calc(100% - 26px); height: 4px; position: absolute; bottom: -8px; left: 13px; background: var(--color-blue); }
.avatar-builder .tab-pages { padding: 25px; }

@media only screen and (max-width: 400px) {
  .avatar-builder .tab-pages { padding: 20px; }
}


/* ================================================================================== */
/* == Footer ======================================================================== */
/* ================================================================================== */

#footer { clear: both; padding: 25px 5%; background: #ddd;  }



/* ================================================================================== */
/* == Privacy Policy Page =========================================================== */
/* ================================================================================== */

.page-privacy {  }
.page-privacy .content {  }
.page-privacy .content p { margin-bottom: 1rem; }
.page-privacy .content h1 { margin-top: 0; }
.page-privacy .content h2 { margin: 2rem 0 1rem 0; }
.page-privacy .content h3 { margin: 2rem 0 1rem 0; }
.page-privacy .content ul { margin-left: 2rem; }
.page-privacy .content ul li { margin-bottom: 1rem; list-style: disc; }