.wrapper {
    margin-right: auto;
    /* 1 */
    margin-left: auto;
    /* 1 */

    max-width: 96%;
    /* 2 */

    padding-right: 10px;
    /* 3 */
    padding-left: 10px;
    /* 3 */
    margin-top: 10px;
}

/* Color coding for  trend and status*/
.red,
.yellow,
.green,
.dark-green {
    font-weight: bold;
    color: white;
}

.red {
    background-color: rgb(236, 27, 48);
}

.yellow {
    background-color: rgb(247, 148, 30);
}

.green {
    background-color: rgb(108, 194, 99);
}

.dark-green {
    background-color: rgb(3, 133, 37);
}

.soldout {
    background-color: rgb(241, 101, 93);
}

.nearexp {
    background-color: rgb(250, 191, 120);
}

.highliq {
    background-color: rgb(108, 194, 99);
}

/* Text color for clickable cells */
.details-control,
.view-chart {
    color: #007bff;
    cursor: pointer;
}

/* Underline clickable texts on hover */
.details-control:hover,
.view-chart:hover {
    text-decoration: underline;
}

/* Plus icon to expand column */
td.view-chart::before {
    content: url('../img/plus-15.png');
    /* position: relative;
    left: 5px; */
    margin-top: 2px;
}

/* Cross icon to collapse column */
/* tr.shown td.view-chart::before {
    content: url('../img/cross-15.png');
} */

tr {
    font-size: 14px;
}

table#screenerTable,
table#warrantTable {
    text-align: center;
}

table#screenerTable th:nth-child(1) {
    white-space: nowrap;
}

tr#warrantHeader {
    background-color: rgb(158, 159, 161);
}

/* 3-month & 6-month button */
#m3,
#m6 {
    float: left;
    border: 1px solid black;
}

.table-hover tbody tr:hover {
    background-color: rgb(102, 199, 236);
}

table#screenerTable tbody tr.small-table,
table#screenerTable tbody tr.small-chart,
table#warrantTable tbody tr.small-table {
    background-color: transparent;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

table#warrantTable th,
table#warrantTable td {
    border: 1px solid black;
}

/* Div for chart picture */
.chart-pic {
    float: left;
}

.dataTables_length {
    float: left;
}

/* Div for chart legend */
div.legend {
    float: left;
    text-align: left;
    /* margin-left: 20px; */
    margin-top: 20px;
    font-size: 12px;
}

/* Pentagon image for legend */
img#gp,
img#rp {
    height: 12%;
}

select.trend-filter.form-control-sm {
    border: 1px solid #ced4da;
}

/* Warrant table header & footer divs */
.hLeft,
.fLeft {
    float: left;
    text-align: left;
}

.hRight {
    float: right;
    text-align: right;
}

.fLeft {
    margin-top: 0.7rem;
}

.hLeft,
.hRight {
    margin-bottom: 0.5rem;
}

.col-md-3 {
    width: auto;
}

/* Trend color squares. Seperated by one div each */
.sq1 {
    background-color: rgb(236, 27, 48);
}

.sq2 {
    background-color: rgb(247, 148, 30);
}

.sq3 {
    background-color: rgb(108, 194, 99);
}

.sq4 {
    background-color: rgb(3, 133, 37);
}

/* Trend band created using a table to box in */
.trend-info {
    width: 80%;
    border: 0;
    margin-bottom: 0;
    margin-left: 30px;
}

/* Trend band header*/
.trend-info th,
.trend-info td {
    border: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.trend-info td {
    border: 1px solid black;
    padding: 0.5rem;
}

.headerInfo {
    width: 50%;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 60%;
}

.ui-tooltip {
    font-size: 12px;
}

.col-6.timestamp {
    font-size: 12px;
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
    padding-right: 20px;
}

/* MOBILE DEVICE CONFIGURATIONS */
@media only screen and (max-width: 576px) {

    td.view-chart::before {
        left: 20px;
        margin-top: -1px;
    }

    table#screenerTable th,
    table#screenerTable td,
    table#warrantTable th,
    table#warrantTable td {
        font-size: 9px;
    }

    .closing,
    .volume,
    .bid,
    .ask,
    .delta,
    .sensi,
    .price {
        display: none;
    }

    div.legend {
        margin-top: 10px;
    }

    /* .chart-pic {
        margin-top: 10px;
    } */

    /* .legendA,
    .legendB {
        float: left;
        margin-right: 20px;
    } */

}

@media only screen and (max-width: 768px) {

    /* .closing,
    .volume,
    .bid,
    .ask,
    .delta,
    .sensi,
    .price {
        display: none;
    } */

    .legendA,
    .legendB {
        float: left;
        margin-right: 20px;
    }
}