@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap");
html,
body {
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
}

.font-gsflex {
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
}
.font-figtree {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
}

.dataTable-container {
    scrollbar-width: auto;
    scrollbar-color: hsl(210 100% 55% / 0.5) hsl(228 12% 15% / 0.05);
    padding-bottom: 12px;
}

#performanceTable thead th {
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
}

#performanceTable td {
    font-weight: 300;
}

#performanceTable th:nth-child(7),
#performanceTable td:nth-child(7) {
    border-left-width: 2px;
    border-left-color: hsl(210 100% 55% / 0.3);
}

#performanceTable th:nth-child(7),
#performanceTable td:nth-child(7) {
    border-color: hsl(142 71% 45% / 0);
    background-color: hsl(142 71% 45% / 0.15);
    border-left-width: 2px;
    border-left-color: hsl(142 71% 45% / 0.3);
    border-right-width: 2px;
    border-right-color: hsl(142 71% 45% / 0.3);
    font-weight: 500;
}

#performanceTable th:nth-child(10),
#performanceTable td:nth-child(10) {
    border-color: hsl(142 71% 45% / 0);
    background-color: hsl(142 71% 45% / 0.15);
    border-left-width: 2px;
    border-left-color: hsl(142 71% 45% / 0.3);
    border-right-width: 2px;
    border-right-color: hsl(142 71% 45% / 0.3);
    font-weight: 500;
}

#performanceTable th:nth-child(18),
#performanceTable td:nth-child(18) {
    border-left-width: 2px;
    border-left-color: hsl(210 100% 55% / 0.3);
}

#performanceTable th:nth-child(21),
#performanceTable td:nth-child(21) {
    border-left-width: 2px;
    border-left-color: hsl(142 71% 45% / 0.3);
}

#performanceTable th:nth-child(22),
#performanceTable td:nth-child(22) {
    background-color: hsl(142 71% 45% / 0.15);
    border-left-width: 2px;
    border-left-color: hsl(142 71% 45% / 0.3);
    border-right-width: 2px;
    border-right-color: hsl(142 71% 45% / 0.3);
    font-weight: 500;
}

#performanceTable th:nth-child(1),
#performanceTable td:nth-child(1) {
    border-right-width: 2px;
    border-right-color: hsl(210 100% 55% / 0.3);
}

@media (min-width: 640px) {
    #performanceTable th:nth-child(1),
    #performanceTable td:nth-child(1) {
        position: sticky;
        left: -1px;
        z-index: 10;
    }

    #performanceTable th:nth-child(1),
    #performanceTable th:nth-child(2) {
        background-color: rgb(246 248 250 / var(--tw-bg-opacity)) !important;
    }

    #performanceTable td:nth-child(1),
    #performanceTable td:nth-child(2) {
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    :is(.dark #performanceTable th:nth-child(1)),
    :is(.dark #performanceTable th:nth-child(2)) {
        background-color: rgb(26 41 65 / var(--tw-bg-opacity)) !important;
    }

    :is(.dark #performanceTable td:nth-child(1)),
    :is(.dark #performanceTable td:nth-child(2)) {
        background-color: rgb(14 23 38 / var(--tw-bg-opacity));
    }

    #performanceTable th:nth-child(2):after,
    #performanceTable td:nth-child(2):after {
        content: "";
        box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
        right: 0;
        transform: translateX(100%);

        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
    }
}

#performanceTable.dataTable-table tbody tr td,
#performanceTable.dataTable-table tbody tr th {
    padding: 0.75rem;
}

/* Standard Table */
.stdlabel label {
    font-family: "Figtree", sans-serif;
    font-weight: 300;
    line-height: 1.25rem;
    text-transform: uppercase;
}

/* Calls Table */
#callsTable thead th {
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
}

#callsTable.dataTable-table tbody tr td,
#callsTable.dataTable-table tbody tr th {
    padding: 0.75rem;
}

@media (min-width: 640px) {
    #callsTable th:nth-child(1),
    #callsTable td:nth-child(1) {
        position: sticky;
        left: -1px;
        z-index: 2;
    }

    #callsTable th:nth-child(2),
    #callsTable td:nth-child(2) {
        position: sticky;
        left: 315px;
        z-index: 4;
    }

    #callsTable th:nth-child(10),
    #callsTable td:nth-child(10) {
        position: sticky;
        right: -1px;
        z-index: 2;
    }

    #callsTable th:nth-child(1),
    #callsTable th:nth-child(2),
    #callsTable th:nth-child(10) {
        background-color: rgb(246 248 250 / var(--tw-bg-opacity)) !important;
    }

    #callsTable td:nth-child(1),
    #callsTable td:nth-child(2),
    #callsTable td:nth-child(10) {
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    :is(.dark #callsTable th:nth-child(1)),
    :is(.dark #callsTable th:nth-child(2)),
    :is(.dark #callsTable th:nth-child(10)) {
        background-color: rgb(26 41 65 / var(--tw-bg-opacity)) !important;
    }

    :is(.dark #callsTable td:nth-child(1)),
    :is(.dark #callsTable td:nth-child(2)),
    :is(.dark #callsTable td:nth-child(10)) {
        background-color: rgb(14 23 38 / var(--tw-bg-opacity));
    }

    #callsTable th:nth-child(1):after,
    #callsTable td:nth-child(1):after,
    #callsTable th:nth-child(2):after,
    #callsTable td:nth-child(2):after {
        content: "";
        box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
        right: 0;
        transform: translateX(100%);
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
    }

    #callsTable th:nth-child(10):before,
    #callsTable td:nth-child(10):before {
        content: "";
        box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
        left: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        transition: box-shadow 0.3s;
        content: "";
        pointer-events: none;
    }
}

/* Promos Table */
#promosTable thead th {
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
}

#promosTable td {
    font-weight: 300;
}

/* Campaigns Table */
#campaignsTable thead th {
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
}

#campaignsTable td {
    font-weight: 300;
}

#campaignsTable th:nth-child(1),
#campaignsTable td:nth-child(1),
#campaignsTable th:nth-child(2),
#campaignsTable td:nth-child(2) {
    border-right-width: 2px;
    border-right-color: hsl(210 100% 55% / 0.3);
}

#campaignsTable.dataTable-table tbody tr td,
#campaignsTable.dataTable-table tbody tr th {
    padding: 0.75rem;
}

/* Users Table */
#usersTable thead th {
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
}

#usersTable td {
    font-weight: 300;
}