#black{ z-index: 100002 !important; }
#alert{ z-index: 100003 !important; }

#black.black{
  background: rgba(8, 36, 33, .55) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
  transition: opacity .18s ease-in-out;
}

html body #alert.alert{

  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(.98) !important;
  width: min(420px, 92vw) !important;
  max-width: min(420px, 92vw) !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 94, 87, .10) !important;
  border-radius: 20px !important;
  box-shadow:
    0 30px 80px rgba(3, 30, 27, .45),
    0 2px 0 rgba(255, 255, 255, .9) inset !important;
  padding: 28px 24px 22px !important;
  transition: opacity .20s ease, transform .22s cubic-bezier(.2,.8,.25,1) !important;
  font-family: "Vazirmatn","Noto Sans Arabic","IRANSans",Tahoma,Arial,sans-serif;
}
html body #alert.alert[style*="opacity: 1"],
html body #alert.alert[style*="opacity:1"]{
  transform: translate(-50%, -50%) scale(1) !important;
}

html body #black.black{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
}

html[dir="rtl"] #alert.alert{ direction: rtl; text-align: center; }
html[dir="ltr"] #alert.alert{ direction: ltr; text-align: center; }

#alert.alert #icon.icon{
  position: relative;
  display: inline-block !important;
  width: 104px !important;
  height: 104px !important;
  margin: 2px auto 16px auto !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;

  background-image: url("../img/robot-mascot.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 84px 84px !important;
  background-color: #ecfeff !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 4px rgba(94, 234, 212, 0.22),
    0 0 0 10px rgba(94, 234, 212, 0.10),
    0 10px 22px rgba(13, 148, 136, 0.18) !important;
  animation: alertIconPop .45s cubic-bezier(.2,.9,.3,1.4) both;
}

#alert.alert #icon.icon.fa-check-circle{
  background-color: #ecfdf5 !important;
  box-shadow:
    0 0 0 4px rgba(52, 211, 153, 0.25),
    0 0 0 10px rgba(52, 211, 153, 0.10),
    0 10px 22px rgba(5, 150, 105, 0.20) !important;
}

#alert.alert #icon.icon.fa-exclamation-circle,
#alert.alert #icon.icon.fa-times-circle,
#alert.alert #icon.icon.fa-exclamation-triangle{
  background-color: #fff1f2 !important;
  box-shadow:
    0 0 0 4px rgba(251, 113, 133, 0.25),
    0 0 0 10px rgba(251, 113, 133, 0.10),
    0 10px 22px rgba(220, 38, 38, 0.20) !important;
}

#alert.alert #icon.icon.fa-info-circle{
  background-color: #ecfeff !important;
  box-shadow:
    0 0 0 4px rgba(94, 234, 212, 0.25),
    0 0 0 10px rgba(94, 234, 212, 0.10),
    0 10px 22px rgba(13, 148, 136, 0.20) !important;
}

#alert.alert #icon.icon::after{
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-color: #0d9488;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 10px rgba(13,148,136,.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='1.4' fill='white' stroke='none'/><path d='M12 12 L12 17'/></svg>");
}
#alert.alert #icon.icon.fa-check-circle::after{
  background-color: #059669;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 10px rgba(5,150,105,.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12 L10 17 L19 7'/></svg>");
}
#alert.alert #icon.icon.fa-exclamation-circle::after,
#alert.alert #icon.icon.fa-times-circle::after,
#alert.alert #icon.icon.fa-exclamation-triangle::after{
  background-color: #dc2626;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 10px rgba(220,38,38,.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6 L12 13'/><circle cx='12' cy='17.2' r='1.2' fill='white' stroke='none'/></svg>");
}
#alert.alert #icon.icon.fa-trash-alt,
#alert.alert #icon.icon.fa-trash{
  background-color: #fff1f2 !important;
  box-shadow:
    0 0 0 4px rgba(251, 113, 133, 0.25),
    0 0 0 10px rgba(251, 113, 133, 0.10),
    0 10px 22px rgba(220, 38, 38, 0.20) !important;
}
#alert.alert #icon.icon.fa-trash-alt::after,
#alert.alert #icon.icon.fa-trash::after{
  background-color: #dc2626;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 10px rgba(220,38,38,.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7 H20'/><path d='M9 7 V5 a1 1 0 0 1 1-1 h4 a1 1 0 0 1 1 1 V7'/><path d='M6.5 7 L7.3 19 a1.7 1.7 0 0 0 1.7 1.6 h6 a1.7 1.7 0 0 0 1.7-1.6 L17.5 7'/><path d='M10 11 V16.5'/><path d='M14 11 V16.5'/></svg>");
}
html[dir="rtl"] #alert.alert #icon.icon::after{
  right: auto;
  left: -2px;
}

@keyframes alertIconPop{
  0%   { transform: scale(.55) rotate(-10deg); opacity: 0; }
  65%  { transform: scale(1.10) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}

#alert.alert #alert-title,
#alert.alert .title{
  display: block;
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f5e57 !important;
  letter-spacing: 0;
  line-height: 1.35;
}

#alert.alert #alert-text,
#alert.alert .text{
  display: block;
  margin: 6px 12px 20px 12px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #3a4147 !important;
  word-break: break-word;

  unicode-bidi: plaintext;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#alert.alert #alert-positive,
#alert.alert #alert-negative,
#alert.alert .btn-alert{
  min-width: 104px;
  margin: 8px 6px 0 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;

  border-radius: 14px !important;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
  border: 0 !important;
  user-select: none;
}

#alert.alert #alert-positive{ display: inline-block !important; }
#alert.alert #alert-negative:not([style*="display: none"]):not([style*="display:none"]){
  display: inline-block !important;
}

#alert.alert #alert-positive,
#alert.alert .positive-btn{
  background: linear-gradient(180deg, #2b7a66 0%, #1f6554 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(43, 122, 102, .32);
}
#alert.alert #alert-positive:hover,
#alert.alert .positive-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(43, 122, 102, .38);
}
#alert.alert #alert-positive:active,
#alert.alert .positive-btn:active{
  transform: translateY(0);
}

#alert.alert #alert-negative,
#alert.alert .negative-btn{
  background: #f4e8e7 !important;
  color: #b33a3a !important;
  box-shadow: inset 0 0 0 1px rgba(179, 58, 58, .18);
}
#alert.alert #alert-negative:hover,
#alert.alert .negative-btn:hover{
  background: #efdcda !important;
  transform: translateY(-1px);
}

@media (max-width: 420px){
  #alert.alert{
    padding: 22px 18px 18px !important;
    border-radius: 18px !important;
  }
  #alert.alert #icon.icon{
    width: 80px !important;
    height: 80px !important;
    background-size: 64px 64px !important;
    font-size: 0 !important;
  }
  #alert.alert #icon.icon::after{ width: 26px; height: 26px; background-size: 20px 20px; }
  #alert.alert #alert-positive,
  #alert.alert #alert-negative{ min-width: 88px; padding: 9px 16px !important; }
}