:root{
  --ej-alert-ink:#0f172a;
  --ej-alert-muted:#64748b;
  --ej-alert-line:#e2e8f0;
  --ej-alert-blue:#2563eb;
  --ej-alert-green:#059669;
  --ej-alert-amber:#d97706;
  --ej-alert-red:#dc2626;
}

.swal2-container{
  backdrop-filter: blur(10px);
}

.ej-alert-backdrop{
  background: rgba(15,23,42,.58) !important;
}

.ej-alert-popup{
  width: min(520px, calc(100vw - 32px)) !important;
  border-radius: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  background:
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,1)) !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.28) !important;
  color: var(--ej-alert-ink) !important;
}

.ej-alert-popup::before{
  content:"";
  display:block;
  height: 8px;
  background: linear-gradient(90deg, var(--ej-alert-blue), #38bdf8);
}

.ej-alert-popup.ej-alert-success::before{
  background: linear-gradient(90deg, var(--ej-alert-green), #34d399);
}

.ej-alert-popup.ej-alert-error::before{
  background: linear-gradient(90deg, var(--ej-alert-red), #fb7185);
}

.ej-alert-popup.ej-alert-warning::before{
  background: linear-gradient(90deg, var(--ej-alert-amber), #fbbf24);
}

.ej-alert-popup.ej-alert-question::before{
  background: linear-gradient(90deg, var(--ej-alert-blue), #818cf8);
}

.ej-alert-title{
  margin: 4px 32px 0 !important;
  padding: 0 !important;
  color: var(--ej-alert-ink) !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.ej-alert-html{
  margin: 14px 32px 0 !important;
  color: var(--ej-alert-muted) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.ej-alert-actions{
  gap: 10px !important;
  margin: 28px 32px 32px !important;
  padding: 0 !important;
}

.ej-alert-confirm,
.ej-alert-cancel{
  border-radius: 12px !important;
  padding: 12px 18px !important;
  min-width: 118px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.ej-alert-confirm{
  background: var(--ej-alert-blue) !important;
  border: 1px solid var(--ej-alert-blue) !important;
  color: #fff !important;
}

.ej-alert-confirm:hover{
  filter: brightness(.96);
}

.ej-alert-cancel{
  background: #fff !important;
  border: 1px solid var(--ej-alert-line) !important;
  color: #334155 !important;
}

.ej-alert-success .ej-alert-confirm{
  background: var(--ej-alert-green) !important;
  border-color: var(--ej-alert-green) !important;
}

.ej-alert-error .ej-alert-confirm,
.ej-alert-warning .ej-alert-confirm{
  background: var(--ej-alert-red) !important;
  border-color: var(--ej-alert-red) !important;
}

.swal2-icon{
  margin: 44px auto 22px !important;
  width: 86px !important;
  height: 86px !important;
  border-width: 4px !important;
}

.swal2-icon.swal2-success{
  border-color: rgba(5,150,105,.18) !important;
  background: linear-gradient(180deg, rgba(5,150,105,.10), rgba(5,150,105,.04)) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line']{
  background-color: var(--ej-alert-green) !important;
}

.swal2-icon.swal2-error{
  border-color: rgba(220,38,38,.20) !important;
  background: linear-gradient(180deg, rgba(220,38,38,.10), rgba(220,38,38,.04)) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line']{
  background-color: var(--ej-alert-red) !important;
}

.swal2-icon.swal2-warning{
  border-color: rgba(217,119,6,.24) !important;
  color: var(--ej-alert-amber) !important;
  background: linear-gradient(180deg, rgba(217,119,6,.12), rgba(217,119,6,.04)) !important;
}

.swal2-icon.swal2-question{
  border-color: rgba(37,99,235,.22) !important;
  color: var(--ej-alert-blue) !important;
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.04)) !important;
}

.swal2-input{
  border-radius: 12px !important;
  border: 1px solid var(--ej-alert-line) !important;
  box-shadow: none !important;
  min-height: 48px !important;
}

.swal2-input:focus{
  border-color: rgba(37,99,235,.72) !important;
  box-shadow: 0 0 0 .22rem rgba(37,99,235,.12) !important;
}

.swal2-timer-progress-bar{
  background: rgba(37,99,235,.38) !important;
}

@media (max-width: 576px){
  .ej-alert-title{
    margin-left: 24px !important;
    margin-right: 24px !important;
    font-size: 25px !important;
  }
  .ej-alert-html{
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .ej-alert-actions{
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}
