*,
*::before,
*::after {
  
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

  html {
    box-sizing: border-box;
    font-size: 62.5%; }
    @media screen and (max-width: 1200px) {
      html {
        font-size: 55%; } }
    /* @media screen and (max-width: 600px) {
      html {
        font-size: 35%; } }
   */
head{
	position: fixed;
}

body{
    background-color: #1f1f1f;
    color: rgb(255, 171, 16);
    font-family: "Poppins", sans-serif;
  font-weight: 300;
  line-height: 1.9;
}

h1{
    color: white;
    padding: 10px;
}

.box-0 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9rem;
    width: 100dvw;
    z-index: 100;
    background: linear-gradient(90deg, #0582ca, #00a6fb); }

.box-1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    /* z-index: 100; */
    height: 3rem;
    background: white; 
}
    
.box-1contents {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 1200px;
    font-size: 1.3rem;
    /* z-index: 101; */
    height: 3rem;
}
@media screen and (max-width: 550px) {
  .box-1contents  {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    font-size: 1.1rem;
    z-index: 101;
    height: 3rem;}}
    @media screen and (max-width: 415px) {
      .box-1contents  {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        font-size: 0.9rem;
        z-index: 101;
        height: 3rem;}}

#navigator{
    position: fixed;
    background-color: #4d4848;
    color: orange;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.nav {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  justify-self: space-between;
  position: relative;
 }
  .nav-logo {
    font-size: 5rem;
    font-weight: 500;
    color: #f3f3f3;
    border-radius: 20rem;
    margin-right: auto; }
    @media screen and (max-width: 480px) {
      .nav-logo {
        font-size: 4rem;
    font-weight: 500;
    color: #f3f3f3;
    margin-right: auto; }}
    @media screen and (max-width: 440px) {
      .nav-logo {
        font-size: 3rem;}}

        #nav-beta {
          position: absolute;
          top: 10px;
          font-size: 2rem;
          font-weight: 500;
          color: #f3f3f3;
          border-radius: 20rem;
          margin-right: auto;
          margin-left:5px }
       
          @media screen and (max-width: 480px) {
            #nav-beta {
              font-size: 1.5rem;
          font-weight: 500;
          color: #f3f3f3;
          margin-right: auto; }}
          @media screen and (max-width: 440px) {
            #nav-beta {
              font-size: 1rem;}}

  .nav-svg {
    height: 4rem;
    width: 15rem;
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: 600;
    border: none;
    border-radius: 10rem;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    color: orange;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    background-color: whitesmoke;
    }
    @media screen and (max-width: 480px) {
      .nav-svg {
        height: 3rem;
        width: 12rem;
        font-size: 1.6rem;
        font-family: inherit;
        font-weight: 600;
        border: none;
        border-radius: 10rem;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        color: orange;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        background-color: whitesmoke;
        }
      }
    .nav-svg:hover {
      background-color: orange;
      color: whitesmoke;
    }

   /* ---------------------- FOOTER & MISC */

.footer {
    background-color: #2e2e2e;
    font-family: inherit;
    padding: 5rem 3rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem; }
    .footer__side1 {
      display: flex;
      flex-direction: column;
      margin-right: 8rem;
      gap: 3rem; }
      .footer__side1__logo {
        font-size: 4rem;
        font-weight: 500;
        color: #0582ca; }
      .footer__side1__text {
        width: 30rem;
        font-size: 1.6rem;
        margin-bottom: -1.5rem;
        color: #e4e4e4; }
    .footer__side2 {
      display: flex;
      gap: 4rem;
      justify-content: center;
      text-align: center; }
      .footer__side2__nav {
        
        list-style: none;
        justify-content: center; }
      .footer__side2__item {
        margin-right: 4rem;
        color: #000; }
        @media screen and (max-width: 500px) {
          .footer__side2__item {
            margin-right: 0; } }
      .footer__side2__linkheader {
        min-width: 5rem;
        font-size: 1.65rem;
        font-weight: 600;
        color: #b1b1b1;
        text-decoration: none; }
        @media screen and (max-width: 500px) {
          .footer__side2__linkheader {
            margin-right: 0rem;
            min-width: 0rem; } }
      .footer__side2__link {
        min-width: 5rem;
        font-size: 1.6rem;
        color: #f7f7f7;
        text-decoration: none; }
        .footer__side2__link:hover {
          text-decoration: underline; }
    .footer__img {
      display: flex;
      width: 100%;
      justify-content: center; }
      @media screen and (max-width: 600px) {
        .footer__img {
          transform: scale(0.75);
          width: 70%; } }
      .footer__img-1 {
        transform: scale(0.85); }
        @media screen and (max-width: 600px) {
          .footer__img-1 {
            transform: scale(0.65);
            height: 100%;
            width: 100%; } }
      .footer__img-2 {
        transform: scale(0.85); }
        @media screen and (max-width: 600px) {
          .footer__img-2 {
            transform: scale(0.65);
            height: 100%;
            width: 100%; } }
    .footer__copyright {
      font-size: 1.4rem;
      color: #a1a1a1;
      text-align: center;
      width: 100%; }
    .footer__link {
      font-size: 1.4rem;
      text-decoration: none; }

    .btn {
        margin-left: 2rem;
        margin-top: 2rem;
        background-color: white;
        font-size: 1.9rem;
        font-family: inherit;
        font-weight: 600;
        border: none;
        padding: 1.25rem 4.5rem;
        border-radius: 10rem;
        cursor: pointer;
        transition: all 0.3s;
        text-transform: uppercase;
        color: #0a75b4;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
        width: 27rem; }
        @media screen and (max-width: 1000px) {
          .btn {
            margin-left: 0; } }
        .btn:hover {
          background-color: rgba(255, 255, 255, 0.823); }
        .btn:active {
          transform: translateY(0.5rem);
          scale: 0.98; }

    a:link{
      color: #c5c5c5;}
    a:visited{
      color: #c5c5c5;}
    a:hover{
      color:#242222;
    text-decoration: none;} 
    
    a.nav2headers{
    color: rgb(65, 65, 65);
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
      }   
       a.nav2headers:hover{
        color: orange;
        text-decoration: none;
        font-weight: 400;
         } 

/* ----------------------NAV AND LOG IN + MODAL */

.loading-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.loading-bar span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(26, 26, 26);
  padding: 10px 200px;
  border-radius: 5px;
  font-size: 2.5rem;
  color: #d6960c;
}

.loading-bar-bar {
  margin-top: 36rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(36, 36, 36);
  padding: 20px;
  border-radius: 5px;
}

/* #loadingBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  font-size: 1.5em;
  margin-right: 20px;
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
} */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.status-circle {
  width: 30px; /* Smaller size */
  height: 30px;
  border-radius: 50%; /* Circle shape */
  border: 2px solid white; /* White border */
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; /* Space between the circle and text */
}

/* Container for user info displays */
.user-info {
  flex-direction: column; /* Stack them on top of each other */
  padding-right: 5px;
}

/* Style for the user ID and email displays */
.email-display {
  text-align: center; /* Center the text */
  color: #1f73f0; /* White text color */
  font-size: 22px; /* Adjust the size as needed */
    font-weight: bold;
  }
  @media screen and (max-width: 800px) { 
    .email-display {
    font-size: 16px; /* Adjust the size as needed */;
  }
  }
  @media screen and (max-width: 600px) { 
    .email-display {
    font-size: 8px; /* Adjust the size as needed */;
  }
  }
  @media screen and (max-width: 480px) { 
    .email-display {
    display: none;
  }
  }

  .user-id-display{
  text-align: center; /* Center the text */
  color: #d5d5d5; /* White text color */
  font-size: 10px; /* Adjust the size as needed */
}

.logged-out {
  background-color: blue;
}

.logged-in {
  background-color: #00ae00;
}

#loginButtonsContainer{
  max-width: 5rem;
}

/* Tooltip Style */
.login-tooltip {
  position: absolute;
  top: 122px; /* Adjust based on your toolbar height */
  right: 0;
  background-color: white;
  text-align: right;
}
@media screen and (max-width: 1200px) {
  .login-tooltip {
    top: 108px;
}}
@media screen and (max-width: 480px) {
.login-tooltip {
  top: 100px;
}}
@media screen and (max-width: 440px) {
.login-tooltip {
  top: 91px;
}}

.tooltipContentDiv{
margin: 10px 50px;
}

/* Modal Style uses globalHeader*/
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black with transparency */
}

.modal-logo {
  font-size: 5rem;
  font-weight: 500;
  color: #00a6fb;
margin-bottom: 1rem;
 }

#modal-beta {
  position: relative;
  top: -20px;
  left: -5px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1f1f1f;
 }
     

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  top: -20px;
  position: relative;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#login-btn{
  width: 90px;
  height: 40px;
  margin: 2 2 2 4px;
  background-color: white;
  border: 0;
  border-radius: 3px;
  color: rgb(15, 15, 15);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
}

#signup-btn{
  width: 90px;
  height: 40px;
  margin: 2 4 2 2px;
  background-color: #00a6fb;
  border: 0;
  border-radius: 3px;
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
}

#signup-btn:hover{
  background-color: #49c2ff;
}

#login-btn:hover{
  background-color: #eeeeee;
}

#modal-switch-button-div{
width: 100%;
margin-bottom: 3rem;
}

#modal-content-switch-buttons {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 200px; /* Adjust as needed */
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  overflow: hidden;
}

.modal-switch {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  font-size: 16px;
}

#highlight {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 3px;
  background-color: #007bff; /* Highlight color */
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
  left: 0;
}

#line{
position: relative;
border-bottom: 3px solid #959595;
width: 100%;
top: 38px;
}

#highlight.signup-active {
  transform: translateX(100%);
}

#highlight.login-active {
  transform: translateX(0%);
}

#highlight,
.modal-switch:hover ~ #highlight {
  transition: transform 0.3s ease-in-out;
}

.modal-switch:nth-child(1):hover ~ #highlight {
  transform: translateX(0%);
}

.modal-switch:nth-child(2):hover ~ #highlight {
  transform: translateX(100%);
}

.navForms{
  /* text-align: center; */
  flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 3rem;
  }

 .navFormsh2{
  margin-top: 1rem;
  font-size: 2rem;
 }

.navFormsButtonDiv{
  margin-top: 3rem;
  text-align: center;
}

.navFormsButton{
  width: 120px;
  height: 40px;
  background-color: #00a6fb;
  border: 0;
  border-radius: 3px;
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  margin: 1rem;
}
.navFormsButton:hover{
  background-color: #4dc4ff;
}
.navFormsButton:active{
  background-color: #0075af;
}

.navFormsInputs{
  width: 100%;
font-size: 1.6rem;
border-radius: 3px;
background-color: white;
padding: 5px;
border: 2px solid #bfbfbf;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  height: 2px; /* Thickness of the line */
  background-color: #8a8a8a;
  flex-grow: 1; /* Makes the lines flexible */
  margin: 0 10px; /* Space between the word and the lines */
}

.connect {
  font-size: 1.5rem;
  font-weight: bold;
  color: #8a8a8a;
}

.connected {
  font-size: 1rem;
  text-align: center;
  margin-top: 2rem;
}

.modalAuthLoginImgs{
  border-radius: 5px;
  max-height: 40px;
  margin: 1rem;
}

.modalAuthLoginImgs:hover{
  box-shadow:0px 0px 10px #a1a1a1
}

/* ------------------------------------------------------------ */

#workout{
    margin-top: 2rem;
   text-align: center;
}

#addWorkout{
    justify-content: center;
    margin-top: 15rem;
    margin-bottom: 3rem;
    text-align: center;
}
	
#site-search{
        color: #c0c0c0;
}
	


/* path:not(.nonmusclepath, .bellybutton, .nonmuscles, .nonmuscles2, .nonmuscles3, .toes1, .toes2, .head, .st6, .st13, .st14, .st16, .st18, .st20, .st22, .sst19, .sst3):hover {
    fill: #ff9f00;
} */

path:is( .nonmuscles, .nonmuscles2, .nonmuscles3, .toes1, .toes2, .head, .sst14, .sst17, .sst18, .sst30, .sst9, .sst4, .sst24, .sst25):hover{
    fill: #c0c0c0;
}

.hovered-group {
  fill: #c0c0c0 !important;
}

#recoveryBox{
	
	top: 0;
	right: 0;
	color: white;
	text-align: right;
}

/* #chest1_minus{
    position: absolute;
    height: 40px;
    width: 40px;
    top: 275px;
    left: 0px;
}

#chest1_plus{
    position: absolute;
    height: 40px;
    width: 40px;
    top: 275px;
    left: 50px;
} */

.minus-button,
.plus-button {
  position: absolute;
  height: 40px;
  width: 40px;
}

.minus-button {
  /* Additional styles specific to the minus button */
  /* Example: */
  top: 275px;
  left: 0px;
}

.plus-button {
  /* Additional styles specific to the plus button */
  /* Example: */
  top: 275px;
  left: 50px;
}

#totalRecoveryTime{
	font-size: 1.5em;
	color: white;
	text-align: right;
	margin-top: 5px;
}

#muscleName{
	
	top: 25;
	right: 0;
	color: white;
	max-width:  200px;
	text-align: right;
}

#clickedTimer{
    
    font-weight: bold;
    color: #c0c0c0;
    max-width: 120px;
    top: 200px;
    left: 0px;
}
 



.chest{fill:#1d53c2;}

.triceps{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.triceps.clicked  {fill: #ff9f00;}
	.triceps.clicked:hover {fill: #ff9f0065;}

.forearms{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	/* forearms and triceps are the same */

.shoulders{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.shoulders.clicked  {fill: #ff9f00;}
	.shoulders.clicked:hover {fill: #ff9f0065;}

	.sst15{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.sst16{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
.rhomboids{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}

.biceps{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	/* biceps and shoulders are the same */

.waist{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.waist.clicked  {fill: #ff9f00;}
	.waist.clicked:hover {fill: #ff9f0065;}

.abs{fill:#1d53c2;stroke:#020203;stroke-width:2.5869;stroke-miterlimit:10;}
	.abs.clicked  {fill: #ff9f00;}
	.abs.clicked:hover {fill: #ff9f0065;}

.bellybutton{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	/* non clickable */

.obliques{fill:#1d53c2;stroke:#020203;stroke-width:2;stroke-miterlimit:10;}
	.obliques.clicked  {fill: #ff9f00;}
	.obliques.clicked:hover {fill: #ff9f0065;}
#externalObliques{stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	
.hips{fill:#1d53c2;stroke:#020203;stroke-width:2;stroke-miterlimit:10;}

/* .obliques2{fill:#1d53c2;stroke:#020203;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
	.obliques2.clicked  {fill: #ff9f00;}
	.obliques2.clicked:hover {fill: #ff9f0065;} */

.trapezius{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.trapezius.clicked  {fill: #ff9f00;}
	.trapezius.clicked:hover {fill: #ff9f0065;}
	
.adductors{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.adductors.clicked  {fill: #ff9f00;}
	.adductors.clicked:hover {fill: #ff9f0065;}

.quadriceps{fill:#1d53c2;stroke:#020203;stroke-width:3}
	.quadriceps.clicked  {fill: #ff9f00;}
	.quadriceps.clicked:hover {fill: #ff9f0065;}

.calves{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.calves.clicked  {fill: #ff9f00;}
	.calves.clicked:hover {fill: #ff9f0065;}

.legs3{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.legs3.clicked  {fill: #ff9f00;}
	.legs3.clicked:hover {fill: #ff9f0065;}



.head{fill:#001f5f;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
.nonmuscles{fill:#001f5f;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
.nonmuscles2{fill:#001f5f;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
.nonmuscles3{fill:#001f5f;stroke:#020203;stroke-miterlimit:10;}
.nonmusclepath {stroke:#020203;stroke-width:4;stroke-miterlimit:10;}

.st18{fill:none;stroke:#020203;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st13{fill:#020203;stroke:#020203;stroke-miterlimit:10;}
.st6{fill:#020203;}
.st14{stroke:#020203;stroke-miterlimit:10;}
.st16{fill:#020203;stroke:#020203;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st22{stroke:#020203;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.toes1{fill:#001f5f;stroke:#020203;stroke-width:1.5;stroke-miterlimit:10;}
.st20{fill:#ffffff;stroke:#020203;stroke-width:2;stroke-miterlimit:10;}
.toes2{fill:#001f5f;stroke:#020203;stroke-width:2;stroke-miterlimit:10;}

/* phase2 */
	.sst0{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst1{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}

	#quadriceps{stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst3{fill:none;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.sst4{fill:#001f5f;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}

	.hamstrings{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}

	.sst6{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst7{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst8{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst9{fill:#001f5f;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.sst10{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}

	#gluteusMinor{stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
  .gluteus{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	#gluteusMajor{stroke:#020203;stroke-width:5;stroke-miterlimit:10;}

	.sst13{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst14{fill:#001f5f;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}

	.sst17{fill:#001f5f;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.sst18{fill:#001f5f;}
	.sst19{fill:#020203;}
	.sst20{fill:none;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.sst21{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}
	.sst22{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst23{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst24{fill:#001f5f;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst25{fill:#001f5f;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}

	.lats{fill:#1d53c2;stroke:#020203;stroke-width:4;stroke-miterlimit:10;}

	.sst27{fill:#1d53c2;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst28{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.sst29{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.sst30{fill:#001f5f;stroke:#020203;stroke-width:5;stroke-miterlimit:10;}
	.sst31{fill:#1d53c2;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}
	.sst32{fill:#1d53c2;stroke:#1E1E1C;stroke-miterlimit:10;}
	.sst33{fill:#1E1E1C;stroke:#020203;stroke-width:3;stroke-miterlimit:10;}





.color-e-72 { fill: #e91000; }
.color-e-71 { fill: #ea1600; }
.color-e-70 { fill: #ea1b00; }
.color-e-69 { fill: #ea1f00; }
.color-e-68 { fill: #ec2400; }
.color-e-67 { fill: #ec2b00; }
.color-e-66 { fill: #ee3501; }
.color-e-65 { fill: #ef4000; }
.color-e-64 { fill: #f24800; }
.color-e-63 { fill: #f24c00; }
.color-e-62 { fill: #f34f00; }
.color-e-61 { fill: #f35300; }
.color-e-60 { fill: #f45701; }
.color-e-59 { fill: #f55b00; }
.color-e-58 { fill: #f55f00; }
.color-e-57 { fill: #f56300; }
.color-e-56 { fill: #f66700; }
.color-e-55 { fill: #f76c00; }
.color-e-54 { fill: #f77000; }
.color-e-53 { fill: #f87400; }
.color-e-52 { fill: #f97800; }
.color-e-51 { fill: #fa7d00; }
.color-e-50 { fill: #fa8100; }
.color-e-49 { fill: #fa8500; }
.color-e-48 { fill: #fb8900; }
.color-e-47 { fill: #fc8e00; }
.color-e-46 { fill: #fc9200; }
.color-e-45 { fill: #fd9500; }
.color-e-44 { fill: #fd9a00; }
.color-e-43 { fill: #fd9d00; }
.color-e-42 { fill: #fea200; }
.color-e-41 { fill: #fea600; }
.color-e-40 { fill: #fea900; }
.color-e-39 { fill: #feac00; }
.color-e-38 { fill: #feb100; }
.color-e-37 { fill: #ffb300; }
.color-e-36 { fill: #ffb700; }
.color-e-35 { fill: #ffba00; }
.color-e-34 { fill: #ffbd00; }
.color-e-33 { fill: #ffc000; }
.color-e-32 { fill: #ffc500; }
.color-e-31 { fill: #ffc700; }
.color-e-30 { fill: #ffcb00; }
.color-e-29 { fill: #ffcf00; }
.color-e-28 { fill: #ffd300; }
.color-e-27 { fill: #ffd700; }
.color-e-26 { fill: #ffda00; }
.color-e-25 { fill: #ffde00; }
.color-e-24 { fill: #ffe000; }
.color-e-23 { fill: #ffe400; }
.color-e-22 { fill: #ffe800; }
.color-e-21 { fill: #ffea00; }
.color-e-20 { fill: #ffed00; }
.color-e-19 { fill: #fff000; }
.color-e-18 { fill: #fff300; }
.color-e-17 { fill: #fff500; }
.color-e-16 { fill: #fff700; }
.color-e-15 { fill: #fff800; }
.color-e-14 { fill: #fffa00; }
.color-e-13 { fill: #fffa00; }
.color-e-12 { fill: #fffb00; }
.color-e-11 { fill: #fefd03; }
.color-e-10 { fill: #f9fc11; }
.color-e-9 { fill: #f3fb1b; }
.color-e-8 { fill: #edf924; }
.color-e-7 { fill: #e5f62c; }
.color-e-6 { fill: #ddf332; }
.color-e-5 { fill: #d4f037; }
.color-e-4 { fill: #ccec3c; }
.color-e-3 { fill: #c3e740; }
.color-e-2 { fill: #bbe344; }
.color-e-1 { fill: #b1df47; }

.color-0 { fill: #1d53c2}
.color-01 {fill:#0087FF}

.color-e-72-dark { fill: #af0c00; }
.color-e-71-dark { fill: #b01000; }
.color-e-70-dark { fill: #b01400; }
.color-e-69-dark { fill: #b01700; }
.color-e-68-dark { fill: #b11b00; }
.color-e-67-dark { fill: #b12000; }
.color-e-66-dark { fill: #b22801; }
.color-e-65-dark { fill: #b33000; }
.color-e-64-dark { fill: #b53600; }
.color-e-63-dark { fill: #b53900; }
.color-e-62-dark { fill: #b63b00; }
.color-e-61-dark { fill: #b63e00; }
.color-e-60-dark { fill: #b74101; }
.color-e-59-dark { fill: #b84400; }
.color-e-58-dark { fill: #b84700; }
.color-e-57-dark { fill: #b84a00; }
.color-e-56-dark { fill: #b84d00; }
.color-e-55-dark { fill: #b95100; }
.color-e-54-dark { fill: #b95400; }
.color-e-53-dark { fill: #ba5700; }
.color-e-52-dark { fill: #bb5a00; }
.color-e-51-dark { fill: #bb5e00; }
.color-e-50-dark { fill: #bb6100; }
.color-e-49-dark { fill: #bb6400; }
.color-e-48-dark { fill: #bc6700; }
.color-e-47-dark { fill: #bd6a00; }
.color-e-46-dark { fill: #bd6e00; }
.color-e-45-dark { fill: #be7000; }
.color-e-44-dark { fill: #be7300; }
.color-e-43-dark { fill: #be7600; }
.color-e-42-dark { fill: #be7a00; }
.color-e-41-dark { fill: #be7d00; }
.color-e-40-dark { fill: #be7f00; }
.color-e-39-dark { fill: #be8100; }
.color-e-38-dark { fill: #be8500; }
.color-e-37-dark { fill: #bf8600; }
.color-e-36-dark { fill: #bf8900; }
.color-e-35-dark { fill: #bf8b00; }
.color-e-34-dark { fill: #bf8e00; }
.color-e-33-dark { fill: #bf9000; }
.color-e-32-dark { fill: #bf9400; }
.color-e-31-dark { fill: #bf9500; }
.color-e-30-dark { fill: #bf9800; }
.color-e-29-dark { fill: #bf9b00; }
.color-e-28-dark { fill: #bf9e00; }
.color-e-27-dark { fill: #bfa100; }
.color-e-26-dark { fill: #bfa300; }
.color-e-25-dark { fill: #bfa600; }
.color-e-24-dark { fill: #bfa800; }
.color-e-23-dark { fill: #bfab00; }
.color-e-22-dark { fill: #bfae00; }
.color-e-21-dark { fill: #bfb000; }
.color-e-20-dark { fill: #bfb200; }
.color-e-19-dark { fill: #bfb400; }
.color-e-18-dark { fill: #bfb600; }
.color-e-17-dark { fill: #bfb800; }
.color-e-16-dark { fill: #bfb900; }
.color-e-15-dark { fill: #bfba00; }
.color-e-14-dark { fill: #bfbb00; }
.color-e-13-dark { fill: #bfbb00; }
.color-e-12-dark { fill: #bfbc00; }
.color-e-11-dark { fill: #bebe02; }
.color-e-10-dark { fill: #bbbd0d; }
.color-e-9-dark { fill: #b6bc14; }
.color-e-8-dark { fill: #b2bb1b; }
.color-e-7-dark { fill: #acb821; }
.color-e-6-dark { fill: #a6b626; }
.color-e-5-dark { fill: #9fb429; }
.color-e-4-dark { fill: #99b12d; }
.color-e-3-dark { fill: #92ad30; }
.color-e-2-dark { fill: #8caa33; }
.color-e-1-dark { fill: #85a735; }

.color-e-72-light { fill: rgb(255, 19, 0); }
.color-e-71-light { fill: rgb(255, 26, 0); }
.color-e-70-light { fill: rgb(255, 32, 0); }
.color-e-69-light { fill: rgb(255, 37, 0); }
.color-e-68-light { fill: rgb(255, 43, 0); }
.color-e-67-light { fill: rgb(255, 51, 0); }
.color-e-66-light { fill: rgb(255, 63, 1); }
.color-e-65-light { fill: rgb(255, 76, 0); }
.color-e-64-light { fill: rgb(255, 86, 0); }
.color-e-63-light { fill: rgb(255, 91, 0); }
.color-e-62-light { fill: rgb(255, 94, 0); }
.color-e-61-light { fill: rgb(255, 99, 0); }
.color-e-60-light { fill: rgb(255, 104, 1); }
.color-e-59-light { fill: rgb(255, 109, 0); }
.color-e-58-light { fill: rgb(255, 114, 0); }
.color-e-57-light { fill: rgb(255, 118, 0); }
.color-e-56-light { fill: rgb(255, 123, 0); }
.color-e-55-light { fill: rgb(255, 129, 0); }
.color-e-54-light { fill: rgb(255, 134, 0); }
.color-e-53-light { fill: rgb(255, 139, 0); }
.color-e-52-light { fill: rgb(255, 144, 0); }
.color-e-51-light { fill: rgb(255, 148, 0); }
.color-e-50-light { fill: rgb(255, 153, 0); }
.color-e-49-light { fill: rgb(255, 158, 0); }
.color-e-48-light { fill: rgb(255, 163, 0); }
.color-e-47-light { fill: rgb(255, 166, 0); }
.color-e-46-light { fill: rgb(255, 172, 0); }
.color-e-45-light { fill: rgb(255, 178, 0); }
.color-e-44-light { fill: rgb(255, 183, 0); }
.color-e-43-light { fill: rgb(255, 187, 0); }
.color-e-42-light { fill: rgb(255, 190, 0); }
.color-e-41-light { fill: rgb(255, 194, 0); }
.color-e-40-light { fill: rgb(255, 199, 0); }
.color-e-39-light { fill: rgb(255, 202, 0); }
.color-e-38-light { fill: rgb(255, 206, 0); }
.color-e-37-light { fill: rgb(255, 210, 0); }
.color-e-36-light { fill: rgb(255, 214, 0); }
.color-e-35-light { fill: rgb(255, 218, 0); }
.color-e-34-light { fill: rgb(255, 222, 0); }
.color-e-33-light { fill: rgb(255, 225, 0); }
.color-e-32-light { fill: rgb(255, 229, 0); }
.color-e-31-light { fill: rgb(255, 232, 0); }
.color-e-30-light { fill: rgb(255, 236, 0); }
.color-e-29-light { fill: rgb(255, 240, 0); }
.color-e-28-light { fill: rgb(255, 243, 0); }
.color-e-27-light { fill: rgb(255, 247, 0); }
.color-e-26-light { fill: rgb(255, 252, 0); }
.color-e-25-light { fill: rgb(255, 255, 0); }
.color-e-24-light { fill: rgb(255, 255, 0); }
.color-e-23-light { fill: rgb(255, 255, 0); }
.color-e-22-light { fill: rgb(255, 255, 0); }
.color-e-21-light { fill: rgb(255, 255, 0); }
.color-e-20-light { fill: rgb(255, 255, 0); }
.color-e-19-light { fill: rgb(255, 255, 0); }
.color-e-18-light { fill: rgb(255, 255, 0); }
.color-e-17-light { fill: rgb(255, 255, 0); }
.color-e-16-light { fill: rgb(255, 255, 0); }
.color-e-15-light { fill: rgb(255, 255, 0); }
.color-e-14-light { fill: rgb(255, 255, 0); }
.color-e-13-light { fill: rgb(255, 255, 0); }
.color-e-12-light { fill: rgb(255, 255, 0); }
.color-e-11-light { fill: rgb(255, 255, 0); }
.color-e-10-light { fill: rgb(255, 255, 0); }
.color-e-9-light { fill: rgb(255, 255, 0); }
.color-e-8-light { fill: rgb(255, 255, 0); }
.color-e-7-light { fill: rgb(235, 255, 44); }
.color-e-6-light { fill: rgb(221, 255, 50); }
.color-e-5-light { fill: rgb(212, 255, 55); }
.color-e-4-light { fill: rgb(204, 255, 60); }
.color-e-3-light { fill: rgb(195, 255, 64); }
.color-e-2-light { fill: rgb(187, 255, 68); }
.color-e-1-light { fill: rgb(182, 255, 71); }


.color-99 { fill: #c21d9e}


/* Recovery Phase 1 (0–96 hrs, every 6 hrs) */
.color-r-1  { fill: #B1DF47; }
.color-r-2  { fill: #A5D953; }
.color-r-3  { fill: #99D360; }
.color-r-4  { fill: #8ECD6C; }
.color-r-5  { fill: #82C878; }
.color-r-6  { fill: #76C284; }
.color-r-7  { fill: #6ABC91; }
.color-r-8  { fill: #5EB69D; }
.color-r-9  { fill: #53B0A9; }
.color-r-10 { fill: #47AAB5; }
.color-r-11 { fill: #3BA4C2; }
.color-r-12 { fill: #2F9ECE; }
.color-r-13 { fill: #2399DA; }
.color-r-14 { fill: #1893E6; }
.color-r-15 { fill: #0C8DF3; }
.color-r-16 { fill: #0087FF; }

/* Recovery Phase 2 (97–336 hrs, every 15 hrs) */
.color-r-17 { fill: #0284FB; }
.color-r-18 { fill: #0481F7; }
.color-r-19 { fill: #057DF4; }
.color-r-20 { fill: #077AF0; }
.color-r-21 { fill: #0977EC; }
.color-r-22 { fill: #0B74E8; }
.color-r-23 { fill: #0D70E4; }
.color-r-24 { fill: #0F6DE1; }
.color-r-25 { fill: #106ADD; }
.color-r-26 { fill: #1267D9; }
.color-r-27 { fill: #1463D5; }
.color-r-28 { fill: #1660D1; }
.color-r-29 { fill: #185DCD; }
.color-r-30 { fill: #195ACA; }
.color-r-31 { fill: #1B56C6; }
.color-r-32 {fill : #1D53C2;}


/* Recovery Phase 1 (0–96 hrs, every 6 hrs) */
.color-r-1-light  { fill: rgb(171, 224, 56); }
.color-r-2-light  { fill: rgb(160, 219, 60); }
.color-r-3-light  { fill: rgb(150, 214, 63); }
.color-r-4-light  { fill: rgb(139, 208, 66); }
.color-r-5-light  { fill: rgb(130, 202, 69); }
.color-r-6-light  { fill: rgb(121, 196, 72); }
.color-r-7-light  { fill: rgb(112, 190, 75); }
.color-r-8-light  { fill: rgb(103, 184, 78); }
.color-r-9-light  { fill: rgb(94, 178, 81); }
.color-r-10-light { fill: rgb(85, 172, 84); }
.color-r-11-light { fill: rgb(93, 164, 225); }
.color-r-12-light { fill: rgb(86, 158, 231); }
.color-r-13-light { fill: rgb(75, 153, 238); }
.color-r-14-light { fill: rgb(64, 147, 244); }
.color-r-15-light { fill: rgb(50, 141, 249); }
.color-r-16-light { fill: rgb(38, 135, 255); }

/* Recovery Phase 2 (97–336 hrs, every 15 hrs) */
.color-r-17-light { fill: rgb(42, 147, 255); }
.color-r-18-light { fill: rgb(49, 151, 255); }
.color-r-19-light { fill: rgb(52, 160, 255); }
.color-r-20-light { fill: rgb(56, 165, 255); }
.color-r-21-light { fill: rgb(60, 170, 255); }
.color-r-22-light { fill: rgb(63, 175, 255); }
.color-r-23-light { fill: rgb(66, 179, 255); }
.color-r-24-light { fill: rgb(70, 183, 255); }
.color-r-25-light { fill: rgb(73, 188, 255); }
.color-r-26-light { fill: rgb(75, 193, 255); }
.color-r-27-light { fill: rgb(78, 197, 255); }
.color-r-28-light { fill: rgb(81, 202, 255); }
.color-r-29-light { fill: rgb(84, 206, 255); }
.color-r-30-light { fill: rgb(86, 211, 255); }
.color-r-31-light { fill: rgb(88, 215, 255); }
.color-r-32-light { fill: rgb(90, 219, 255); }






.please{
	margin-top: 12rem;
      min-height: calc(100vh - 12rem);
}


.recovery-profile-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  color: #fff;
  max-width: 984px;
  margin: auto;
      overflow-x:hidden;
      margin-top: 15rem


}

.controls-panel, .info-panel {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-align: center;
  z-index: 3;
  
}

.info-panel {
pointer-events: none;
}

.body-diagram {
  width: 40%;
  display: flex;
  justify-content: center;
}

/* button {
  background-color: transparent;
  border: 1px dashed #777;
  padding: 0.5rem 1rem;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease;
} */
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  /* cursor: pointer;
  font-size: 16px; */
}

button#modal-login,
button#modal-signup {
  background-color: transparent;
color: #1f1f1f;
}

/* disable hover effect for modal-switch buttons */
button.modal-switch:hover {
  background-color: transparent; /* or whatever base style is */
}
button:hover {
  background-color: #333;
}

#maleavatarfront{
    /* height: 650; */
    width: 250px;   

}

#maleavatarback{
    /* height: 650; */
    width: 250px;
    display: none;   
}

/* #viewSwap{
top: 175px;
  } */

#viewSwap:hover{
    background-color: rgb(0, 207, 10);
    }  

.info-title{
  font-size: 1.8rem;
  color: white;
}

p{
  font-size: 1.7rem;
  color: rgb(255, 96  , 0);
}

.small{
  font-size: 0.95rem;
  color: white;
  display: none;
}


#muscleLoadProgressContainer {
  width: 100%;
  height: 6px;
  background-color: #ccc;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  display: none; /* Hidden until loading starts */
}

#muscleLoadProgressBar {
  height: 100%;
  width: 0%;
  background-color: white;
  transition: width 0.3s ease;
}


/* phase 3 modal add */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-box {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2rem;
  width: min(340px, 90vw);
  max-width: none;
  text-align: center;
  position: relative;
  z-index: 1001;
  margin: 0;
}

.modal-title {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

.modal-body {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.modal-cta {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 600;
  cursor: pointer;
}

.modal-cta:hover {
  opacity: 0.85;
}