body{
font-family:Arial;
}

/*#previewModal{*/

/*display:none;*/
/*position:fixed;*/
/*top:0;*/
/*left:0;*/
/*width:100%;*/
/*height:100%;*/
/*background:rgba(0,0,0,0.5);*/
/*justify-content:center;*/
/*align-items:center;*/

/*}*/

#previewModal{
    position:fixed;
    top:70px;
    right:20px;
    width:700px;
    height:80vh;
    background:white;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    display:none;
    flex-direction:column;
    z-index:2000;

    resize: both;
    overflow:hidden;
    min-width:450px;
    min-height:300px;
}

.previewControls button{
    border:none;
    background:white;
    margin-left:5px;
    padding:3px 8px;
    border-radius:4px;
    cursor:pointer;
}


#previewBox{

background:white;
padding:20px;
max-height:90%;
overflow:auto;

}

.docPage{

width:794px;
min-height:1123px;
background:white;
padding:80px;
margin:auto;
font-family:"Times New Roman";
box-shadow:0 0 10px rgba(0,0,0,0.3);

}

.container{
    position: relative;
}

.preview-float-btn{
    position:absolute;
    top:90px;
    right:20px;
    z-index:1000;
    background:#471C9E;
    padding:8px 16px;
    font-size:14px;
    border-radius:6px;
    width:auto;
}
/*.preview-float-btn{*/
/*    position:absolute;*/
/*    top:20px;*/
/*    right:20px;*/
/*    z-index:1000;*/
/*    background:#471C9E;*/
/*    padding:6px 14px;*/
/*    font-size:14px;*/
/*    border-radius:6px;*/
/*}*/

#previewContentWrapper{
    flex:1;
    overflow:auto;
    padding:15px;
    background:#f3f3f3;
}


/* Preview Content */
#previewContent{
    overflow-y:auto;
    overflow-x:auto;
    padding:20px;
    background:#e9ecef;
    height:100%;
    transform-origin:top center;
}

.docPage{
    width:794px;        /* A4 width */
    min-height:1123px;  /* A4 height */
    background:white;
    margin:20px auto;
    padding:80px 70px;
    box-shadow:0 4px 20px rgba(0,0,0,0.2);
}

.docPreview{
    font-family:"Times New Roman";
    font-size:12pt;
    line-height:1.6;
}

/* Close button */
#closePreview{
    background:none;
    border:none;
    color:white;
    font-size:18px;
    cursor:pointer;
}

#previewHeader{
    background:#0d6efd;
    color:white;
    padding:10px 15px;
    cursor:move;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


@media (max-width:768px){

#previewModal{
    top:70px;
    right:10px;
    width:95%;
    height:80vh;
}


/* allow horizontal scroll */
#previewContentWrapper{
    overflow:auto;
}

}