.right-top-alert {
    position: fixed;
    top: 4em;
    right: 1em;
  }
  
  [data-tooltip] {
      position: relative;
      cursor: help;
      text-decoration: underline;
      
      &[data-position="right"]::before {
          top: -50%;
          left: 105%;
          transform: translateX(-20px);
      }
      
      &[data-position="bottom"]::before {
          top: 150%;
          transform: translateY(-20px);
      }
      
      &[data-position="left"]::before {
          top: -50%;
          right: 105%;
          left: auto;
          transform: translateX(20px);
      }
      
      &:hover::before {
          transform: translate(0);
          opacity: 1;
      }
      
      &::before {
          content: attr(data-tooltip);
          position: absolute;
          width: $tooltipWidth;
          display: block;
          background: #FFF;
          padding: 10px;
          top: -50px;
          box-shadow: 0px 2px 5px #0000008c;
          border-radius: 6px;
          text-align: center;
          left: 0;
          z-index: 1;
          opacity: 0;
          pointer-events: none;
          transform: translateY(20px);
            transition: all .3s cubic-bezier(.4, 0, .2, 1);
      }
  }  

  .CodeMirror {
    min-height:550px !important;
  }

  .li-hover:hover {
    background:#d3cbff;
  }