@page {
    size: A4;
    margin: 0;

    @top-left {
        content: none;
    }

    @bottom-left {
        content: none;
    }

    @top-right {
        content: none;
    }

    @bottom-right {
        content: none;
    }
}

/* ==== HEADER ==== */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    color: rgb(0,45,71);
}

    .header .title {
        font-size: 1.1em;
        font-weight: bold;
    }

    .header .logo {
        height: 2.5vw;
        width: auto;
    }

.divider_header {
    border-bottom: 1px solid rgb(0, 45, 71);
    margin-top: 1vw;
    margin-bottom: 2vw;
    color: rgb(0,45,71);
}

.logo {
    padding-left: 10px;
}

/* ==== Einde HEADER ==== */


body {
    font-family:arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    font-size:0.9em;
}

.a4-container {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: auto;
    background: white;
    padding: 10mm;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-top: 1vw;
    margin-bottom: 1vw;
    background-image: url('../../media/image/CompasV2.png');
    background-size: contain;
    background-repeat: repeat-y;
    background-position: right;
}
h1 {
    font-size:1em;
}
h2 {
    text-align: center;
    font-size: 1em;
}

a {
    text-decoration: none;
}

#ftn1, #ftn2, #ftn3, #ftn4, #ftn5, #ftn6, #ftn7, #ftn8, #ftn9, #ftn10, #ftn11, #ftn12, #ftn13, #ftn14, #ftn15, #ftn16, #ftn17 {
    font-size: 0.6em;
}

.form-group, .form-group-break {
    margin-bottom: 15px;
    padding-right: 15px;
}

    .form-group-break {
        width: 100%;
    }

    .form-group-inline {
        display: flex;
        align-items: center;
        gap: 0px;
        justify-content: space-between;
    }

    .form-group-inline label {
        margin-right: 10px;
        font-weight: bold;
        
    }

    .form-group-inline label,
    .form-group-inline input {
        width: 50%;
    }


label {
    font-weight: bold;
    display: block;
    font-size: 0.9em;
}

input, select, fieldset {
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing:border-box;

}


textarea {
    resize: vertical; /* Allow vertical resize if needed */
    font-family: Arial, sans-serif;
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;

}

.input-field {
    width: auto;
    font-size: 0.9em;
}

.input-field {
    width: auto;
    font-size: 0.9em;
}

.signature {
    width: 50%;
}

textarea::placeholder, inputfield::placeholder {
    font-size: 0.8em; /* Adjust the size as needed */
}

.inline-group {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 25%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

table {
    width: 100%;
    border-collapse: collapse;
    justify-content: center;


}

    td:first-child {
        width: 10%; /* 10% voor de checkbox */
        justify-content:center;
    }

    td:nth-child(2) {
        width: 50%; /* 50% voor het label */
    }

    td:nth-child(3) {
        width: 40%; /* 40% voor het tekstveld */
    }

.isps-initial {
    width: auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin:5mm;
    box-sizing:border-box;
}

    .isps-initial, .isps-initial th, .isps-initial td {
        border: 1px solid #ccc;

    }

        .isps-initial th {
            padding: 10px;
            text-align: left;
        }

         .isps-initial td {
            padding: 3px;
            text-align: left;

        }

        .isps-initial th {
            background-color: rgb(0,45,71);
            color: white;
            font-size: 0.9em;
        }

        .isps-initial td {
            font-size: 0.9em;
        }


        .isps-initial tbody tr:hover {
            background-color: #e8e8e8;
        }

        .isps-initial input[type="checkbox"] {
            margin-right: 10px;
        }


.aide, .expanded {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    border: 1px solid #ccc;

}

 .aide th, .aide td, .expanded th, .expanded td {
    border: 1px solid #ccc;
}

    .aide th, .expanded th {
        padding: 10px;
        text-align: center;
    }

    .aide td {
        padding: 5px;
        text-align: center;
    }

        .aide td input[type="checkbox"], .expanded td input[type="checkbox"] {
            display: block;
            margin: auto;
        }

    .aide td:nth-child(2), .aide th:nth-child(2) {
        text-align: left;
    }

    .aide th, .expanded th {
        background-color: rgb(0,45,71);
        color: white;
    }

    .aide tbody tr:hover, .expanded tbody tr:hover {
        background-color: #e8e8e8;
    }



    .aide th.col-1, .aide td.col-1 {
        width: 5%; /* Adjust the width as needed */
    }

    .aide th.col-2, .aide td.col-2 {
        width: 40%; /* Adjust the width as needed */
    }

    .aide th.col-3, .aide td.col-3 {
        width: 5%; /* Adjust the width as needed */
    }

    .aide th.col-4, .aide td.col-4 {
        width: 5%; /* Adjust the width as needed */
    }

    .aide th.col-5, .aide td.col-5 {
        width: 45%; /* Adjust the width as needed */
    }


    .expanded td {
        padding: 5px;
     
    }


    .expanded th.col-1, .expanded td.col-1 {
        width: 5%; /* Adjust the width as needed */
    }

    .expanded th.col-2, .expanded td.col-2 {
        width: 20%; /* Adjust the width as needed */
    }

    .expanded th.col-3, .expanded td.col-3 {
        width: 45%; /* Adjust the width as needed */
    }

    .expanded th.col-4, .expanded td.col-4 {
        width: 30%; /* Adjust the width as needed */
    }





.drill {
   
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    border: 1px solid #ccc;


}

.drill td {
    padding: 5px;
    text-align: left;
    border: 1px solid #ccc;
    width:25%;
}

.drill tbody td:hover {
    background-color: #e8e8e8;
}

    ::placeholder {
        font-display: italic;
    }




.print-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;

}



/* Style the button */
.print-btn {
    background-color: rgb(0,45,71); /* Blue color */
    color: white; /* White text */
    padding: 10px 20px; /* Button padding */

    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

    /* Change button color on hover */
    .print-btn:hover {
        background-color: rgb(225,127,30);
    }



@media print {
    @media print {

        @page {
            size: A4;
            margin: 10mm 5mm 10mm 5mm; /* Top, Right, Bottom, Left */

        }


        body {
            background: none;

            font-size: 10px;
        }


        .header .title {
            font-size: 14px;
            font-weight: bold;
        }

        .header .logo {
            height: 10mm;
            width: auto;
        }

        .form-group-break {
            padding-top: 50px;
        }

        h2 {
            font-size: 14px;
        }

        .a4-container {
            box-shadow: none;
            border: none;
            margin-bottom: 10px;
            padding: 10mm;
            margin-top: 5px;

        }

        textarea {
            resize: vertical; /* Allow vertical resize if needed */
            font-family: Arial, sans-serif;
            font-size: 10px;
        }


        .page-break {
            page-break-after: always;
        }

        footer {
            display: none;
        }

        input, textarea, select {
            border: none; /* Remove borders when printing */
            box-shadow: none; /* Remove any box shadows */
        }

    }



        /* Hide the button on print */
        @media print {
            .print-btn-container {
                display: none;
            }
        }
    }