#editor-container {
    height: 50vh;
}
button:hover {
    opacity: 0.8;
}
form {
    display: flex;
    flex-direction: column;
}
label {
    font-size: 18px;
    color: #555;
    margin-bottom: 5px;
    text-align: left;
}
input {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background-color: #f8f8f8;
}
input:focus {
    border-color: #6a11cb;
}
textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background-color: #f8f8f8;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23333"><polygon points="0,5 20,5 10,15"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
select:hover {
  border-color: #999;
}
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.icon-only-button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    //color: #007bff;
    font-size: 24px;
    font-weight: 700;
}