body {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

.sample-tutorial {
   position: relative;
   height: 100%;
   overflow: hidden;
}

#demo-host {
   width: 100%;
   height: 100%;
   overflow: hidden;
   float: left;
}

.tip-container {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: start;
   z-index: 100;
   min-width: 300px;
   min-height: 60%;
   max-height: 100%;
   right: 0;
   top: 0;
   overflow: hidden;
   flex-direction: column;
}

.tip-inner-container {
   position: relative;
   display: flex;
   height: 52px;
   background-color: white;
   flex-direction: column;
   min-width: 200px;
   margin-bottom: 10px;
   padding: 0px 25px 0 10px;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 2px 3px 0px;
   align-items: start;
   animation-name: tip-animation;
   animation-duration: 4s;
   animation-fill-mode: forwards;
   color: rgb(51, 51, 51);
   font-family: sans-serif;
}

.success {
   border-left: solid 8px rgb(154, 233, 140);
}

.failed {
   border-left: solid 8px rgb(227, 144, 143);
}

.tip-inner-container h1 {
   margin: 0;
   padding-top: 5px;
   font-size: 17.6px;
   font-weight: 500;
}

.tip-inner-container p {
   margin: 0;
   padding-top: 5px;
   font-size: 12.8px;
}


@keyframes tip-animation {
   0% {
      left: 300px;
      opacity: 0;
   }

   20% {
      left: 10px;
      opacity: 1;
   }

   75% {
      left: 10px;
      opacity: 1;
   }

   100% {
      left: 300px;
      opacity: 0;
   }
}