.btn-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  width: 100%;
  height: 13px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.btn-arrow-red::after {
  background-image: url(../../asset/img/icon-arrow-red.png);
}

@supports (background-image: url(../../asset/img/icon-arrow-red.webp)) {
  .btn-arrow-red::after {
    background-image: url(../../asset/img/icon-arrow-red.webp);
  }
}
.btn-arrow-blue::after {
  background-image: url(../../asset/img/icon-arrow-gray.png);
}

@supports (background-image: url(../../asset/img/icon-arrow-gray.webp)) {
  .btn-arrow-blue::after {
    background-image: url(../../asset/img/icon-arrow-gray.webp);
  }
}
.btn-arrow-navy::after {
  background-image: url(../../asset/img/icon-arrow-navy.png);
}

@supports (background-image: url(../../asset/img/icon-arrow-navy.webp)) {
  .btn-arrow-navy::after {
    background-image: url(../../asset/img/icon-arrow-navy.webp);
  }
}
.btn-arrow-small-white::after {
  width: 10px;
  height: 8px;
  background-image: url(../../asset/img/icon-arrow-white.svg);
}

.hover-reverse-gray, .hover-reverse-red {
  transition: all 0.3s ease 0s;
}

.hover-reverse-gray:hover {
  color: #fff !important;
  background-color: #7F8CAA !important;
}

.hover-reverse-red:hover {
  background-color: #EB4E39 !important;
}/*# sourceMappingURL=button.css.map */