/* Local overrides: pure CSS circle-X error icon */
/* Add green circle checkmark for success */
.far.fa-check-circle.success {
  display: inline-block;
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  border: 15px solid #28a745;
  border-radius: 50%;
  position: relative;
}

.far.fa-check-circle.success::before {
  content: none;
}

.far.fa-check-circle.success::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    width: 40px;
    height: 70px;
    border-right: 15px solid #28a745;
    border-bottom: 15px solid #28a745;
    border-radius: 4px;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
}

.far.fa-times-circle.error {
  display: inline-block;
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  border: 15px solid #ff1f1f; /* thicker red circle */
  border-radius: 50%;
  position: relative;
}

.far.fa-times-circle.error::before,
.far.fa-times-circle.error::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px; /* length of the cross bar */
  height: 15px; /* thickness of the bar */
  background: #ff1f1f;
  border-radius: 4px;
  transform-origin: center;
}

.far.fa-times-circle.error::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.far.fa-times-circle.error::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}