.color-all {
  color: var(--color-all);
}
.color-all-box {
  color: var(--color-all-box);
}

.color-family {
color: var(--color-family);
}
.color-family-box {
color: var(--color-family-box);
}

.color-birthday {
color: var(--color-birthday);
}
.color-birthday-box {
color: var(--color-birthday-box);
}

.color-exposure {
color: var(--color-exposure);
}
.color-exposure-box {
color: var(--color-exposure-box);
}

.color-school {
color: var(--color-school);
}
.color-school-box {
color: var(--color-school-box);
}

.color-travel {
color: var(--color-travel);
}
.color-travel-box {
color: var(--color-travel-box);
}

.color-college {
color: var(--color-college);
}
.color-college-box {
color: var(--color-college-box);
}

.color-graduation {
color: var(--color-graduation);
}
.color-graduation-box {
color: var(--color-graduation-box);
}

.color-marriage {
color: var(--color-marriage);
}
.color-marriage-box {
color: var(--color-marriage-box);
}

.color-anniversary {
color: var(--color-anniversary);
}
.color-anniversary-box {
color: var(--color-anniversary-box);
}

.color-other {
color: var(--color-other);
}
.color-other-box {
color: var(--color-other-box);
}

.color-happy {
color: var(--color-happy);
}
.color-happy-box {
color: var(--color-happy-box);
}

.color-sad {
color: var(--color-sad);
}
.color-sad-box {
color: var(--color-sad-box);
}

.color-funny {
color: var(--color-funny);
}
.color-funny-box {
color: var(--color-funny-box);
}

.color-exciting {
color: var(--color-exciting);
}
.color-exciting-box {
color: var(--color-exciting-box);
}

.color-education{
  color: var(--color-education);
}
.color-education-box{
  color: var(--color-education-box);
}

.color-divorce{
  color: var(--color-divorce);
}
.color-divorce-box{
  color: var(--color-divorce-box);
}

.color-important-moment{
  color: var(--color-important-moment);
}
.color-important-moment-box{
  color: var(--color-important-moment-box);
}

.color-retirement{
  color: var(--color-retirement);
}
.color-retirement-box{
  color: var(--color-retirement-box);
}

.color-death{
  color: var(--color-death);
}
.color-death-box{
  color: var(--color-death-box);
}

.bg-color-death{
  background: var(--color-death);
}
.bg-color-death-box{
  background: var(--color-death-box);
}

.bg-color-retirement{
  background-color: var(--color-retirement);
}
.bg-color-retirement-box{
  background-color: var(--color-retirement-box);
}

.bg-color-important-moment{
  background-color: var(--color-important-moment);
}
.bg-color-important-moment-box{
  background-color: var(--color-important-moment-box);
}

.bg-color-education{
  background-color: var(--color-education);
}
.bg-color-education-box{
  background-color: var(--color-education-box);
}

.bg-color-divorce{
  background-color: var(--color-divorce);
}
.bg-color-divorce-box{
  background-color: var(--color-divorce-box);
}

.bg-color-all {
  background-color: var(--color-all);
}
.bg-color-all-box {
  background-color: var(--color-all-box);
}

.bg-color-family {
background-color: var(--color-family);
}
.bg-color-family-box {
background-color: var(--color-family-box);
}

.bg-color-birthday {
background-color: var(--color-birthday);
}
.bg-color-birthday-box {
background-color: var(--color-birthday-box);
}

.bg-color-exposure {
background-color: var(--color-exposure);
}
.bg-exposure-box {
background-color: var(--color-exposure-box);
}

.bg-color-school {
background-color: var(--color-school);
}
.bg-color-school-box {
background-color: var(--color-school-box);
}

.bg-color-travel {
background-color: var(--color-travel);
}
.bg-color-travel-box {
background-color: var(--color-travel-box);
}

.bg-color-college {
background-color: var(--color-college);
}
.bg-color-college-box {
background-color: var(--color-college-box);
}

.bg-color-graduation {
background-color: var(--color-graduation);
}
.bg-color-graduation-box {
background-color: var(--color-graduation-box);
}

.bg-color-marriage {
background-color: var(--color-marriage);
}
.bg-color-marriage-box {
background-color: var(--color-marriage-box);
}

.bg-color-anniversary {
background-color: var(--color-anniversary);
}
.bg-color-anniversary-box {
background-color: var(--color-anniversary-box);
}

.bg-color-other {
background-color: var(--color-other);
}
.bg-color-other-box {
background-color: var(--color-other-box);
}

.bg-color-stories-box {
  background-color: var(--color-childhood-box);
  }

.bg-color-childhood-box {
  background-color: var(--color-childhood-box);
  /* border: solid 1px var(--color-childhood); */
  }

.bg-color-young-box {
    background-color: var(--color-young-box);
    /* border: solid 1px var(--color-young); */
}

.bg-color-adult-box {
  background-color: var(--color-adult-box);
  /* border: solid 1px var(--color-adult); */
}

.bg-color-senior-box {
  background-color: var(--color-senior-box);
  /* border: solid 1px var(--color-senior); */
}

.bg-color-happy {
background-color: var(--color-happy);
}
.bg-color-happy-box {
background-color: var(--color-happy-box);
}  

.bg-color-sad {
background-color: var(--color-sad);
}
.bg-color-sad-box {
background-color: var(--color-sad-box);
}

.bg-color-funny {
background-color: var(--color-funny);
}
.bg-color-funny-box {
background-color: var(--color-funny-box);
}

.bg-color-exciting {
background-color: var(--color-exciting);
}
.bg-color-exciting-box {
background-color: var(--color-exciting-box);
}
.bg-color-skip {
  background-color: var(--color-skip);
}
    
.all-selected {
  color: var(--color-white);
  background-color: var(--color-all);
  }
  
  .all-nonselected {
  color: var(--color-all);
  background-color: var(--color-white);
  border: 1px solid var(--color-all);
  }

.stories-selected {
  color: var(--color-white);
  background-color: var(--color-childhood);
  }
  
  .stories-nonselected {
  color: var(--color-childhood);
  background-color: var(--color-white);
  border: 1px solid var(--color-childhood);
  }
    
.childhood-selected {
color: var(--color-white);
background-color: var(--color-childhood);
}

.childhood-nonselected {
color: var(--color-childhood);
background-color: var(--color-white);
border: 1px solid var(--color-childhood);
}

.young-adult-selected {
color: var(--color-white);
background-color: var(--color-young);
}

.young-selected {
  color: var(--color-white);
  background-color: var(--color-young);
  }

.young-adult-nonselected {
color: var(--color-young);
background-color: var(--color-white);
border: 1px solid var(--color-young);
}

.young-nonselected {
  color: var(--color-young);
  background-color: var(--color-white);
  border: 1px solid var(--color-young);
  }

.adult-selected {
color: var(--color-white);
background-color: var(--color-adult);
}

.adult-nonselected {
color: var(--color-adult);
background-color: var(--color-white);
border: 1px solid var(--color-adult);
}

.senior-selected {
color: var(--color-white);
background-color: var(--color-senior);
}

.senior-nonselected {
color: var(--color-senior);
background-color: var(--color-white);
border: 1px solid var(--color-senior);
}


.milestone-all-selected {
  color: var(--color-all);
  background-color: var(--color-white);
}
.milestone-all-nonselected {
  color: var(--color-white);
  background-color: var(--color-all);
}

.family-nonselected {
color: var(--color-family);
background-color:rgba(255, 255, 255, 0.3);
}
.family-selected {
color: var(--color-white);
background-color: var(--color-family);
}

.birthday-nonselected {
color: var(--color-birthday);
background-color:rgba(255, 255, 255, 0.3);
}
.birthday-selected {
color: var(--color-white);
background-color: var(--color-birthday);
}

.exposure-nonselected {
color: var(--color-exposure);
background-color:rgba(255, 255, 255, 0.3);
}
.exposure-selected {
color: var(--color-white);
background-color: var(--color-exposure);
}

.school-nonselected {
color: var(--color-school);
background-color:rgba(255, 255, 255, 0.3);
}
.school-selected {
color: var(--color-white);
background-color: var(--color-school);
}

.travel-nonselected {
color: var(--color-travel);
background-color:rgba(255, 255, 255, 0.3);
}
.travel-selected {
color: var(--color-white);
background-color: var(--color-travel);
}

.college-nonselected {
color: var(--color-college);
background-color:rgba(255, 255, 255, 0.3);
}
.college-selected {
color: var(--color-white);
background-color: var(--color-college);
}

.graduation-nonselected {
color: var(--color-graduation);
background-color:rgba(255, 255, 255, 0.3);
}
.graduation-nonselected {
color: var(--color-white);
background-color: var(--color-graduation);
}

.marriage-nonselected {
color: var(--color-marriage);
background-color:rgba(255, 255, 255, 0.3);
}
.marriage-selected {
color: var(--color-white);
background-color: var(--color-marriage);
}

.anniversary-nonselected {
color: var(--color-anniversary);
background-color:rgba(255, 255, 255, 0.3);
}
.anniversary-selected {
color: var(--color-white);
background-color: var(--color-anniversary);
}

.other-nonselected {
color: var(--color-other);
background-color:rgba(255, 255, 255, 0.3);
}
.other-selected {
color: var(--color-white);
background-color: var(--color-other);
}

.happy-nonselected {
color: var(--color-happy);
background-color:rgba(255, 255, 255, 0.3);
}
.happy-selected {
color: var(--color-white);
background-color: var(--color-happy);
}

.sad-nonselected {
color: var(--color-sad);
background-color:rgba(255, 255, 255, 0.3);
}
.sad-selected {
color: var(--color-white);
background-color: var(--color-sad);
}

.funny-nonselected {
color: var(--color-funny);
background-color:rgba(255, 255, 255, 0.3);
}
.funny-selected {
color: var(--color-white);
background-color: var(--color-funny);
}

.exciting-nonselected {
color: var(--color-exciting);
background-color:rgba(255, 255, 255, 0.3);
}
.exciting-selected {
color: var(--color-white);
background-color: var(--color-exciting);
}

.stories-right-border{
  border-right: solid 2px var(--color-childhood);
}

.childhood-right-border{
  border-right: solid 5px var(--color-childhood);
}

.young-adult-right-border{
  border-right: solid 5px var(--color-young);
}

.adult-right-border{
  border-right: solid 5px var(--color-adult);
}

.senior-right-border{
  border-right: solid 5px var(--color-senior);
}

.stories-selected-right-border{
  background-color: var(--color-childhood-box);
}

.childhood-selected-right-border{
  background-color: var(--color-childhood-box);
}

.young-adult-selected-right-border{
  background-color: var(--color-young-box);
}

.adult-selected-right-border{
  background-color: var(--color-adult-box);
}

.senior-selected-right-border{
  background-color: var(--color-senior-box);
}

.stories-bottom-border{
  border-bottom: solid 5px var(--color-childhood);
}

.childhood-bottom-border{
  border-bottom: solid 5px var(--color-childhood);
}

.young-adult-bottom-border{
  border-bottom: solid 5px var(--color-young);
}

.adult-bottom-border{
  border-bottom: solid 5px var(--color-adult);
}

.senior-bottom-border{
  border-bottom: solid 5px var(--color-senior);
}

.birthday-bottom-border{
  border-bottom: solid 5px var(--color-birthday);
}

.stories-selected-bottom-border{
  background-color: var(--color-childhood-box);
  border-bottom: solid 5px var(--color-childhood);
}

.childhood-selected-bottom-border{
  background-color: var(--color-childhood-box);
  border-bottom: solid 5px var(--color-childhood);
}

.young-adult-selected-bottom-border{
  background-color: var(--color-young-box);
  border-bottom: solid 5px var(--color-young);
}

.adult-selected-bottom-border{
  background-color: var(--color-adult-box);
  border-bottom: solid 5px var(--color-adult);
}

.senior-selected-bottom-border{
  background-color: var(--color-senior-box);
  border-bottom: solid 5px var(--color-senior);
}

/*.stories-left-border{
  border-left: 1px solid var(--color-grey-light) !important;
}

.childhood-left-border{
  border-left: 1px solid var(--color-grey-light) !important;
}

.young-adult-left-border{
  border-left: 1px solid var(--color-grey-light) !important;
}

.adult-left-border{
  border-left: 1px solid var(--color-grey-light) !important;
}

.senior-left-border{
  border-left: 1px solid var(--color-grey-light) !important;
}
*/

.stories-selected-left-border{
  background-color: var(--color-childhood-box);
  border-left: solid 5px var(--color-childhood);
}

.childhood-selected-left-border{
  background-color: var(--color-childhood-box);
  border-left: solid 5px var(--color-childhood);
}

.young-adult-selected-left-border{
  background-color: var(--color-young-box);
  border-left: solid 5px var(--color-young);
}

.adult-selected-left-border{
  background-color: var(--color-adult-box);
  border-left: solid 5px var(--color-adult);
}

.senior-selected-left-border{
  background-color: var(--color-senior-box);
  border-left: solid 5px var(--color-senior);
}

.stories-top-border{
  border-top: solid 5px var(--color-childhood);
}

.childhood-top-border{
  border-top: solid 5px var(--color-childhood);
}

.young-adult-top-border{
  border-top: solid 5px var(--color-young);
}

.adult-top-border{
  border-top: solid 5px var(--color-adult);
}

.senior-top-border{
  border-top: solid 5px var(--color-senior);
}

.stories-selected-top-border{
  background-color: var(--color-childhood-box);
  border-top: solid 5px var(--color-childhood);
}

.childhood-selected-top-border{
  background-color: var(--color-childhood-box);
  border-top: solid 5px var(--color-childhood);
}

.young-adult-selected-top-border{
  background-color: var(--color-young-box);
  border-top: solid 5px var(--color-young);
}

.adult-selected-top-border{
  background-color: var(--color-adult-box);
  border-top: solid 5px var(--color-adult);
}

.senior-selected-top-border{
  background-color: var(--color-senior-box);
  border-top: solid 5px var(--color-senior);
}

/*
.lifespan-answer-container .lifespan-answer, .lifespan-add-container{
border-top: solid 1px var(--color-primary-400);
}

.lifespan-answer-container .lifespan-answer:first-child {
 border:none;
}

.lifespan-answer-container .lifespan-answer:first-child .view-info-card{
 padding-top: 1rem;
}
*/

.lifespan-answer{
  border: solid 1px var(--color-gray-200);
  border-radius:0.5rem;
  margin-bottom:0.65rem;
} 

.column-childhood
{
  padding: 8px 4px 8px 4px;
}

.column-adult
{
  padding: 8px 4px 8px 4px;
}

.column-young
{
  padding: 8px 4px 8px 4px;
}

.column-senior
{
  padding: 8px 4px 8px 4px;
}

#life-progression-card-container .life-progression-card:first-child .life-progression-card-info{
 border-top-left-radius: 1rem;
 border-bottom-left-radius: 1rem;
 padding-left: 8px !important;
}

#life-progression-card-container .life-progression-card:last-child .life-progression-card-info{
 border-top-right-radius: 1rem;
 border-bottom-right-radius: 1rem;
 padding-right: 8px !important;
}

#life-progression-title-container .life-progression-title:first-child .life-progression-card-info{
 padding-left: 8px !important;
 padding-right: 4px !important;
}

#life-progression-title-container .life-progression-title:last-child .life-progression-card-info{
 padding-right: 8px !important;
 padding-left: 4px !important;
}

#life-progression-title-container .life-progression-title .life-progression-card-info{
 padding-left: 4px !important;
 padding-right: 4px !important;
}