/* Set a style for all buttons */
.deletebtn , .cancelbtn , .proceedbtn{
  background-color: #04AA6D;
  color: white;
  padding: 8px 12px;
  margin: 8px 12px;
  border: none;
  cursor: pointer;
  
  opacity: 0.9;
}

.cancelbtn:hover ,  .deletebtn:hover {
  opacity:1;
}

 

/* Add a color to the cancel button */
.cancelbtn {
  background-color: #0031d4;
  color: rgb(255, 255, 255);
}

/* Add a color to the delete button */
.deletebtn {
  background-color: #e71b0d;
}

/* Add padding and center-align text to the container */
.container {
  padding: 16px;
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5 !important; /* Sit on top */
  width:100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color:rgba(0, 0, 0, 0.748);
  /* padding-top: 50px; */
  margin:0;


}

/* Modal Content/Box */
.modal-content {
  background-color: #fbfbfb;
  margin: 10% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #eeeded;
  width: 50%; /* Could be more or less, depending on screen size */
   z-index: 5 !important; /* Sit on top */

}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

 
/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 900px) {
  
.modal-content {
  background-color: #fefefe;
  margin: 10% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #ccc;
  width: 50%; /* Could be more or less, depending on screen size */

}
 
  .user_name{
    font-size:12px;
  }


}

.close{
  cursor: pointer;
}