{box-sizing: border-box;}

/* Button used to open the form */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  opacity: 0.8;
  bottom: 10vh;
  right: 15vh;
  width: 15vh;
}

/* side by side buttons */
.inline-button {
	display: inline-block ;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  bottom: 0;
  right: 15px;
  border: none;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e8e8e8;
  border-radius: 25px;
  border: 2px solid black;
  width: 70vh;
  height: 90vh;
  box-shadow:10px 10px 5px lightblue;
  overflow-y: hidden;
  font-size: clamp(10px, 3vw, 20px);
  animation: popupFadeIn 0.3s ease-in-out;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=date] {
  width: 70%;
  padding: 5px;
  margin: 5px 0 22px 0;
  border: 1px solid ;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #d4d4d4;
  outline: none;
}

/* Set a style for the submit button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 6px 8px;
  border: none;
  cursor: pointer;
  width: 50%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

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

/*media query for resizing form */
@media (max-width: 767px) { /* Tablet */
  .form-container  {
 	width: 80%;
	max-width: 700px;
  }
}

@media (max-width: 480px) { /* Mobile */
    .popup {
        width: 90%;
        max-width: 320px;
        padding: 15px;
    }
}
/* Fade-in animation */
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}