@page {
    margin: 0px;
}

@supports (-moz-appearance:none) {
    /*height and width must be declared manually in Firefox(in every container)*/
    /*Page size refereced is the US Letter size(215.9mm x 279.4mm) or (816px x 1056px)*/
    html,
    body {
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact !important;
        /*background-image: url("../images/a4bluebackground.jpg") !important;*/
    }

    .page {
        height: 279.4mm;
        width: 215.9mm;
    }
}

@supports (-webkit-appearance:none) {
    html,
    body {
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact !important;
        /*background-image: url("../images/a4bluebackground.jpg") !important;*/
    }
}

@supports (-ms-ime-align:auto) {
    html,
    body {
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact !important;
        /*background-image: url("../images/a4bluebackground.jpg") !important;*/
    }
}

.cvrimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 650px;
    opacity: 0.5;
    padding-top: 40px;
}

.cvrtitle {
    font-size: 50px;
    padding-top: 40px;
    text-align: center;
}

.page {
    box-sizing: border-box;
    /*padding: 2rem;*/
    height: 1056px; /*960px*/
    width: 816px; /*810px*/
 
}

.oneimg-grid-container {
    height: 960px;
    width: 810px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1,100%);
    margin-left: auto;
    margin-right: auto;
}

.twoimg-grid-container {
    height: 960px;
    width: 810px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2,50%);
    margin-left: auto;
    margin-right: auto;
}


.threeimg-grid-container-1 {
    height: 480px;
    width: 810px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(1,100%);
   
    margin-left: auto;
    margin-right: auto;
}

.threeimg-grid-container-2 {
    height: 480px;
    width: 810px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1,100%);
      margin-left: auto;
    margin-right: auto;
}

.fourimg-grid-container {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(16, 1fr);
    grid-gap: 0.5em;
    page-break-inside: avoid;
}

.singleimg {
    object-fit: contain;
    height: 100%;
    max-width: 800px;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.oneimg {
    object-fit: contain;
    height: 100%;
    max-width: 800px;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.twoimg {
    object-fit: contain;
    height: 100%;
    max-width: 395px;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.fourimg {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: contain; /*use contain for PROD and cover/fill for DEV*/
    object-position: center;
    page-break-inside: avoid;
}

.grid-item.oneimg-griditem-1 {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

.grid-item.twoimg-griditem-1 {
    grid-column: 1/ 1;
    grid-row: 1/ 1;
}

.grid-item.twoimg-grid-item-2 {
    grid-column: 1/ 1;
    grid-row: 2/ 1;
}

.grid-item .threeimg-grid-item-1 {
    grid-column: 1/1;
    grid-row: 1/1;
}

.grid-item .threeimg-grid-item-2 {
    grid-column: 2/1;
    grid-row: 1/ 2;
}

.grid-item .threeimg-grid-item-3 {
    grid-column: 1/1;
    grid-row: 1/1;
}

/*#region Four-image template style start*/
.grid-item.fourimg-grid-item-1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 7;
}

.grid-item.fourimg-grid-item-2 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 9;
}

.grid-item.fourimg-grid-item-3 {
    grid-column-start: 1;
    grid-row: 8 / span 9;
}

.grid-item.fourimg-grid-item-4 {
    grid-column-start: 2;
    grid-row: 10 / span 7;
}
/*#endregion Four-image template style end*/

/*#region Pagebreak style start*/
.pagebreak {
    page-break-before: always;
    margin-left: auto;
    margin-right: auto;
}

    .pagebreak.left {
        page-break-before: left;
    }

    .pagebreak.right {
        page-break-before: right;
    }
/*#endregion pagebreak style end*/

.container {
    /*height: 1055px !important;*/
    width: 815px !important;
    margin: 10px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.beadlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.beadlistitem {
    float: left;
    margin: 5px;
}

.printbeadimg {
    height: 60px;
    width: 60px;
}

.printcontent {
    font-size: 25px;
}

.contentonly {
    font-size: 25px;
}

.comment-list {
    list-style: none;
    margin-top: 3%;
    padding: 1.875rem;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
}

    .comment-list .usericon {
        width: 32px;
        height: 32px;
    }

    .comment-list li {
        margin-top: 1%;
        display: list-item;
        text-align: -webkit-match-parent;
    }

/*@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    @media {
        .oneImage-grid-container {
            height: 960px !important;
            width: 815px !important;
            display: grid !important;
            grid-template-columns: 1fr !important;
            grid-template-rows: 1fr !important;
            margin-left: auto;
            margin-right: auto;
        }
    }
}*/

_::-webkit-full-page-media, _:future, :root .oneImage-grid-container {
    height: 1032px !important;
    width: 815px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    margin-left: auto;
    margin-right: auto;
}


.oneImage-grid-container {
    height: 1055px !important;
    width: 815px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    margin-left: auto;
    margin-right: auto;
}

.oneImage-grid-item {
    text-align: center !important;
    height: 90% !important;
    width: 90% !important;
    max-height: 90vh !important;
    min-height: 90% !important;
    margin: 5% !important;
}

    .oneImage-grid-item img {
        object-fit: contain !important;
        height: 100% !important;
        width: 100% !important;
    }