.commonPopup {
  .overlayBackground {
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000000 100%);
    opacity: 0.7;
  }

  .popupWrapper {
    max-width: 90%;
    width: 588px;
    height: fit-content;
    z-index: 3;
    position: relative;

    .roundedArrowBtn {
      background-color: #006A71;
      transition: 0.3s ease-in-out;
      width: 57px;
      height: 57px;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      cursor: pointer;

      &:hover {
        background-color: #FF7E67;
      }

      .icon {
        width: 30px;
        height: 30px;
        background-color: #ffffff;
        mask-size: contain;
        display: inline-block;
        -webkit-mask-repeat: no-repeat;

        @media (min-width: 768px) {
          width: 25px;
          height: 25px;
        }
      }
    }

    .popupBox {
      --r: 28px;
      --s: 30px;
      --x: 10px;
      --y: 10px;
      background: #FFFFFF;
      border-radius: var(--r);
      --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%);
      --_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
      --_d: (var(--s) + var(--r));
      mask: calc(100% - var(--_d) - var(--x)) 0 var(--_m), 100% calc(var(--_d) + var(--y)) var(--_m), radial-gradient(var(--s) at 100% 0, rgba(0, 0, 0, 0) 99%, #000 calc(100% + 1px)) calc(-1* var(--r) - var(--x)) calc(var(--r) + var(--y)), var(--_g) calc(-1* var(--_d) - var(--x)) 0, var(--_g) 0 calc(var(--_d) + var(--y));
      mask-repeat: no-repeat;

      .popup-wrapper-body {
        .swalContent {
          padding: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 20px;
          text-align: center;

          @media (min-width: 768px) {
            gap: 30px;
          }

          .iconBox {
            .icon {
              width: 70px;
              height: 70px;
              background-color: #F04438;
              mask-size: contain;
              display: inline-block;
              -webkit-mask-repeat: no-repeat;

              @media (min-width: 768px) {
                width: 100px;
                height: 100px;
              }

              &.success {
                background-color: #17b26a;
              }
            }
          }

          .title {
            margin-bottom: 10px;
            color: #000;
          }
        }

      }
    }
  }
}

.custom-error-button {
  background-color: #FF004F !important;
  color: #ffffff;

  &:focus {
    box-shadow: none !important;
  }
}

.swal2-container .swal2-confirm:hover {
  color: #ffffff;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
  box-shadow: none
}

div:where(.swal2-container) div:where(.swal2-popup) {
  background-color: transparent !important;
}