rf-overlay {
   /* .small .box{ } this is the default */
   .box {
      position: fixed;
      z-index: 9300;
      width: 40%;
      top: 0;
      display: block;
      text-align: center;
      background: white;
      margin: 0 auto;
      left: 35%;
      transition: all 0.15s ease-in-out;
      opacity: 0;
      padding: 5%;

      &.big {
         width: 80%;
         left: 10%;
      }

      &.middle {
         width: 60%;
         left: 20%;
      }

      .message {
         font-size: 200%;
      }
   }

   .grey-layer {
      position: fixed;
      z-index: 9100;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: var(--midgrey);
      opacity: 0;
      transition: all 0.15s ease-in-out;
   }

   .active {
      .box {
         transition: all 0.15s ease-in-out;
         opacity: 1;
         top: 15%;
      }

      .grey-layer {
         transition: all 0.15s ease-in-out;
         opacity: 0.8;
      }
   }
}