h1 {
    font-family: 'Times New Roman', serif; /* Ensuring the font is sans-serif */
    font-size: 72px; /* Increase the font size as needed */
    text-align: center; /* Center-align the text */
}

h2 {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 20px; /* Increase the font size as needed */
    text-align: right; /* Center-align the text */
}

h3 {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 20px; /* Increase the font size as needed */
    text-align: center; /* Center-align the text */
}

h4 {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px; /* Increased font size for better visibility */
    text-align: left;
    cursor: pointer; /* Changes the cursor to indicate it's clickable */
    color: #007bff; /* A standard link color to suggest interactivity */
    text-decoration: underline; /* Underline to mimic a link */
    padding-left: 50px; /* Indent the text inside the heading */
}

h5 {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px; /* Increased font size for better visibility */
    text-align: centre;
    color: grey; /* A standard link color to suggest interactivity */
}

body {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 16px; /* Increase the font size as needed */
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #ffffff; /* Example background color */
}

.content-container {
    display: flex;
    flex-direction: column;
    width: 100%; /* Adjust this to set the desired width */
}

.button-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Adjust as needed for spacing between buttons and table */
}

.button-row > div {
    flex-grow: 1;
    text-align: center; /* Centers the content of each div */
}

#ductulateTable {
    width: 100%; /* Ensures the table stretches to fill the parent container */
}

.user-guide-header {
    display: flex;
    justify-content: right; /* Center the contents */
    align-items: center;
    margin-left: 100px; /* Adjust this value to align under the 'Ductulate' header */
    margin-right: 220px; /* Adjust this value to align under the 'Ductulate' header */
}

.criteria-header {
    display: flex;
    justify-content: right; /* Center the contents */
    align-items: center;
    margin-left: 100px; /* Adjust this value to align under the 'Ductulate' header */
    margin-right: 220px; /* Adjust this value to align under the 'Ductulate' header */
}

.settings-header {
    display: flex;
    justify-content: right; /* Center the contents */
    align-items: center;
    margin-left: 100px; /* Adjust this value to align under the 'Ductulate' header */
    margin-right: 220px; /* Adjust this value to align under the 'Ductulate' header */
}

.settings-btn {
    background-color: #ffffff;  
    padding: 0px 0px; /* Reducing padding makes the button smaller */
    font-size: 12px; /* Adjust font size as needed */
    margin-left: 10px; /* Adjust the value as needed for desired spacing */
    border: 1px solid #ffffff; /* Optional: adds a light border to the button */
    /* Add any other button styling properties here */
}

.cog-icon {
    width: 20px; /* Smaller width for the cog icon */
    height: auto; /* Maintains the aspect ratio of the icon */
    align: right; /* Center-align the text */
}

.criteriaButton-btn {
    background-color: #ffffff;  
    padding: 0px 0px; /* Reducing padding makes the button smaller */
    font-size: 12px; /* Adjust font size as needed */
    margin-left: 10px; /* Adjust the value as needed for desired spacing */
    border: 1px solid #ffffff; /* Optional: adds a light border to the button */
    /* Add any other button styling properties here */
}

table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    margin-bottom: 10px;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #2B4570;
    color: #ffffff;
    font-weight: bold;
}
td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
    /* background-color: #a0d2eb;  */
    color: black; /* Text color for data cells */
}

/* Zebra Striping for all but the first column and last row */
tr:not(:last-child):nth-child(odd) td:nth-child(n+2) {
    background-color: #A8D0DB; /* Lighter color for odd rows */
}

tr:not(:last-child):nth-child(even) td:nth-child(n+2) {
    background-color: #D4E8ED; /* Slightly darker color for even rows */
}

/* Reset background color for the first column and last row */
tr td:first-child,
tr:last-child td {
    background-color: transparent;
}

/* Remove all borders for the last row */
tr:last-child td {
    text-align: left; /* Aligns content to the left */
    border: none;
}

/* Remove all borders from the first column */
tr td:first-child {
    border: none;
}

.transparent-header-cell {
    background-color: transparent;
    border: none;
}

#Globalinputsdeleteheader{
    border: none;
    background-color: transparent;
}

#IDcolumn{
    border: none;
    background-color: transparent;
    color: transparent;

}


input[type="text"],
input[type="number"],
select,
.output {
    width: 100%;
    box-sizing: border-box;
}
.output {
    padding: 8px;
}
.hidden-input {
    display: none;
}
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}


.table-container {
    display: flex;
    align-items: flex-start;
}

/* Style for Delete Button */
.delete-btn {
    /* padding: 4px 8px; */
    background-color: #ffffff; /* Red color for delete button */
    color: red;
    border: none;
    cursor: pointer;
    font-size: 25px; /* Increase the font size as needed */
}

.delete-btn:hover {
    color: rgb(151, 3, 3);
}

/* Style for Add Row Button */
.add-btn {
    /* padding: 4px 8px; */
    background-color: #ffffff; 
    color: #318b5b;
    border: none;
    cursor: pointer;
    font-size: 25px; /* Increase the font size as needed */
}

.add-btn:hover {
    color: #1b4e33; /* Darker shade on hover */
}

.heading {
    margin-right: 10px; /* Ensures a bit of space between the heading and the button */
}


/* -------------------------------------------------------------------------------------------------------------------- */
/* -----------------------------------------------------MODALS--------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */

/* The Modal (background) */
.criteria-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal (background) */
.settings-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.criteria-modal-content {
background-color: #fefefe;
margin: 10% auto; /* 15% from the top and centered */
padding: 10px;
border: 2px solid #888;
/* text-align: left; Aligns content to the left */
width: fit-content; /* Adjusts to the width of the table */
height: fit-content; /* Adjusts to the height of the table */
max-width: 95%; /* Prevents the modal from getting too wide on large screens */
max-height: 95%; /* Prevents the modal from getting too wide on large screens */
}

/* Modal Content */
.settings-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 10px;
    border: 2px solid #888;
    /* text-align: left; Aligns content to the left */
    width: fit-content; /* Adjusts to the width of the table */
    height: fit-content; /* Adjusts to the height of the table */
    max-width: 95%; /* Prevents the modal from getting too wide on large screens */
    max-height: 95%; /* Prevents the modal from getting too wide on large screens */
    }

/* The Close Button */
.settingsclose {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.settingsclose:hover,
.settingslose:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Close Modal Button Style */
.settings-close-modal-btn {
    display: block;
    margin-top: 0px; /* Gap from the table */
    margin-left: auto; /* Right justify */
    margin-right: 0;
    padding: 8px 16px; /* Button padding */
    background-color: #2B4570; /* Button background color */
    color: white; /* Button text color */
    border: none; /* No border */
    cursor: pointer; /* Cursor style */
}

.settings-close-modal-btn:hover {
    background-color: #1c2e4a; /* Darken on hover */
}

/* Close Modal Button Style */
.feedback-submit-btn {
    display: block;
    margin-top: 0px; /* Gap from the table */
    margin-left: auto; /* Right justify */
    margin-right: 0;
    padding: 8px 16px; /* Button padding */
    background-color: #2B4570; /* Button background color */
    color: white; /* Button text color */
    border: none; /* No border */
    cursor: pointer; /* Cursor style */
}

.feedback-submit-btn:hover {
    background-color: #1c2e4a; /* Darken on hover */
}


.info-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.info-modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centered horizontally and vertically */
    padding: 10px;
    border: 2px solid #888;
    width: fit-content; /* Adjusts to the width of the table */
    height: fit-content; /* Adjusts to the height of the table */
    min-width: 25%; /* Prevents the modal from getting too wide on large screens */
    min-height: 25%; /* Prevents the modal from getting too high on large screens */
    max-width: 95%; /* Prevents the modal from getting too wide on large screens */
    max-height: 95%; /* Prevents the modal from getting too high on large screens */
}

.info-modal-content input[type="text"],
.info-modal-content textarea {
    width: calc(100% - 20px); /* Adjusts width accounting for padding */
    padding: 10px; /* Adds padding inside the fields */
    margin-bottom: 10px; /* Adds space below the fields */
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}

.user-info-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.user-info-modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Centered horizontally and vertically */
    padding: 10px;
    border: 2px solid #888;
    width: fit-content; /* Adjusts to the width of the table */
    height: fit-content; /* Adjusts to the height of the table */
    min-width: 25%; /* Prevents the modal from getting too wide on large screens */
    min-height: 25%; /* Prevents the modal from getting too high on large screens */
    max-width: 95%; /* Prevents the modal from getting too wide on large screens */
    max-height: 95%; /* Prevents the modal from getting too high on large screens */
}

.info-icon {
    cursor: pointer; /* Changes the cursor to a hand pointer when hovering over the element */
}

.infoclose {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.infoclose:hover{
    cursor: pointer;
}
.infoclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#feedbackRatings button {
    background: none; /* Remove background color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer when hovering over the button */
}

#feedbackRatings button img {
    width: 30%; /* Reduce image width by 50% */
    height: auto; /* Maintain the aspect ratio */
    display: inline-block; /* Allows images to sit next to each other */
}