/* General Tabs CSS */
.general-tabs-wapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: auto;
}

.general-tabs-nav {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-color-muted);
    padding: 4px 3px;
    border-radius: calc(4px + 0.625rem);
}

.general-tabs-nav .nav-link {
    padding: 0.25rem 1rem;
    border-radius: calc(4px + 0.625rem);
    color: var(--color-black-same);
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.general-tabs-nav .nav-link.active {
    background: var(--color-white);
    color: var(--color-black);
}

/* Common Card Css */
.common-card {
    padding: 1rem;
    background-color: var(--color-white);
    border: 1px solid var(--bg-light3);
    transition: all .3s ;
}
a.common-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
}

/* Filter and custom search */
.filter-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.filter-search .filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: auto;
    white-space: nowrap;
}
.filter-search .filter-pills .pill {
    border: 1px solid var(--color-gray-200);
    background-color: transparent;
    padding: 0.45rem 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    line-height: normal;
    font-size: 0.725rem;
}
.filter-search .filter-pills .pill.active {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Common Table Css */
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    border-bottom: 0;
}
.dataTables_wrapper .dataTable.common-table thead tr th {
    background-color: var(--bg-light1);
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--color-mute) !important;
    border-color: var(--border-color);
    border-top: 1px solid var(--border-color);
}
.dataTables_wrapper .dataTable.common-table tbody tr td {
    font-size: 0.875rem;
    color: var(--color-mute);
    border-color: var(--border-color);
    background-color: transparent;
    padding: 0.75rem;
}
.dataTables_wrapper .dataTable.common-table tbody tr:hover {
    background-color: var(--bg-light1);
}
.tableFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.5rem 0.875rem;
}
.tableFooter .dataTables_info {
    color: var(--color-mute);
    font-size: 0.875rem;
}
.tableFooter .dataTables_paginate {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tableFooter .dataTables_paginate span {
    display: flex;
    gap: 5px;
}
.tableFooter .dataTables_paginate a.paginate_button {
    background-color: var(--color-gray-200);
    padding: 0.35rem 0.675rem;
    font-size: 0.875rem;
    color: var(--color-black);
    cursor: pointer;
    border-radius: 6px;
}
.tableFooter .dataTables_paginate a.paginate_button.disabled {
    opacity: 0.5;
}
.tableFooter .dataTables_paginate a.paginate_button.current {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Custom Search */
input.custom-search {
    min-height: auto;
    border: 1px solid var(--color-gray-200);
}
.watchlist-toast .btn-close {
    font-size: 0.575rem !important;
}
html[data-bs-theme=dark] .watchlist-toast .btn-close{background-color: var(--color-black) !important;}
.watchlist-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: background-color .3s;
}
.watchlist-btn:hover {
    background-color: var(--color-gray-200);
}
.watchlist-btn[data-textvalue="watchlist"] svg.watchlist-on { fill: rgb(255, 204, 0); }
.watchlist-btn[data-textvalue="articles"] svg.watchlist-on{stroke:var(--color-blue-700);}
.watchlist-btn[data-textvalue="notification"] svg.watchlist-on{stroke:var(--color-gray-400);}
@media (max-width: 768px) {
    .filter-search {
        flex-wrap: wrap-reverse;
    }
    .filter-search .customSearch {
        width: 100%;
    }
}

@media(max-width: 412px) {
    .trading-stocks .col-sm-6 {
        width: 100%;
    }
}