.message{
  position: fixed;
  top:0;
  z-index: 12;
  width: 100vw;
}

.vail{
  background-color: #000;
  width: 100vw;
  height: 100vh;
  opacity: 0.6;
}

.success{
    font-size: 20px;
    background-color: #1c1c1c;
    border: 3px solid #0cac3c;
    color: #ffffff;
    padding: 10px 20px;
    z-index: 14;
    width: 30%;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .error{
    font-size: 20px;
    background-color: #1c1c1c;
    border: 3px solid #ff0000;
    color: #ffffff;
    padding: 10px 20px;
    z-index: 14;
    width: 30%;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .close_btn2{
    background-color: #0cac3c;
    color: #ffffff;
    border-radius: 25px;
    padding: 5px 10px;
    width: auto;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    z-index: 14;
    text-align: center;
    position: fixed;
    top: 62%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .close_btn1{
    background-color: #ff0000;
    color: #ffffff;
    border-radius: 25px;
    padding: 5px 10px;
    width: auto;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    z-index: 14;
    text-align: center;
    position: fixed;
    top: 62%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  @media (max-width: 768px) {

    .error{
        width: 90%;
    }

    .success{
        width: 90%;
    }

    .close_btn{
      top: 60%;
      width: 30%;
    }

}