#nominal-heel{
    background-color: rgb(207, 202, 207);

}






.homepage-button-container {
    margin-top: 20px; /* Adjust spacing as needed */
    text-align: center; /* Center-align the button */
}

th {
    background-color: #e8d6e3 !important;

}   
.homepage-button {
    background-color: #e8d6e3; /* Button color */
    color: #4c09c9; /* Button text color */
    padding: 10px 15px; /* Button padding */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from link */
    font-weight: bold; /* Bold text */
    display: inline-block; /* Required for padding and center-align */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.homepage-button:hover {
    background-color: #eaa5ec; /* Darker color on hover */
}

main {
    background-color: rgb(206, 243, 243);
    margin-left: 20px; /* Shift main content to the right */


}

section {

    padding-left: 20px; /* Offset input values section */
   /* max-height: 80vh; */
    overflow-y: auto;
}

h2 {
    margin-left: -20px; /* Counteract padding-left of section */
}

.input-row {
    margin-bottom: 1em;
}

.input-row label {
    display: inline-block;
    font-size: 1em; /* Larger font size for labels */
    margin-right: 1em;
}




/* CSS styling sheet original below this point********************************/

.pages{
    display:flex;
    flex-direction: row;
    
}

.input-row input:-webkit-autofill,
.input-row input:-webkit-autofill:hover, 
.input-row input:-webkit-autofill:focus, 
.input-row select:-webkit-autofill,
.input-row select:-webkit-autofill:hover, 
.input-row select:-webkit-autofill:focus {
    font-weight: bold !important;
    font-size: .95em !important;
    color: red !important;
    -webkit-text-fill-color: red !important;
    transition: background-color 5000s ease-in-out 0s; /* Forces the background transition to be very slow, effectively maintaining the background color */
}


.input-row input, .input-row select {

    font-weight: bold;
    font-size: .95em;
    color: red;
}


.checkbox-container {
    display: flex;
    align-items: center; /* Vertically center aligns the checkbox and label */
    gap: 8px; /* Adds some space between the checkbox and the label */
    margin-bottom: 10px;
}


.input-error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 1em;
    font-weight: bold;
    color: red;
    opacity: 1; /* Firefox */
}

.input-error:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 1em;
    font-weight: bold;
    color: red;
}

.input-error::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 1em;
    font-weight: bold;
    color: red;
}

/* Style for the placeholder text */
input[type="text"]::placeholder {
    font-style: italic;
    font-size: 1em;
    
    /* While you can specify font-family here, it may not work as expected across all browsers */
}

.input-calculate {
    margin-top: 10px;
    background-color: #e8d6e3; /* Change the background color */
    font-size: 1em; /* Change the font size */
    color: rgb(19, 151, 48); /* Change the text color */
    padding: 10px; /* Add some padding */
    /* Add any other CSS properties as needed */
}

.input-calculate:hover {
    background-color: #eaa5ec; /* Darker green background on hover */
}


/* CSS styling for the button element */
button {
    font-weight: bold;
    background-color: #e8d6e3; /* Green background */
    color: #4c09c9; /* White text color */
    padding: 10px 10px; /* Padding for the button */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor style on hover */
    font-size: 1em; /* Font size */
}

/* Hover effect for the button */
button:hover {
    background-color: #eaa5ec; /* Darker green background on hover */
}



body {
    background-color: rgb(206, 243, 243);
    display: flex;
    flex-direction: colummn;

    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    align-items: center;
}

header {
    
    background-color: #8980ce;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px; /* Optional: Add rounded corners */
}

/* Add styling for h1 element */
header h1 {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px; /* Add padding to create space between text and border */
    padding-bottom: 5px;
    
}

nav {
    background-color: rgb(206, 243, 243);
    padding: 10px;
}

ul {
 
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}

li {
 
    margin-bottom: 10px;
    padding: 5px;
}

a {
    display: block;
    font-weight: bold;
    color: #4c09c9;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    background-color: #e8d6e3;
    transition: background-color 0.3s;
}

a:hover {
    background-color: #eaa5ec;
}

/* Add styling for select elements */
select {
    font-size: 20px; /* Adjust font size for select elements */
}




/*moble specific styles*************************************/

@media only screen and (min-width: 450px) {

    /* Apply styles only when the screen width is 600px or larger */
    body {
        background-color: rgb(206, 243, 243);
        display: flex;
        flex-direction: column;
        align-items: center; /* Correct alignment to the start */

    }

    .input-row {
        display: flex;
        align-items: flex-start; /* Align items vertically */
    }
    
    .input-row label {
        flex: 2; /* Adjust flex-grow value as needed */
        /* Additional styling */
    }
    
    .input-row input, .input-row select {
        max-width: 200px; /* or any other value that suits your design */
        width: 100%; /* Ensures the input takes up available space up to max-width */
        box-sizing: border-box; /* Include padding and border in the element's total width */
        font-weight: bold;
        font-size: .95em;
        color: red;
        margin-right: 5em;
    }



    header h1 {
        /* If you want to specifically style the h1 differently,
           you can do it here. For example, to center it: */
        text-align: center;
    }

    nav {
        margin-top: 20px;
        width: 300px; /* Adjust width as needed */
    }
    
    ul {
        list-style-type: none; /* Remove default list styles */
        padding: 0; /* Remove default padding */
        margin-top: 30px;
    }

    li {
        text-align: center; /* Center the list items */
        padding: 0 20px; /* Add padding to the left and right sides */
        margin: 10px 0; /* Add margin to separate list items */
    }

    a {
        display: inline-block; /* Display as block to allow setting width */
        max-width: 100px; /* Limit the maximum width */
        text-align: left; /* Center the text */
        padding: 10px; /* Add padding */
        border: 1px solid #ddd; /* Optional: Add border for visual appeal */
        text-decoration: none; /* Remove default underline */
        color: #4c09c9; /* Text color */
        border-radius: 5px; /* Optional: Add rounded corners */
    }

    
}

@media only screen and (max-width: 450px) {
    /* Mobile-specific styles */


    .checkbox-container {

        display: flex;
        align-items: center; /* Vertically center aligns the checkbox and label */
        gap: 8px; /* Adds some space between the checkbox and the label */
        margin-bottom: 5px;
    }

    .input-calculate {
        margin-top: 10px;
        background-color: #e8d6e3; /* Change the background color */
        font-size: .85em; /* Change the font size */
        color: rgb(19, 151, 48); /* Change the text color */
        padding: 10px; /* Add some padding */
        /* Add any other CSS properties as needed */
    }

    section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 2px; /* Offset input values section */
        max-height: 90 vh;
        overflow-y: auto;
    }

    main {
        background-color: rgb(206, 243, 243);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }

 
    .input-row {
        display: flex;
        align-items: flex-start; /* Align items vertically */
    }
    
    .input-row label {
        flex: 2; /* Adjust flex-grow value as needed */
        /* Additional styling */
    }
    
    .input-row input, .input-row select {
        max-width: 200px; /* or any other value that suits your design */
        width: 100%; /* Ensures the input takes up available space up to max-width */
        box-sizing: border-box; /* Include padding and border in the element's total width */
        font-weight: bold;
        font-size: .95em;
        color: red;
        margin-right: 2em;
    }
    

    body {
        background-color: rgb(206, 243, 243);
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Correct alignment to the start */
        margin-left: 20px;
        margin-right: 20px;

    }

    header {
        width: 100%; /* Makes header take full width of its parent */
        display: flex;
        justify-content: center; /* Centers header content horizontally */
        margin-bottom: 20px;
  
    }

    header h1 {
        /* If you want to specifically style the h1 differently,
           you can do it here. For example, to center it: */
        display: flexbox;
        flex-direction: colum;
        text-align: center;
         
    }
    .mainpage{
        width: 100%; /* Makes header take full width of its parent */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centers header content horizontally */
        margin-bottom: 20px;
    }

    ul {
        list-style-type: none; /* Remove default list styles */
        padding: 0; /* Remove default padding */
        margin-top: 10px;
    }


    li {

        text-align: center; /* Center the list items */
        padding: 0;
        margin: 20px 10px; /* Add margin to separate list items */
    }

    a {
        display: inline-block; /* Display as block to allow setting width */
        max-width: 100px; /* Limit the maximum width */
        text-align: center; /* Center the text */
        padding: 5px; /* Add padding */
        border: 1px solid #ddd; /* Optional: Add border for visual appeal */
        text-decoration: none; /* Remove default underline */
        color: #3e05a7; /* Text color */
        border-radius: 5px; /* Optional: Add rounded corners */
    }



    
}