[Python] Can I remove the big box behind a chat input at the bottom of a Streamlit website?

I'm currently building a website that involves a chatbot, and in the chat message input, there's a black box behind it that is covering part of my background image. Is there a way to remove it? I tried finding it at the devtools but it just wasn't working.

Here's the code I'm using for that

page_bg_image = """
<style>
[data-testid="stAppViewContainer"] {
background-image: url('https://snu.edu.in/site/assets/files/18543/gears-technological-elements-digital-blue-background-symbolizing-network-innovation-communication-3d-rendering.1600x0.webp');
background-size: cover;
}
[data-testid="stHeader"]{
background-color: rgba(0,0,0,0);
}
[data-testid="stBottomBlockContainer"] {
background: rgba(0,0,0,0);
}
</style>
"""
st.markdown(page_bg_image, unsafe_allow_html=True)




Continue reading...