/* General reset for consistent styling */
/* html, body, h1, h2, h3, p, ul, ol, li, table, th, td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
}

/* Toolbox container styling */
.toolbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 50%; */
    max-width: 90%;
    margin: 10px auto;
    /* background-color: white; */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Styling div elements inside toolbox if needed */
.toolbox div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.toolbox fieldset {
    border: 2px solid #007BFF;
    padding: 20px;
}
/* Table styling */
.toolbox table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    border: 2px solid #007BFF;
    padding: 20px;
}

.toolbox tr {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}
/* Table cell and header styling */
.toolbox td, .toolbox th {
    display: flex;
    padding: 20px;
    vertical-align: middle;
}

/* Header row styling */
.toolbox th {
    font-size: 1.5rem;
    color: white;
    background-color: #007BFF;
    justify-content: center;
    text-align: center;
}

/* Data cell styling */
.toolbox td {
    background-color: #f9f9f9;
    text-align: right;
}

/* Alternate row styling */
.toolbox tr:nth-child(even) td {
    background-color: #e9ecef;
}

/* Select dropdown styling */
.toolbox select, input {
    width: 100%;
    font-size: 1.2rem;
    justify-content: right;
}

/* Legend and label styling */
.toolbox legend {
    font-size: 1.3rem;
}

.toolbox label {
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: block;
}
/* Responsive Image */
.toolbox img {
    width: 100%;
    max-width: 300px; /* Max width constraint for large screens */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px;
    margin: 10px 0;
    object-fit: cover; /* Ensures the image covers the allocated space neatly */
}

.toolbox input[type="submit"] {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
 }

 .toolbox input[type="submit"]:hover {
    background-color: #0056b3;
 }

 .toolbox input[type="number"] {
    width: 100%;
    padding: 8px;
    font-size: 1em;
    border-radius: 4px;
    border: 2px solid #ccc;
 }

/* Responsive layout for rows and columns */
.toolbox-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}
.toolbox-column {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%; /* Restrict width for each column to 50% */
}
/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .toolbox {
        width: 100%; 
    }
    .toolbox td, .toolbox th, .toolbox tr , .toolbox legend {
        font-size: 1rem; 
    }
    .toolbox select {
        width: 100%; /* Make select dropdown full width */
    }
    .toolbox-column {
        max-width: 100%; /* Each image takes full width on small screens */
    }

    .toolbox img {
        max-width: 120px; /* Adjust max width for smaller screens */
    }
}

/* Adjustments for medium screens */
@media (min-width: 601px) {
    .toolbox {
        width: 90%;
    }
    .toolbox td, .toolbox th, .toolbox tr, .toolbox legend  {
        font-size: 1.1rem;
    }
    .toolbox img {
        max-width: 175px; /* Standard size for medium screens */
    }
}

/* Adjustments for large screens */
@media (min-width: 1024px) {
    .toolbox {
        width: 90%;
    }
    .toolbox td, .toolbox th, .toolbox tr, .toolbox legend  {
        font-size: 1.1rem;
    }
    .toolbox img {
        max-width: 200px; /* Slightly larger images on large screens */
    }
}