/* The popup forms - hidden by default */
.forms-popup {
  max-width: 60%;
  display: none;
  position: absolute; 
  top: 15%;
  left: 20%;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.forms-container {
  max-width: 100%;
  padding: 10px;
  background-color: white;
  align-self: auto;
  align-items: left;
  text-align: left;
}

/* Full-width input fields */
.forms-container input[type=text], .forms-container input[type=password] {
  width: 42%;
  padding: 5px;
  margin: 2px 0 5px 0;
  margin-bottom: 10px;
  border: none;
  background: #f1f1f1;
  font-size: 10pt;  
}

.forms-container input[type=date], .forms-container input[type=time] {
  width: 15%;
  padding: 5px;
  margin: 2px 10px 5px 0;
  margin-bottom: 10px;
  border: none;
  background: #f1f1f1;
  font-size: 10pt;
}

.forms-container textarea{
  width: 100%;
  height: 50px;
  padding: 5px;
  margin: 2px 0 5px 0;
  margin-bottom: 10px;
  border: none;
  background: #f1f1f1;
  font-size: 10pt;  
}

.forms-container select{
  width: 30%;
  padding: 5px;
  margin: 2px 0 5px 0;
  margin-bottom: 10px;
  border: none;
  background: #f1f1f1;
  font-size: 10pt;  
}

/* When the inputs get focus, do something */
.forms-container input[type=text]:focus, .forms-container input[type=password]:focus, .forms-container input[type=date]:focus, .forms-container textarea:focus, .forms-container select:focus, .forms-container input[type=time]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.forms-container .btn {
  background-color: #1177d7;
  color: white;
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  width: 40%;
  margin-top:10px;
  margin-bottom:5px;
  align-items: center;
  align-self: auto;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.forms-container .cancel {
  background-color: rgb(1, 8, 125);
}

/* Add some hover effects to buttons */
.forms-container .btn:hover, .open-button:hover {
  opacity: 1;
}