/* Conditional formatting classes */
.highlight-green {
    background-color: green;
    color: white;
}
.highlight-red {
    background-color: red;
    color: white;
}
/* OTM/ITM formatting */
.highlight-orange {
    background-color: Orange;
    color: white;
}
.highlight-lightgreen {
    background-color: #8BC34A;
    color: white;
}
.highlight-darkorange {
    background-color: darkorange;
    color: white;
}
.highlight-darkgreen {
    background-color: #59ff2fad;
    color: white;
}
.highlight-lightred {
    background-color: lightcoral;
    color: white;
}
.highlight-yellow {
    background-color: #c0ff00b3;
    color: white;
}
/* End OTM/ITM formatting */
.value-red {
    color: red;
}
.value-lightred {
    color: lightcoral;
}
.value-darkorange {
    color: darkorange;
}
.value-orange {
    color: orange;
}
.value-darkyellow {
    color: darkgoldenrod;
}
.value-yellow {
    color: yellow;
}
.value-yellowgreen {
    color: yellowgreen;
}
.value-lightgreen {
    color: lightgreen;
}
.value-green {
    color: green;
}
/* Styles for sortable columns */
th.sortable {
    cursor: pointer;
    position: relative;
}

th.sortable:after {
    content: ' --'; /* Default content */
    position: absolute;
    right: 10px;
}

th.sortable.asc:after {
    content: ' ▲'; /* Up arrow */
}

th.sortable.desc:after {
    content: ' ▼'; /* Down arrow */
}
.chart-container {
    width: 50%; /* Adjust the width as needed */
    height: 500px; /* Adjust the height as needed */
    margin-bottom: 60px;
}
#moneySpentChart {
    width: 100% !important;
    height: 100% !important;
}
#moneyDownChart {
    width: 100% !important;
    height: 100% !important;
}
.trade-list-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 30px;
}