.transition-dim {
  position: relative;
}
.transition-dim::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9998;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  content: "";
  transform: scale(0, 0);
}
.transition-dim::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  display: block;
  background: #004f9f;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("../img/loading.svg");
  mask-image: url("../img/loading.svg");
  background-size: cover;
  opacity: 0;
  height: 7rem;
  width: 7rem;
  content: "";
  margin: auto;
  transform: scale(0, 0);
}
.transition-dim.transition-fixed::before {
  position: fixed;
}
.transition-dim.transition-fixed::after {
  position: fixed;
  margin: 40vh auto;
}
.transition-dim.transition-active::before, .transition-dim.transition-middle::before, .transition-dim.transition-active::after, .transition-dim.transition-middle::after {
  transform: none;
}
.transition-dim.transition-out {
  transition: opacity 0.3s;
}
.transition-dim.transition-out::before, .transition-dim.transition-out::after {
  transition: opacity 0.3s;
  opacity: 1;
}
.transition-dim.transition-middle, .transition-dim.transition-middle::before, .transition-dim.transition-middle::after {
  transition: none;
  opacity: 1;
}
.transition-dim.transition-in {
  transition: opacity 0.2s;
}
.transition-dim.transition-in::before, .transition-dim.transition-in::after {
  transition: opacity 0.2s;
  opacity: 0;
}
.wrapper .transition-dim::after {
  display: none;
}
.wrapper .transition-dim::before {
  background: transparent;
}
.wrapper .transition-dim.transition-middle {
  transition: none;
  opacity: 0.5;
}
.wrapper .transition-dim.transition-middle::before, .wrapper .transition-dim.transition-middle::after {
  transition: none;
  opacity: 1;
}
.wrapper .transition-dim.transition-in {
  transition: opacity 0.2s;
  opacity: 1;
}
.wrapper .transition-dim.transition-out {
  transition: opacity 0.3s;
}
i.loading {
  display: inline-block;
  background: #004f9f;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("../img/loading.svg");
  mask-image: url("../img/loading.svg");
  background-size: cover;
  height: 7rem;
  width: 7rem;
  content: "";
}