body:has(#diagmaster-tool),
body:has(#diagmaster-individual) {
  padding: 0;
}

body:has(#diagmaster-tool) nav,
body:has(#diagmaster-tool) footer,
body:has(#diagmaster-individual) nav,
body:has(#diagmaster-individual) footer {
  display: none;
}

#diagmaster-tool {
  padding: 0;
}

#diagmaster-tool .header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: relative;
  z-index: 1;
}

#diagmaster-tool .header .logo img {
  height: 45px;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

#diagmaster-tool .header .close {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #959595;
  font-weight: 300;
  text-transform: uppercase;
}

#diagmaster-tool .header .close svg {
  stroke-width: 1.4px;
}

@media only screen and (max-width: 500px) {
  #diagmaster-tool .header {
    justify-content: center;
  }

  #diagmaster-tool .header .close {
    display: none;
  }
}

#diagmaster-tool .form-wrapper {
  height: calc(100vh - 85px);
  margin: 1vh 0;
  overflow: hidden;
}

#diagmaster-tool .form-wrapper .box {
  display: flex;
  justify-content: end;
  background: #f4f4f4;
  height: 100%;
  width: 100%;
  border-radius: 15px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide {
  height: 100%;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  overflow-y: scroll;
  padding: 3vh 6vw;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type {
  padding-bottom: calc(5vh + 50px);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type .banner {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type .banner .progression {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type .banner .progression .percentage {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.2em;
  color: lightgray;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type .banner .progression .progression-bar {
  width: 100%;
  max-width: 850px;
  height: 10px;
  background-color: lightgray;
  border-radius: 4px;
  overflow: hidden;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type .banner .progression .progression-bar .inner {
  background-color: #da3486;
  height: 100%;
  width: var(--progress);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .question-wrapper {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .question-wrapper .question {
  padding-bottom: 2vh;
  margin-bottom: 5vh;
  border-bottom: 1px solid lightgrey;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .question-wrapper .question h4 {
  color: gray;
  font-size: 1.3em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .question-wrapper .question h3 {
  font-weight: 300;
  font-size: clamp(1.2em, 3vh, 1.8em);
  line-height: 1.42em;
  margin: 0;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .question-wrapper .question h4 {
    font-size: 1.15em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
  padding-left: 5%;
  padding-right: 30px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer::before {
  content: "";
  background-color: #da3486;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer:hover:not(.selected) {
  background-color: #fdf6fc;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer.selected .checkbox .inner,
#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer:hover .checkbox .inner {
  width: 80%;
  height: 80%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer.selected {
  background-color: #da3486;
  color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer.selected .checkbox {
  border: 2px solid white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer.selected .checkbox .inner {
  background-color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer .answer {
  font-weight: 300;
  font-size: 1.25em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer .checkbox {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1in;
  border: 2px solid #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer .checkbox .inner {
  width: 0;
  height: 0;
  border-radius: 1in;
  background-color: #da3486;
  transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer {
    padding: 18px;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer .answer {
    font-size: 1.05em;
    padding-right: 5px;
  }
}

@media only screen and (max-height: 850px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer {
    flex: 1;
    min-width: 350px;
  }
}

@media only screen and (max-width: 500px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.list .answers .single-answer {
    min-width: 280px;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper {
  width: 100%;
  padding: 10vh 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper:not(:last-child) {
  border-bottom: 1px solid lightgrey;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper.disabled {
  opacity: 0.35;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper.disabled .answers .single-answer {
  cursor: default !important;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper.disabled .answers .single-answer:hover .checkbox .inner {
  width: 0 !important;
  height: 0 !important;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question {
  padding-bottom: 2vh;
  margin-bottom: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 850px;
  margin: 0 auto;
  margin-bottom: 2.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question h4 {
  color: gray;
  font-size: 1.3em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 0.5em;
  text-align: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question h3 {
  font-weight: 300;
  font-size: clamp(1.2em, 3vh, 1.8em);
  line-height: 1.42em;
  margin: 0;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question h4 {
    font-size: 1.15em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 2vw, 35px);
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .before,
#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .after {
  font-size: 1.2em;
  font-weight: 300;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .before {
  color: #3466da;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .after {
  color: #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  width: -moz-fit-content;
  width: fit-content;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer.selected .checkbox .inner,
#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer:hover .checkbox .inner {
  width: 80%;
  height: 80%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1in;
  border: 2px solid #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.small {
  width: 45px;
  height: 45px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.medium {
  width: 65px;
  height: 65px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.large {
  width: 85px;
  height: 85px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.positive {
  border-color: #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.positive .inner {
  background-color: #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.negative {
  border-color: #3466da;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.negative .inner {
  background-color: #3466da;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox .inner {
  width: 0;
  height: 0;
  border-radius: 1in;
  background-color: #da3486;
  transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media only screen and (max-width: 900px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.small {
    width: 40px;
    height: 40px;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.medium {
    width: 55px;
    height: 55px;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.large {
    width: 75px;
    height: 75px;
  }
}

@media only screen and (max-width: 800px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question h3 {
    font-size: 1.8em !important;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers {
    position: relative;
    padding-bottom: 45px;
    justify-content: space-between;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .before,
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .after {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .after {
    left: unset;
    right: 0;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.small {
    width: clamp(40px, 6vw, 80px);
    height: clamp(40px, 6vw, 80px);
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.medium {
    width: clamp(50px, 9vw, 90px);
    height: clamp(50px, 9vw, 90px);
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers .single-answer .checkbox.large {
    width: clamp(50px, 12vw, 100px);
    height: clamp(50px, 12vw, 100px);
  }
}

@media only screen and (max-width: 500px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .question h3 {
    font-size: 1.4em !important;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.question-type.scale .questions .question-wrapper .answers {
    justify-content: center;
    gap: 2.5vw;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro {
  padding: 5%;
  padding-top: 10vh;
  padding-bottom: calc(10vh + 35px);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details h3 {
  font-family: var(--titleFont);
  font-size: clamp(2em, 5vh, 3.2em);
  font-weight: 500;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details h3 underline {
  position: relative;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details h3 underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  background-image: url("data:image/svg+xml,%3Csvg width='287' height='14' viewBox='0 0 287 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.03179 9.60153C63.7842 2.88421 232.438 3.36525 282.466 6.5458' stroke='%23DA3486' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 12px;
  transform: scale(0);
  opacity: 0;
  transform-origin: left;
  animation: underlineAppear 0.3s 0.45s forwards;
}

@keyframes underlineAppear {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta {
  position: relative;
  background-color: white;
  border-radius: 1in;
  padding: 10px;
  padding-right: 25px;
  display: flex;
  align-items: center;
  gap: 30px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  margin-top: 4vh;
  width: 100%;
  max-width: 750px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta .content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta .content p {
  font-size: 1.25em;
  line-height: 1.6em;
  font-weight: 300;
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta .content svg {
  width: 65px;
  height: 65px;
  fill: #da3486;
  opacity: 0.25;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta img {
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 1in;
  aspect-ratio: 1/1;
}

@media only screen and (max-width: 570px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta {
    flex-direction: column;
    padding: 20px;
    border-radius: 15px;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details .cta .content {
    text-align: center;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-bottom: 1em;
  margin-top: 5vh;
  border-top: 1px solid lightgray;
  padding-top: 4vh;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters h4 {
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.42em;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters .single-save {
  width: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 30px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  font-size: 1.05em;
  font-weight: 300;
  background-color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters .single-save::before {
  content: "";
  background-color: #da3486;
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters .single-save:hover {
  background-color: #fdf6fc;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters .single-save {
    padding: 20px;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .saved-diagmasters:not(:has(.single-save)) {
  display: none;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .navigation {
  width: 100%;
  justify-content: start;
}

@media only screen and (max-width: 680px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro {
    padding-top: 5vh;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.intro .details h3 {
    font-size: 2.3em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation {
  padding: 5%;
  padding-top: 10vh;
  padding-bottom: calc(10vh + 35px);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details h4 {
  color: gray;
  font-size: 1.3em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details h3 {
  font-weight: 300;
  font-size: 1.8em;
  line-height: 1.42em;
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details p {
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .separator {
  width: 100%;
  height: 1px;
  background-color: lightgray;
  margin-top: 1em;
  margin-bottom: 2em;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details h4 {
    font-size: 1.2em;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details h3 {
    font-size: 1.5em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question {
  margin-bottom: 3.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.hidden {
  display: none;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question .question {
  font-weight: 300;
  font-size: clamp(1.2em, 3vh, 1.8em);
  line-height: 1.42em;
  margin: 0;
  margin-bottom: 0.5em;
  text-align: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers {
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers .single-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid lightgray;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers .single-answer .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers .single-answer .checkbox .inner {
  width: 75%;
  height: 75%;
  border-radius: 100%;
  background-color: white;
  scale: 0;
  transition: 0.2s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers .single-answer.selected {
  background-color: #da3486;
  color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.individual-or-professional .answers .single-answer.selected .checkbox .inner {
  scale: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.company-name .answer {
  display: flex;
  justify-content: center;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.company-name .answer input {
  border: 1px solid lightgray;
  border-radius: 8px;
  background-color: white;
  padding: 10px 15px;
  width: 100% !important;
  font-family: var(--titleFont);
  font-size: 0.9em;
  font-weight: 200;
  max-width: 375px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.your-situation .details .wrapper .single-question.company-name .answer input:focus {
  outline: none;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details h4 {
  color: gray;
  font-size: 1.3em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details h3 {
  font-weight: 300;
  font-size: 1.8em;
  line-height: 1.42em;
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details p {
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details .separator {
  width: 100%;
  height: 1px;
  background-color: lightgray;
  margin-top: 1em;
  margin-bottom: 2em;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details h4 {
    font-size: 1.2em;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .details h3 {
    font-size: 1.5em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .navigation {
  width: 100%;
  justify-content: start;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.lead .navigation {
  width: 100%;
  justify-content: space-between;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results {
  padding: 5vh 6vw;
  padding-bottom: calc(5vh + 50px);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details {
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h4 {
  color: gray;
  font-size: 1.3em;
  font-weight: 300;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h3 {
  font-weight: 300;
  font-size: 1.8em;
  line-height: 1.42em;
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h3 .underline {
  position: relative;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h3 .underline svg {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -10px;
  width: 100%;
  height: 12px;
  transform: scale(0);
  opacity: 0;
  transform-origin: left;
  animation: underlineAppear 0.3s 0.45s forwards;
}

@keyframes underlineAppear {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details p {
  margin: 0;
  margin-top: 2em;
  font-size: 1.1em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details .separator {
  width: 100%;
  height: 1px;
  background-color: lightgray;
  margin-top: 1em;
  margin-bottom: 2em;
}

@media only screen and (max-width: 600px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h4 {
    font-size: 1.2em;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .details h3 {
    font-size: 1.5em;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat {
  position: relative;
  flex: 1;
  min-width: 235px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.13) 0px 8px 24px;
  padding: 25px;
  border-radius: 10px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .tooltip {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1em;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .title h3 {
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1.4em;
  margin: 0;
  color: #909090;
  text-align: center;
  flex: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .circle-percentage {
  width: 200px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .circle-percentage .circular-chart {
  position: relative;
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .circle-percentage .circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .circle-percentage .circle {
  fill: none;
  stroke: #da3486;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: 1s;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat .circle-percentage .percentage {
  opacity: 0;
  fill: #666;
  font-size: 0.5em;
  text-anchor: middle;
  transition: opacity 0.2s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.animate .title {
  opacity: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.animate .circle-percentage .percentage {
  opacity: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.animate.estimator {
  opacity: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator {
  opacity: 0;
  width: 100%;
  min-width: unset;
  max-width: unset;
  flex: unset;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .title {
  margin-bottom: 2em;
  opacity: 1 !important;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3%;
  width: 100%;
  margin-bottom: 3em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .single-field {
  position: relative;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .single-field .label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
  color: #666;
  font-weight: 300;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .single-field input {
  border: 1px solid lightgray;
  border-radius: 8px;
  background-color: white;
  padding: 12px;
  padding-right: 25px;
  font-size: 1.15em;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .single-field input:focus {
  outline: none;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .single-field .unit {
  position: absolute;
  top: calc(50% + 17px);
  translate: 0 -50%;
  right: 10px;
  color: lightgray;
  font-size: 1.1em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow {
  position: relative;
  margin-top: 34px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow svg {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 50%;
  stroke-width: 1.5px;
  stroke: lightgray;
  translate: 0 -50%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow svg.before {
  left: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow svg.after {
  right: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow .values {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow .values .profit {
  margin-top: 0.2em;
  font-size: 1.55em;
  color: #da3486;
  font-weight: 500;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .arrow .values .profit-percentage {
  font-size: 1.1em;
  font-weight: 300;
  color: green;
  margin: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .roi {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 300;
  font-size: 1.1em;
  color: #909090;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .roi span {
  font-size: 1.1em;
  color: green;
  font-weight: 400;
  margin-left: 0.25em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  margin-top: 30px;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper.animate {
  opacity: 1;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.13) 0px 8px 24px;
  padding: 25px 35px;
  border-radius: 10px;
  width: calc(50% - 15px - 50px);
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta.discuss-results {
  margin-top: 30px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta.discuss-results .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 20px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta.discuss-results .wrapper img {
  width: 125px;
  height: 125px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 1in;
  margin-top: -65px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta h3 {
  font-size: 1.35em;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta p {
  text-align: center;
  margin-bottom: 0;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 2em;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: var(--simpleTransition) !important;
  background-color: #da3486;
  letter-spacing: 0.5px;
  font-size: 1.1em;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta .btn.secondary {
  background: transparent;
  color: #da3486;
  border: 1px solid #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta .underline {
  margin-top: 1em;
  color: #da3486;
  font-weight: 300;
  font-size: 1em;
  text-decoration: underline;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .separator {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 25px;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .separator::before,
#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .separator::after {
  content: "";
  background-color: #da3486;
  flex: 1;
  width: 1px;
  height: auto;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .separator span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1in;
  border: 1px solid #da3486;
  width: 65px;
  height: 65px;
  color: #da3486;
}

@media only screen and (max-width: 1100px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper {
    flex-direction: column;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .separator {
    display: none;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .ctas-wrapper .cta {
    width: 100%;
  }
}

@media only screen and (max-width: 1000px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator {
    width: 100%;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top {
    flex-direction: column;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col {
    width: 100%;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col.arrow {
    margin: 70px 0;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col.arrow svg {
    rotate: 90deg;
    top: unset;
    bottom: unset;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col.arrow svg.before {
    top: -35px;
    left: unset;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .top .col.arrow svg.after {
    bottom: -75px;
    right: unset;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .roi {
    display: flex;
    flex-direction: column;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat.estimator .estimator-tool .roi span {
    margin-top: 0.75em;
  }
}

@media only screen and (max-width: 950px) {
  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .stats .single-stat {
    width: 100%;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .btns {
    flex-wrap: wrap;
  }

  #diagmaster-tool .form-wrapper .box .diagmaster-form .splide .single-step.results .btns .btn {
    flex: 1;
    min-width: 280px;
  }
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin-top: 4vh;
  width: 100%;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn {
  padding: 10px 28px;
  border-radius: 8px;
  border: 2px solid #da3486;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.disabled {
  cursor: default;
  opacity: 0.85;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.prev {
  background-color: transparent;
  color: #da3486;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.prev:hover {
  background-color: #da3486;
  color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.next,
#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.submit {
  background-color: #da3486;
  color: white;
}

#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.next.disabled,
#diagmaster-tool .form-wrapper .box .diagmaster-form .navigation .single-nav-btn.submit.disabled {
  background-color: #e8e8e8;
  color: #a6a6a6;
  border: 2px solid #c8c8c8;
}

#diagmaster-tool .form-wrapper .box .image-col {
  width: 45%;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

#diagmaster-tool .form-wrapper .box .image-col img {
  height: 100%;
  border-radius: 14px;
}

#diagmaster-tool .form-wrapper.started .box .diagmaster-form {
  width: 100%;
}

#diagmaster-tool .form-wrapper.started .box .image-col {
  width: 0%;
}

@media only screen and (max-width: 1100px) {
  #diagmaster-tool .form-wrapper .box .image-col {
    width: 0%;
  }
}

@media only screen and (max-width: 700px) {
  #diagmaster-tool .form-wrapper {
    background-color: white;
    padding: 0;
    margin: 0;
  }

  #diagmaster-tool .form-wrapper .box {
    background-color: unset;
    overflow: visible;
  }
}

#diagmaster-tool .forminator-ui .forminator-row:has(.diagmaster) {
  margin: 0;
}

#diagmaster-tool .forminator-ui .forminator-row:has(.diagmaster) .diagmaster {
  display: none !important;
}

#diagmaster-tool .forminator-ui .forminator-row .forminator-checkbox input {
  width: 25px !important;
}

#diagmaster-tool .forminator-ui .forminator-row .forminator-field .forminator-label {
  color: black;
  margin-bottom: 4px;
}

#diagmaster-tool .forminator-ui .forminator-row .forminator-field .forminator-label .forminator-required {
  color: red;
}

#diagmaster-tool .forminator-ui .forminator-row .forminator-field .forminator-button-submit {
  display: none;
}

#diagmaster-tool .tooltip {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(224, 224, 224);
  color: #909090;
  border-radius: 1in;
  cursor: pointer;
}

#diagmaster-tool .tippy-tooltip {
  font-weight: 300;
}

#diagmaster-individual {
  padding: 0;
}

#diagmaster-individual .header {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: relative;
  z-index: 1;
}

#diagmaster-individual .header .logo img {
  height: 45px;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

#diagmaster-individual .header .close {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #959595;
  font-weight: 300;
  text-transform: uppercase;
}

#diagmaster-individual .header .close svg {
  stroke-width: 1.4px;
}

@media only screen and (max-width: 500px) {
  #diagmaster-individual .header {
    justify-content: center;
  }

  #diagmaster-individual .header .close {
    display: none;
  }
}

#diagmaster-individual .infos-wrapper {
  display: flex;
  height: calc(100vh - 70px);
}

#diagmaster-individual .infos-wrapper .content-col {
  padding: 5%;
  width: 60%;
}

#diagmaster-individual .infos-wrapper .content-col h3 {
  font-family: var(--titleFont);
  font-size: clamp(2em, 5vh, 3.2em);
  font-weight: 500;
  margin: 0;
  margin-bottom: 0.5em;
}

#diagmaster-individual .infos-wrapper .content-col h3 underline {
  position: relative;
}

#diagmaster-individual .infos-wrapper .content-col h3 underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  background-image: url("data:image/svg+xml,%3Csvg width='287' height='14' viewBox='0 0 287 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.03179 9.60153C63.7842 2.88421 232.438 3.36525 282.466 6.5458' stroke='%23DA3486' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 12px;
  transform: scale(0);
  opacity: 0;
  transform-origin: left;
  animation: underlineAppear 0.3s 0.45s forwards;
}

@keyframes underlineAppear {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

#diagmaster-individual .infos-wrapper .image-col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
}

#diagmaster-individual .infos-wrapper .image-col img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 900px) {
  #diagmaster-individual .infos-wrapper {
    flex-direction: column;
    justify-content: center;
  }

  #diagmaster-individual .infos-wrapper .content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  #diagmaster-individual .infos-wrapper .content-col h3 {
    text-align: center;
  }

  #diagmaster-individual .infos-wrapper .image-col {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #diagmaster-individual .infos-wrapper .image-col::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.9;
  }
}

/*# sourceMappingURL=style.css.map */