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

.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: #fff; /* White text color */
font-size: 22px; /* Adjust the size as needed */
font-weight: bold;
}

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

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

.logged-in {
background-color: green;
}


html {
box-sizing: border-box;
font-size: 62.5%; }
@media screen and (max-width: 700px) {
html {
  font-size: 55%; } }
  @media screen and (max-width: 500px) {
    html {
      font-size: 45%; } }

h1{
  font-size: 5rem;
color: white;
}

head{
position: fixed;
}

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

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

.questionBox {
  padding-top: 4rem;
  padding-bottom:10rem;
  z-index: 100;
  height: 90rem;
  background: linear-gradient(to top right, #072536, #0582ca, #00a6fb); 
}@media screen and (max-width: 700px) {
  .questionBox{
    padding-top: 1rem;
    height: auto;
  }
}@media screen and (max-width: 480px) {
  .questionBox{
    padding-top: 0;
  }
}

.box-1contents {
display: flex;
justify-content: space-evenly;
align-items: center;
width: 984px;
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{ 
z-index: 250;
position: fixed;
background-color: #4d4848;
color: orange;
width: 100%;
top: 0;
display: flex;
justify-content: space-evenly;
flex-direction: column;
}

.navForms{
width: 18%;
}


.nav {
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
display: flex;
align-items: center;
justify-self: space-between; }
.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: 350px) {
.nav-logo {
  font-size: 3rem;
font-weight: 500;
color: #f3f3f3;
margin-right: auto; }}
.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 {
background-color: #2e2e2e;
font-family: inherit;
padding: 5rem 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
  }
.footer__side1 {
  display: flex;
  flex-direction: column;
  margin-right: 8rem;
  margin-left: 8rem;
  gap: 3rem; }
  @media screen and (max-width: 715px) {
    .footer__side1 {
      display: flex;
      flex-direction: column;
      margin-right: 0rem;
      margin-left:0rem;
  }} 
  .footer__side1__logo {
    font-size: 4rem;
    font-weight: 500;
    color: #0582ca;
  text-align: center; }
    @media screen and (max-width: 915px) {
      .footer__side1__logo {
        text-align: center; }
    }  
  .footer__side1__text {
    width: 30rem;
    font-size: 1.6rem;
    margin-bottom: -1.5rem;
    color: #e4e4e4;
  text-align: center; }
    @media screen and (max-width: 915px) {
      .footer__side1__text {
        text-align: center;
      }
    }

.footer__side2 {
  display: flex;
  justify-content: center;
  text-align: center; }
  .footer__side2__nav {
    list-style: none;
    justify-content: center; 
    }
    @media screen and (max-width: 1000px) {
      .footer__side2__nav {
        padding-top: 3rem; 
        } }
  .footer__side2__item {
    width: 16rem;
    color: #000; }
    @media screen and (max-width: 435px) {
      .footer__side2__item {
        width: 12rem; } }
    @media screen and (max-width: 375px) {
      .footer__side2__item {
        margin-right: 0rem;
        min-width: 0rem; } }
        @media screen and (max-width: 350px) {
          .footer__side2__item {
            transform: scale(75%); } }
  .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; }
    @media screen and (max-width: 500px) {
      .footer__side2__link {
        font-size: 1.5rem; } }
    .footer__side2__link:hover {
      text-decoration: underline; }
.footer__img {
  display: flex;
  justify-content: center;
  padding-top: 3rem; 
  width:100%;
  }
  @media screen and (max-width: 600px) {
    .footer__img {
      transform: scale(0.75);
      } }
      @media screen and (max-width: 450px) {
        .footer__img {
          flex-direction: column;
          width: auto;
          padding-top: 0;
          } }
  .footer__img-1 {
    transform: scale(0.85); }
    @media screen and (max-width: 600px) {
      .footer__img-1 {
        
        height: 100%;
          } }
  .footer__img-2 {
    transform: scale(0.85); }
    @media screen and (max-width: 600px) {
      .footer__img-2 {
        height: 100%;
          } }
.footer__copyright {
  font-size: 1.4rem;
  color: #a1a1a1;
  text-align: center;
  width: 100%; }
.footer__link {
  font-size: 1.4rem;
  text-decoration: none; }
  .footer__btn {
    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;
    margin: auto;
    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; } }
        @media screen and (max-width: 879px) {
          .footer__btn {
            margin-bottom: 2rem; } }
    .btn:hover {
      background-color: rgba(255, 255, 255, 0.823); }
    .btn:active {
      transform: translateY(0.5rem);
      scale: 0.98; }

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

.footer__side2__link:hover{
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;
}

.suggestion-item {
  cursor: pointer;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

.falsequestion {
  justify-content: center;
  display:flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  margin: 2rem auto;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center; 
  max-width: 600px;
  /* min-height: 650px; */
  padding-bottom: 5rem;
}
@media screen and (max-width: 700px) {
  .falsequestion {
    max-width: 80%; } }


.question {
  justify-content: center;
  display:flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  padding-bottom: 7rem;
  margin: 2rem auto;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center; 
  max-width: 600px;
  min-height: 650px;
}
@media screen and (max-width: 850px) {
  .question {
    min-height: 0;
  max-width: 80%; } }


.question h2 {
  font-size: 4rem; 
  color: #0582ca; 
  padding: 1rem;
}@media screen and (max-width: 350px) {
  .question h2 {
    font-size: 2.5rem
   } }

.option-button{
  font-size: 1.5rem;
}

button {
    background-color: #5C9ACF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    width: 60%;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2b6fb3;
}

.prevBtn, .nextBtn {
  flex: none;
 padding: 5px;
  align-items: center;     
  text-align: center;     
  background-color: #0582ca;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color 0.3s ease;
}

.questionCounter {
  background: #0582ca;
  color: white;
  padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    min-width: 55px;

}

.questionCounter0 {
  background: #0582ca;
  color: white;
  padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    min-width: 55px;
}

#saveBtn, #submitBtn, #finalSubmitBtn {
    display: block;
    width: 100%;
    margin-top: 20px;
}

#startNowButton {
  height: 4rem;
  width: 15rem;
  font-size: 1.6rem;
  font-family: inherit;
  padding: 0;
  margin: 0;
  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;
}

button.selected {
  background-color: #4ad34f; 
}

button.selected:hover {
  background-color: #39a53c; 
}

.button-disabled {
  opacity: 0.5; /* Make button appear dulled out */
  pointer-events: none; /* Disable click functionality */
  cursor: not-allowed; /* Change cursor to indicate the button is disabled */
  background-color: #f1ab12;
}

.questionNav {
  position: absolute;
  bottom: 1rem; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center; /* This will center the items in the flex container */
  align-items: center;
  max-width: 40%; /* Changed from 100px to auto to accommodate the actual button sizes */
}

/* Intermediary Slide Styling */
#essentialCompleteMessage {
  justify-content: center;
  display:flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center; 
  max-width: 600px;
  min-height: 650px;
}
@media screen and (max-width: 700px) {
  #essentialCompleteMessage {
    max-width: 80%; 
    padding-bottom: 7rem;
    min-height: 0px;
  } }

#essentialCompleteMessage h2 {
  font-size: 4rem; 
  color: #0582ca; 
  padding: 1rem;
}

#essentialCompleteMessage p {
  font-size: 1.3rem; 
  color: #0582ca; 
  padding: 0 10rem;
  text-align: center;
}@media screen and (max-width: 4500px) {
  #essentialCompleteMessage p{
    padding: 0 2rem
  } }

#essentialCompleteMessage button:not(.prevBtn):not(.nextBtn) {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.5rem;
}

#essentialCompleteMessage button:not(.prevBtn):not(.nextBtn):hover {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #fcd911;
}
#essentialCompleteMessage button:hover {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #4A85BF;
}

/* Final Slide Styling */
#finalThankYou {
  justify-content: center;
  display:flex;
  flex-direction: column;
  position: relative;
  background-color: #fff;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center; 
  max-width: 600px;
  min-height: 650px;
}@media screen and (max-width: 700px) {
  #finalThankYou {
    max-width: 80%; 
    padding-bottom: 7rem;
    min-height: 0px;
  } }

#finalThankYou h2 {
  font-size: 4rem; 
  color: #0582ca; 
  padding: 1rem;
}

#finalThankYou p {
  font-size: 1.3rem; 
  color: #0582ca; 
  padding: 0 5rem;
  text-align: center;
}

#finalThankyou button:not(.prevBtn):not(.nextBtn) {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.5rem;
}

#finalThankyou button:not(.prevBtn):not(.nextBtn):hover {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #fcd911;
}
#finalThankyou button:hover {
  /* Styles for other buttons inside #essentialCompleteMessage, excluding prev and next */
  background-color: #4A85BF;
}

.section1{
	text-align: center;
  height: 20rem;
}


.button-main-text {

  padding-bottom: 0.5rem;
}

.button-sub-text {
  font-size: smaller; /* Adjust as needed */

  opacity: 0.8; /* Optional: makes it a bit lighter to indicate secondary info */
}

.falseStart {
  display: flex;
  justify-content: center; /* Aligns items on the main axis (horizontal by default) */
  align-items: center; /* Aligns items on the cross axis (vertical by default) */
  text-align: center;
} 

#falseStart h1{
 color: #00a6fb;
 font-size: 4.35rem;
 padding: 4rem 4rem 0rem 4rem;
}@media screen and (max-width: 620px) {
  #falseStart h1{
    font-size: 3.25rem } }
    @media screen and (max-width: 435px) {
      #falseStart h1{
        font-size: 2.5rem } }

#falseStart h2{
  color: orange;
  font-size: 1.6rem;
  padding: 3.5rem 3.5rem 0 3.5rem;
 }

 #falseStart h3{
  color: rgb(39, 39, 39);
  font-size: 1rem;
  padding: 0rem 6rem;
 } @media screen and (max-width: 500px) {
  #falseStart h3{
    padding: 0rem 4rem} }

 #falseStart button{
  font-size: 1.8rem;
 }

 #startQuestionaire {
  display: block; /* if not already a block-level element */
  margin-left: auto;
  margin-right: auto;
}

#createAccountButton {
  display: block; /* if not already a block-level element */
  margin-left: auto;
  margin-right: auto;
}