/* SweetAlert2 커스텀 */
div:where(.swal2-container) {z-index: 99999 !important;}
div:where(.swal2-container) div:where(.swal2-popup) { width: 48rem !important; }
div:where(.swal2-container) h2:where(.swal2-title) { font-size: 45px !important;  }
div:where(.swal2-container) div:where(.swal2-html-container) { font-size: 36px !important; }
div:where(.swal2-container) button:where(.swal2-styled) { font-size: 40px !important; font-weight: 700 !important; }

/* 아이콘 색상 커스텀 */
.color-blue .swal2-success-line-tip,.color-blue .swal2-success-line-long {background-color: #2769ff!important; z-index: 3!important;}
.color-blue .swal2-success-ring {background-color: #fff!important; border: calc(.25em * 2) solid #2769ff!important;}
.color-blue-active .swal2-success-line-tip,.color-blue-active .swal2-success-line-long {background-color: #fff!important; z-index: 3!important;}
.color-blue-active .swal2-success-ring {background-color: #2769ff!important; border: calc(.25em * 2) solid #2769ff!important;}


div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    color:#fff; 
    background:#2769ff;
}

div:where(.swal2-icon) { 
    width: calc(5em * 2);
    height: calc(5em * 2);
    border: calc(.25em * 2) solid rgba(0,0,0,0);
}

div:where(.swal2-icon) .swal2-icon-content { 
    font-size: calc(3.75em * 2)
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line] {
    width: calc(3.75em * 2);
    height: calc(7.5em * 2);
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
    top: calc(-0.4375em * 2);
    left: calc(-2.0635em * 2);
    transform-origin: calc(3.75em * 2) calc(3.75em * 2);
    border-radius: calc(7.5em * 2) 0 0 calc(7.5em * 2)
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right] {
    top: calc(-0.6875em * 2);
    left:calc( 1.875em * 2);
    transform-origin: 0 calc(3.75em * 2);
    border-radius: 0 calc(7.5em * 2) calc(7.5em * 2) 0
}

div:where(.swal2-icon).swal2-success .swal2-success-ring {
    top: calc(-0.25em * 2);
    left: calc(-0.25em * 2);
    border: calc(.25em * 2) solid rgba(165,220,134,.3);
}

div:where(.swal2-icon).swal2-success .swal2-success-fix {
    top: calc(.5em * 2);
    left: calc(1.625em * 2);
    width: calc(.4375em * 2);
    height: calc(5.625em * 2);
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line] {
    height: calc(.3125em * 2);
    border-radius: calc(.125em * 2);
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: calc(2.875em * 2);
    left: calc(.8125em * 2);
    width: calc(1.5625em * 2);
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: calc(2.375em * 2);
    right: calc(.5em * 2);
    width: calc(2.9375em * 2);
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line] {
    display: block;
    position: absolute;
    top: calc(2.3125em * 2);
    width: calc(2.9375em * 2);
    height: calc(.3125em * 2);
    border-radius: calc(.125em * 2);
    background-color: #f27474
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: calc(1.0625em * 2);
    transform: rotate(45deg)
}

div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right] {
    right: calc(1em * 2);
    transform: rotate(-45deg)
}

@keyframes swal2-animate-success-line-tip {
    0% {
        top: calc(1.1875em * 2);
        left: calc(.0625em * 2);
        width: 0
    }

    54% {
        top: calc(1.0625em * 2);
        left: calc(.125em * 2);
        width: 0
    }

    70% {
        top: calc(2.1875em * 2);
        left: calc(-0.375em * 2);
        width: calc(3.125em * 2)
    }

    84% {
        top: calc(3em * 2);
        left: calc(1.3125em * 2);
        width: calc(1.0625em * 2)
    }

    100% {
        top: calc(2.8125em * 2);
        left: calc(.8125em * 2);
        width: calc(1.5625em * 2)
    }
}

@keyframes swal2-animate-success-line-long {
    0% {
        top: calc(3.375em * 2);
        right: calc(2.875em * 2);
        width: 0
    }

    65% {
        top: calc(3.375em * 2);
        right: calc(2.875em * 2);
        width: 0
    }

    84% {
        top: calc(2.1875em * 2);
        right: 0;
        width: calc(3.4375em * 2)
    }

    100% {
        top: calc(2.375em * 2);
        right: calc(.5em * 2);
        width: calc(2.9375em * 2)
    }
}

@keyframes swal2-animate-error-x-mark {
  0% {
      margin-top: calc(1.625em * 2);
      transform: scale(0.4);
      opacity: 0
  }

  50% {
      margin-top: calc(1.625em * 2);
      transform: scale(0.4);
      opacity: 0
  }

  80% {
      margin-top: calc(-0.375em * 2);
      transform: scale(1.15)
  }

  100% {
      margin-top: 0;
      transform: scale(1);
      opacity: 1
  }
}