/* Style for the overall page */

/*
body {
    margin: 0;
    padding:0;
    height: 100%;
}*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* Enables both X and Y scroll */
  }

/* Box container with background */
.box {
    background-color: #f5f5f5;  /* Very light gray background */
    border-radius: 10px;  /* Rounded corners */
    padding: 20px;  /* Space inside the box around the content */
    /*color: white;*/
    /*width: 800px;*/   /* Fixed width for the box */
    width: 80%;                  /* 80% of window width */
    height: 80vh;                /* 80% of viewport height */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Light shadow for depth */

    position: absolute;
    top: 50%;  /* Position the top of the box 50% from the top */
    left: 50%;  /* Position the left of the box 50% from the left */
    transform: translate(-50%, -50%);  /* Adjust to perfectly center the box */
    
    border: 2px solid #ccc;  /* Light gray border */
    word-wrap: break-word;

    /*max-height: 600px;*/       /* Limit height */
    overflow-y: auto;        /* Enable vertical scroll if needed */
}


/* Style for the heading */
.box h1 {
    font-size: 24px;
    color: #333;  /* Dark gray text */
    margin-bottom: 15px;  /* Space below the heading */
}

/* Style for the paragraph inside the box */
.box p {
    font-size: 16px;
    color: #555;  /* Medium gray text */
    margin-bottom: 20px;  /* Space below the paragraph */
}

/* Style for the form elements inside the box */
.box form {
    display: flex;
    flex-direction: column;  /* Stack the form elements vertically */
}

.box form label {
    font-size: 14px;
    margin-bottom: 5px;  /* Space between the label and input field */
}

.box form input[type="text"],
.box form input[type="file"] {
    padding: 8px;
    margin-bottom: 15px;  /* Space between the input fields */
    border: 1px solid #ccc;  /* Border for the input fields */
    border-radius: 5px;  /* Rounded corners for the input fields */
    font-size: 14px;
}

.box form input[type="reset"],
.box form input[type="submit"] {
    padding: 6px 12px;
    background-color: #4CAF50;  /* Green background for the submit button */
    color: white;
    border: none;
    border-radius: 5px;  /* Rounded corners for the button */
    cursor: pointer;  /* Change cursor to pointer on hover */
    font-size: 16px;
    width: 100px; /* Make the width auto (default), or use a specific width like 120px */
}

.box form input[type="submit"]:hover {
    background-color: #45a049;  /* Darker green on hover */
}