body {

    line-height: 1.3em;
    min-height: 100%;
    font-family: "Helvetica Neue","Helvetica",Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-weight: 300;
    font-size: 16px;
    padding: 5px;
    background-color: #000;
}
.red-font {
    color: #801A1D;
}

.orange-font {
    color: #ff780b;
}

.green-font {
    color: #6F0;
}
.container {
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    margin: 10px auto;
    box-shadow: none;
}
.header {
    background: linear-gradient(45deg, rgb(0, 242, 255), transparent);
    color: white;
    text-align: center;
    font-size: 1.5em;
    padding: 1em;
    position: relative;
}
#expiry {
    padding: 1em 0;
    position: relative;
    background: url('../images/clock.svg') no-repeat;
    color: white;
    display: inline-block;
    width: 100%;
    font-size: 1em;
    background-size: 4em;
    background-position: 0.8em 1em;
}
#expiry #info{
    padding: 1em;
    margin-left: 6em;
    display: block;
    float: left;
}
#expiry.active #info{
    background-color: #7d9f00;
}
#expiry.expired #info{
    background-color: #84bfda;
}
#expiry.countdown #info{
    background-color: #edc71c;
}
#expiry #people{
    color: #fff;
    border: 1px solid #fff;
    display: inline-block;
    float: right;
    font-size: 1em;
    padding: 1em;
    right: 10px;
    top: 10px;
}
.info{
    font-size: 0.9em;
    padding: 1em;
    color: #fff;
}
.info ol {
    padding-left: 2em;
}
.bg{
    width: 100%;
    margin: 20px auto;
    background-size: 100%!important;
    height: 345px;
    background-color: #fff;
}
.affiliates_bg{
    margin: 0 auto;
    color: #666;
    width: 100%;
    font-size: 0.8em;
}
.bg.competition-lex-factor, .bg.lex-factor, .bg.lex-factor-cash{
    background: url('../images/OBTV.png') no-repeat 5px 5px;
}
.bg.TradePulse{
    background: url('../images/TradePulse.jpg') no-repeat 5px 5px;
}
.bg.SensaMarket{
    background: url('../images/SensaMarket.png') no-repeat 5px 5px;
}
.bg.PeakBot{
    background: url('../images/PeakBot.png') no-repeat 5px 5px;

}
.avatar{
    border-radius: 50%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table.dataTable {
    font-size: 0.9em;
    width: 100% !important;
    max-width: 100%; /* Prevent overflow */
}
table.dataTable th {
    background-color: #2c2c2c;
    color:white;
}
table.dataTable .odd td {
    background-color: #2c2c2c;
    color:white;
}
table.dataTable .odd td.sorting_1{
    background-color:#2c2c2c!important;
    color:white;
}
table.dataTable .even td {
    background-color: #1f1f1f;
    color:white;
}
table.dataTable .even td.sorting_1{
    background-color:#1f1f1f!important;
    color:white;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #b3b3b3;
}
table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
    background-color: transparent;
}
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input{
    background-color: #000;
    color: #fff;
}
table.dataTable.display tbody td{
    border:none;
}
th, td {

    text-align: left;
    padding: 10px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
th {
    background-color: grey;

}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
.rank {

    text-align: center;
}
.income {

}
.medal {
    font-size: 20px;
    margin-right: 10px;
}
.gold { color: gold; }
.silver { color: silver; }
.bronze { color: #cd7f32; }
.flag-img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
}
#leaderboard-table_filter, #leaderboard-table_length{
    margin: 10px;
}
.refresh-btn {
    display: inline-block;
    position: absolute;
    background: url("../images/refresh-one.svg") no-repeat;
    background-position: bottom center;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background-size: cover;
    top: 12px;
    left: 12px;
}
.refresh-btn:hover{
    background-position: top center;
}
.red-font {
    color: #801A1D !important;
}
.green-font {
    color: #7D9F00 !important;
}

#pinned-leaderboard {
    margin-bottom: 20px;
}

#clear-pinned {

    background-color: darkgrey;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    display: none; /* Hidden initially */
    margin: 1em auto;

}

#clear-pinned:hover {
    background-color: lightgrey;
}
.pin-btn{
    cursor: pointer;
    padding: 5px;
    background: #e03b8a00;
    border: solid 1px #E03B8A;
    color: white;
}
.pin-btn, #clear-pinned {
    padding: 8px 12px;
    font-size: 1em;
    min-width: 64px;
    border-radius: 4px;
}
.pinned {
    background-color: #22beb3;
}
.pinned:hover {
    background-color: lightgrey;
}

.flash-update {
    animation: flashEffect 0.7s ease-in-out;
}
@keyframes flashEffect {
    0% { background-color: transparent; }
    50% { background-color: #ccffcc; } /* Peak at light green */
    100% { background-color: transparent; }
}
#disclaimer{
    margin: 0 auto;
    color: #666;
    width: 100%;
    font-size: 0.8em;
    padding: 1em;
}

.avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .header {
        font-size: 1.2em;
        padding: 1em;
    }
    .info {
        font-size: 0.8em;
    }
    #expiry {

    }
    .refresh-btn {
        display: none;
    }
    .pin-btn, #clear-pinned {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    .avatar img {
        width: 24px;
        height: 24px;
    }
    th, td {
        padding: 6px;
        max-width: 100px;
    }
}
@media (max-width: 480px) {
    .container {
        padding: 5px;
    }
    .header {
        font-size: 1em;
    }
    #expiry{
        font-size: 0.8em;
    }
    #pinned-header {
        font-size: 1em;
    }
    th, td {
        max-width: 80px;
    }
}