body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

h1 {
    margin-bottom: 20px;
}

.radio-container {
    display: flex;
    flex-direction: row;
    gap: 5px; /* Add spacing between radio buttons */
    margin-bottom: 20px; /* Add space below the textbox */
    font-size: 16px; /* Set a readable font size */
}

input[type="radio"] {
    margin-right: 0px; /* Add spacing between the radio button and its label */
    accent-color: #007bff; /* Set the color of the radio button */
}

input[type="text"]:enabled {
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

#digitInput {
    display: block; /* Ensure it takes up its own line */
    width: 200px; /* Set a consistent width */
    padding: 10px; /* Add padding for better usability */
    font-size: 18px; /* Set a readable font size */
    margin: 10px auto; /* Center the input and add vertical spacing */
    border: 2px solid #ccc; /* Add a border for styling */
    border-radius: 5px; /* Add rounded corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
    text-align: center; /* Center the placeholder and input text */
    background-color: #f9f9f9; /* Light background for better contrast */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus effects */
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

button {
    width: 200px; /* Set a consistent width for all buttons */
    padding: 15px 30px;
    font-size: 18px; /* Set a readable font size */
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

button:hover {
    background-color: #007bff;
    color: white;
}

button:active {
    background-color: #0056b3;
}

button:enabled {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

button:disabled {
    background-color: #ccc; /* Set a grey background */
    color: #666; /* Set a lighter text color */
    cursor: not-allowed; /* Show a "not-allowed" cursor */
    border: 1px solid #aaa; /* Optional: Adjust border color */
}

#statusTextbox {
    display: block; /* Ensure it takes up its own line */
    width: 100%; /* Make it responsive to the container width */
    max-width: 300px; /* Set a maximum width for readability */
    height: 30px;
    margin-bottom: 10px; /* Add space below the textbox */
    padding: 5px; /* Add padding for better readability */
    border: 1px solid #ccc; /* Add a border for styling */
    border-radius: 5px; /* Add rounded corners */
    resize: none; /* Disable manual resizing */
    overflow: hidden; /* Hide scrollbars */
    font-size: 12px; /* Set a readable font size */
    line-height: 1.5; /* Improve readability */
    white-space: pre; /* Preserves spaces and line breaks without wrapping */
    overflow-x: auto; /* Adds horizontal scrolling if the text overflows */
}

#statusTextbox:disabled {
    color: #000 !important; /* Change text color (dark gray) */
    background-color: #f9f9f9; /* Light background for disabled state */
    opacity: 1 !important; /* Ensure full opacity to override browser defaults */
    -webkit-text-fill-color: #000 !important; /* Fix for some browsers like Firefox */
}

.nda-checkbox-container {
    display: flex;
    flex-direction: row; /* Align checkbox and label in a row */
    align-items: flex-start; /* Align items to the left */
    gap: 5px; /* Add spacing between checkbox and label */
    margin-bottom: 10px; /* Add space below the textbox */
}

.nda-checkbox-container label {
    white-space: normal; /* Allow text to wrap */
    max-width: 290px; /* Set a maximum width for the label */
    line-height: 1.5; /* Adjust line height for better readability */
    font-size: 12px; /* Set a readable font size */
}

.user-checkbox-container {
    display: flex;
    flex-direction: row; /* Align checkbox and label in a row */
    align-items: flex-start; /* Align items to the left */
    gap: 5px; /* Add spacing between checkbox and label */
}

.user-checkbox-container label {
    white-space: normal; /* Allow text to wrap */
    max-width: 290px; /* Set a maximum width for the label */
    line-height: 1.5; /* Adjust line height for better readability */
    font-size: 12px; /* Set a readable font size */
}

.user-checkbox-container input:disabled + label {
    color: gray; /* Make the text gray */
    cursor: not-allowed; /* Change the cursor to indicate it's disabled */
    opacity: 0.6; /* Optional: Make it slightly transparent */
}