.table {
        --bs-table-bg: #fff;
        --bs-table-accent-bg: transparent;
        --bs-table-striped-color: #212529;
        --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
        --bs-table-active-color: #212529;
        --bs-table-active-bg: rgba(0, 0, 0, 0.1);
        --bs-table-hover-color: #212529;
        --bs-table-hover-bg: #f1e3e3;
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
        vertical-align: top;
        border-color: #dee2e6
    }

    th {
        text-align: center;
    }


    .table td.Strong_buy {
        background: #b9c7b9;
        --bs-table-striped-color: #124A23;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.Buy {
        background: #bccccc;
        --bs-table-striped-color: #1e5757;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.Hold {
        background: #dbd0d6;
        --bs-table-striped-color: #662146;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.Avoid {
        background: #dbd0d6;
        --bs-table-striped-color: #662146;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.Void {
        background: #e0d3b6;
        --bs-table-striped-color: #634d1c;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.Cancel {
        background: #c4bfc9;
        --bs-table-striped-color: #3c2257;
        font-size: 14px;
        text-align: center;
        padding: 4px;
        width: 120px;
    }

    .table td.fair_value {
        background: #fae9e3 !important;
        --bs-table-striped-color: #7d331b;
        font-size: 14px;
        text-align: center;
        padding: 4px;
    }

     .table-totalPremium {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: auto;
         font-size: 13px;}

    .arrow {
        margin-left: 5px;
        font-size: 0.8em;
        color: #fff !important;
    }

    .up-arrow::after {
        content: "▲";
        /* Unicode character U+25B2 */
    }

    .down-arrow::after {
        content: "▼";
        /* Unicode character U+25BC */
    }

    .positive {
        color: green;
        font-weight: bold;
    }

    .negative {
        color: red;
        font-weight: bold;
    }

    /* Base styles for inputs and textarea */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    textarea {
        border: 1px solid #000;   /* thin black border */
        padding: 6px 10px;        /* spacing inside */
        border-radius: 4px;       /* optional rounded corners */
        outline: none;            /* remove default outline */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        font-family: inherit;     /* keep consistent font */
        font-size: 14px;
        width: 100%;              /* make them fill parent if desired */
        box-sizing: border-box;   /* ensures padding doesn’t break layout */
    }

    /* Focus state */
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    textarea:focus {
        border-color: #007bff; /* blue border on focus */
        box-shadow: 0 0 3px rgba(0, 123, 255, 0.5); /* subtle blue glow */
    }

    input.screener-input {
      width: 6rem !important;              /* desktop default */
      border: 1px solid #000 !important;
      border-radius: 4px;
      padding: 4px 8px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    input.screener-input:focus {
      border-color: #007bff !important;
      box-shadow: 0 0 3px rgba(0,123,255,0.5) !important;
    }

    @media (max-width: 768px) {
      input.screener-input {
        width: 100% !important;   /* expand full width */
        max-width: 100%;          /* no restriction */
      }
    }

    @media (max-width: 991px) {
        .table {
            --bs-table-bg: #fff;
            --bs-table-accent-bg: transparent;
            --bs-table-striped-color: #212529;
            --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
            --bs-table-active-color: #212529;
            --bs-table-active-bg: rgba(0, 0, 0, 0.1);
            --bs-table-hover-color: #212529;
            --bs-table-hover-bg: #f1e3e3;
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
            vertical-align: top;
            border-color: #dee2e6
        }

        th {
            text-align: center;
        }


        .table td.Strong_buy {
            background: #b9c7b9;
            --bs-table-striped-color: #124A23;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.Buy {
            background: #bccccc;
            --bs-table-striped-color: #1e5757;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.Hold {
            background: #dbd0d6;
            --bs-table-striped-color: #662146;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.Avoid {
            background: #dbd0d6;
            --bs-table-striped-color: #662146;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.Void {
            background: #e0d3b6;
            --bs-table-striped-color: #634d1c;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.Cancel {
            background: #c4bfc9;
            --bs-table-striped-color: #3c2257;
            font-size: 14px;
            text-align: center;
            padding: 4px;
            width: 120px;
        }

        .table td.fair_value {
            background: #fae9e3 !important;
            --bs-table-striped-color: #7d331b;
            font-size: 14px;
            text-align: center;
            padding: 4px;
        }
        
         .table-totalPremium {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: auto;
            font-size: 13px;

        }       

        .arrow {
            margin-left: 5px;
            font-size: 0.8em;
            color: #fff !important;
        }

        .up-arrow::after {
            content: "▲";
            /* Unicode character U+25B2 */
        }

        .down-arrow::after {
            content: "▼";
            /* Unicode character U+25BC */
        }

        .positive {
            color: green;
            font-weight: bold;
        }

        .negative {
            color: red;
            font-weight: bold;
        }
        
        /* Base styles for inputs and textarea */
        input[type="text"],
        input[type="number"],
        input[type="date"],
        textarea {
            border: 1px solid #000;   /* thin black border */
            padding: 6px 10px;        /* spacing inside */
            border-radius: 4px;       /* optional rounded corners */
            outline: none;            /* remove default outline */
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            font-family: inherit;     /* keep consistent font */
            font-size: 14px;
            width: 100%;              /* make them fill parent if desired */
            box-sizing: border-box;   /* ensures padding doesn’t break layout */
        }

        /* Focus state */
        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="date"]:focus,
        textarea:focus {
            border-color: #007bff; /* blue border on focus */
            box-shadow: 0 0 3px rgba(0, 123, 255, 0.5); /* subtle blue glow */
        }
    }