.MainContainer {
    height: auto !important;
}

.MainContentArea {
    grid-template-columns: 1fr;
    gap: 0px !important;
    /* grid-template-columns: 170px 1fr!important;*/
}

    .MainContentArea > div {
        overflow: visible !important;
    }


.box {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    justify-content: start;
}

    .box label {
        font-size: 11px;
        text-transform: capitalize;
      /*  color: #666;*/
        /*letter-spacing: 0.5px;*/
        margin: 0;
        font-weight: bold;
    }

    .box .dropdown {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 155px;
        width: 100%;
        font-size: 11px;
    }

    .box .dropdown-select {
        width: 100%;
    }

@media (max-width: 768px) {
    .box {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 10px;
    }
}

#btnFilter, #btnClear {
    margin-top: 5px;
    padding: 6px 16px;
    font-size: 12px;
}

.divFlter {
    padding: 2px 2px;
}

/*#divStock, .divFlter {
    background: #fff !important
}*/

    #divStock .table {
        font-size: 12px;
        width: 100%;
       /* color: rgb(33, 37, 41) !important;*/
    }

        #divStock .table td, #divStock .table th {
            
            padding: 0 .25rem !important;
            text-align: right;
            cursor: pointer !important;
            position: relative;
        }

            #divStock .table td.green, #divStock .table td.red {
                padding: 0 !important;
            }

        #divStock .table th {
          /*  background: #f1f1f1 !important;*/
            font-size: 95% !important;
        }

       /* #divStock .table tr:nth-child(odd) td {
            background-color: #f2f2f29d;
        }

        #divStock .table tr:nth-child(even) td {
            background-color: #ffffff;
        }
*/
        #divStock .table tr:hover td {
            /*background-color: #f8f8e29d;*/
           
            border:2px solid #f8f8e2;
        }

        #divStock .table th {
            position: relative !important;
        }

            #divStock .table th.asc::after,
            #divStock .table th.desc::after {
                font-family: "Font Awesome 5 Free"; /* You can use a specific icon font or ASCII for arrows */
                font-weight: 900;
                padding-left: 5px;
            }

            #divStock .table th.asc::after {
                content: "▲"; /* Up arrow */
                font-size: 0.8em;
                color: #333;
            }

            #divStock .table th.desc::after {
                content: "▼"; /* Down arrow */
                font-size: 0.8em;
                color: #333;
            }

        #divStock .table td .bar {
            position: absolute;
            background-color: #bacdc8;
            bottom: 2px;
            height: 75%;
            opacity: 0.5;
            border-radius: 13px;
        }

#extraInfo {
    font-size: 13px;
}

td.shp span {
    display: block;
    margin-top: -2px;
}

td.shp small {
    font-size: 80%;
    color: #8f8e8e;
    float: right;
}

    td.shp small.df {
        /*margin-left: 2px;*/
        float: left;
    }

#divStock .table td.lg {
    background-color: rgba(0, 255, 149, 0.19) !important;
}

#divStock .table td.lr {
    background-color: rgba(255, 192, 203, 0.19) !important;
}

.symbol-cell {
    position: relative;
}

.hover-links {
    display: none;
    position: absolute;
    top: 82%; /* Position below the symbol */
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 1px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    width: max-content !important;
}

.symbol-cell:hover .hover-links {
    display: block;
}

.hover-links a {
    display: inline;
    padding: 0px 5px;
    color: #007bff;
    text-decoration: none;
}

    .hover-links a:hover {
        background-color: #f0f0f0;
    }

/*
.table tr:hover td {
    background-color: #f8f8e29d !important;
    cursor: pointer;
    color: #000 !important;
}*/

.chkbox .form-check-input {
    margin: 0 !important;
    padding: 0 !important;
}

#divStock .table th.f1, .f1 {
    background: #1E90FF !important;
    color: #fff !important;
}

#divStock .table th.f2, .f2 {
    background: #8A2BE2 !important;
    color: #fff !important;
}

#divStock .table th.f3, .f3 {
    background: #FFA500 !important;
    color: #fff !important;
}

#divStock .table th.f5, .f5 {
    background: #4092ab !important;
    color: #fff !important;
}


.auto {
    background-color: #FF5733 !important;
}
/* Bright Orange */
.cap {
    background-color: #2E86C1 !important;
}
/* Strong Blue */
.chem {
    background-color: #48C9B0 !important;
}
/* Light Teal */
.cons {
    background-color: #A569BD !important;
}
/* Purple */
.cmat {
    background-color: #D35400 !important;
}
/* Deep Orange */
.dur {
    background-color: #F4D03F !important;
}
/* Yellow */
.csrv {
    background-color: #AF7AC5 !important;
}
/* Soft Purple */
.div {
    background-color: #85929E !important;
}
/* Gray-Blue */
.fmcg {
    background-color: #28B463 !important;
}
/* Deep Green */
.fin {
    background-color: #1F618D !important;
}
/* Dark Blue */
.wood {
    background-color: #6E2C00 !important;
}
/* Brown */
.health {
    background-color: #FF1493 !important;
}
/* Hot Pink */
.it {
    background-color: #8A2BE2 !important;
}
/* Vivid Purple */
.media {
    background-color: #FFD700 !important;
}
/* Gold */
.metal {
    background-color: #4682B4 !important;
}
/* Steel Blue */
.oil {
    background-color: #8B4513 !important;
}
/* Saddle Brown */
.power {
    background-color: #DAA520 !important;
}
/* Goldenrod */
.realty {
    background-color: #5F9EA0 !important;
}
/* Cadet Blue */
.serv {
    background-color: #7FFF00 !important;
}
/* Chartreuse Green */
.tele {
    background-color: #40E0D0 !important;
}
/* Turquoise */
.tex {
    background-color: #DC143C !important;
}
/* Crimson Red */
.util {
    background-color: #800080 !important;
}
/* Dark Purple */

.lgc {
    background-color: #4B89DC !important;
}

.mdc {
    background-color: #56C5D0 !important;
}

.smc {
    background-color: #F3AE4E !important;
}
.lgc, .mdc, .smc{
    color:#000;
}