/* Custom Streamlit CSS */ /* Main background and text colors */ .stApp { background-color: #171933; color: #D4DCFF; } .stMarkdown { color: #D4DCFF; } .stSidebar { background-color: #22244D; color: #D4DCFF; } .stSidebar .st-emotion-cache-l1ktzw { color: #D4DCFF; } /* Headers styling */ h1, h2, h3 { font-family: 'Roboto', sans-serif; } h1 { font-weight: 700; padding-bottom: 0.3em; margin-bottom: 0.75em; } h2 { font-weight: 600; } h3 { font-weight: 500; } .e194bff02 { color: #D4DCFF; } /* Form styling */ .stForm { background-color: #22244D; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .stForm input, .stForm .st-dr, .stForm .e5tuigk2 { background-color: #171933; } .stForm .st-ds, .stForm #number_input_1, .stForm #number_input_2, .stForm #number_input_3, .stForm #number_input_4, .stForm #number_input_5, .stForm #number_input_6, .stForm #number_input_7, .stForm #number_input_8, .stForm #number_input_9, .stForm #number_input_10, .stForm #number_input_11, .stForm #number_input_12{ color: #D4DCFF; } .st-cw .st-ce .st-bn .st-cx .st-cy .st-cz .st-d0 { background-color: #22244D; } .em9zgd08 { background-color: #5396E7; } /* Button styling */ .stButton > button { background-color: #3498db; color: white; font-weight: 600; border-radius: 5px; padding: 0.5em 1em; transition: all 0.3s ease; } .stButton > button:hover { background-color: #2980b9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Input widgets styling */ .stNumberInput > div > div > input, .stSelectbox > div > div > input { background-color: #22244D; border: 1px solid #dee2e6; border-radius: 5px; color: #D4DCFF; } /* Sidebar styling */ .css-1d391kg { background-color: #ffffff; } .css-1d391kg .stMarkdown { color: #D4DCFF; } /* Success message styling */ .element-container .stAlert.st-ae { border-radius: 8px; } .element-container .stSuccess { color: #155724; border-color: #c3e6cb; } /* Error message styling */ .element-container .stError { color: #721c24; border-color: #f5c6cb; } /* Multiselect dropdown styling */ .stMultiSelect > div { border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Add some animation to the chart */ [data-testid="stDataFrame"] { transition: transform 0.3s ease; } [data-testid="stDataFrame"]:hover { transform: scale(1.01); } /* Card-like sections */ .stExpander { border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); background-color: #22244D; } .e194bff00 { color: #D4DCFF; } /* Section dividers */ hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(52, 152, 219, 0.75), rgba(0, 0, 0, 0)); margin: 2em 0; } /* Hover effects for selectbox */ .stSelectbox:hover { border-color: #3498db; } /* Property Details Section Styling */ [data-testid="stHeader"]:has(h1, h2, h3)::before { content: "🏠"; margin-right: 10px; }