.Grid1 {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Grid1 td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Grid1 th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Grid1 .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Grid1 .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Grid1 .pgr table {
            margin: 3px 0;
        }

        .Grid1 .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Grid1 .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Grid1 .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


.Grid2 {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Grid2 td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Grid2 th {
        padding: 4px 2px;
        color: #ffffff;
        background-color: Brown;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Grid2 .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Grid2 .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Grid2 .pgr table {
            margin: 3px 0;
        }

        .Grid2 .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Grid2 .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Grid2 .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

.Gridemp {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Gridemp td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Gridemp th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Gridemp .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Gridemp .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Gridemp .pgr table {
            margin: 3px 0;
        }

        .Gridemp .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Gridemp .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Gridemp .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


.Griduser {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Griduser td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Griduser th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Griduser .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Griduser .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Griduser .pgr table {
            margin: 3px 0;
        }

        .Griduser .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Griduser .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Griduser .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

.Gridsafeuser {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Gridsafeuser td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Gridsafeuser th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Gridsafeuser .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Gridsafeuser .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Gridsafeuser .pgr table {
            margin: 3px 0;
        }

        .Gridsafeuser .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Gridsafeuser .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Gridsafeuser .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


.Griddash1 {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Griddash1 td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Griddash1 th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Griddash1 .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Griddash1 .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Griddash1 .pgr table {
            margin: 3px 0;
        }

        .Griddash1 .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Griddash1 .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Griddash1 .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


.Griddash2 {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Griddash2 td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Griddash2 th {
        padding: 4px 2px;
        color: #ffffff;
        background-color: Brown;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Griddash2 .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Griddash2 .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Griddash2 .pgr table {
            margin: 3px 0;
        }

        .Griddash2 .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Griddash2 .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Griddash2 .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

.Gridcashentry {
    background-color: #ffffff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    font-family: Calibri;
    color: #474747;
}

    .Gridcashentry td {
        padding: 2px;
        border: solid 1px #c1c1c1;
    }

    .Gridcashentry th {
        padding: 4px 2px;
        color: #ffffff;
        background: #00246C;
        /*#363670 url(~/Images/grid-header.png) repeat-x top;*/
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .Gridcashentry .alt {
        background: #fcfcfc url(~/Images/grid-alt.png) repeat-x top;
    }

    .Gridcashentry .pgr {
        background: #363670 url(~/Images/grid-pgr.png) repeat-x top;
    }

        .Gridcashentry .pgr table {
            margin: 3px 0;
        }

        .Gridcashentry .pgr td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Gridcashentry .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Gridcashentry .pgr a:hover {
                color: #000;
                text-decoration: none;
            }


@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .Grid1 {
        width: 95%;
    }
        .Grid1 table, .Grid1 thead, .Grid1 tbody, .Grid1 th, .Grid1 tr, .Grid1 td {
            display: block;
        }

        .Grid1 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .Grid1 tr {
            border: 5px solid #ccc;
        }
        .Grid1 th:nth-of-type(2){
            display:none;
        }
        .Grid1 th:nth-of-type(3) {
            display: none;
        }
        .Grid1 th:nth-of-type(4) {
            display: none;
        }
        .Grid1 th:nth-of-type(5) {
            display: none;
        }
        .Grid1 th:nth-of-type(6) {
            display: none;
        }

        .Grid1 td {
            border: none;
            border-bottom: 1px solid #eee;
            position:relative;
            padding-left: 40%;
        }
            .Grid1 td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Grid1 td:nth-of-type(1):before {
                content: "Receipt No.";
                font-size: 20px;
                width: 7em;
            }

            .Grid1 td:nth-of-type(2):before {
                content: "Credit/Debit";
                font-size: 20px;
                width: 7em;
            }

            .Grid1 td:nth-of-type(3):before {
                content: "Cash";
                font-size: 20px;
                width: 7em;
            }

            .Grid1 td:nth-of-type(4):before {
                content: "Cheque/Zelle";
                font-size: 20px;
                width: 7em;
            }


    .Grid2 {
        width: 95%;
    }

        .Grid2 table, .Grid2 thead, .Grid2 tbody, .Grid2 th, .Grid2 tr, .Grid2 td {
            display: block;
        }

            .Grid2 thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Grid2 tr {
            border: 5px solid #ccc;
        }

        .Grid2 th:nth-of-type(2) {
            display: none;
        }

        .Grid2 th:nth-of-type(3) {
            display: none;
        }

        .Grid2 th:nth-of-type(4) {
            display: none;
        }

        .Grid2 th:nth-of-type(5) {
            display: none;
        }

        .Grid2 th:nth-of-type(6) {
            display: none;
        }


        .Grid2 td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Grid2 td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Grid2 td:nth-of-type(1):before {
                content: "Receipt No.";
                font-size: 20px;
                width: 7em;
            }

            .Grid2 td:nth-of-type(2):before {
                content: "Credit/Debit";
                font-size: 20px;
                width: 7em;
            }

            .Grid2 td:nth-of-type(3):before {
                content: "Cash";
                font-size: 20px;
                width: 7em;
            }

            .Grid2 td:nth-of-type(4):before {
                content: "Cheque/Zelle";
                font-size: 20px;
                width: 7em;
            }

    .Gridemp{
        width: 95%;
    }

        .Gridemp table, .Gridemp thead, .Gridemp tbody, .Gridemp th, .Gridemp tr, .Gridemp td {
            display: block;
        }

            .Gridemp thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Gridemp tr {
            border: 5px solid #ccc;
        }

        .Gridemp th:nth-of-type(2) {
            display: none;
        }

        .Gridemp th:nth-of-type(3) {
            display: none;
        }

        .Gridemp th:nth-of-type(4) {
            display: none;
        }

        .Gridemp th:nth-of-type(5) {
            display: none;
        }

        .Gridemp th:nth-of-type(6) {
            display: none;
        }

        .Gridemp th:nth-of-type(7) {
            display: none;
        }

        .Gridemp td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Gridemp td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Gridemp td:nth-of-type(1):before {
                content: "Employee ID";
                font-size: 15px;
                width: 9em;
            }

            .Gridemp td:nth-of-type(2):before {
                content: "Employee Name";
                font-size: 15px;
                width: 9em;
            }

            .Gridemp td:nth-of-type(3):before {
                content: "Status";
                font-size: 15px;
                width: 9em;
            }

    .Griduser {
        width: 95%;
    }

    .Griduser table, .Griduser thead, .Griduser tbody, .Griduser th, .Griduser tr, .Griduser td {
        display: block;
    }

        .Griduser thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .Griduser tr {
        border: 5px solid #ccc;
    }

    .Griduser th:nth-of-type(2) {
        display: none;
    }

    .Griduser th:nth-of-type(3) {
        display: none;
    }

    .Griduser th:nth-of-type(4) {
        display: none;
    }

    .Griduser th:nth-of-type(5) {
        display: none;
    }

    .Griduser th:nth-of-type(6) {
        display: none;
    }

    .Griduser th:nth-of-type(7) {
        display: none;
    }

    .Griduser td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 40%;
    }

        .Griduser td:before {
            position: absolute; /* Top/left values mimic padding */
            top: 1px;
            left: 6px;
            width: 20%;
            padding-right: 10px;
            padding-left: 10px;
            white-space: nowrap;
            background-color: lightblue;
        }

        .Griduser td:nth-of-type(1):before {
            content: "Username";
            font-size: 15px;
            width: 7em;
        }

        .Griduser td:nth-of-type(2):before {
            content: "Password";
            font-size: 15px;
            width: 7em;
        }

        .Griduser td:nth-of-type(3):before {
            content: "Role";
            font-size: 15px;
            width: 7em;
        }

    .Gridsafeuser {
        width: 95%;
    }

        .Gridsafeuser table, .Gridsafeuser thead, .Gridsafeuser tbody, .Gridsafeuser th, .Gridsafeuser tr, .Gridsafeuser td {
            display: block;
        }

            .Gridsafeuser thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Gridsafeuser tr {
            border: 5px solid #ccc;
        }

        .Gridsafeuser th:nth-of-type(2) {
            display: none;
        }

        .Gridsafeuser th:nth-of-type(3) {
            display: none;
        }

        .Gridsafeuser th:nth-of-type(4) {
            display: none;
        }

        .Gridsafeuser th:nth-of-type(5) {
            display: none;
        }

        .Gridsafeuser th:nth-of-type(6) {
            display: none;
        }

        .Gridsafeuser th:nth-of-type(7) {
            display: none;
        }

        .Gridsafeuser td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Gridsafeuser td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Gridsafeuser td:nth-of-type(1):before {
                content: "User ID";
                font-size: 15px;
                width: 9em;
            }

            .Gridsafeuser td:nth-of-type(2):before {
                content: "Safe User Name";
                font-size: 15px;
                width: 9em;
            }

            .Gridsafeuser td:nth-of-type(3):before {
                content: "Status";
                font-size: 15px;
                width: 9em;
            }

    .Griddash1 {
        width: 95%;
    }

        .Griddash1 table, .Griddash1 thead, .Griddash1 tbody, .Griddash1 th, .Griddash1 tr, .Griddash1 td {
            display: block;
        }

            .Griddash1 thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Griddash1 tr {
            border: 5px solid #ccc;
        }

        .Griddash1 th:nth-of-type(2) {
            display: none;
        }

        .Griddash1 th:nth-of-type(3) {
            display: none;
        }

        .Griddash1 th:nth-of-type(4) {
            display: none;
        }

        .Griddash1 th:nth-of-type(5) {
            display: none;
        }

        .Griddash1 th:nth-of-type(6) {
            display: none;
        }

        .Griddash1 th:nth-of-type(7) {
            display: none;
        }

        .Griddash1 td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Griddash1 td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Griddash1 td:nth-of-type(1):before {
                content: "Receipt No.";
                font-size: 20px;
                width: 7em;
            }

            .Griddash1 td:nth-of-type(2):before {
                content: "Date";
                font-size: 20px;
                width: 7em;
            }

            .Griddash1 td:nth-of-type(3):before {
                content: "Credit/Debit";
                font-size: 20px;
                width: 7em;
            }

            .Griddash1 td:nth-of-type(4):before {
                content: "Cash";
                font-size: 20px;
                width: 7em;
            }

            .Griddash1 td:nth-of-type(5):before {
                content: "Cheque/Zelle";
                font-size: 20px;
                width: 7em;
            }


    .Griddash2 {
        width: 95%;
    }

        .Griddash2 table, .Griddash2 thead, .Griddash2 tbody, .Griddash2 th, .Griddash2 tr, .Griddash2 td {
            display: block;
        }

            .Griddash2 thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Griddash2 tr {
            border: 5px solid #ccc;
        }

        .Griddash2 th:nth-of-type(2) {
            display: none;
        }

        .Griddash2 th:nth-of-type(3) {
            display: none;
        }

        .Griddash2 th:nth-of-type(4) {
            display: none;
        }

        .Griddash2 th:nth-of-type(5) {
            display: none;
        }

        .Griddash2 th:nth-of-type(6) {
            display: none;
        }

        .Griddash2 th:nth-of-type(7) {
            display: none;
        }

        .Griddash2 td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Griddash2 td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            .Griddash2 td:nth-of-type(1):before {
                content: "Receipt No.";
                font-size: 20px;
                width: 7em;
            }

            .Griddash2 td:nth-of-type(2):before {
                content: "Date";
                font-size: 20px;
                width: 7em;
            }

            .Griddash2 td:nth-of-type(3):before {
                content: "Credit/Debit";
                font-size: 20px;
                width: 7em;
            }

            .Griddash2 td:nth-of-type(4):before {
                content: "Cash";
                font-size: 20px;
                width: 7em;
            }

            .Griddash2 td:nth-of-type(5):before {
                content: "Cheque/Zelle";
                font-size: 20px;
                width: 7em;
            }

    .Gridcashentry {
        width: 95%;
    }

        .Gridcashentry table, .Gridcashentry thead, .Gridcashentry tbody, .Gridcashentry th, .Gridcashentry tr, .Gridcashentry td {
            display: block;
        }

            .Gridcashentry thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        .Gridcashentry tr {
            border: 5px solid #ccc;
        }

        .Gridcashentry th:nth-of-type(1) {
            display: none;
        }

        .Gridcashentry th:nth-of-type(2) {
            display: none;
        }

        .Gridcashentry th:nth-of-type(3) {
            display: none;
        }

        .Gridcashentry th:nth-of-type(4) {
            display: none;
        }

        .Gridcashentry th:nth-of-type(5) {
            display: none;
        }

        .Gridcashentry td {
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 40%;
        }

            .Gridcashentry td:before {
                position: absolute; /* Top/left values mimic padding */
                top: 1px;
                left: 6px;
                width: 20%;
                padding-right: 10px;
                padding-left: 10px;
                white-space: nowrap;
                background-color: lightblue;
            }

            /*.Gridcashentry td:nth-of-type(1):before {
                
            }*/

            .Gridcashentry td:nth-of-type(1):before {
                content: "Date";
                font-size: 20px;
                width: 7em;
            }

            .Gridcashentry td:nth-of-type(2):before {
                content: "Paid To/From";
                font-size: 20px;
                width: 7em;
            }

            .Gridcashentry td:nth-of-type(3):before {
                content: "Description";
                font-size: 20px;
                width: 7em;
            }
            .Gridcashentry td:nth-of-type(4):before {
                content: "Tran.Type";
                font-size: 20px;
                width: 7em;
            }
            .Gridcashentry td:nth-of-type(5):before {
                content: "Amount";
                font-size: 20px;
                width: 7em;
            }


}