@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
/* line 15, app/assets/stylesheets/errors.scss */
.green {
  color: #4ec07d;
}

/* line 19, app/assets/stylesheets/errors.scss */
.red {
  color: #e96075;
}

/* line 23, app/assets/stylesheets/errors.scss */
h1.alert {
  font-weight: 700;
  color: #FCFCFC;
  font-size: 1.3em;
}

/* line 30, app/assets/stylesheets/errors.scss */
.success-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(40%, #29CE67), to(#99DBB4));
  background: linear-gradient(to bottom right, #29CE67 40%, #99DBB4 100%);
  border-radius: 20px;
  box-shadow: 5px 5px 20px #cbcdd3;
}

/* line 41, app/assets/stylesheets/errors.scss */
.error-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, right top, left bottom, color-stop(40%, #EF8D9C), to(#FFC39E));
  background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
  border-radius: 20px;
  box-shadow: 5px 5px 20px #cbcdd3;
}

/* line 51, app/assets/stylesheets/errors.scss */
.face {
  position: absolute;
  width: 22%;
  height: 22%;
  background: #FCFCFC;
  border-radius: 50%;
  border: 1px solid #777777;
  top: 21%;
  left: 37.5%;
  z-index: 2;
  -webkit-animation: bounce 1s ease-in infinite;
          animation: bounce 1s ease-in infinite;
}

/* line 64, app/assets/stylesheets/errors.scss */
.face2 {
  position: absolute;
  width: 16%;
  height: 22%;
  background: #FCFCFC;
  border-radius: 50%;
  border: 1px solid #777777;
  top: 21%;
  left: 37.5%;
  z-index: 2;
  -webkit-animation: roll 3s ease-in-out infinite;
          animation: roll 3s ease-in-out infinite;
}

/* line 77, app/assets/stylesheets/errors.scss */
.eye {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #777777;
  border-radius: 50%;
  top: 38%;
  left: 23%;
}

/* line 87, app/assets/stylesheets/errors.scss */
.right-posistion {
  left: 60%;
}

/* line 91, app/assets/stylesheets/errors.scss */
.mouth {
  position: absolute;
  top: 50%;
  left: 41%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* line 100, app/assets/stylesheets/errors.scss */
.happy {
  border: 2px solid;
  border-color: transparent #777777 #777777 transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* line 106, app/assets/stylesheets/errors.scss */
.sad {
  top: 53%;
  border: 2px solid;
  border-color: #777777 transparent transparent #777777;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* line 113, app/assets/stylesheets/errors.scss */
.shadow-card {
  position: absolute;
  width: 21%;
  height: 3%;
  opacity: .5;
  background: #777777;
  left: 40%;
  top: 43%;
  border-radius: 50%;
  z-index: 1;
}

/* line 125, app/assets/stylesheets/errors.scss */
.scale {
  -webkit-animation: scale 1s ease-in infinite;
          animation: scale 1s ease-in infinite;
}

/* line 128, app/assets/stylesheets/errors.scss */
.move {
  -webkit-animation: move 3s ease-in-out infinite;
          animation: move 3s ease-in-out infinite;
}

/* line 132, app/assets/stylesheets/errors.scss */
.message {
  position: absolute;
  width: 100%;
  text-align: center;
  height: 40%;
  top: 47%;
}

@-webkit-keyframes bounce {
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes bounce {
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@-webkit-keyframes scale {
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@keyframes scale {
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

@-webkit-keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    left: 25%;
  }
  50% {
    left: 60%;
    -webkit-transform: rotate(168deg);
            transform: rotate(168deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    left: 25%;
  }
}

@keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    left: 25%;
  }
  50% {
    left: 60%;
    -webkit-transform: rotate(168deg);
            transform: rotate(168deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    left: 25%;
  }
}

@-webkit-keyframes move {
  0% {
    left: 25%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 25%;
  }
}

@keyframes move {
  0% {
    left: 25%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 25%;
  }
}