.f12 {
    font-size: 12px;
}

.f14 {
    font-size: 14px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}

.f22 {
    font-size: 22px;
}

/* dark table */
table.table-dark {
    border: none !important;
    background: #1f2640 !important;
    color: #a0a0a0 !important;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

table.table-dark > thead > tr > th {
    background: #1f2640 !important;
    border: none !important;
    color: #36a0f4 !important;
}

table.table-dark > tbody > tr > td {
    background: #1f2640 !important;
    border: none !important;
}

table.table-dark > tbody > tr.odd > td {
    background: #263a53 !important;
}

div.dataTables_info {
    color: #a0a0a0 !important;
}

div.dataTables_length {
    color: #a0a0a0 !important;
}

select.custom-select {
    background: #1f2640 !important;
    color: #a0a0a0 !important;
    border: none !important;
}

button.dark {
    background: #4a678c !important;
    border: none !important;
    color: #a0a0a0 !important;
}

a.page-link {
    background: #4a678c !important;
    border: none !important;
    color: #a0a0a0 !important;
}

li.page-item.active .page-link {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

.index_bar_chart {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.index_bar_chart .in {
    height: 300px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.index_chart_box {
    background: #1f2640;
    height: 140px;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
}

.chart-img {
    float: left;
    height: inherit;
    width: 50%;
}

.chart-txt {
    float: right;
    height: inherit;
    color: #ffffff;
    font-size: 14px;
    width: 50%;
}

.chart-txt > ul {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0 !important;
}

.chart-txt > ul > li {
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    line-height: 30px;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    height: 30px;
}

.chart-txt > ul > li > span {
    float: right;
    margin-right: 10px;
}

.index-meta {
    height: 30px;
    color: #389cf2;
    text-indent: 10px;
    position: relative;
}

.index-meta:before {
    position: absolute;
    z-index: 1;
    content: "";
    width: 2px;
    height: 15px;
    background-color: #389cf2;
    left: 0;
    top: 5px;
}

.empty-img {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -41px;
    display: none;
    background: transparent;
    font-size: 0;
    width: 51px;
    height: 82px;
}

.today-warn-total {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 50px;
    background-color: #05a2f5;
    color: #ffffff;
    font-size: 12px;
    margin-left: 10px;
    line-height: 14px;
    text-indent: 0;
    cursor: pointer;
}

.paginate_button {
    display: inline-block;
    padding: 3px 6px;
    color: #a0a0a0 !important;
    cursor: pointer;
}

.paginate_button.current{
    color: #ffffff !important;
}

.paginate_button.disabled{
    color: #565656 !important;
}

.ellipsis{
    display: inline-block;
    padding: 2px 4px;
    color: #a0a0a0 !important;
}