Upload 18 files

app.py

@@ -27,8 +27,6 @@ from interface.retirement_planning_interface import (
     examples as retirement_planning_examples,  
     component_rows as retirement_planning_component_rows,    
 )
-from interface.about_interface import render_about_tab
-from modules.utils import create_tab
 
 tabs_configuration = [
     ("🚀 Re-Balancing Calculator", rebalancing_inputs, rebalancing_output, rebalancing_update_output, rebalancing_examples, rebalancing_component_rows),
@@ -49,12 +47,64 @@ def initial_load(*args):
     
     return (rebalancing_results, share_price_trend_results, dollar_cost_averaging_results, retirement_results)
 
+MARKDOWN = """
+# TuneIt 🔥
+
+"""
+# Helper function to add buttons
+def clear_buttons(inputs):
+    clear_button = gr.ClearButton(value="Clear")
+    clear_button.click(
+        fn=lambda: [None] * len(inputs),
+        inputs=[],
+        outputs=inputs
+    )
+    return clear_button
+
+def submit_buttons(inputs, update_fn, output):    
+    submit_button = gr.Button(value="Run", variant="primary")
+    submit_button.click(
+        fn=update_fn,
+        inputs=inputs,
+        outputs=output
+    )
+    return submit_button
+
+def on_change(inputs, update_ouutput, outputs):
+    for input_component in inputs:
+        input_component.change(
+            fn=update_ouutput,
+            inputs=inputs,
+            outputs=outputs
+        )
+
+def render_components(component_rows):
+    for row in component_rows:
+        if isinstance(row, list):
+            with gr.Row():
+                for component in row:
+                    component.render()
+        else:
+            row.render()
+
+def create_tab(tab_name, inputs, outputs, update_fn, examples, component_rows):
+    with gr.TabItem(tab_name):
+        with gr.Row():
+            with gr.Column(elem_classes="input", scale=1):
+                render_components(component_rows)
+                clear_buttons(inputs)
+                submit_buttons(inputs, update_fn, outputs)
+            with gr.Column(scale=3):
+                outputs.render()
+        gr.Examples(examples=examples, cache_examples=False, inputs=inputs)
+        on_change(inputs, update_fn, outputs)
+
 with gr.Blocks(css='style.css') as demo:
+    # gr.Markdown(MARKDOWN)
     with gr.Column(elem_id="col-container"):
         with gr.Tabs():
             for tab in tabs_configuration:
                 create_tab(*tab)
-            render_about_tab()
 
     # demo.load(
     #     initial_load, 

interface/rebalancing_interface.py

@@ -35,7 +35,7 @@ allow_sales = gr.Checkbox(
 
 input = [main_currency, holdings, cash_amount, allow_sales]
 output = gr.HTML()
-component_rows = [main_currency, holdings, cash_amount, allow_sales]
+component_rows = [[main_currency], holdings, [cash_amount, allow_sales]]
 
 # Define the update function
 def update_output(*args):

interface/share_price_trend_interface.py

@@ -16,7 +16,7 @@ stock_codes = gr.Textbox(
 )
 period = gr.Slider(
     label="Number of Days",
-    value=90,
+    value=365,
     minimum=7
 )
 

modules/rebalancing.py

@@ -185,11 +185,15 @@ def generate_rebalancing_analysis(portfolio, target_ratios, total_value, main_cu
     # HTML 생성
     rebalancing_analysis = css + f"""
     <div class="wrap-text">
-        <div style="margin-bottom: 1.5rem;">
-            <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Re-Balancing Analysis | Your Portfolio Holdings as of {current_time}</div>
-            <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{currency_symbol}{format_value(sum(adj['new_value'] for adj in adjustments))} </span>
-            (After Trades)
-        </div>
+        <div>
+            <div style="margin-bottom: 1.5rem;">
+                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Re-Balancing Analysis | Your Portfolio Holdings as of {current_time}</div>
+                    <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{currency_symbol}{format_value(sum(adj['new_value'] for adj in adjustments))}</span>
+                (After Trades)
+                <hr style="margin: 1.5rem 0;">
+                <br>
+            </div>        
+        </div>    
         <div class='table-container wrap-text'>
             <table>
                 <thead>
@@ -228,7 +232,7 @@ def generate_rebalancing_analysis(portfolio, target_ratios, total_value, main_cu
                 <tbody>
                     {''.join(
                         f"<tr>"
-                        f"<td>{adj['stock_code'].upper()}</td>"
+                        f"<td><span class='highlight-black'>{adj['stock_code'].upper()}</span></td>"
                         f"<td>{format_value(adj['current_value'])}</td>"
                         f"<td>{adj['current_value_pct'] * 100:.1f}%</td>"
                         f"<td style='text-align: center !important;'><span class='highlight-edit'>{adj['target_weight'] * 100:.0f}%</span></td>"

modules/retirement_planning.py

@@ -2,8 +2,122 @@ import base64
 import csv
 from io import StringIO
 import matplotlib.pyplot as plt
+import plotly.graph_objects as go
 import io
-from modules.utils import load_css
+from modules.utils import load_css, format_value
+
+def create_retirement_graph(post_retirement_investments):
+    ages = [investment[0] for investment in post_retirement_investments]
+    income_required = [investment[5] for investment in post_retirement_investments]
+    dividend_income = [investment[4] for investment in post_retirement_investments]
+
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=ages, y=income_required, mode='lines', name='Income Required', line=dict(color='#ffca28'), showlegend=False))
+    fig.add_trace(go.Scatter(x=ages, y=dividend_income, mode='lines', name='Dividend Income', line=dict(color='#89c9e6'), showlegend=False))
+
+    fig.update_layout(
+        xaxis_title='Age',
+        yaxis_title='Income',
+        xaxis=dict(
+            showline=True,
+            showgrid=True,
+            gridcolor='LightGray',  # 색상 선택
+            gridwidth=1  # 격자선 두께
+        ),
+        yaxis=dict(
+            showline=True,
+            showgrid=True,
+            gridcolor='LightGray',  # 색상 선택
+            gridwidth=1,  # 격자선 두께
+            tickformat=',.0f'  # Format as thousands (e.g., 1,000)
+        ),
+        hovermode='x',
+        margin=dict(l=0, r=0, t=0, b=0),
+        autosize=True
+    )
+
+    graph_html = fig.to_html(full_html=False, include_plotlyjs='cdn')
+    return base64.b64encode(graph_html.encode('utf-8')).decode('utf-8')
+
+def create_retirement_table(post_retirement_investments, monthly_income_required):
+    result_html = f"""
+    <div class='table-container'>
+        <table>
+            <thead>
+                <tr>
+                    <th colspan="1"></th>
+                    <th colspan="1"></th>
+                    <th colspan="2" class="header-bg-required">Income Required</th>                        
+                    <th colspan="2" class="header-bg-divdend">Dividend Income</th>
+                    <th colspan="1">Shortfall</th>
+                </tr>            
+                <tr>
+                    <th>Age</th>
+                    <th>Investment</th>
+                    <th class="header-bg-required">Annual</th>
+                    <th class="header-bg-required">Monthly <p>(CPP {monthly_income_required:,.0f})</p></th>
+                    <th class="header-bg-divdend">Annual</th>
+                    <th class="header-bg-divdend">Monthly</th>
+                    <th>Annual</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+    additional_cash_total = 0
+    for age, investment, annual_income_required, annual_dividend_income, monthly_dividend_income, income_required, difference in post_retirement_investments:
+        additional_cash_required = f'{format_value(difference)}' if difference < 0 else ''
+        additional_cash_total += difference if difference < 0 else 0
+        result_html += f"""
+                <tr>
+                    <td>{age}</td>
+                    <td>{investment:,.0f}</td>
+                    <td>{annual_income_required:,.0f}</td>
+                    <td><span class='highlight-edit'>{income_required:,.0f}</span></td>
+                    <td>{annual_dividend_income:,.0f}</td>
+                    <td><span class='highlight-sky'>{monthly_dividend_income:,.0f}</span></td>
+                    <td>{additional_cash_required}</td>
+                </tr>
+        """
+    result_html += f"""
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="6" style="text-align: right; font-weight: bold;">Total Shortfall:</td>
+                    <td style="font-weight: bold;">{abs(additional_cash_total):,.0f}</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+    """
+    return result_html
+
+def create_csv_file(post_retirement_investments, monthly_income_required):
+    csv_output = StringIO()
+    csv_writer = csv.writer(csv_output)
+    csv_writer.writerow([
+        'Age', 
+        'Investment', 
+        'Annual Income Required', 
+        f'Monthly Income Required (CPP {monthly_income_required:,.0f})', 
+        'Annual Dividend Income', 
+        'Monthly Dividend Income', 
+        'Shortfall'
+    ])
+    for age, investment, annual_income_required, annual_dividend_income, monthly_dividend_income, income_required, difference in post_retirement_investments:
+        additional_cash_required = f'{abs(difference):,.0f}' if difference < 0 else ''
+        csv_writer.writerow([
+            age, 
+            f'{investment:,.0f}', 
+            f'{annual_income_required:,.0f}', 
+            f'{income_required:,.0f}', 
+            f'{annual_dividend_income:,.0f}', 
+            f'{monthly_dividend_income:,.0f}', 
+            additional_cash_required
+        ])
+    csv_data = csv_output.getvalue()
+    csv_base64 = base64.b64encode(csv_data.encode('utf-8')).decode('utf-8')
+
+    return csv_base64
 
 def retirement_planning(
     current_age=None, 
@@ -13,7 +127,7 @@ def retirement_planning(
     inflation_rate=None, 
     current_investment=None, 
     monthly_investment=None, 
-    annual_increase_in_monthly_investment=None,  # 추가된 입력
+    annual_increase_in_monthly_investment=None, 
     reinvest_dividends=None, 
     pre_retirement_roi=None, 
     post_retirement_roi=None, 
@@ -101,75 +215,38 @@ def retirement_planning(
     negative_differences_sum = sum(diff for _, _, _, _, _, _, diff in post_retirement_investments if diff < 0)
 
     # CSV 파일 생성
-    csv_output = StringIO()
-    csv_writer = csv.writer(csv_output)
-    csv_writer.writerow(['Age', 'SAVINGS', 'Annual Income Required', 'Annual Dividend Income', 'Monthly Income Required', 'Monthly Dividend Income', 'Additional Cash Required'])
-    for age, investment, annual_income_required, annual_dividend_income, monthly_dividend_income, income_required, difference in post_retirement_investments:
-        additional_cash_required = f'{abs(difference):,.0f}' if difference < 0 else ''
-        csv_writer.writerow([age, f'{investment:,.0f}', f'{annual_income_required:,.0f}', f'{income_required:,.0f}', f'{annual_dividend_income:,.0f}', f'{monthly_dividend_income:,.0f}', additional_cash_required])
+    csv_base64 = create_csv_file(post_retirement_investments, monthly_income_required)
 
-    csv_string = csv_output.getvalue().encode('utf-8')
-    csv_base64 = base64.b64encode(csv_string).decode('utf-8')
-
-    # style.css에서 CSS 읽기
+    # CSS 스타일 로딩
     css = load_css()
 
-    # SVG 그래프 생성
-    fig, ax = plt.subplots()
-    ages = [investment[0] for investment in post_retirement_investments]
-    income_required = [investment[2] for investment in post_retirement_investments]
-    dividend_income = [investment[3] for investment in post_retirement_investments]
-
-    ax.plot(ages, income_required, label='Income Required', color='red')
-    ax.plot(ages, dividend_income, label='Dividend Income', color='green')
-    ax.set_xlabel('Age')
-    ax.set_ylabel('Amount')
-    # ax.set_title('Retirement Plan Overview')
-    ax.legend()
-    ax.grid(True)
-
-    # 그래프를 SVG 형식으로 저장
-    svg_output = io.StringIO()
-    plt.savefig(svg_output, format='svg')
-    plt.close(fig)
-    svg_data = svg_output.getvalue()
-    svg_base64 = base64.b64encode(svg_data.encode('utf-8')).decode('utf-8')
+    # 그래프 생성
+    svg_base64 = create_retirement_graph(post_retirement_investments)
     
-    graph_html = f'<h3 style="margin-bottom: 0.5rem;">Retirement Planning: Income vs. Dividends</h3>'
+    # 표 생성
+    table_html = create_retirement_table(post_retirement_investments, monthly_income_required)
 
-    # 은퇴 계획에 대한 HTML 결과 생성
+    # HTML 결과 생성
     result_html = css + f"""
     <div class="wrap-text">
         <div>
-            
-            <div style="margin-bottom: 1.5rem;">
-                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Total Additional Cash Required After Retirement</div>
-                    <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{abs(negative_differences_sum):,.0f}</span>
-                <hr style="margin: 1.5rem 0;">
-            </div>
             <div style="margin-bottom: 1.5rem;">
                 <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Income Required Immediately After Retirement</div>
-                    <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{annual_income_required_at_retirement:,.0f}</span>
-                    Annual
-                    <div></div>
                     <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{monthly_income_required_at_retirement:,.0f}</span>
-                    MONTHLY
+                    Monthly
                 <hr style="margin: 1.5rem 0;">
             </div>
             <div style="margin-bottom: 1.5rem;">
                 <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Dividend Income Immediately After Retirement</div>
-                    <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{annual_dividend_at_retirement:,.0f}</span>
-                    Annual
-                    <div></div>                    
                     <span style='font-size: 1.5rem; font-weight: bold; color: #1678fb'>{monthly_dividend_at_retirement:,.0f}</span>
-                    MONTHLY
+                    Monthly
                 <hr style="margin: 1.5rem 0;">
             </div>
             <div style="margin-bottom: 1.5rem;">
-                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;"></div>
-                {graph_html}
-                <img src="data:image/svg+xml;base64,{svg_base64}" alt="Retirement Plan Graph" style="width: 100%; height: auto;"/>
-            </div>  
+                <div style="font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem;">Retirement Planning</div>
+                <iframe src="data:text/html;base64,{svg_base64}" style="width: 100%; height: 400px; border: none;"></iframe>
+                <hr style="margin: 1.5rem 0;">
+            </div>
         </div>
     </div>
     <div style="margin-bottom: 2rem;"></div>
@@ -177,46 +254,10 @@ def retirement_planning(
         <h3>Retirement Plan Overview</h3>
         <a href="data:text/csv;base64,{csv_base64}" download="retirement_planning.csv" style="padding: 10px 20px; border: 1px solid; border-radius: 5px; background-color: #1678fb; color: white; text-decoration: none;">Download CSV</a>
     </div>
-    <div class='table-container'>
-        <table>
-            <thead>
-                <tr>
-                    <th>Age</th>
-                    <th>SAVINGS</th>
-                    <th>Annual Income Required</th>
-                    <th>Monthly Income Required</th>
-                    <th>Annual Dividend Income</th>
-                    <th>Monthly Dividend Income</th>
-                    <th>Additional Cash Required</th>
-                </tr>
-            </thead>
-            <tbody>
-    """
-
-    # 각 연도별 투자와 배당 수익 및 월 생활비를 테이블에 추가
-    for age, investment, annual_income_required, annual_dividend_income, monthly_dividend_income, income_required, difference in post_retirement_investments:
-        additional_cash_required = f'{abs(difference):,.0f}' if difference < 0 else ''
-        result_html += f"""
-                <tr>
-                    <td>{age}</td>
-                    <td>{investment:,.0f}</td>
-                    <td>{annual_income_required:,.0f}</td>
-                    <td>{income_required:,.0f}</td>
-                    <td>{annual_dividend_income:,.0f}</td>
-                    <td>{monthly_dividend_income:,.0f}</td>
-                    <td>{additional_cash_required}</td>
-                </tr>
-        """
-
-    result_html += """
-            </tbody>
-        </table>
-    </div>
+    """ + table_html + """
     <p style="padding: 10px; border: 1px solid; border-radius: 5px; text-align: center; max-width: 400px; margin: 20px auto;">
         <strong>Note:</strong> No additional investments or reinvestment of dividends after retirement.
     </p>
     """
-
-    return result_html
-
-            
+    
+    return result_html

modules/share_price_trend.py

@@ -19,8 +19,13 @@ def get_stock_prices(stock_code, days):
         print(f"<p style='color: red;'>Failed to fetch data for {stock_code}: {e}</p>")
         return None
 
+import plotly.graph_objects as go
+from concurrent.futures import ThreadPoolExecutor, as_completed
+
 def share_price_trend(stock_codes, days):
     stock_prices = {}
+
+    # Assume `get_stock_prices` is defined elsewhere
     with ThreadPoolExecutor(max_workers=10) as executor:
         futures = {executor.submit(get_stock_prices, stock_code.strip(), int(days)): stock_code.strip() for stock_code in stock_codes.split(',')}
         for future in as_completed(futures):
@@ -44,8 +49,8 @@ def share_price_trend(stock_codes, days):
             y=relative_prices,
             mode='lines',
             name=stock_code.upper(),
-            hoverinfo='text',
-            hovertext=[f'{stock_code.upper()}: {date.strftime("%Y-%m-%d")}: {price:.2f}' for date, price in zip(prices.index, prices)]
+            hovertemplate='<b>%{text}</b><br>Price: %{y:.2f}<extra></extra>',
+            text=[f'{stock_code.upper()}: {price:.2f}' for price in prices]
         ))
 
     fig.update_layout(
@@ -53,10 +58,20 @@ def share_price_trend(stock_codes, days):
         xaxis_title='Date',
         yaxis_title='Relative Price',
         showlegend=True,
-        xaxis=dict(showline=False, showgrid=False),
-        yaxis=dict(showline=False, showgrid=False),
+        xaxis=dict(
+            showline=True,
+            showgrid=True,
+            gridcolor='LightGray',  # Grid color
+            gridwidth=1,  # Grid line width
+        ),
+        yaxis=dict(
+            showline=True,
+            showgrid=True,
+            gridcolor='LightGray',  # Grid color
+            gridwidth=1,  # Grid line width
+        ),
         hovermode='x',
-        margin=dict(l=0, r=0, t=0, b=0),  # Adjust margins to ensure the plot fits well
+        margin=dict(l=50, r=50, t=50, b=50),  # Adjust margins
         autosize=True
     )
     

modules/utils.py

@@ -55,53 +55,6 @@ def get_currency_codes():
 
 currency_codes = get_currency_codes()
 
-# Helper function to add buttons
-def clear_buttons(inputs):
-    clear_button = gr.ClearButton(value="Clear")
-    clear_button.click(
-        fn=lambda: [None] * len(inputs),
-        inputs=[],
-        outputs=inputs
-    )
-    return clear_button
-
-def submit_buttons(inputs, update_fn, output):    
-    submit_button = gr.Button(value="Run", variant="primary")
-    submit_button.click(
-        fn=update_fn,
-        inputs=inputs,
-        outputs=output
-    )
-    return submit_button
-
-def on_change(inputs, update_ouutput, outputs):
-    for input_component in inputs:
-        input_component.change(
-            fn=update_ouutput,
-            inputs=inputs,
-            outputs=outputs
-        )
-
-def render_components(component_rows):
-    for row in component_rows:
-        if isinstance(row, list):
-            with gr.Row():
-                for component in row:
-                    component.render()
-        else:
-            row.render()
-
-def create_tab(tab_name, inputs, outputs, update_fn, examples, component_rows):
-    with gr.TabItem(tab_name):
-        with gr.Row():
-            with gr.Column(elem_classes="input", scale=1):
-                render_components(component_rows)
-                clear_buttons(inputs)
-                submit_buttons(inputs, update_fn, outputs)
-                gr.Examples(examples=examples, cache_examples=False, inputs=inputs)
-            with gr.Column(scale=3):
-                outputs.render()
-        # on_change(inputs, update_fn, outputs)
 
 import matplotlib.pyplot as plt
 import numpy as np

style.css

@@ -18,13 +18,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
 
 
 #col-container {
     margin: 0 auto;
     max-width: 100%;
-    font-family: 'Quicksand', 'ui-sans-serif', 'system-ui', 'sans-serif';
-    text-transform: uppercase;
+    /* font-family: 'Quicksand', 'ui-sans-serif', 'system-ui', 'sans-serif'; */
+    /* text-transform: uppercase; */
 
 }
 
@@ -35,6 +36,20 @@
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
+.content {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+    margin: 0;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+}
+
 .code {
     font-family: 'IBM Plex Mono', 'ui-monospace', 'Consolas', 'monospace';
 }
@@ -68,29 +83,33 @@
     --highlight-sky-bg-color-dark: #89c9e6;
     --highlight-sky-text-color-light: #000000;
     --highlight-sky-text-color-dark: #000000;
-    --highlight-black-light: #000000;
+    --highlight-black-light: #0c343d;
     --highlight-black-dark: #ffffff;
     --total-value-color-light: #000000;
     --total-value-color-dark: #ffeb3b;
 }
 
 .buy-sell {
-    padding: 5px 10px;
-    border-radius: 5px;
+    /* padding: 5px 10px;
+    border-radius: 5px; */
     font-weight: bold;
-    display: inline-block;
+    /* display: inline-block;
     margin: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
 }
 
 .buy {
-    background-color: var(--buy-color);
-    color: white !important;
+    /* background-color: var(--buy-color);
+    color: white !important; */
+    color: var(--buy-color);
+
 }
 
 .sell {
-    background-color: var(--sell-color);
-    color: white !important;
+    /* background-color: var(--sell-color);
+    color: white !important; */
+    color: var(--sell-color);
+
 }
 
 .highlight-edit {
@@ -165,7 +184,7 @@
     overflow: auto;
     margin-bottom: 20px;
     position: relative;
-    max-height: 600px;
+    max-height: 100%;
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
 }
 
@@ -174,6 +193,16 @@
     color: #000; /* 텍스트 색상 */
 }
 
+.header-bg-divdend {
+    background-color: #89c9e6 !important;
+    color: #000; /* 텍스트 색상 */
+}
+
+.header-bg-required {
+    background-color: #ffca28 !important;
+    color: #000; /* 텍스트 색상 */
+}
+
 .header-bg-after {
     background-color: #d9d2e9 !important;/* 원하는 색상으로 변경 */
     color: #000; /* 텍스트 색상 */
@@ -206,7 +235,14 @@
     z-index: 2;
 }
 
-.table-container td:first-child, .table-container th:first-child {
+.table-container td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    /* background-color: var(--highlight-color-light); */
+}
+
+.table-container th:first-child {
     position: sticky;
     left: 0;
     z-index: 1;
@@ -234,7 +270,9 @@
         border: 1px solid #444;
     }
     .header-bg-before,
-    .header-bg-after {
+    .header-bg-after,
+    .header-bg-divdend,
+    .header-bg-required {
         color: #000 !important;        
     }
     .table-container th,