@font-face {
    font-family: 'DejaVu Sans';
    src: url('../dejavu-sans/DejaVuSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Center all buttons on the page */
button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    text-align: center;
    transition: background-color 0.3s ease;
}

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

/* Centering container for buttons */
button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Centering content in the middle of the page */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'DejaVu Sans', sans-serif;
 font-size: 11pt; /* Set font size to 11pt */
    line-height: 1.5; /* Set line height to 1.2 for better spacing */    
    text-align: center;
    margin: 0;
    background-color: #f9f9f9;
    color: #333;    
}

/* Style for the rating buttons */
#rating-buttons button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#rating-buttons button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Color the rating buttons based on value */
#rating-buttons button:nth-child(1) {
    background-color: #FF6347; /* Red */
    color: white;
}

#rating-buttons button:nth-child(2) {
    background-color: #FFA500; /* Orange */
    color: white;
}

#rating-buttons button:nth-child(3) {
    background-color: #FFD700; /* Yellow */
    color: black;
}

#rating-buttons button:nth-child(4) {
    background-color: #9ACD32; /* Yellow-Green */
    color: white;
}

#rating-buttons button:nth-child(5) {
    background-color: #32CD32; /* Green */
    color: white;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333;
}

#result {
    width: 80%;
    max-width: 800px;
    margin-top: 20px;
    text-align: left;    
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 8px;
    text-align: left;
}

/* Apply some padding for better readability */
body {
    padding: 20px;
}

/* Scrollable table for long data points */
.scrollable-table-container {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 10px;
}

#data-point-table th, #data-point-table td {
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #ddd;
}

#data-point-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Container for scrollable table */
.scrollable-table-container {
    overflow-x: auto; /* Enables horizontal scrolling */
    max-width: 90%; /* Limits the width of the table container to 90% of the screen width */
    margin: 0 auto 20px auto; /* Centers the table horizontally with some margin at the bottom */
    border: 1px solid #ddd;
    padding: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

th {
    background-color: deepskyblue; /* Blue background for table header */
    color: white; /* White text for feature names */
    padding: 8px;
    text-align: center;
}


#user-feedback {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

#feedback-form button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#feedback-form button:hover {
    background-color: #0056b3;
}

section {
    margin-bottom: 1in; /* Add 1 inch of space between sections */
}

/* Apply spacing adjustments for paragraphs and other text */
p {
    font-size: 11pt;
    line-height: 1.2;
    margin-bottom: 1em;
}

/* Style for the correctness buttons */
#correctness-buttons button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#correctness-buttons button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Color the rating buttons based on value */
#correctness-buttons button:nth-child(1) {
    background-color: #FF6347; /* Red */
    color: white;
}

#correctness-buttons button:nth-child(2) {
    background-color: #FFA500; /* Orange */
    color: white;
}

#correctness-buttons button:nth-child(3) {
    background-color: #FFD700; /* Yellow */
    color: black;
}

#correctness-buttons button:nth-child(4) {
    background-color: #9ACD32; /* Yellow-Green */
    color: white;
}

#correctness-buttons button:nth-child(5) {
    background-color: #32CD32; /* Green */
    color: white;
}

/* Style for the correctness buttons */
#fault-buttons button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#fault-buttons button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Color the rating buttons based on value */
#fault-buttons button:nth-child(1) {
    background-color: #FF6347; /* Red */
    color: white;
}

#fault-buttons button:nth-child(2) {
    background-color: #FFA500; /* Orange */
    color: white;
}

#fault-buttons button:nth-child(3) {
    background-color: #FFD700; /* Yellow */
    color: black;
}

#fault-buttons button:nth-child(4) {
    background-color: #9ACD32; /* Yellow-Green */
    color: white;
}

#fault-buttons button:nth-child(5) {
    background-color: #32CD32; /* Green */
    color: white;
}

/* Style for the correctness buttons */
#wo-buttons button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#wo-buttons button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Color the rating buttons based on value */
#wo-buttons button:nth-child(1) {
    background-color: #FF6347; /* Red */
    color: white;
}

#wo-buttons button:nth-child(2) {
    background-color: #FFA500; /* Orange */
    color: white;
}

#wo-buttons button:nth-child(3) {
    background-color: #FFD700; /* Yellow */
    color: black;
}

#wo-buttons button:nth-child(4) {
    background-color: #9ACD32; /* Yellow-Green */
    color: white;
}

#wo-buttons button:nth-child(5) {
    background-color: #32CD32; /* Green */
    color: white;
}