@media print /*--This is for Print--*/
{
    .btn
    {
        display: none !important;
    }
    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
        text-align: center;
        -webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/

    }

    .printText{
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
    }

    .no-print, .no-print *
    {
        display: none !important;
    }

    .div-text{
        width: 100%;
        text-align: center;
        vertical-align: center;
    }

    .printCompleteParent{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* Non-Webkit Browsers */
        background-color: rgba(0,0,0,0.5) !important; 
        width:500px !important;
    }

    .checkIcon{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* Non-Webkit Browsers */
        color: white !important;        
    }

    .printComplete{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* Non-Webkit Browsers */
        width: 40% !important; 
        position: absolute !important; 
        top: 35% !important; 
        left: 30% !important; 
        background-color: #5e5c5c !important; 
        border: 2px solid #fff !important; 
        color: white !important;
    }

    /*.completeNotifParent{
        position: relative;
        background-color: rgba(0,0,0,0.5);
        z-index: 30;    
        vertical-align: middle;
        text-align: center;
    }

    .completedNotif{
        background-color: #5e5c5c;
        color: #fff;
        height: 50px;
        min-width: 200px;
        z-index: 10;
        vertical-align: middle !important;
        text-align: center;
        position: relative;
        border: 2px solid #fff;
        top: 40%;
    }

    .completedText{    
        text-align: center;     
        vertical-align: middle;    
        font-size: 85%;
        padding-top: 5%;
        display: inline-block;
    }*/
}
@media screen /*--This is for Print Preview Screen--*/
{
    .btn
    {
        display: none;
    }

    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
        text-align: center;
    }

    .printText{
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
    }

    .div-text{
        width: 100%;
        text-align: center;
        vertical-align: center;
    }

    .printCompleteParent{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* Non-Webkit Browsers */
        background-color: rgba(0,0,0,0.5) !important; 
        width:500px !important;
    }

    .printComplete{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact; /* Non-Webkit Browsers */
        width: 20% !important; 
        position: absolute !important; 
        top: 35% !important; 
        left: 40% !important; 
        background-color: #5e5c5c !important; 
        border: 2px solid #fff !important; 
        color: white !important;
    }

    /*.completeNotifParent{
        position: relative;
        background-color: rgba(0,0,0,0.5);
        z-index: 30;    
        vertical-align: middle;
        text-align: center;
    }

    .completedNotif{
        background-color: #5e5c5c;
        color: #fff;
        height: 50px;
        min-width: 200px;
        z-index: 10;
        vertical-align: middle !important;
        text-align: center;
        position: relative;
        border: 2px solid #fff;
        top: 40%;
    }

    .completedText{    
        text-align: center;     
        vertical-align: middle;    
        font-size: 85%;
        padding-top: 5%;
        display: inline-block;        
    }   */

    #img_final{
        z-index: -1;
    }
  }