@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

#bodyprinter {
    margin: 0;
    padding: 0;
}

.containerprinterprinter {
    height: 100vh;
    font-family: "Lato", sans-serif;
}

.document-containerprinter {
    display: none;
    position: absolute;
    width: 55vh;
    height: 85vh;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.document-containerprinter > img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    /* Border removed */
}

/* Landscape Mode Styles */
.document-containerprinter-landscape {
    display: none;
    position: absolute;
    width: 85vh;
    height: 55vh;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.document-containerprinter-landscape > img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    /* Border removed */
}

.printer-containerprinter {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 65vh;
    height: 45vh;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: .2vh;
    overflow: hidden;
}

.printer-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5vh;
    background-color: rgb(51, 103, 199);
}

.header-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5vh;
    margin: .75vh;
}

.printer-input {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    width: 40vh;
    height: 4.5vh;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    outline: none;
    border: none;
    text-align: center;
    font-family: sans-serif;
    transition: .2s ease-in-out;
    border-bottom: .4vh solid rgba(0, 128, 0, 0);
}

.printer-input:focus {
    border-radius: 1.5vh 1.5vh 0 0;
    border-bottom: .4vh solid orange;
}

.printer-input:valid {
    border-radius: 1.5vh 1.5vh 0 0;
    border-bottom: .4vh solid green;
}

.printer-accept {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18vh;
    height: 7vh;
    background-color: black;
    margin: 5vh;
    left: 10%;
    color: #fff;
    text-align: center;
    line-height: 7vh;
    cursor: pointer;
}

.printer-decline {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18vh;
    height: 7vh;
    background-color: black;
    margin: 5vh;
    right: 10%;
    color: #fff;
    text-align: center;
    line-height: 7vh;
    cursor: pointer;
}

/* Fotocopy Portrait Styles */
#bodyprintercopy {
    margin: 0;
    padding: 0;
}

.containerprinterprintercopy {
    height: 100vh;
    font-family: "Lato", sans-serif;
}

.document-containerprintercopy {
    display: none;
    position: absolute;
    width: 55vh;
    height: 85vh;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.document-containerprintercopy > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    /* Border removed */
}

/* Fotocopy Landscape Styles */
.document-containerprintercopy-landscape {
    display: none;
    position: absolute;
    width: 85vh;
    height: 55vh;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.document-containerprintercopy-landscape > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    /* Border removed */
}

.printer-containerprintercopy {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 65vh;
    height: 45vh;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: .2vh;
    overflow: hidden;
}

.printer-headercopy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5vh;
    background-color: rgb(51, 103, 199);
}

.header-iconcopy {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.5vh;
    margin: .75vh;
}

.printer-inputcopy {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    width: 40vh;
    height: 4.5vh;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 1.5vh 1.5vh 1.5vh 1.5vh;
    outline: none;
    border: none;
    text-align: center;
    font-family: sans-serif;
    transition: .2s ease-in-out;
    border-bottom: .4vh solid rgba(0, 128, 0, 0);
}

.printer-inputcopy:focus {
    border-radius: 1.5vh 1.5vh 0 0;
    border-bottom: .4vh solid orange;
}

.printer-inputcopy:valid {
    border-radius: 1.5vh 1.5vh 0 0;
    border-bottom: .4vh solid green;
}

.printer-acceptcopy {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18vh;
    height: 7vh;
    background-color: black;
    margin: 5vh;
    left: 10%;
    color: #fff;
    text-align: center;
    line-height: 7vh;
    cursor: pointer;
}

.printer-declinecopy {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18vh;
    height: 7vh;
    background-color: black;
    margin: 5vh;
    right: 10%;
    color: #fff;
    text-align: center;
    line-height: 7vh;
    cursor: pointer;
}

/* Hidden image for dimension detection */
#orientation-detector {
    position: absolute;
    visibility: hidden;
    top: -9999px;
    left: -9999px;
}

/* Responsive scaling for different screen sizes */
@media screen and (max-width: 1366px) {
    .document-containerprinter {
        width: 45vh;
        height: 75vh;
    }
    
    .document-containerprinter-landscape {
        width: 75vh;
        height: 45vh;
    }
    
    .document-containerprintercopy {
        width: 45vh;
        height: 75vh;
    }
    
    .document-containerprintercopy-landscape {
        width: 75vh;
        height: 45vh;
    }
}

@media screen and (max-width: 1024px) {
    .document-containerprinter {
        width: 40vh;
        height: 65vh;
    }
    
    .document-containerprinter-landscape {
        width: 65vh;
        height: 40vh;
    }
    
    .document-containerprintercopy {
        width: 40vh;
        height: 65vh;
    }
    
    .document-containerprintercopy-landscape {
        width: 65vh;
        height: 40vh;
    }
}

/* Smooth transitions for size changes */
.document-containerprinter,
.document-containerprinter-landscape,
.document-containerprintercopy,
.document-containerprintercopy-landscape {
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Custom scrollbar for very large documents */
.document-containerprinter::-webkit-scrollbar,
.document-containerprinter-landscape::-webkit-scrollbar,
.document-containerprintercopy::-webkit-scrollbar,
.document-containerprintercopy-landscape::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.document-containerprinter::-webkit-scrollbar-track,
.document-containerprinter-landscape::-webkit-scrollbar-track,
.document-containerprintercopy::-webkit-scrollbar-track,
.document-containerprintercopy-landscape::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.document-containerprinter::-webkit-scrollbar-thumb,
.document-containerprinter-landscape::-webkit-scrollbar-thumb,
.document-containerprintercopy::-webkit-scrollbar-thumb,
.document-containerprintercopy-landscape::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.document-containerprinter::-webkit-scrollbar-thumb:hover,
.document-containerprinter-landscape::-webkit-scrollbar-thumb:hover,
.document-containerprintercopy::-webkit-scrollbar-thumb:hover,
.document-containerprintercopy-landscape::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}