:root {
    --gap: 12px;
    --padding: 0px;
    --photo-width: 1.2in;
    --photo-height: 1.4in;
    --paper-color: #eaeaea;
}

@media print {
    html, body {
        height: 100vh;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
}

/*@media print {*/
/*    html, body {*/
/*        margin: 0;*/
/*        padding: 0;*/
/*        width: var(--paper-width);*/
/*        height: var(--paper-height);*/
/*        overflow: hidden;*/
/*    }*/
/*}*/

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.print-wrapper {
    width: var(--paper-width);
    height: var(--paper-height);
    padding: var(--padding);
    background-color: white;
    -webkit-print-color-adjust: exact !important;
    overflow: hidden !important;

}

.photo-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    overflow: hidden;
    background-color: var(--paper-color);
    -webkit-print-color-adjust: exact !important;
    transform: scale(0.97);
}

.photo-item {
    width: var(--photo-width);
    height: var(--photo-height);
    background-color: #808080;
    overflow: hidden;
}

.photo-item-content {
    width: var(--photo-width);
    height: var(--photo-height);
    overflow: hidden;
    background-color: #aaa;
}

.print-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

/* Paper color classes */
.paper-color-white {
    --paper-color: #ffffff;
}

.paper-color-soft_gray {
    --paper-color: #eaeaea;
}

.paper-color-soft_yellow {
    --paper-color: #fffaeb;
}

.paper-color-soft_blue {
    --paper-color: #ddeaef;
}

.paper-color-soft_green {
    --paper-color: #f0fff0;
}

/* Gap classes */
.gap-none {
    --gap: 0px;
}

.gap-sm {
    --gap: 4px;
}

.gap-md {
    --gap: 8px;
}

.gap-lg {
    --gap: 12px;
}

.gap-xl {
    --gap: 16px;
}

/* Padding classes */
.padding-none {
    --padding: 0px;
}

.padding-sm {
    --padding: 4px;
}

.padding-md {
    --padding: 8px;
}

.padding-lg {
    --padding: 12px;
}

.padding-xl {
    --padding: 16px;
}

/* Photo item classes */
.photo-passport {
    --photo-width: 1.1in;
    --photo-height: 1.3in;
}

.photo-citizenship {
    --photo-width: 1in;
    --photo-height: 1.1in;
}

.photo-mrp {
    --photo-width: 1.38in;
    --photo-height: 1.77in;
}

.photo-4x6 {
    --photo-width: 4in;
    --photo-height: 6in;
}

.photo-a4 {
    --photo-width: 8.3in;
    --photo-height: 11.7in;
}

/* Orientation classes */
.orientation-portrait-4x6 {
    --paper-width: 4in;
    --paper-height: 6in;
}

.orientation-landscape-4x6 {
    --paper-width: 6in;
    --paper-height: 4in;
}

.orientation-portrait-a4 {
    --paper-width: 8.3in;
    --paper-height: 11.7in;
}

.orientation-landscape-a4 {
    --paper-width: 11.7in;
    --paper-height: 8.3in;
}

/*!* Paper size classes *!*/
/*.paper-4r {*/
/*    --paper-width: 4in;*/
/*    --paper-height: 6in;*/
/*}*/

/*.paper-a4 {*/
/*    --paper-width: 8.3in;*/
/*    --paper-height: 11.7in;*/
/*}*/