body {
    font-family: "Helvetica";
    background-size: 100% 100%;
    color: black;
    background-repeat: no-repeat;
    background-position:center;
    height: 100vh; 
    background-color: #151515!important; 
    padding: 0px; 
    margin:0px; 


}

.right-solutions-guide {
    color: yellow; 
    font-size: 1.5em; 

}

.solutions-row h3 , .solutions-row h4, .solutions-row div {
    margin-top: 2px; 
    margin-bottom: 10px; 

}

.right-solutions-guide p {
    margin-top: 2px; 
    margin-bottom: 0em!important; 
}

.right-solutions-guide {
    margin-bottom: 1em!important; 
}
.bad-question {
   color: red; 
   font-weight: bold; 
}

.text-bold {
    font-weight: bold;

}

.current-status-heading {
    font-size:2em;

}

.loading-overlay {
    color: white;
    font-size: 4em;
    position: fixed; /* or absolute */
    left: 0;
    top: 0;
    text-align: center;
vertical-align: middle;
line-height:  100vh;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1000; /* Ensure it's above other elements */
}

.failed-signup {
   color: red; 
}

.login-page {
    height: 100vh; 
    background-image: url("login_background.jpg");

}

input[type="radio"] {
   height: 1em; 
   width: 100%;
}

.login-container {
    background-color: #444444;
    padding: 2em; 
    border-radius: 10px; 
    height: 35vh; 
    margin-top: 25vh!important;

}

.logo-container {
   text-align: right; 

}

img.logo {
   width: 75%;
}

div.logo {
   padding-top: 1em;
   color: white; 
   font-weight: bold; 
   font-size:16px;
}

.logo a {
   color: white; 
   text-decoration: none; 
}

.importance-graph-container {
   margin-top: 1em!important; 
   margin-bottom: 1em!important; 
}

.importance-graph-row {
   margin-top: 1em;
}

.signup-container {
    background-color: #444444;
    padding: 2em; 
    border-radius: 10px; 
    height: 40vh; 
    margin-top: 25vh!important;
}

.login-header {
    color: white; 

}

.username-row {
    padding: 1em; 

}
.password-row {
    padding: 1em; 

}

.username {
    color: white; 
    font-size:1.2em; 
}

.password {
    color: white; 
    font-size:1.2em; 
}

.final-steps {
    margin-top: 1em; 

}

.final-step-bullet {
    margin-top: 2em!important;

}

.bullet-pad {
  margin: 1em;
}

.future-happiness-description {
  margin: 30px; 
}


.happiness-relation-graph {
    /* height:300px; */
    width:85%;
}

.scaled-emphasis-container {
    margin: 10px; 
    text-align:right;
}

.happiness-relation-container {
    margin: 10px; 
    text-align: right; 
}

.scaled-emphasis-graph {
    /* height:300px; */
    width:85%;
}

.element-relation-graph {
    width:100%;
}


.solutions-heading {
  color: white; 
}

.life-status-information {color: white; font-size: 2em;}

.life-status-header {padding-left: 2em;}

.submit-btn {
    background-color:rgb(253,98,98)!important;
    color:black!important;
    font-size:20pt!important;
    border-radius: 5px; 
    padding: 5px; 
    display: inline-block;
    text-decoration: none;


}


.solutions-container {
    background-image: url("solutions_background.jpg");
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.solutions-heading-row {
    background-color: #0000008a;
    padding: 1em;

}

.solutions-footer {
    padding-top: 2em;
    color: white;

    background-color: #0000008a;
}


.graph-display {
    min-height: 65vh;
    max-height: 85vh;
}

div#app {
    padding:0;
}

div.personality-next-steps div{
    color: white;
    font-size: 20pt;

}

.next-step-bullet {
    margin-left: 60px;

}

.next-step-bullet-row {
    margin-top: 20px!important; 

}

div.personality-container {
    margin: 0;
    font-family: "Helvetica";
    background-size: 100% 100%;
    background-image: url("personality_background.png");
    color: black;
    background-position:center;
    height: 100vh; 


}


div.life-status-container {
    padding: 0;
    margin: 0;
    font-family: "Helvetica";
    background-size: 100% 100%;
    background-image: url("life_status_background.png");
    color: black;
    background-repeat: no-repeat;
    background-position:center;
    height: 100vh; 

}

tr.question_row:nth-child(odd) {
    background-color: #6c6c6c63; 
}

.life-status-next-steps {
    color: white;
    margin-top:3em;
}



.life-status-next-step-list-item {
   font-size:2em; 
}

.status-weight {
    margin: 0.5em;

}

.life-status-input {
    text-align: center; 
    font-weight: bold; 

}

.life-status-categories .status-weight {
    margin-top: -1.2em; 
}

.legend-guide * {
   color: white; 
   text-align: left; 
}

div.question-table-container {
    height: 80vh; 
    display: block; 
    overflow-y: auto;
    display:block;
    border: 10px solid #000;
    padding:0px!important; 
}

.status-weight input {
        font-weight: bold; 
        text-align: center; 
}

.question_row td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;

}

.solutions-labels .status-weight {
        margin-top: -1.2em;

}

.question-table-header {
        width: 5%;

}

.question-source-text {
   color: white; 
}

.question-source-text a {
   color: white; 
}

.question_row:nth-child(odd) {
    background-color: #6c6c6c63; 

}

.question_row .question_radio {
    margin: 0 auto;
    text-align: center;

}

.question_row .question-input {
    margin: 0 auto;
    text-align: center;

}

table.questions-table {
    background-color: #c9c1ff2b ;
    color: white;
    border-collapse: collapse;
    width: 100%;
    font-size: 20pt; 
}

thead.questions-header tr {
    padding: 100px;
    height: 2em; 
}


thead.questions-header th {
    top: 0;
    z-index:10;
    background-color: #100341;
    position: sticky;
}

.question-question {
    text-align: left; 
    width: 50%;

}