* {
box-sizing:border-box;
}
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #f8f9fa;
--form-background-color: #ffffff;
--border-color: #ced4da;
--border-radius: 0.25rem;
--box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

body {
font-family: 'Arial', sans-serif;
background-color: var(--background-color);
padding: 20px;
}

#logo {
display:block;
margin: 0 auto;
}

form {
background-color: var(--form-background-color);
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
max-width: 800px;
margin: auto;
}

.form-section {
margin-bottom: 20px;
}

.form-section h2 {
color: var(--primary-color);
margin-bottom: 15px;
}

.successmessage {
font-size:24px;font-weight:bold;text-align:center;background:#BCF9C7;color:#000;width:500px;margin:0 auto;border-radius:4px;padding:5px;display:block;margin-bottom:20px;
}

.failmessage {
font-size:24px;font-weight:bold;text-align:center;background:#FE9B9B;color:#000;width:500px;margin:0 auto;border-radius:4px;padding:5px;display:block;margin-bottom:20px;
}

label {
font-size:19px;
display: block;
margin-bottom: 0;
margin-bottom: 25px;
}

input, select, textarea {
width: 100%;
padding: 10px;
margin-top:4px;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
font-size:17px;
}

textarea {
height:200px;
}

textarea {
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #888 #ffffff; /* Scroll thumb and track */
}

/* For Webkit browsers */
textarea::-webkit-scrollbar {
width: 12px;
}

textarea::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}

textarea::-webkit-scrollbar-track {
background: #ffffff;
}

input[type="checkbox"], input[type="radio"] {
width: auto;
margin-right: 10px;
margin-bottom: 0;
}

label.checkboxlabel {margin-bottom:15px;}

.radio-container {
display: flex;
align-items: center;
margin-bottom: 7px; /* Optional: Add some space between each radio group */
margin-top:7px;
padding-bottom: 4px; /* Optional: Add some space between each radio group */
padding-top:4px;
border-bottom:1px dashed #ddd;
}

.radio-container input[type="radio"] {
margin-right: 10px;
}


.has-radios .checkboxlabel {
margin:0!important;
}

input[type="submit"] {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: var(--border-radius);
transition: background-color 0.2s;
}

input[type="submit"]:hover {
opacity:.7;
}


.optionArea {
width:75px;
padding-top:12px;
display:inline-block;
margin:6px;
border:1px solid #ccc;
border-radius:5px;
text-align:center;
align-items:center;
}

.optionArea2 {
width:85px;
padding-top:7px;
display:inline-block;
margin:6px;
border:1px solid #ccc;
border-radius:5px;
text-align:center;
align-items:center;
}

#add-another {
background-color: #007BFF; /* Primary blue color */
color: white; /* White text color */
padding: 10px 20px; /* Padding for the button */
font-size: 16px; /* Font size for the text */
font-weight: bold; /* Bold text */
border: none; /* Remove default border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

#add-another:hover {
background-color: #0056b3; /* Darker blue on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

#add-another:active {
background-color: #003f7f; /* Even darker blue when clicked */
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow when clicked */
}

#add-another:focus {
outline: none; /* Remove default outline */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Outline with blue shadow */
}



#costs_table h2 {
color: #007bff;
}

#costs_table .table {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
margin-bottom: 20px;
}

#costs_table .table-row {
display: contents!important;
}

#costs_table .table-cell {
display: flex;
flex-direction: column;
justify-content: center;
}

#costs_table .table-cell input[type="text"],
#costs_table .table-cell input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 0.25rem;
box-sizing: border-box;
}

#costs_table .table-cell label {
margin-bottom: 5px;
}

#costs_table .table-row.full-width .table-cell {
grid-column: span 2;
}

#costs_table .total {
font-weight: bold;
font-size:24px!important;
}



#costs_table .blank-row {
display:block;
background:#eee!important;
}









@media (max-width: 768px) {
body {
padding: 0;
}

form {
padding: 10px;
}
}

@media (max-width: 500px) {

* {font-size:105%;}



}