/**
 * Custom Font Awesome Icons
 * 
 * This file provides a base class for custom SVG icons that behave like Font Awesome icons.
 * Benefits:
 * - Uses currentColor → respects fa-lg, fa-2x, hover colours, etc.
 * - No JavaScript required
 * - No Font Awesome Pro dependency
 */

.fa-custom {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Custom Icons */

.fa-fence,
.fas.fa-fence,
.far.fa-fence,
.fal.fa-fence,
.fab.fa-fence {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  mask-image: url("/static/img/icons/fence.96cd6423cb2b.svg");
  -webkit-mask-image: url("/static/img/icons/fence.96cd6423cb2b.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Override Font Awesome's ::before pseudo-element for custom icons */
.fa-fence::before,
.fas.fa-fence::before,
.far.fa-fence::before,
.fal.fa-fence::before,
.fab.fa-fence::before {
  content: none !important;
}