:root {
    --data-font-size: 14px;
    --small-data-font-size: 10px;
    --large-data-font-size: 16px;
}

/* html,
body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--data-font-size);
    margin: 0px;
    padding: 0px;
} */

.table-container {
    display: flex;
    height: 53px;
}

.table-cell {
    margin: 5px;
    width: 169px;
    height: 53px;
    display: none;
}

.td-numeric {
    text-align: right;
    padding-left: 5px;
    padding-right: 5px;
}

.td-text {
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}

.td-cylinder {
    width: 100px;
    min-width: 100px;
    height: 25px;
}

.td-cone {
    width: 100px;
    min-width: 100px;
    height: 25px;
}

.td-symbol-plus {
    background-color: black !important;
    /* border: 1px solid white !important; */
    width: 165px;
    min-width: 165px;
    height: 45px;
    padding-left: 5px;
    border-radius: 10px;
}

.td-symbol-plus-alert {
    background-color: black !important;
    /* border: 1px solid white !important; */
    width: 200px;
    min-width: 200x;
    height: 45px;
    border-radius: 10px;
}

.symbol-plus-div {
    width: 155px;
    height: 35px;
    display: flex;
}

.symbol-plus-alert-div {
    width: 190px;
    height: 35px;
    display: flex;
    line-height: 1;
}

.symbol-div {
    flex-grow: 1;
    padding: 3px;
    padding-left: 8px;
    position: relative;
}

.symbol-plus-logo {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    /* padding-right: 5px; */
    box-sizing: unset;
}

.symbol-plus-alert-type-img {
    width: 35px;
    height: 35px;
    padding-left: 5px;
    box-sizing: unset;
}

.symbol-plus-symbol-span-positive {
    color: white;
    font-size: var(--large-data-font-size);
    /* font-weight: bold; */
}

.symbol-plus-symbol-span-negative {
    color: white;
    font-size: var(--large-data-font-size);
    /* font-weight: bold; */
}

.symbol-plus-price-span {
    color:white;
    float: right;
    font-size: var(--large-data-font-size);
}

.symbol-plus-change-span-positive {
    color: limegreen;
    font-size: var(--small-data-font-size);
    font-weight: bold;
    display: block;
    position: absolute;
    bottom: 3px;
    right: 0;
}

.symbol-plus-change-span-negative {
    color: lightcoral;
    font-size: var(--small-data-font-size);
    font-weight: bold;
    display: block;
    position: absolute;
    bottom: 3px;
    right: 0;
}

.symbol-plus-arrow-span-positive {
    color: limegreen;
    font-size: var(--small-data-font-size);
    font-weight: bold;
    display: block;
    position: absolute;
    bottom: 3px;
    left: 10;
}

.symbol-plus-arrow-span-negative {
    color: lightcoral;
    font-size: var(--small-data-font-size);
    font-weight: bold;
    display: block;
    position: absolute;
    bottom: 3px;
    left: 10;
}

.top-list-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1;
}

.top-list-table-display-table {
    display: inline !important;
    width: 100% !important;
    border-collapse: collapse !important;
    line-height: 1 !important;
}

.top-list-table-display-table .top-list-body-cell {
    border: 1px solid !important;
}

.top-list-body-cell {
    cursor: pointer;
}

.alert-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1;
}

/* .top-list-header-cell {
    font-weight: bold;
    cursor: pointer;
    line-height: 1.5;
    text-decoration: underline;
} */

.alert-header-cell {
    color: var(--bs-body-bg);
    background-color: var(--bs-body-color);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.alert-table, .alert-body-cell {
    border: 1px solid;
}

/* .alert-table, .alert-header-cell, .alert-body-cell {
    border: 1px solid;
} */

.svg-cone {
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    background-color: black;
/*     -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); */
}

.polygon-1 {
    fill: #0f1aef;
    stroke: #0f1aef;
    stroke-width: 1px;
}

.polygon-2 {
    fill: darkmagenta;
}

.polygon-3 {
    fill: #0c4615;
}

.svg-cone-text {
    font-size: var(--data-font-size);
    font-weight: bold;
    fill: white;
    white-space: nowrap;
}

.svg-cylinder {
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    background-color: white;
    box-shadow: 
        inset 0px 11px 8px -10px grey,
        inset 0px -11px 8px -10px grey;
/*     -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); */
}

.svg-cylinder-text {
    font-size: var(--data-font-size);
    font-weight: bold;
    fill: black;
    white-space: nowrap;
}

.svg-cylinder-rect {
    mix-blend-mode: multiply;
}

.content-wrap {
    padding-bottom: 0px;
}

.toplist-main-div {
    height: 75vh;
    overflow: scroll;
    padding-bottom: 45px;
}

.toplist-data-notice-header {
    font-size: 16px;
    text-align: center;
    color: white;
    background-color: var(--fontColor);
    display: block;
    width: 100%;
    border-bottom: 1px solid white;
}

.toplist-card-div {
    overflow: scroll;
}

.toplist-card-div-fixed-height {
    height: 484px;
}

.toplist-card-div-max-height {
    height: calc(100vh - 215px);
    min-height: 435px;
}

.alert-card-div {
    overflow: scroll;
}

.alert-card-div-fixed-height {
    height: 435px;
}

.alert-index-image {
    width: 40px;
    height: 20px;
    /* border-radius: 25%; */
    margin: 5px;
    cursor: pointer;
}

.filter-index-image {
    width: 40px;
    height: 20px;
    /* border-radius: 25%; */
    margin: 5px;
    cursor: pointer;
}

.ticker-header {
    padding-bottom: 10px;
}

@media screen and (max-width: 480px) {
    .toplist-main-div {
        height: 75vh;
        overflow: scroll;
        padding-bottom: 22px;
    }

    .table-container {
        display: flex;
        height: 55px;
        overflow-x: auto;
        width: 90%;
    }
    
    /*.table-cell {
        border: 2px solid darkblue;
        margin: 2px;
        width: 158px;
        height: 43px;
        display: none;
    } */
}