table {
    border-collapse: collapse;
    width: 100%;
}
thead {
    background: linear-gradient(180deg, #349bdf, #164e85);
    color: white;
}
tr {
    background: transparent!important;
}
th {
    font-size: 15px!important;
    background: transparent!important;
    padding: 10px;
    text-align: center!important;
    color: white!important;
    text-wrap: nowrap;
}
.symbol_rising{
    color: orange;
    font-size:  xx-large;
}

.symbol_falling{
    color: dodgerblue;
    font-size:  xx-large;
}

.symbol_stable{
    color: green;
    font-size:  xx-large;
}

.symbol_approach{
    color: yellow;
    font-size:  xx-large;
}

.symbol_danger{
    color: red;
    font-size:  xx-large;
}

.firstArrow{
    clip-path: polygon(0% 0%, 78.5% 0%, 100% 50%, 78.5% 100%, 0% 100%, 0% 49.8%);
    background: dodgerblue;
    z-index: 2;
    font-size: larger;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.secondArrow{
    clip-path: polygon(0% 0%, 78.5% 0%, 100% 50%, 78.5% 100%, 0% 100%, 0% 49.8%);
    background: deepskyblue;
    margin-left: -15% !important;
    font-size: larger;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-right: 2.5rem;
    padding-left: 4.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.stable {
    background-color: #9bd5ab; /* Example highlighting style for 'STABLE' */
}

.approach-danger {
    background-color: #f7d79c; /* Example highlighting style for 'APPROACH DANGER' */
}

.cross-danger {
    background-color: #ff4b4b; /* Example highlighting style for 'STABLE' */
}

.rising {
    background-color: #ffa80acf; /* Example highlighting style for 'APPROACH DANGER' */
}
.falling {
    background-color: #1e90ff52; /* Example highlighting style for 'APPROACH DANGER' */
}
td {
    font-size: 14px!important;
    padding: 10px;
    border: 1px solid #ddd;
}