.grid { display: flex; flex-wrap: wrap; gap: 10px; }

.fieldgroup {
    display: grid;
    /* Create 2 equal columns */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Space between the 2x2 blocks */
    gap: 20px;
    position: relative;
}

.field {
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    gap: 8px;               /* Consistent space between label, p, and input */
    box-sizing: border-box;
}

.fieldhoriz {
    display: flex;
    flex-direction: row; /* Stacks children horizontally */
    gap: 8px;               /* Consistent space between label, p, and input */
    box-sizing: border-box;
}

.fieldrow {
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    gap: 8px;               /* Consistent space between label, p, and input */
    box-sizing: border-box;
    grid-column: 1 / -1;
    margin-top: 0px;
    margin-bottom:0px;
}

.fieldhorizrow {
    display: flex;
    flex-direction: row; /* Stacks children horizontally */
    gap: 8px;               /* Consistent space between label, p, and input */
    box-sizing: border-box;
    grid-column: 1 / -1;
}

label, legend { 
    display: block !important;
    font-weight: bold;
    /* flex: 1;*/ /* Allow label to take remaining space */
    line-height: 1.2; /* Fixed height for the text line */
}

sup {
    line-height: 0;        /* Prevents the sup from pushing the line height */
/*    vertical-align: baseline;
    position: relative;
    top: -0.4em;*/           /* Manually lift it back up */
}

.fielddesc {
	display: block;
}

input, select
{
    appearance: none;
    -moz-appearance: none;
    background-image: none;
    background-color: var(--background);
    color: var(--stdtext);
}

select
{
    background-image: 
        linear-gradient(45deg, transparent 50%, var(--stdtext) 50%),
        linear-gradient(135deg, var(--stdtext) 50%, transparent 50%);
    background-position: 
        calc(100% - 12px) calc(50%), 
        calc(100% - 5px) calc(50%);
    background-size: 
        7px 7px,
        7px 7px;
    background-repeat: no-repeat;
    
    padding-right: 25px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    
    width: 1.2em;
    height: 1.2em;
    background-color: var(--background);
    border: 1px solid transparent;
    border-radius: 3px;
    
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

/* When checked, just change the background or add a dot */
input[type="checkbox"]:checked {
    background-color: var(--background);
}

/* This adds a simple small white square inside when checked */
input[type="checkbox"]:checked::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    background-color: var(--stdtext);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); /* This is a "Check" shape! */
}

textarea
{
    appearance: none;
    -moz-appearance: none;
    background-image: none;
    background-color: var(--background);
    color: var(--stdtext);
}

button
{
	padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    transition: transform 0.1s, opacity 0.2s;
    background-color: var(--background);
    color: var(--stdtext);
    margin-left:10px;
    margin-bottom:10px;
}

button:active
{
    transform: scale(0.98);
}

.postcode
{
    width: 100px;
}

.field.disabled label,
.fieldhoriz.disabled label,
.fieldrow.disabled label,
.fieldhorizrow.disabled label,
.field.disabled legend,
.fieldhoriz.disabled legend,
.fieldrow.disabled legend,
.fieldhorizrow.disabled legend,
.field.disabled p,
.fieldhoriz.disabled p,
.fieldrow.disabled p,
.fieldhorizrow.disabled p,
.fieldhoriz.disabled span,
.fieldrow.disabled span,
.fieldhorizrow.disabled span,
.field.disabled span {
    color: var(--stdtext);
}
.field.disabled input,
.fieldhoriz.disabled input,
.fieldrow.disabled input,
.fieldhorizrow.disabled input,
.field.disabled textarea,
.fieldhoriz.disabled textarea,
.fieldrow.disabled textarea,
.fieldhorizrow.disabled textarea,
.fieldhoriz.disabled select,
.fieldrow.disabled select,
.fieldhorizrow.disabled select,
.field.disabled select {
    background-color: var(--stdtext);
	color: var(--outerbox);
}

select hr {
	height: 2px;
    border: none;
    color: var(--stdtext);
    background-color: var(--stdtext);
    margin: 3px 0; /* Add a little breathing room */
}

.fieldset {
	border: 0px solid transparent;
	margin: 0px;
	padding: 0px;
}