body {
    touch-action: pan-y;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background-color: rgba(246, 246, 242);
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Ensure it sits above the calendar but below the form */
    display: none; /* Hidden by default */
}

.ec-sidebar {
    background-color: rgb(255, 255, 255);
    font-weight: bold;
}

.ec-days, .ec-day {
    background-color: rgb(255, 255, 255);
    font-weight: bold;
}

.ec-button.ec-active {
    background-color: rgb(255, 255, 196);
    font-weight: bold;
}

.ec-button {
    background-color: rgb(224, 224, 224);
    font-weight: bold;
}

.ec-event-time {
    font-weight: bold;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: 9999;
background-color: #f1f1f1;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
max-height: 100vh; /* Added maximum height */
overflow-x: hidden;
overflow-y: auto; /* Added scrollability */
padding: 15px;
}

/* Add styles to the form container */
.form-container {
width: 100%; /* full width for small screens */
max-width: 700px; /* cap for larger screens */
margin: 0 auto;
padding: 15px;
background-color: #f9f9f9;
border-radius: 10px;
}

/* Scrollbar customization for better UX (optional) */
.form-popup::-webkit-scrollbar {
width: 10px;
}

.form-popup::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.form-popup::-webkit-scrollbar-thumb:hover {
background: #555;
}

/* Full-width input fields */
.form-container input[type="datetime-local"], .form-container select, 
.form-container textarea, .form-container input[type="text"], 
.form-container input[type="number"] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
}

/* Focus state */
.form-container input:focus, .form-container select:focus, 
.form-container textarea:focus {
  border-color: #4CAF50;
  outline: none;
}

/* Submit and Cancel buttons */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  margin: 10px 0;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.form-container .btn.cancel {
  background-color: #6666f4;
}

.form-container .btn.delete {
  background-color: #f46666;
}

/* Hover effect */
.form-container .btn:hover {
  background-color: #45a049;
}

.time-color-group {
    display: flex;
    gap: 20px; /* Space between Duration and Colour groups */
    align-items: flex-start; /* Align them at the top */
    flex-wrap: wrap; /* In case of small screen, allow them to wrap */
    margin-bottom: 15px;
}

.time-group, .color-group {
    display: flex;
    flex-direction: column;
}

.time-inputs, .color-inputs {
    display: flex;
    gap: 10px;
}

.time-input, .color-input {
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-input input, .color-input input {
    width: 80px; /* Adjust input width */
    padding: 8px;
    font-size: 16px;
}

.color-input input[type="color"] {
    width: 40px;
    height: 40px;
}

.color-group label {
    font-weight: bold;
    margin-bottom: 15px;
}

.time-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns per row */
    gap: 10px; /* Space between checkboxes */
}

.checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.buttons-group {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.buttons-group .cancel {
    flex-grow: 2; /* Make the Close button take up twice as much space */
}

.buttons-group .delete {
    flex-grow: 1; /* Make the Delete button take up less space */
}

.btn {
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 100%;
}

.btn.cancel {
    flex: 2;
    background-color: #6666f4;
}

.btn.delete {
    flex: 1;
    background-color: #f46666;
}

.btn:hover {
    background-color: #45a049;
}