.MainContainer {
    height: auto !important;
}

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

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

.divFlter label{
    color:#fff;
}

.divFlter .box {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 10px; /* Add spacing between elements */
}

.dropdown {
    display: flex;
    align-items: center;
    gap: 5px;
}

#divStock .table {
    font-size: 12px;
    width: 100%;
}

    #divStock .table td, #divStock .table th {
        padding: 0px 1px !important;
        position: relative;
        cursor: pointer !important;
    }


#divStock tr:hover td {
    border:2px solid #f8f8e29d;
    
}

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

#divStock th.asc::after,
#divStock 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 th.asc::after {
    content: "▲"; /* Up arrow */
    font-size: 0.8em;
    color: #333;
}

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

#divStock th.PutClr {
    background-color: #cdf !important;
}

#divStock th.CallClr {
    background-color: #fe9 !important;
}

td.call, td.put {
    cursor: pointer;
}

td.bold {
    font-weight: bold !important;
}

td .bar {
    position: absolute;
    background-color: #00cc99;
    bottom: 0px;
    height: 2px;
}

.negative {
    color: #000;
    background-color: #f44336 !important;
}

.positive {
    color: #000;
    background-color: #4caf50 !important;
}

td.CallClr p, td.PutClr p {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

    td.CallClr p span, td.PutClr p span {
        margin: 0;
    }

.DataTable.OptionChain th,
.DataTable.OptionChain td {
    width: auto;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

.DataTable.OptionChain {
    table-layout: fixed;
    width: 100%;
}

    .DataTable.OptionChain td .bar {
        position: absolute;
        background-color: #6addc0;
        height: 100%;
        z-index: 1;
        opacity: 0.7;
    }

    .DataTable.OptionChain td span {
        z-index: 2;
        position: relative;
    }

    .DataTable.OptionChain tr:hover td {
        background-color: antiquewhite !important;
    }

#oiChartDv {
    padding: 5px;
}

#oiChart, #oiChartDv {
    position: relative;
}

#oiLegend {
    position: absolute;
    bottom: 60px;
    padding: 5px;
    font-size: 13px;
    z-index: 99;
    left: 74px;
    color: #0c0b0b
}

.scale-label {
    position: absolute;
    top: 50%;
    font-size: 14px;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    z-index: 99;
}

#oileft {
    left: 5px; /* Position near the left scale */
}

#oiright {
    right: 5px; /* Position near the right scale */
}

.tl-chart-button-wrapper {
    display: flex;
    overflow-x: auto;
}

.chart-config-wrapper {
    min-width: max-content;
    padding: 0 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.tl-label-gr, .tl-label-blue {
    border: solid 1px #00000018;
    border-radius: 10px;
    padding: 0.1rem 1rem;
    background: white;
    font-size: .85rem;
}
#OptionChain td {
    padding: 0px 1px;
    text-align: center;
    border-bottom: 1px solid #363636;
    border-right: 1px solid #363636;
    border-left: 1px solid #363636;
    background: #1f1f1f;
}


#OptionChain  td .bar1 {
    position: absolute;
    background-color: #bacdc8;
    bottom: 2px;
    height: 75%;
    opacity: 0.5;
    border-radius: 13px;
}
#divStock th.desc::after, #divStock th.asc::after {
    color: #fff;
}