/* TOP DIV (print modified) */

#top{
    grid-area: top;
    /* background: rgba(57, 55, 56, 0.95); */
    background: rgb(61, 59, 61);
    padding: 5px;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-columns: 2fr 1fr 4fr 3fr;
}

#logo {
    margin:  0 0 0 auto;
}

/* #logo img {
    height: 62px;
    margin: 0px 18px 0px 18px;
    box-shadow: 0px 0px 30px 2px rgba(255, 255, 255, 0.3) ;
} */

/* #logo #newLogo {
    height: 68px;
    transform: translate(0px, -5px);
} */

#logo img{
    height: 68px;
    transform: translate(0px, -5px);
    box-shadow: 0px 0px 30px 2px rgba(255, 255, 255, 0.3) ;
}

#personPrint {
    display: none;
}

.header {
    text-align: center;
    color: #f8f8f8;
    font-size: 33px;
    /* margin: 0px; */
    margin: 7px 0px 0px 0px;
    padding: 0px;
    font-family: Noto_Sans_TC;
    letter-spacing: 2px;
    white-space: nowrap;
}

.version {
    text-align: center;
    color: #f8f8f8;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    transform: translate(90px, -5px);
}

.version.center {
    transform: translate(0px, -5px);
}

.topOrder {
    display: none;
}

#person {
    display: grid;
    grid-template-columns: 150px 100px;
}

.name {
    display: flex;
    background: none;
    border: none;
    white-space: nowrap;
    border-radius: 15px;
    color: #f8f8f8;
    font-size: 15px;
    margin: 15px;
    padding: 5px 12px 5px 12px;
    transition: 400ms;
    font-family: MontserratL;
    transition: 400ms;
}

#gear{
    width: 15px;
    margin: 2px 0px 3px 5px;
}

.name:hover{
    background: rgb(255, 255, 255);
    color: rgba(57, 55, 56, 1);
}

.avatar {
    height: 40px;
    margin: 10px 0px 10px 0px;
}

@media print {
    #top{
        background:none;
        grid-template-columns: 3fr 1fr 3fr;
    }

    #top td {
        padding: 0px 6px 4px 6px;
    }

    #logo {
        margin: auto;
    }

    #emptyTop {
        display: none;
    }

    .version {
        display: none;
    }

    .topOrder {
        display: block;
        text-align: center;
        font-family: MontserratL;
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    /* #topDate {
        font-size: 12px;
    } */

    #personPrint {
        display: inline-block;
        font-size: 16px;
        /* text-align: left; */
    }

    #topTable {
        border: none;
        padding: 5px;
        margin-top: 26px;
    }

    #person {
        display: none;
    }

    .glider {
        font-family: MontserratM;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
    }

    .serialNo {
        font-family: MontserratM;
        white-space: nowrap;
        text-align: left;
        font-size: 14px;
    }

    .header, .name {
    color: rgb(57, 55, 56);
    font-size: 24px;
    }

    .header {
        padding: 15px 10px 0px 10px;
    }
}