@import "../../../assets/scss/variables";

.header-linktoegov {
  display: none;
}

#activatedua {

  //main content - wrapper
  .main-content {

    .step {

      &-wrapper {

        &--title {

          h1 {

            span {
              font-size: $subtext-size;
              font-weight: $thin;
              letter-spacing: 0.32px;
              line-height: 35px;
            }
          }

          p {
            font-size: $text-size;
            font-weight: $extra-light;
            letter-spacing: 0.4px;
            line-height: 35px;
            color: $text-color;
          }
        }

        &--afm {
          margin: 3.7rem 0 4rem 0;

          input {
            width: 0px;
            height: 0px;
            border: none;

            &:focus ~ label {
              border-color: $secondary-color;

              .step-wrapper--afm--input {
                .filled {
                  color: $secondary-color;
                }

                .empty {
                  border-color: $secondary-color;
                }
              }
            }
          }

          &--label {
            height: 9.2rem;
            border-radius: 0.5rem;
            border: 1px solid #D0E4FF;
            background-color: #F3F8FC;
            padding: 2rem 3rem;
            width: auto;
            max-width: 55rem;
            min-width: 54.1rem;

            span {
              color: $main-color;
              font-size: $info-size;
              font-weight: $bold;
              margin-bottom: 1.1rem;
            }
          }

          &--input {
            display: flex;
            margin-top: 1.1rem;

            .filled {
              font-size: $text-size;
              font-weight: $thin;
              color: $text-color;
              margin-right: 1.1rem;
              line-height: .7;
              width: 1.5rem;
            }

            .empty {
              border-bottom: .1rem solid $text-color;
              width: 1.5rem;
              margin-right: 1.1rem;

            }
          }

          &--trials {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-left: 1.5rem;
            p {
              font-size: $btn-txt-size;
              margin-left: 8px;
              line-height: 1;
            }

            img {
              width: 22px;
              height: 19px;
            }
          }
        }

        &--wrongafm {
          margin-top: 6.9rem;

          a {
            &:hover {
              cursor: pointer;
            }

            text-decoration: underline;
            color: $main-color;
            font-size: $subtext-size;
            letter-spacing: 0.32px;
            line-height: 1.9rem;
            font-weight: $extra-light;
          }
        }

        &--result {
          padding-left: 2.0rem;

          &--img {
            img {
              width: 6.5rem;
              height: 5rem;
            }

            margin-bottom: 2.9rem;
            margin-top: 2.6rem;
          }

          &--text {
            line-height: 3.5rem;
            margin-bottom: 6.1rem;
          }

          &--button {
            button {
              height: 6.4rem;
            }
          }
        }
      }

      &--submit-button {
        display: flex;
        justify-content: end;
        align-items: center;
        padding-top: 4rem;
      }
    }
  }

  //afm form
  #step-afm-form {

    form {
      scroll-margin-top: 30px;
      #guidehelperalt {
        margin-bottom: 30px;
        justify-content: left;

      }

      .rescom-error {
        font-size: 1.6rem;
        color: #040059;
        font-weight: 700;
      }

      //.row {
      //  margin: 0;
      //  .col-helper {
      //    padding: 3rem 2rem 3rem 1rem;
      //
      //  }
      //}

      //.form-step {
      //  border: .1rem solid #D0E4FF;
      //  margin-bottom: 2.7rem;
      //
      //  &.f-line {
      //
      //  }
      //
      //  .col {
      //    height: auto;
      //
      //    background-color: #F3F8FC;
      //    padding: 2rem 3rem;
      //
      //  }
      //
      //  //.select-head span {
      //  //  font-size: $index-size;
      //  //}
      //
      //  &--label {
      //    margin-bottom: .5rem;
      //    width: 100%;
      //
      //
      //    span {
      //      color: $main-color;
      //      font-size: $index-size;
      //      font-weight: $bold;
      //    }
      //  }
      //}
    }
  }


.contract-true {
  display: flex;
  align-items: center;
  gap: 1.2rem;

  p {
    padding-left: 0.5rem;
    border-left: 5px solid #2BC48A;
    color: #707070;
    font-size: 1.2rem;
    font-weight: 100;

    span {
      font-weight: 900;
    }
  }

// Checkmark styles and animation
  .wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    strokeWidth: 2;
    stroke-miterlimit: 10;
    stroke: #2BC48A;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
  }

  .checkmark { 
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    strokeWidth: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #2BC48A;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
  }
    
    @keyframes stroke{100%{stroke-dashoffset: 0}}
    @keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}
    @keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #2BC48A}}
}

// Default  guidehelper state
  .guidehelperalt-wrapper {
    width: auto;
    max-width: 380px;
    margin-left: -50px;

    .guidehelperalt-image-wrapper{
      top: 2px;

      @media only screen and (max-width: 1399px) {
        top: 33px;
      }      
    }

    .guidehelperalt-text-wrapper {
      max-width: 369px;
      padding: 1rem 4rem;

      .contract-data-info {
        min-width: 380px;
        max-width: 380px;
        display: flex;
        align-items: center;
        gap: 0.9rem;
    

        &--text-container {

          p {
            font-size: 1.2rem;
            color: white;
            font-weight: 100;

            span {
              font-weight: 900;
            }
          }
          
        }
    
        &--btn-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          button {
            display: flex;
            align-items: center;
            background-color: #040059;
            gap: 20px;
            padding: 0rem 1rem;
            height: 31px;
            align-items: center;
            justify-content: center;
            color: white;
            border: none;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: 700
            }

            @media only screen and (max-width: 1399px) {
              justify-content: center;
            }
        }
        
        @media only screen and (max-width: 1399px) {
          flex-direction: column;
          align-items: initial;
        }
      }

      @media only screen and (max-width: 1399px) {
        max-width: 250px;
      }
    }
  }

  
}

.icon-tooltip--text {
  max-width: auto;
  min-width: 36rem;
}