.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: #9F8640;
    -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; }

.transition-events::before {
  pointer-events: none; }

i.loading {
  display: inline-block;
  background: #9F8640;
  -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: ''; }