.sortable-column {
    cursor:pointer;
}

.sortable-table .sort-icon {
    font-size:10px;
}

.chcc-extra-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 1em;
}

.chcc-best-list a {
    text-decoration:underline;
}

.chcc-best-list a:hover {
    text-decoration:underline;
}

.chc-socials svg {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.chc-socials a svg {
    fill: var(--ast-global-color-3);
}

.chc-socials svg {
    fill: #dddddd;
}

.chc-exchange-table tbody td {
    border-bottom: 1px solid #E5E7EB;
    font-size: 15px;
}

.details-title {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
}

.chc-exchange-table {
    border: none;
}

.chc-exchange-table tbody .main-row:hover {
    background-color: #F3F4F6;
    cursor:pointer;
}

.chc-exchange-table td, .chc-exchange-table th {
    border: none;
}

.detail-row-active, .main-row-active {
    background-color: #F3F4F6;
}

.main-row-active td {
    border-bottom:none!important;
}

.detail-row-active td {
    border-bottom: 1px solid #E5E7EB !important;
}

.chcc-extra-wrapper-inner {
    background-color: white;
    margin: 1em;
    width:260px;
}

.chc-wider {
    min-width: 180px !important;
    width: 180px !important;
}

.chc-exchange-table th {
    padding-right: 20px; /* Adjust as needed to fit the icon */
    min-width: 120px; /* Adjust based on your content and design needs */
    text-align: left;
    font-size:12px;
    text-transform: uppercase;
}

.sort-icon {
    display: inline-block;
    width: 16px; /* Width of the sort icon */
    height: 16px; /* Height of the sort icon */
    margin-left: 5px; /* Space between the header text and the icon */
}

tr.main-row {
    height: 70px;
}

.chevron-rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.tb-vm {
    vertical-align: middle;
}

.chcc-icon-and-text {
    display: flex;
    align-items: center;
}

.chcc-icon-and-text a {
    text-decoration:none!important;
}

.chcc-icon {
    width: 23px;
    height: 23px;
    margin-right: 10px;
}

.chcc-rank, .chc-exchange-table th:nth-child(1), .chc-exchange-table td:nth-child(1) {
    min-width: 90px;
    width: 90px; /* Enforce width for the rank column */
}

.chcc-title {
    font-weight:600;
    color:var(--ast-global-color-3);;
}

.chc-exchange-table-container {
    overflow-x: auto;
    width: 100%;
}

.chc-exchange-table th, .chc-exchange-table td {
    min-width: 120px;
    width: 120px;
}

.chc-exchange-table th:nth-child(2), .chc-exchange-table td:nth-child(2) {
    min-width: 150px;
    width: 150px;
}

.chc-exchange-table {
    min-width: 800px;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.chc-wider {
    min-width: 200px;
}

.chc-exchange-table th:nth-child(2),
.chc-exchange-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 100;
    min-width: 150px;
}

.shadow-on-scroll {
    box-shadow: 2px 0px 5px rgba(0,0,0,0.1);
    background-color:#fff;
}

.main-row-active .shadow-on-scroll {
    background-color:#F3F4F6!important;
}

.supported-extra {
    font-weight:500;
    font-size: 0.9em;
    color: #63788f;
}

.supported-currencies {
    font-weight:500;
}

@media (max-width: 1150px) {
    .chc-exchange-table th, .chc-exchange-table td {
        padding: 8px;
    }

    .chcc-extra-wrapper {
        display: block; /* Switch from grid to block layout */
        padding: 10px; /* Add some padding for better readability */
    }

    .chcc-extra-wrapper-inner {
        margin-bottom: 10px; /* Add space between sections */
    }
}