body{
    align-content: center;
    background-color: #ffffff;
    padding: 5px;
    font-family:Arial, Helvetica, sans-serif;
}

/* Dark mode */
body.dark-mode {
    background: #111;
    color: #eee;
}

/*Headers*/
h1{
    font-size: xx-large;
    color: #C603CC;
    text-align: center;

}

h2{
    color: #000000;
    align-content: flex-start;
}

h4{
    color: #FF3D3D;
}
/*End Headers*/

label {
    font-size: 16px;
    font-family: Arial, sans-serif;
    vertical-align: middle;
}

.faq {
    font-size: 16px;
    font-family: Arial, sans-serif;
    padding: 4px;
}

p {
    margin-top: 6px;   /* reduce space above */
    margin-bottom: 10px; /* reduce space below */
    line-height: 1.2;   /* controls spacing inside the paragraph */
}

.responsive-logo {
    width: 100%;
    padding-top: 10px;
}

select {
    width: 100%; /* default to min width */
    min-width: 30%;
    padding: 4px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    box-sizing: content-box;
}

span {
    margin-top: 4px;   /* reduce space above */
    margin-bottom: 6px; /* reduce space below */
    line-height: 1.2;   /* controls spacing inside the paragraph */
}

.t1{
    color: #C603CC;
}

#textSizer {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    font: inherit;
    padding: 4px;
}

/*Index*/
.index{
    font: courgette;
    font-size: large;
}

.indexi{
    font: courgette;
    font-size: large;
    font-style: italic;
}

.indexf{
    font-family: courgette;
    font-size: small;
}

.indexw{
    font-family: courgette;
    font-size: 40px;
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
    color: #CC0000;
}
/*End Index*/

/*Buttons*/
.button{
    font-size: 55vp;
    font-weight: bold;
    color: #FFFFFF;
    border-color: #00CCFF;
    background-color: #00CCFF;
    width: 9.0em;
    height: 2.5em;
    border-radius: 50%;
}

body.dark-mode .button{
    font-size: 55vp;
    font-weight: bold;
    color: #000;
    border-color: #00CCFF;
    background-color: #00CCFF;
    width: 9.0em;
    height: 2.5em;
    border-radius: 50%;
}

.buttonr{
    font-size: 55vp;
    font-weight: bold;
    color: #CC0000;
    border-color: #CC0000;
    background-color: #00CCFF;
    width: 9.0em;
    height: 2.5em;
    border-radius: 50%;
}

.buttonw{
    font-size: 55vp;
    font-weight: bold;
    color: #FFFFFF;
    border-color: #00CCFF;
    background-color: #00CCFF;
    width: 29.0em;
    height: 2.5em;
    border-radius: 50%;
}

body.dark-mode .buttonw{
    font-size: 55vp;
    font-weight: bold;
    color: #000;
    border-color: #00CCFF;
    background-color: #00CCFF;
    width: 29.0em;
    height: 2.5em;
    border-radius: 50%;
}
/*End Buttons*/

/*Borders*/
.no-border {
    border: none;
    outline: none; /* Optional: removes the blue outline on focus */
    padding: 8px;  /* Optional: adds some spacing inside */
    background-color: #f0f0f0; /* Optional: subtle background */
}

.no-border:focus {
    outline: none; /* Keeps it clean when selected */
}

/*End Borders*/

/*Form Errors*/
.form-error {
    font-weight: bold;
    color: #FF3D3D;
}
/*End Form Errors*/

/*Results*/
.answered {
    font-weight: bold;
    color: #FF3D3D;
}

.poss-answ {
    font-weight: normal;
    color: #1212CC;
}

body.dark-mode .poss-answ {
    font-weight: normal;
    color: #FFFF00;
}

.notify1{
    border: dotted;
    background-color: #FFFF00;
}

body.dark-mode .notify1{
    border: dotted;
    background-color: #FFFF00;
    color: #000;
}
/*End Results*/

/* Dropdown */
    .custom-dropdown {
        width: 80%;
        max-width: 400px;
        margin: 0 auto;
        position: relative;
        font-family: sans-serif;
        user-select: none;
    }

    body.dark-mode .custom-dropdown {
        color: #000;
    }

    .dropdown-selected {
        background-color: #DEDEDE;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border: 1px solid #999;
        border-radius: 5px;
    }

    .dropdown-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 250px; /* Controls max dropdown height */
        overflow-y: auto;
        background: #fff;
        border: 1px solid #999;
        z-index: 999;
    }

    .dropdown-option {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
    }

    .dropdown-option:hover {
        background-color: #f2f2f2;
    }

/* End Dropdown*/

/*Inout*/
.input-wrapper {
    position: relative;
    display: inline-block;
    min-width: 100px; /* minimum size */
}

input[type="text"] {
    width: 100%; /* default to min width */
    min-width: 30%;
    padding: 4px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    box-sizing: content-box;
    vertical-align: middle;
}

input[type="password"] {
    width: 100%; /* default to min width */
    min-width: 30%;
    padding: 4px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    box-sizing: content-box;
}
/*End Input*/

/* Dis Formats*/
.dis-body{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    flex-direction: column;
}

.dis-bodyc{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10px;
    flex-direction: column;
}

.dis-bodyr{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.dis-bodyt{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    flex-direction: column;
}

.dis-bodytr {
    display: flex;          /* make children line up */
    flex-direction: row;    /* force row layout */
    flex-wrap: nowrap;      /* don’t wrap onto another line */
    justify-content: flex-start; /* align left, or use center */
    align-items: center;    /* vertical alignment */
    gap: 10px;              /* spacing between boxes */
}

.dis-one{
    display: flex;
    flex: 1;
}

.dis-two{
    display: flex;
    flex: 2;
    flex-direction: column;
    word-wrap: break-word;
}

.dis-twoc{
    display: flex;
    flex: 2;
    text-align: center;
    flex-direction: column;
    padding: 10px;
}

.dis-twor{
    display: flex;
    flex: 2;
    text-align: center;
    padding: 10px;
}

.dis-three{
    display: flex;
    flex: 3;
    flex-direction: row;
    padding: 10px;
    gap: 8px; /* space between label and input */

}

.dis-sdt{
    display: flex;
    padding: 5px;
    align-items: center;
 }

.dis-sdt select {
    width: 120px;       /* match sex-at-birth field */
    box-sizing: border-box;
}
/*End Dis Formats*/

/*DOB*/
.dob-container {
    display: flex;
    gap: px;
    flex-wrap: wrap;
}

.dob-container select {
    flex: 1;
    min-width: 100px;
}
/*End DOB*/

/*Boxes*/
.box1{
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: left;
    padding: 10px;
}
.box1b{
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: left;
    padding: 10px;
}
.box1r{
    display: flex;
    flex: 1;
    flex-direction: row;
    text-align: left;
    padding: 10px;
}
.box2{
    display: flex;
    flex: 2;
    flex-direction: column;
    text-align: left;
    padding: 10px;
}
.box2r{
    display: flex;
    flex: 2;
    flex-direction: row;
    justify-content: flex-end; /* pushes children to the right */
    padding: 10px;
    width: 80%;
}
.box3{
    display: flex;
    flex: 3;
    flex-direction: column;
    text-align: left;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.box5{
    display: flex;
    flex: 5;
    flex-direction: column;
    text-align: left;
    padding: 10px;
}

.boxf {
    display: flex;
    flex-direction: row;   /* keep input + label inline */
    align-items: center;   /* align input with text */
    padding: 5px 10px;
    flex: 0 0 auto;        /* stop stretching */
    white-space: nowrap;   /* prevent label text wrapping */
}
/*End Boxes*/

/*Footer*/
.footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    background-color: #CBCBCB;
}

body.dark-mode .footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    background-color: #000000;
    l
}
/*End Footer*/

/*Links*/
body.dark-mode .lone{
    color: #ffffff;
    background-color: #000000;
    l
}

body.dark-mode .ltwo{
    color: #00FFFF;
}
/*End Links*/


/* Hide mobile-only row by default */
.mobile-only {
    display: none;
}

/* Hide second desktop cell by default (in case of stacking) */
.desktop-only {
    display: flex;
    text-align: left;
}

.desktop-mobile {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
}

.mobile-line {
    border-top-style: solid;
    border-top-color: #B8B8B8;
}

@media (min-width: 768px) {
/* Show desktop layout */
    .dis-body {
        display: flex;
        flex-direction: row;

    }
    .dis-bodyr {
        flex-direction: column;
    }
    .dis-bodyt{
        display: flex;
        flex-direction: row;
    }
    .dis-sdt{
        justify-content: flex-end;
        flex-direction: row;
        gap: 4px;
    }
    .mobile-only {
      display: none;
    }
    .desktop-only {
        display: flex;
        width: 100%;
    }
    .mobile-line {
        border-style: none;
    }
}

@media (max-width: 767px) {
/* Show mobile layout */
    .dis-body {
        display: flex;
        flex-direction: column;
    }
    .dis-bodyr {
        flex-direction: row;
    }
    .dis-bodyt{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        flex-direction: row;
    }
    .dob-container {
        flex-direction: column;
    }
    .dob-container select {
        width: 100%;
    }
    .dis-one {
        display: none;
    }
    .box1b {
        display: none;
    }
    .box2r {
        padding: 2px;
        justify-content: flex-start;
    }
    .dis-sdt{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 8px;
    }
    .desktop-mobile{
        flex-direction: row;
    }

    .mobile-only {
        display: flex;
    }
    .desktop-only {
        display: none;
    }
    .dis-two {
        flex-direction: column;  /* stack vertically */
    /*    align-items: flex-start;  left-align label on small screens */
    }
    .dis-three {
        flex-direction: column;  /* stack vertically */
    /*    align-items: flex-start;  left-align label on small screens */
    }
}

.table {
    display: grid;
    grid-template-columns:
        1fr 1fr 2fr 5fr 1fr 1fr 1fr 1fr;
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
}

.header, .subheader {
    display: contents;
}

.cell {
    padding: 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #000;
}

.header .cell,
.subheader .cell {
    font-weight: bold;
    background: #eee;
    border-bottom: 2px solid #999;
}

/* Each record has its own grid matching the header */
.record {
    display: grid;
    grid-template-columns:
        1fr 1fr 2fr 5fr 1fr 1fr 1fr 1fr;
    border: 2px solid #000;
    border-top: none;
}

.subrow {
    display: contents;
}

textarea, input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
button {
    width: 100%;
}