body {
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #f2f4f6;
    color : #555;
}

.upload {
    background: #FFE000;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #799F0C, #FFE000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #799F0C, #FFE000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    padding : 3rem;
    display: block;
    text-align: center;



}
.upload > input {
    background-color : white;
    padding : 10px;
    border-radius: 6px;
    color:#aaa;
    height: 200px;
    width: 400px;
    
    -webkit-box-shadow: 3px 6px 14px 0px rgb(150 150 150);
-moz-box-shadow: 3px 6px 14px 0px rgb(150 150 150);
box-shadow: 3px 6px 14px 0px rgb(150 150 150);
}
.content {
    width: 100%;
    padding:5px;
}
.content > strong {
    font-weight: bold;
    text-align: center;
}
.container {
    margin: 5px 10%;
}

.row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}
.row > .col-1 {
    grid-column: 1;
}
.row > .col-2 {
    grid-column: 2;
}
.row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}
.row-3 > .col-1 {
    grid-column: 1;
}
.row-3 p {
    margin: 0;
}
.row-3 > .col-2 {
    grid-column: 2 / 4;
}
.table {
    box-shadow : 1px 1px 4px 1px #aaa;
    border:1px #000 solid;
    width: 100%;
}
.table p {
    margin: 0;
}


.preview {
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    padding:20px;
    text-align: center;
    font-size: 12px;
    color : #000;
}

.preview > .page {
    background-color: #fff;
    box-shadow: 2px 2px 1px #b9b9b9;
    padding : 20px;
    width:845px;
    margin: 0 auto;
}

.text-left {
    text-align: left;
}

#dwnTemplate {
    background-color: #cecece;
    padding:10px;
    color:#fff;
    border:none;

}
#dwnTemplate:hover {
    background-color: #65b36f;
}
#dwnTemplate:active {
    background-color: #ddd;
}

@media print {
    body * {
        visibility: hidden; // part to hide at the time of print
        -webkit-print-color-adjust: exact !important; // not necessary use         
           if colors not visible
    }

    .upload, .container {
        display: none;
        visibility: hidden !important; // To hide 
    }

    .pageBreak {
        clear: both;
        page-break-after: always;
    }
    #resultPage * {
        visibility: visible; // Print only required part
        text-align: left;
        -webkit-print-color-adjust: exact !important;
    }
}