[data-testid="stAppViewContainer"] { background-image: url('Image-2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; font-size: 18px !important; height: 100%; overflow-y: auto; } [data-testid="stAppViewContainer"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 100px rgba(0,0,0,0.2); pointer-events: none; z-index: 1; } /* Ensure content appears above the shadow */ [data-testid="stAppViewContainer"] > * { position: relative; z-index: 2; } /* Global text styles */ .stMarkdown, .stText, p, span, label, .stSelectbox, .stNumberInput { color: #D32F2F !important; /* Deep red */ font-weight: 600 !important; font-size: 1.1rem !important; } /* Make headers extra bold and larger */ h1 { color: #B71C1C !important; /* Darker red for headers */ font-family: 'Helvetica Neue', sans-serif; text-shadow: 1px 1px 1px rgba(210, 215, 211, 1); font-size: 2.5rem !important; font-weight: 800 !important; } h2 { color: #C62828 !important; /* Slightly lighter red */ font-family: 'Helvetica Neue', sans-serif; text-shadow: 1px 1px 1px rgba(210, 215, 211, 1) ; font-size: 2rem !important; font-weight: 700 !important; } h3 { color: #D32F2F !important; /* Standard red */ font-family: 'Helvetica Neue', sans-serif; text-shadow: 1px 1px 1px rgba(210, 215, 211, 1) ; font-size: 1.5rem !important; font-weight: 700 !important; } /* Make subheaders and labels bold */ .stSubheader { color: #E53935 !important; /* Bright red */ font-weight: 700 !important; font-size: 1.3rem !important; } /* Input labels */ .stTextInput label, .stNumberInput label, .stSelectbox label { color: #D32F2F !important; /* Deep red */ font-weight: 600 !important; font-size: 1.1rem !important; } /* Input fields */ .stTextInput input, .stNumberInput input, .stSelectbox select { color: #C62828 !important; /* Slightly darker red */ background-color: rgba(255, 255, 255, 0.9); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); font-size: 1.1rem !important; font-weight: 500 !important; } /* Sidebar content */ .sidebar-content { background-color: rgba(255, 255, 255, 0.95); padding: 1rem; border-radius: 5px; color: #D32F2F !important; /* Deep red */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); backdrop-filter: blur(5px); font-size: 1.1rem !important; font-weight: 600 !important; overflow-y: auto; max-height: calc(100vh - 2rem); } .spices-image { border-radius: 10px; margin: 1rem 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* Links */ a { color: #C62828 !important; /* Darker red for links */ font-weight: 700 !important; font-size: 1.1rem !important; text-shadow: 0 0 1px rgba(255,255,255,0.5); } /* Button text */ .stButton > button { background-color: #FBBC04; /* Yellow background #FBBC04*/ color: black !important; border: none; padding: 0.7rem 2.5rem; border-radius: 5px; font-weight: 700 !important; font-size: 1.2rem !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease; } .stButton > button:hover { background-color: #FEEFC3 ; /* Lighter yellow on hover #FEEFC3*/ box-shadow: 0 4px 8px rgba(0,0,0,0.2); transform: translateY(-1px); } /* Metrics container */ .metric-container { background-color: rgba(255, 255, 255, 0.95); padding: 1.5rem; border-radius: 5px; margin: 0.5rem 0; border-left: 4px solid #B71C1C; /* Dark red border */ color: #D32F2F !important; /* Deep red text */ box-shadow: 0 2px 15px rgba(0,0,0,0.1); backdrop-filter: blur(5px); font-size: 1.2rem !important; font-weight: 600 !important; overflow-y: auto; max-height: 80vh; } .metric-container p { color: #D32F2F !important; /* Deep red */ font-size: 1.2rem !important; font-weight: 600 !important; margin: 0.5rem 0; } /* Main content area */ .main-content { background-color: rgba(255, 255, 255, 0.95); padding: 2rem; border-radius: 10px; margin: 1rem; color: #D32F2F !important; /* Deep red */ box-shadow: 0 4px 20px rgba(0,0,0,0.1); backdrop-filter: blur(5px); font-size: 1.1rem !important; overflow-y: auto; max-height: calc(100vh - 2rem); } /* Image captions */ .stImage caption { color: #C62828 !important; /* Darker red */ font-size: 1.1rem !important; font-weight: 600 !important; margin-top: 0.5rem; } /* Alert messages */ .stAlert { background-color: rgba(255, 255, 255, 0.95); border-radius: 5px; color: #D32F2F !important; /* Deep red */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 1.1rem !important; font-weight: 600 !important; } /* Ensure all text inputs have consistent styling */ input[type="text"], input[type="number"], select { color: #C62828 !important; /* Slightly darker red */ font-size: 1.1rem !important; font-weight: 500 !important; } /* Additional text color overrides */ [data-testid="stHeader"] { color: black !important; } .stTextInput input, .stNumberInput input, .stSelectbox select { color: black !important; background-color: rgba(255, 255, 255, 0.9); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .stSubheader { color: black !important; } /* Make links more visible */ a { color: #2E7D32 !important; font-weight: 500; text-shadow: 0 0 1px rgba(255,255,255,0.5); } /* Ensure form labels are black */ .stTextInput label, .stNumberInput label, .stSelectbox label { color: black !important; } /* Ensure sidebar text is black */ .st-emotion-cache-1r6slb0.e1f1d6gn1 { color: black !important; } /* Make all text inputs have black text */ input[type="text"], input[type="number"], select { color: black !important; } /* Fix main content scrolling */ [data-testid="stMainContainer"] { height: 100%; overflow-y: auto; padding-bottom: 2rem; } /* Ensure sidebar scrolls properly */ [data-testid="stSidebar"] { height: 100vh; overflow-y: auto; } /* Ensure generated plan content scrolls properly */ [data-testid="stMarkdownContainer"] { overflow-y: auto; max-height: calc(100vh - 4rem); padding-right: 1rem; } /* Fix table scrolling if present */ .stTable { overflow-x: auto; max-width: 100%; } /* Ensure proper spacing for scrollable content */ .element-container { margin-bottom: 1rem; } /* Make scrollbars more visible and styled */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: rgba(183, 28, 28, 0.5); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgba(183, 28, 28, 0.7); }