.container {}

.document {

   
}



.document::-webkit-scrollbar {
    width: 8px;
    background: #2c5197;
    border-radius: 10px 10px 10px 10px;

}

.document::-webkit-scrollbar-thumb {
    width: 8px;
    height: 20px;
    background: white;
    border: 1px solid rgb(0, 68, 141);
    border-radius: 10px;
}

.paper {
    position: relative;
    background-color: rgb(255, 255, 250);
    background-image: url("../../assets//beige-paper.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

}


.photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Adjust the gap between items */
}

.photo-container {
    flex: 1 1 calc(25% - 10px);
    /* Adjust to fit 4 items per row, accounting for the gap */
    max-width: calc(25% - 10px);
    /* Same as above */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.front-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid black
}

.page-separator {
    height: 50px;
}

.top-buttons {
    display: flex;
    justify-content: space-between;
}

.title {}

.front-photo-image {
    width: 40%;
    /* Adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
    margin: 30px;
}

.photo-image {
    width: 100%;
    /* Adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
    margin: 10px;
    ;
}

.photo-info {
    text-align: center;
    margin-top: 5px;
}

.photo-name {
    font-weight: bold;
}

.photo-description {
    font-size: medium;
}

.image-container {
    margin: 20px;
    /* Adjust the value to control the spacing */
}

.miniReport {
    margin-bottom: 50px;
}

.reportPhotos {
    display: grid;

}

.table {
    border: 1px solid black
}

.report {
    border: 2px solid black;
    padding: 20px;

}

.span-scores {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px dashed grey;
}

.bci {
    border: 2px solid black;
    padding: 20px;


}

.page {
    border: 2px solid black;
    padding: 20px;

}

.defects {
    margin: 20px;
    padding: 20px;
    border: 1px dashed grey;

}

.miniReport {
    border-bottom: 1px dashed grey;
}

.photos {
    display: flex;
    width: 90vh;
    margin: 5px 5px 0px 5px;
}

.sidenav {

    width: 0;
    position: fixed;
    z-index: 1;
    top: 165px;
    left: calc(100vw - 1650);
    /* bottom:130px; */
    height: 70vh;
    background-color: rgb(0, 68, 141);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}


.sidenav::-webkit-scrollbar {
    width: 8px;
    background: #2c5197;
    border-radius: 10px 10px 10px 10px;

}

.sidenav::-webkit-scrollbar-thumb {
    width: 8px;
    height: 20px;
    background: white;
    border: 1px solid rgb(0, 68, 141);
    border-radius: 10px;
}

.menu-contents {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.menu-contents:hover {
    color: #f1f1f1;
    cursor: pointer;
}

.sidenav .menu-contents a:hover {
    color: #f1f1f1;
    cursor: pointer;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;

}

.menu-trigger {
    color: rgb(0, 68, 141);
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}



@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}


@media print {
    .page-break {
  page-break-after: always;
}

.document{
    height:auto;
}

.main-logo{
    display: none;
}

 .button2{
    display: none;
}

.top-buttons {
    display: flex;
    justify-content: space-between;
    display:none
}

.display-trigger{
    display: none;
}

.print-logo {
    
  }

.avoid-page-break {
  page-break-inside: avoid;
}


}

@page {
  size: A4;
}
.wrapper2 .navbar {
    display:none;

}