Problem colorizing table rows in print using @media ASP.NET MVC

In my view the result of my table looks like this:

Printing:

I put my css styles used in the view inside the @@ media as follows:

<style>
    .form-control {
        min-width: 100% !important;
    }

    .p-periodo{
        text-align :left !important;
        margin-left: -1.5% !important;
        margin-top: 3% !important;
    }


    #btnImprimir {
        margin-top: 8% !important;
    } 

    th {
        text-align: center !important;
    }

    .debito {
        color: red;
    }

    .saldo {
        background-color: gainsboro;
    }

    .credito {
        text-decoration-color: black;
    }

    .periodoMensal {
        border: none !important;
        border-style: none !important;
        background-color: dimgray;
        color: white;
    }

    @@media print {

        th {
            text-align: center !important;
        }

        #myContainerPrint{
            margin-top: -10% !important;            
        }

        #btnImprimir {
            display: none !important;
        }

        .debito {
            color: red !important;
        }

        .saldo {
            background-color: gainsboro !important;
        }

        .periodoMensal {
            border: none !important;
            border-style: none !important;
            background-color: dimgray;
            color: white;
        }

        .credito {
            text-decoration-color: black !important;
        }

    }

</style>

What do I need to do to make the colors of the rows in my table look the same as in my view?