.wrapper-table-courses {


    .wrapp-table-datatables {
              th, div.dt-container.dt-empty-footer tbody>tr:last-child>*{
                border:0;
              }

        .zen-text-big {
            padding: 42px 0 24px 24px;
            color: #FFF;
            font-family: Nunito;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 130%;
            letter-spacing: -0.736px;

            @media(max-width: 768px) {
                display: none;
            }
        }

        max-width: 1312px;
        margin: 64px auto;
        border-radius: 32px;
        background: #222;
        padding: 0 64px;

        @media(max-width: 768px) {
            padding: 0 24px;
            background: transparent
        }

        .display-exchange-rates-table {
            scroll-margin-top: 100px;
            border-collapse: collapse;
            width: 100%;
            border: none
        }



        tbody {

            td:first-child,
            th:first-child {
                border-radius: 100px 0 0 100px;
                background: black;

                @media(min-width: 768px) {
                    background: transparent;
                }
            }

            td:last-child,
            th:last-child {
                background: black;
                border-radius: 0 100px 100px 0;

                @media(min-width: 768px) {
                    background: transparent;
                }
            }

            td:nth-child(2),
            td:nth-child(3) {
                background: black;

                @media(min-width: 768px) {
                    background: transparent;
                }
            }

            tr:nth-child(odd) {
                background: #222222;

                @media(max-width: 768px) {
                    background: transparent
                }

                th,
                td {
                    background: #222222;

                    @media(min-width: 768px) {
                        background: #000;
                    }

                    /* @media(max-width: 768px) {
                        background: transparent
                    } */
                }
            }

            /* //add hover effect to rows with border radius*/
            tr:hover {
                td {
                    background: #333;
                }
            }

        }

        table.dataTable thead>tr>th div.dt-column-header {
            justify-content: flex-start;
        }

        table.dataTable thead>tr>th div.dt-column-header span.dt-column-title {
            flex-grow: 0;
        }

        table.dataTable th.dt-type-numeric div.dt-column-header {

            /* justify-content: flex-end; */
            span.dt-column-title {
                order: 2
            }
        }

        table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,
        table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order {
            margin-bottom: 5px;
            margin-left: 5px;
        }

        table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
        table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
        table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
        table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1.31958 4.65198L4.93653 1.03503L8.55347 4.65198' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            width: 10px;
            height: 6px;
            margin-bottom: 1px;
        }

        table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
        table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
        table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
        table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M8.68042 1.34802L5.06347 4.96497L1.44653 1.34802' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            width: 10px;
            height: 6px;
            margin-top: 1px;
        }

        tr th {
            color: var(--Tetriary, #A3A3A3);
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Nunito;
            font-size: 16px;

            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.26px;
            padding: 16px;

            @media(max-width: 768px) {
                font-size: 12px;
                padding: 13px;
                padding-left: 0;
            }
        }

        tr {
            padding: 16px;

            @media(max-width: 768px) {
                padding: 13px;
            }
        }

        thead tr {
            background: #222;

            @media(max-width: 768px) {
                background: transparent
            }
        }

        td {
            padding: 16px;

            @media(max-width: 768px) {
                padding: 13px;
            }

            &[data-class="country-column"] {
                display: flex;
                align-items: center;
                gap: 16px;
                min-height: 72px;

                @media(max-width: 768px) {
                    min-height: unset
                }

                @media(max-width:768px) {
                    display: grid;
                    grid-template-columns: auto 1fr auto;
                    grid-template-rows: repeat(2, 1fr);
                    align-items: center;
                    gap: 0;

                    img {
                        grid-area: 1 / 1 / 3 / 2;
                        margin-right: 7px;
                    }

                    .currency-code-mobile {
                        grid-area: 1 / 2 / 2 /3;
                        line-height: 13px !important;
                        margin-top: 4px;
                    }

                    .country-name {
                        grid-area: 2 / 2 / 3 / 3;
                        line-height: 8px !important;
                    }
                }

                .flag-icon {
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    border-radius: 50%;

                    @media(max-width: 768px) {
                        width: 24px;
                        height: 24px;
                    }
                }

                .currency-code-mobile {
                    display: none;
                    color: var(--White, #FFF);
                    font-feature-settings: 'liga' off, 'clig' off;
                    font-family: Nunito;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;

                    @media(max-width: 768px) {
                        display: block;
                    }
                }

                .country-name {
                    color: #FFF;
                    font-feature-settings: 'liga' off, 'clig' off;
                    font-family: Nunito;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;

                    @media(max-width: 768px) {
                        display: block;
                        color: var(--Secondary, #888);
                        font-feature-settings: 'liga' off, 'clig' off;
                        font-family: Nunito;
                        font-size: 10px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                        letter-spacing: 0.2px;
                    }

                    &.hidemobile {
                        @media(max-width: 768px) {
                            display: none;
                        }
                    }
                }
            }

        }

        color: #F0F0F0;
        font-feature-settings: 'liga' off,
        'clig' off;
        font-family: Nunito;
        font-size: 18px;

        @media(max-width: 768px) {
            font-size: 16px;
        }

        font-style: normal;
        font-weight: 700;
        line-height: normal;

        #exchange-rates-table_info,
        .dt-paging {
            display: none;
        }

        @media(max-width: 768px) {
            /* //chowam kursy i kod waluty */
            .hidemobile

            /* .sorting_1, */
            /* tr td:nth-child(3) */
            /* [data-dt-column="2"] */
            /* [data-dt-column="3"]  */
                {
                display: none;
            }
        }
    }

    .wrapper-datatables-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
        padding: 0 24px;
        padding-bottom: 62px;

        .button {
            margin-left: -24px;

            &.inactive {
                svg {
                    transform: rotate(180deg);
                }
            }
        }

        a {
            color: #22E243;
            font-feature-settings: 'liga' off, 'clig' off;
            font-family: Nunito;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-decoration: underline;
        }

        @media(max-width: 768px) {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;

            .button {
                margin-left: 0;
            }

            a {
                margin-left: 0;
            }
        }

    }
}