/**
 * This file is for any scss that you may want for this visualizer.
 */

.interactive-editor {
  outline: none;
}

.compute-shield {
    background-color:#00000099;
    bottom:0;
    left:0;
    position:fixed;
    right:0;
    top:0;
    z-index: 100;
}

.compute-shield {
    .hidden {
        display: none;
    }

    .filler {
      margin-top: 25%;
    }

    .title {
        color: whitesmoke;
        display: block;
        font-size: 2em;
        margin: auto;
        text-align: center;
    }

    .subtitle {
        color: whitesmoke;
        font-style: italic;
        display: block;
        font-size: 1.3em;
        margin: auto;
        text-align: center;
    }

    .lds-ripple {
      margin: auto;
      display: block;
      position: relative;
      width: 80px;
      height: 80px;
    }
    .lds-ripple div {
      position: absolute;
      border: 4px solid #fff;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    .lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    @keyframes lds-ripple {
      0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
      }
      100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
      }
    }
}
