.sm-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  z-index: 99999;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  & .modal_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.2);
    width: 100%;
    height: 100%;
    opacity: .7;
  }
  & .sm-modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: calc(clamp(1.25rem, 0.804rem + 1.19vw, 1.875rem));
    border: 1px solid #888;
    width: calc(clamp(20rem, 7.5rem + 33.333vw, 37.5rem));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: calc(clamp(12.5rem, 8.036rem + 11.905vw, 18.75rem));
    &-text {
      max-width: calc(clamp(15.625rem, 6.696rem + 23.81vw, 28.125rem));
      text-align: center;
      & .template-loader {
        margin-bottom: 1rem;
      }
      & h3 {
        margin: 0 0 1rem 0;
        padding: 0;
        font-size: calc(clamp(1.125rem, 0.857rem + 0.714vw, 1.5rem));
        position: relative;
        z-index: 99;
      }
      & p {
        font-size: calc(clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem));
        line-height: 1.3;
        position: relative;
        z-index: 99;
      }
      & img {
        animation: spin-clockwise 3.8s infinite linear;
        margin-bottom: 2rem;
        width: 4rem;
      }
      &.remove_animation {
        & img {
          animation: none !important;
        }
      }
      & .buttons__wrapper {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2.5rem;
        position: relative;
        z-index: 99;

        & button, & a  {
          padding: calc(clamp(0.375rem, 0.196rem + 0.476vw, 0.625rem)) calc(clamp(0.875rem, 0.563rem + 0.833vw, 1.313rem));
          background-color: var(--wd-light-gray-1-color);
          border-radius: calc(clamp(0.125rem, 0.08rem + 0.119vw, 0.188rem));
          cursor: pointer;
          line-height: 1;
          border: 1px solid transparent;
          text-decoration: none;
          &.primary_btn {
            background-color: var(--wd-primary-color);
            color: var(--wd-base-white-color);
            border-color: var(--wd-primary-color);
          }
          &.outline_btn {
            background-color: transparent;
            border-color: var(--wd-base-black-color);
            color: var(--wd-base-black-color);
          }
        }
      }
    }
    & .error__content{
      text-align: center;
    }
    & .icon {
      width: 80px;
      height: 80px;
      border: 4px solid gray;
      border-radius: 50%;
      margin: 20px auto;
      padding: 0;
      position: relative;
      box-sizing: content-box;
      transform: scale(1);
      &.success {
        border-color: var(--wd-primary-color);
        &::after, &::before {
          content: '';
          position: absolute;
          width: 60px;
          height: 120px;
          background: #fff;
          transform: rotate(45deg)
        }
        &::before {
          border-radius: 120px 0 0 120px;
          top: -7px;
          left: -33px;
          transform: rotate(-45deg);
          transform-origin: 60px 60px
        }
        &::after {
          border-radius: 0 120px 120px 0;
          top: -11px;
          left: 30px;
          transform: rotate(-45deg);
          transform-origin: 0 60px
        }
      }

      &.success {
        & .placeholder {
          width: 80px;
          height: 80px;
          border: 4px solid var(--wd-primary-color);
          border-radius: 50%;
          box-sizing: content-box;
          position: absolute;
          left: -4px;
          top: -4px;
          z-index: 2
        }
        & .fix {
          width: 5px;
          height: 90px;
          background-color: #fff;
          position: absolute;
          left: 28px;
          top: 8px;
          z-index: 1;
          transform: rotate(-45deg)
        }
        & .successLine {
          height: 5px;
          background-color: var(--wd-primary-color);
          display: block;
          border-radius: 2px;
          position: absolute;
          z-index: 2
        }
        & .successLine.tip {
          width: 25px;
          left: 14px;
          top: 46px;
          transform: rotate(45deg)
        }
        & .successLine.long {
          width: 47px;
          right: 8px;
          top: 38px;
          transform: rotate(-45deg)
        }
      }
      &.error_box {
        border-color: #F27474;
        & .x-mark {
          position: relative;
          display: block
        }
        & .errorLine {
          position: absolute;
          height: 5px;
          width: 47px;
          background-color: #F27474;
          display: block;
          top: 37px;
          border-radius: 2px
        }
        & .errorLine.left {
          transform: rotate(45deg);
          left: 17px
        }
        & .errorLine.right {
          transform: rotate(-45deg);
          right: 16px
        }
      }
    }
  }
  & .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    &:hover {
      & svg path {
        fill: var(--wd-primary-color);
      }
    }
  }
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



@keyframes animateSuccessTip {
  0%, 54% {
    width: 0;
    left: 1px;
    top: 19px
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px
  }
}

@keyframes animateSuccessLong {
  0%, 65% {
    width: 0;
    right: 46px;
    top: 54px
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px
  }
}
@keyframes rotatePlaceholder {
  0%, 5% {
    transform: rotate(-45deg);
  }
  100%,
  12% {
    transform: rotate(-405deg);
  }
}
.animateSuccessTip {
  animation: animateSuccessTip .75s
}
.animateSuccessLong {
  animation: animateSuccessLong .75s
}
.icon.success.animate::after {
  animation: rotatePlaceholder 4.25s ease-in
}