/* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap"); */

#diet-test * {
   font-family: "Roboto", sans-serif;
   letter-spacing: .03em;
   font-size: 18px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
   color: #000;
}

#diet-test {
   display: block;
   width: 100%;
   max-width: 400px;
   margin: 30px auto;
   border: 2px solid #125c39;
   border-radius: 5px;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   background: #fff;
   padding: 15px 15px;
   position: relative;
   overflow: hidden;
   min-height: 170px;
}

#diet-test span,
#diet-test b,
#diet-test i {
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
   color: inherit;
}

#diet-test .test-title {
   font-weight: 600;
   text-align: center;
   color: #fff;
   margin: 0 0 10px
}

#diet-test .test-title span {
   display: block;
   font-weight: 900;
   font-size: 24px;
   text-transform: uppercase;
   margin-bottom: 5px;
   /* text-decoration: underline;
   text-decoration-skip-ink: none; */
}

#diet-test button {
   display: block;
   background: #125c39;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5;
   text-align: center;
   color: #fff;
   border: 0;
   outline: 0;
   border-radius: 5px;
   padding: 8px 30px;
   margin: 25px auto 15px;
   cursor: pointer;
   transition: all .2s;

   animation-name: pulse-animation;
   -webkit-animation-name: pulse-animation;
   animation-duration: 1.5s;
   -webkit-animation-duration: 1.5s;
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

#diet-test button:disabled {
   opacity: .8;
   animation: none;
}

#diet-test:has(.screen.active.screen-first) {
   background: #125c39;
}

#diet-test .screen.screen-first button {
   margin-top: 0;
   margin-bottom: 0;
   background: #fbe80e;
   color: #125c39;
   font-weight: 700;
}

@keyframes pulse-animation {

   0%,
   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   50% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }

}

#diet-test .cta-block-button {
   display: block;
   width: 100%;
   max-width: 340px;
   background: #e8a000;
   font-weight: 700;
   font-size: 18px;
   line-height: 1.5;
   text-align: center;
   color: #fff;
   border: 0;
   outline: 0;
   border-radius: 5px;
   padding: 18px 15px;
   margin: 15px auto;
   cursor: pointer;
   transition: all .2s;
   text-decoration: none;
   text-transform: uppercase;
   animation-name: pulse-animation;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;

   animation-name: pulse-animation;
   -webkit-animation-name: pulse-animation;
   animation-duration: 1.5s;
   -webkit-animation-duration: 1.5s;
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

#diet-test .cta-block-button .cta-block-button-discount {
   font-size: 22px;
}

#diet-test .screen-text {
   margin: 0;
}

#diet-test .screen-text p {
   margin-top: 15px;
   margin-bottom: 15px;
   font-size: 16px;
}

#diet-test .screen-text p.question {
   background: #125c39;
   font-weight: 700;
   font-size: 20px;
   color: #fff;
   padding: 10px;
   margin: 15px -15px;
   text-align: center
}

#diet-test .screen-text p.big {
   font-size: 18px
}

#diet-test .screen-text p b {
   font-weight: 700
}

#diet-test p.description {
   background: #f0faf6;
   border-left: 2px solid #5b9f7f;
   border-right: 2px solid #5b9f7f;
   font-weight: 400;
   font-size: 14px;
   text-align: center;
   color: #5b9f7f;
   padding: 5px 10px;
   margin: 15px 0
}

#diet-test .checkbox-group {
   margin: 15px 0;
}

#diet-test .checkbox-group.radioGroupAge {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   row-gap: 10px;
}

#diet-test .checkbox-group.radioGroupAge div {
   display: flex;
   align-items: flex-start;
   column-gap: 10px;
   height: 30px;
}

#diet-test .checkbox-group.radioGroupAge div label {
   width: 50%;
   margin: 0;
}

#diet-test .unit-options {
   display: none
}

#diet-test .input-block {
   display: flex;
   align-items: center;
   justify-content: center;
   column-gap: 20px;
   margin: 15px 0;
}

#diet-test label {
   display: block;
   font-weight: 400;
   font-size: 13px;
   line-height: 115%;
   text-align: center;
   color: #000;
   margin-bottom: 2px
}

#diet-test input[type='number'] {
   -moz-appearance: textfield
}

#diet-test input::-webkit-outer-spin-button,
#diet-test input::-webkit-inner-spin-button {
   -webkit-appearance: none
}

#diet-test input[type="number"] {
   border: 1px solid #5b9f7f;
   border-radius: 5px;
   width: 100px;
   height: 35px;
   outline: 0;
   padding: 5px 10px;
   font-size: 16px
}

#diet-test input[type="number"]:active,
#diet-test input[type="number"]:focus {
   -webkit-appearance: none;
   -moz-box-shadow: 0px 0px 0px 1px #5b9f7f inset;
   -webkit-box-shadow: 0px 0px 0px 1px #5b9f7f inset;
   box-shadow: 0px 0px 0px 1px #5b9f7f inset;
}

#diet-test .error-message {
   display: none;
   font-weight: 400;
   font-size: 13px;
   line-height: 115%;
   text-align: center;
   color: red;
   margin-top: 5px;
   margin-bottom: -10px
}

#diet-test input[type="radio"],
#diet-test input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
   display: none;
}

#diet-test .checkbox-group label {
   border: 1px solid #125c39;
   border-radius: 25px;
   font-weight: 400;
   font-size: 16px;
   text-align: center;
   color: #000;
   margin: 0 0 10px;
   padding: 5px 15px;
   cursor: pointer;
   transition: all .2s;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

#diet-test .checkbox-group label.no-options {
   background: #f6faff;
   border: 1px solid #105dc2
}

#diet-test .checkbox-group label.no-options:has(input:checked) {
   color: #fff;
   background: #105dc2
}

#diet-test .checkbox-group label:has(input:checked) {
   background: #125c39;
   color: #fff
}

#diet-test .checkbox-group hr {
   width: 115px;
   border-top: 1px solid #125c39;
   margin: 15px auto
}

#diet-test canvas {
   display: none;
   margin: 20px auto;
   width: 100% !important;
   height: auto !important
}

#diet-test #goalResult {
   display: none
}

#diet-test .screen {
   display: none;
}

#diet-test .screen.active {
   display: block
}

#diet-test .user-profile {
   background: #f0faf6;
   border-left: 2px solid #5b9f7f;
   border-right: 2px solid #5b9f7f;
   text-align: center;
   color: #000;
   padding: 5px 10px;
   margin: 15px 0
}

#diet-test .user-profile p {
   margin: 0 0 5px;
   text-align: center;
}

#diet-test .user-profile ul {
   list-style: none;
   padding: 0;
   margin: 0
}

#diet-test .user-profile li {
   font-weight: 400;
   font-size: 16px;
   margin: 0 0 5px
}

#diet-test .badge {
   display: inline-block;
   padding: 2px 5px;
   border-radius: 2px;
   min-width: 20px;
   text-align: center;
   font-style: italic;
   font-weight: 700
}

#diet-test .color-green {
   background-color: #125c39;
   color: #fff
}

#diet-test .color-yellow {
   background-color: #c79b0f;
   color: #fff
}

#diet-test .color-red {
   background-color: #9a1f2a;
   color: #fff
}

#diet-test .unit {
   display: none
}

#diet-test .loading {
   display: none;
   position: absolute;
   background: rgba(255, 255, 255, 0.8);
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   -moz-backdrop-filter: blur(2px);
}

#diet-test .loading .loading-icon {
   width: 80px;
   height: 80px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#diet-test span.colored {
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
   padding: 5px 3px;
   border-radius: 5px;
}

#diet-test span.colored[data-typing="true"] {
   padding: 0 !important;
}

#diet-test span.colored.yellow {
   background: #FBE80E;
   color: #000;
}

#diet-test span.colored.yellow2 {
   background: #FBE80E;
   color: #125c39;
}

#diet-test span.colored.green {
   background: #f0faf6;
   color: #5b9f7f;
}

#diet-test span.colored.blue {
   background: #105DC2;
   color: #fff;
}

#diet-test .typing-text {
   display: none;
}

#diet-test #cta-block {
   display: none;
}

#diet-test #cta-block .cta-block-product {
   display: block;
   width: 100%;
   max-width: 230px;
   margin: 0 auto;
}

#diet-test .fade-block {
   animation-name: fadeInCTA;
   animation-duration: 2s;
   animation-fill-mode: forwards;
}

@keyframes fadeInCTA {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

#diet-test .screen:not(.screen.screen-first) {
   margin: -15px 0;
}

#diet-test #chartTitle p {
   font-size: 18px;
   margin: 15px 0;
}

#diet-test .text-center {
   text-align: center;
}