.documentation-container {
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 5px;
    margin-top: 10px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.documentation-container h5 {
    font-family: Arial, sans-serif;
    /* color: blue; */
    line-height: 1.6;
    /* Add any additional styles here */
}

.documentation-container h4 {
    font-family: Arial, sans-serif;
    color: blue;
    line-height: 1.6;
    /* Add any additional styles here */
}

.documentation-container h3 {
    color: blue;
    /* Add any additional styles here */
}    

.custom-list {
    /* color: blue; */
}

.documentation-container ol, .documentation-container p {
    margin-left: 20px;
}

#gen_curves {
    background-color: rgba(128, 128, 128, 0.4); /* Gray with opacity */
    color: black; /* Black text color for better contrast */
    border-radius: 20px; /* Rounded corners for oval shape */
    width: 290px; /* Same width as #download_csv */
    max-width: 290px;
    padding: 10px 20px; /*Uniform padding for consistent size */
    border: none; /* No border */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#download_csv {
    background-color: #4a90e2; /* A medium, subdued blue */
    color: white; /* White text for contrast */
    border-radius: 20px; /* Same radius for oval shape */
    width: 224px;
    max-width: 224px;
    padding: 10px 20px; /* Same padding for consistent size */
    border: none; /* Assuming you don't want a border */
    box-sizing: border-box;
    /* Include any other styles that you have for the green button to maintain consistency */
}


#gen_rand {
    background-color: #4a90e2; /* A medium, subdued blue */
    color: white; /* White text for contrast */
    width: 280px;
    max-width: 280px;
    border-radius: 20px; /* Adjust as needed for oval shape */
    /* Other styles */
    padding: 10px 20px; /* Add padding to increase the content area */
    border: none; /* Assuming you don't want a border, but adjust as needed */
}


#sampleSize {
    border: 1px solid #4a90e2; /* Example border, change as needed */
    width: 125px;
    max-width: 125px;
    border-radius: 20px; /* This gives it the oval shape */
    outline: none; /* Removes the default focus outline, you may want to style the focus state differently */
    /* Add additional styling here as needed */
    /* min-width: 120px; Prevents the input from becoming too small */
    padding: 10px 20px;
    box-sizing: border-box;
    margin: 0 auto; /* Centers the input field if its width is less than the container */
    /* display: block; This will allow margin: auto to work */
}

#show_documentation {
    background-color: rgba(128, 128, 128, 0.4); /* Gray with opacity */
    color: black; /* White text color for better contrast */
    border-radius: 25px; /* Keeps the oval shape */
    /* Other styles remain the same */
    padding: 10px 20px;
    border: none;
}


/* Responsive design */
@media (max-width: 768px) {
    .documentation-container {
        padding: 10px;
    }

    .documentation-container ol, .documentation-container p {
        margin-left: 10px;
    }
}