.popup-content {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  width: 550px;
  z-index: 1000;
  
}
@media only screen and (max-width: 600px) {
  .popup-content {
    width:300px !important;
  }
  input[type=submit], .popup-content select {
    margin-left: 10% !important;
  }
}
.popup-content .popup-text{
  color:black;
  font-size: 14px;
}
input[type=text], input[type="email"], select {
  width: 100%;
  font-size:14px !important;
  font-family: 'Chronicle Roman' !important;
  color: #7e7e7e  !important;
  letter-spacing: 0.3px;
}
.popup-content input[type=submit], .popup-content select {
  width: 200px !important;
  font-family: "Helvetica", Sans-serif !important;
  cursor: pointer;
  display: inherit !important;
  border:none !important;
  text-transform:uppercase;
  border-radius:1px !important;
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01px;
  fill: #FFFFFF;
  color: #FFFFFF;
  padding: 15px 50px 15px 50px;
  margin:0 auto;
}

.popup-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: transparent
}
.popup-close-button ::before {
  content: 'X';
  color: black;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
.popup-button{
  background-color: transparent;
  font-family: "Mulish", Sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.4px;
  fill: #FFFFFF;
  color: #FFFFFF;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #00000000;
  border-radius: 4px 4px 4px 4px;
  padding: 15px 25px 15px 25px;
  text-transform: capitalize;
  cursor: pointer;
}
.popup-button i{
  padding-left: 10px;
}

.framework-name {
  color:#FF0000;
  font-weight:bold
}
.popup-button.Personal {
  background-image: linear-gradient(133deg, #FC0101 0%, #AC0101 100%);
}
.popup-button.Relationship {
  background-image: linear-gradient(133deg, #FF8000 0%, #B35A00 100%);
}
.popup-button.Family {
  background-image: linear-gradient(133deg, #FFFF00 0%, #999900 100%);
}
.popup-button.Parenting {
  background-image: linear-gradient(133deg, #00BF00 0%, #005900 100%);
}
.popup-button.Household-Management {
  background-image: linear-gradient(133deg, #A0785A 0%, #4A2000 100%);
}
.popup-button.Home-Organization {
  background-image: linear-gradient(133deg, #F6EAD3 0%, #F2ECDD 100%);
  color: #1B1B1B;
}
.popup-button.Personal-Productivity {
  background-image: linear-gradient(133deg, #C3C7C8 0%, #7E7E7E 100%);
  color: #1B1B1B;
}
.popup-button.Personal-Resilience {
  background-image: linear-gradient(133deg, #0000FF 0%, #000082 100%);
}
.popup-button.Happiness {
  background-image: linear-gradient(133deg, #4B0082 0%, #290047 100%);
}
.popup-button.Wellbeing {
  background-image: linear-gradient(133deg, #BF30F3 0%, #610084 100%);
}
.popup-button.Affluence {
  background-image: linear-gradient(133deg, #2E5A00 0%, #101F00 100%);
}
.popup-button.Longevity {
  background-image: linear-gradient(133deg, #838383 0%, #292828 100%);
}

.Personal .framework-name {
  color:#FF0000;
}
.Relationship .framework-name {
  color:#f68404;
}
.Family .framework-name {
  color:#fffe02;
}
.Parenting .framework-name {
  color:#02c003;
}
.Household-Management .framework-name {
  color:#a1785f;
}
.Home-Organization .framework-name {
  color:#e3d8c8;
}
.Personal-Productivity .framework-name {
  color:#c5c5c5;
}
.Personal-Resilience .framework-name {
  color:#0000fd;
}
.Happiness .framework-name {
  color:#43017f;
}
.Wellbeing .framework-name {
  color:#bf32f3;
}
.Affluence .framework-name {
  color:#415a14;
}
.Longevity .framework-name {
  color:#838383;
}

.Personal input[type=submit] {
  background-color:#FF0000;
}
.Relationship input[type=submit] {
  background-color:#f68404;
}
.Family input[type=submit] {
  background-color:#fffe02;
  color: #1B1B1B
}
.Parenting input[type=submit] {
  background-color:#02c003;
}
.Household-Management input[type=submit] {
  background-color:#a1785f;
}
.Home-Organization input[type=submit] {
  background-color:#e3d8c8;
  color: #1B1B1B
}
.Personal-Productivity input[type=submit] {
  background-color:#c5c5c5;
  color: #1B1B1B;
}
.Personal-Resilience input[type=submit] {
  background-color:#0000fd;
}
.Happiness input[type=submit] {
  background-color:#43017f;
}
.Wellbeing input[type=submit] {
  background-color:#bf32f3;
}
.Affluence input[type=submit] {
  background-color:#415a14;
}
.Longevity input[type=submit] {
  background-color:#838383;
}