/* Mobile AI- Human*/
.editor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.ai-button {
    margin: 5px;
    cursor: pointer;
    color: #008006;
    text-decoration: none;
    position: relative;
}
.ai-button:hover {
    color: #662d8a;
    text-decoration: none;
}
.ai-button:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #662d8a;
    position: absolute;
    bottom: -2px;
    left: 0;
}
.ai-button.selected {
    position: relative;
    color: #662d8a;
    border-bottom-color: #662d8a;
}
.ai-button.selected::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #662d8a;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.ai-image-content {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
margin-bottom: 20px; /* Add margin bottom for spacing */
}

.ai-content {
position: relative; /* Make the container relative */
border: 1px solid #662d8a;
border-radius: 10px;
width: 300px; /* Set fixed width */
height: 300px; /* Set fixed height */
overflow: hidden;
}

/* Center the .ai-content horizontally */
.ai-content img {
position: absolute; /* Position images absolutely */
top: 0; /* Position from the top */
left: 0; /* Position from the left */
width: 100%; /* Ensure the image fills the container horizontally */
height: 100%; /* Ensure the image fills the container vertically */
object-fit: cover; /* Maintain aspect ratio while covering the container */
}

.ai-pane {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Ai- Human End */