CSS Kullanımında yanlış olan ne arkadaşlar çözemedim !! r10+

codepen sitesinde çalışıyor fakat siteme eklediğimde çalışmıyor, sizce neden? yardımcı olabilir misiniz?

$bg-color: #f2f6f9;
$active-color: #25be64;
$inactive-color: #dadde4;
$new-color: #febf02;
$text-color: #141a4e;
$table-bg-color: #fefefe;
$table-head-bg-color: #e1e8f2;
$table-border-color: #edeef2;
$hover-bg-color: #3b5998;
$hover-text-color: #ffffff;

@mixin mobile-xxs {
    @media (max-width: 400px) {
        @content;
    }
}

@mixin min-tablet {
    @media (min-width: 768px) {
        @content;
    }
}

@mixin desktop {
    @media (max-width: 991px) {
        @content;
    }
}

@mixin tablet-to-desktop {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

.table-tedbir {
    min-height: 100vh;
    color: $text-color;
    background-color: $bg-color;
    
}

/* Page Wrapper/Container Style */
.container-tedbir {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 15px;
    font-size: 10px;
    font-family: "Poppins", sans-serif;
}

/* Responsive Table Style */
.responsive-tedbir {
    background-color: $table-bg-color;
    border-collapse: collapse;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.02);
    width: 100%;
    margin: 2rem 0;
    overflow: hidden;
    &__row {
        display: grid;
        border-bottom: 1px solid $table-border-color;
        padding: 0 1.5rem;
        @include min-tablet {
            grid-template-columns: 2fr 1fr 2fr 2fr 1fr;
        }
        @include tablet-to-desktop {
            grid-template-columns: 1fr 2fr 1fr;
        }
        th,
        td {
            padding: 1rem;
        }
    }
    &__head {
        background-color: $table-head-bg-color;
        @include desktop {
            display: none;
        }
        &__title {
            display: flex;
            align-items: center;
            font-weight: 500;
            text-transform: capitalize;
        }
    }
    &__body {
        .responsive-table__row {
            transition: 0.1s linear;
            transition-property: color, background;
            &:last-child {
                border-bottom: none;
            }
            &:hover {
                color: $hover-text-color;
                background-color: $hover-bg-color;
            }
        }
        &__text {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            &::before {
                margin-right: 1rem;
                font-weight: 600;
                text-transform: capitalize;
            }
            @include desktop {
                &::before {
                    content: attr(data-title) " :";
                }
            }
            @include mobile-xxs {
                &::before {
                    width: 100%;
                    margin-bottom: 1rem;
                }
            }
            &--name {
                font-weight: 600;
                @include min-tablet {
                    &::before {
                        display: none;
                    }
                }
                @include tablet-to-desktop {
                    grid-column: 1 / 2;
                    flex-direction: column;
                }
            }
            &--status,
            &--types,
            &--update {
                @include tablet-to-desktop {
                    grid-column: 2/ 3;
                }
            }
            &--country {
                @include tablet-to-desktop {
                    grid-column: 3/ -1;
                }
            }
            &--name,
            &--country {
                @include tablet-to-desktop {
                    grid-row: 2;
                }
            }
        }
    }
}


/* SVG User Icon Style */
.user-icon {
    width: 100%;
    max-width: 4rem;
    height: auto;
    margin-right: 1rem;
}


#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-color: #e1e8f2;
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #edeef2; /* Add a grey border */
    border-radius: 10px;
  margin-bottom: 5px; /* Add some space below the input */
}
.text-shared-danger-solid-01 {
  color: red;
  height: 18px;
  width: 18px;
  text-align: center;
}

bu scss kodu siz scss mi kullanıyorsunuz?

Hocam sağ alttan tüm dosyaları indirip inceleyin, muhtemelen head kısmında farklı bir bağlantı yada dosya linki olabilir.

hayır onu nasıl kullanırım ?

projenizin ne olduğunu bilmiyorum hangi teknolojiyi kullanıyorsunuz ona göre sass scss kurmanız gerekir başka bir yöntem ise bu kodu css ' e compile edit o şekilde kullanabilirsiniz

scss to css online convert yazıp scss kodunu css kodlarına çevirerek css dosyanıza ekleyip kullanabilirsiniz.

scss to css e çevirdim ama işe yaramadı, hostingimde scss nasıl aktif edebilirim ya da nasıl kurabilirim? başka bir yolu var mıdır?
güzel bir tablo bulmuştum onu ekleyim dedim bir türlü ekleyemedim.

site burası: Tedbirli Hisse Senetleri sitem Wordpress
bulduğum tabloda bu: https://codepen.io/DeveloperZahid/pen/QWvKwmq

View Compiled CSS yapıcaksınız, css kodunu tümünü ekleyeceksiniz,

codepen 'deki tasarıma sağ click -> çerçeve kaynağını görüntüle dedikten sonra oradaki <style></style> arasındaki kodları alıp css kodunuza eklemeyi dener misiniz
Edit: Wordpress css kodu eklemek biraz sıkıntı çıkarabilir. Yazdığınız css kodların sitenizdeki diğer kodlarla çakışmaması için kullanılan css isimlendirmelerine dikkat edin