:host {
  display: block;
  width: 100%;
}
* {
  box-sizing: border-box;
}
textarea {
  resize: none;
  min-height: 120px;
}
.ae-modal-body {
  margin: 15px 0;
}

/* Modal Header */
.ae-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px; /* Space below header */
}

/* Close Button */
.ae-modal-close {
  background: none; /* No background */
  border: none; /* No border */
  font-size: 20px;
  color: #888;
  cursor: pointer;
  padding: 3px;
}
.ae-modal-close:focus {
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.5); /* Add border to highlight focus */
  outline: none; /* Remove default browser outline */
}
.ae-modal-close:hover {
  color: #333;
}

/* Modal Body */
.ae-modal-body {
  margin-bottom: 15px; /* Space below body content */
}

/* Modal Footer */
.ae-modal-footer {
  display: flex;
  justify-content: space-between;
}

.event-form-label {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 0.25rem;
  text-align: left;
}
.ae-input,
.ae-time-picker input {
  display: block;
  width: 100%;
  padding: 0.5rem !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px;
  outline: none;
  font-size: 1rem !important;
  margin-bottom: 1rem;
  color: rgba(0, 0, 0, 0.75) !important;
}
.event-form-time {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.event-form-time .ae-time-picker {
  width: 48%;
}
.move-to-end {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.ae-error {
  color: #ff0000;
  font-size: 12px;
  &.absolute {
    position: absolute;
    top: 58px;
    left: 2px;
  }
}

.relative {
  position: relative;
}

/* Responsive Design */
@media (max-width: 600px) {
  .ae-modal-content {
    width: 95%; /* Full width on smaller screens */
  }
}