.container-alert{
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    text-align: center;
    background-color: rgba(94, 81, 81, 0.8);
    z-index: 100;
}
.box {
    position: absolute;
    width: 300px;
    height: 500px;

}
#success{
    background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);
    border-radius: 20px;
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    perspective: 40px;
}
#error{
    background: linear-gradient(to bottom right, #EF8D9C 40%, #99DBB4 100%);
    border-radius: 20px;
    box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
    perspective: 40px;
}
#warning{
  background: linear-gradient(to bottom right, #efec8d 40%, #99DBB4 100%);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
  perspective: 40px;
}
#info{
  background: linear-gradient(to bottom right, #8dc9ef 40%, #99DBB4 100%);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(203, 205, 211, 0.1);
  perspective: 40px;
}
.box .dot {
  width: 12px;
  height: 12px;
  text-align: center;
  background: var(--white);
  border-radius: 50%;
  position: absolute;
  top: 4%;
  right: 6%;
  cursor: pointer;
}
.box .dot span {
  display: flex; /* Utiliza flexbox para alinear horizontalmente el contenido */
  justify-content: center; /* Alinea horizontalmente el contenido en el centro */
  align-items: center; /* Alinea verticalmente el contenido en el centro */
  width: 100%; /* Ocupa el 100% del ancho del botón */
  height: 100%; /* Ocupa el 100% de la altura del botón */
}
.box .face{
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: 50%;
    border: 1px solid var(--dark);
    top: 21%;
    left: 37.5%;
    z-index: 2;
}
.box .face-error{
  animation: roll 3s ease-in-out infinite;
}
.box .face-success{
  animation: bounce 1s ease-in infinite;
}
.box .face-warning{
  animation: bounce 1s ease-in infinite;
}
.box .face-info{
  animation: bounce 1s ease-in infinite;
}

.box .mouth {
    position:absolute;
    top: 43%;
    left: 41%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }
  
.box .eye {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #777777;
    border-radius: 50%;
    top: 40%;
    left: 20%;
}
.box .right {
    left: 68%;
}
.box .state-success {
    border: 2px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: transparent #777777 #777777 transparent;
    transform: rotate(45deg);
}
.box  .state-error {
    top: 49%;
    border: 2px solid;
    border-color: var(--dark) transparent transparent var(--dark);
    transform: rotate(45deg);
}
.box  .state-warning {
  top: 49%;
  border: 2px solid;
  border-color: var(--dark) #777777 #777777 var(--dark);
  transform: rotate(45deg);
}
.box  .state-info {
  top: 49%;
  border: 2px solid;
  border-color: var(--dark) transparent transparent var(--dark);
  transform: rotate(45deg);
}

.box .action-success {
    animation: scale 1s ease-in infinite;
}
.box  .action-error{
    animation: move 3s ease-in-out infinite;
  }
  .box  .action-warning{
    animation: scale 1s ease-in infinite;
  }
  .box  .action-info{
    animation: scale 1s ease-in infinite;
  }
.box .shadow {
    position: absolute;
    width: 21%;
    height: 3%;
    opacity: 0.5;
    background: #777777;
    left: 40%;
    top: 43%;
    border-radius: 50%;
    z-index: 1;
}
.box .message {
    position: absolute;
    width: 100%;
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    text-align: center;
    height: 40%;
    top: 47%;
}
.box .alert {
    font-weight: 700;
    letter-spacing: 5px;
  }
.box .alert{
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 3px;
    padding-top: 5px;
    color: #FCFCFC;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.box .button-color-success{
    color: var(--secondary);
    color: -20%;
}
.box .button-color-error{
    color: var(--error); 
    color: -10%;
} 
.box .button-color-warning{
  color: var(--warning); 
  color: -10%;
} 
.box .button-color-info{
  color: var(--info); 
  color: -10%;
} 
.box p {
    margin-top: -5px;
    font-size: 1em;
    font-weight: 400;
    color: #5e5e5e;
    letter-spacing: 1px;
}
.box .button-box {
    position: absolute;
    background: #FCFCFC;
    width: 50%;
    height: 15%;
    border-radius: 20px;
    top: 73%;
    left: 25%;
    outline: 0;
    border: none;
    box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
    transition: all 0.5s ease-in-out;
}
.box .button-box:hover {
    background: #efefef;
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}
button, .dot {
    cursor: pointer;
}
@keyframes bounce {
    50% {
       transform: translateY(-10px);
    }
  }
  
  @keyframes scale {
    50% {
      transform: scale(0.9);
    }
  }
  
  @keyframes roll {
    0% {
      transform: rotate(0deg);
      left: 25%;
    }
    50% {
      left: 60%;
      transform: rotate(168deg);
    }
    100% {
      transform: rotate(0deg);
      left: 25%;
    }
  }
  
  @keyframes move {
    0% {
      left: 25%;
    }
    50% {
      left: 60%;
    }
    100% {
      left: 25%;
    }
  }