:root {
    --primary-colour: #53AAD1;
    --secondary-colour: #163A71;
    color: #383838;
}

body {
    margin: 0;
    background-color: var(--secondary-colour)
}

input[type="checkbox"] {
    width: 44px;
    height: 44px;
    margin: 6px 16px 6px 0;
    accent-color: #383838;
}

input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
    margin-left: 0;
    margin-right: 16px;
    accent-color: #383838;
}

/*
    input[type="radio"], 
    display: inline;
    vertical-align: inherit;
    */
    label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #383838;
}

    td {
        display: flex;
        align-items: center;
    }


input[type="text"], input[type="email"], input[type="tel"] {
    padding: 10px 16px;
    background: #F6F7FA;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    width: 100%;
    max-width: 355px;
    height: 44px;
    box-sizing: border-box;
    /*margin-bottom: 21px;*/
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #383838;
}

input:focus-visible {
    /*primary colour*/
    outline-color: var(--primary-colour);
}

input[type="submit"]:hover {
    cursor: pointer;
    filter: brightness(80%);
}

input[type="date"] {
    /*height: 44px;*/
    width: 168px;
    /*margin-bottom: 21px;*/
    margin-right: 10px;
    border: 1px solid #A5A5A5;
    border-radius: 4px;
}

input[type="file"] {

    /*width: auto;
    border: 1px solid #A5A5A5;
    border-radius: 4px;*/
    font-family: Kumbh Sans;
    /*text-align: center;*/
    /*height: 44px;*/
    margin-bottom: 10px;
}

textarea {
    padding: 10px 16px;
    background: #F6F7FA;
    border: 1px solid #a5a5a5;
    border-radius: 4px;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    margin-bottom: 21px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #383838;
}

textarea:focus-visible {
    /*primary colour*/
    outline-color: var(--primary-colour);
}

.section-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 30px;
}

.section-label {
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 21px;
}

.label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 12px;
    margin-right: 10px;
}

.text {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.container {
    background-color: #fff;
    padding: 0 80px 60px 80px;
    border-radius:20px
}

.container-third {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container-half {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.primary-button {
    width: 100%;
    background-color: var(--primary-colour);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 12px 0;
    border: 1px solid var(--primary-colour);
    border-radius: 8px;
    margin-bottom: 20px;
}

.reverse-button {
    width: 100%;
    color: var(--primary-colour);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 12px 0;
    border: 1px solid var(--primary-colour);
    border-radius: 8px;
    background: #fff;
}

.divider {
    border-bottom: 1px solid #dadada;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
}

.dob {
    /*height: 44px;*/
    color: #383838;
    padding: 8px 12px 8px 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: Kumbh Sans;
    line-height: 24px;
}

select:focus-visible {
    outline-color: var(--primary-colour);
}

.select-additional-ddl {
    /*width: 120px;*/
    height: 44px;
    color: #383838;
    padding: 8px 12px 8px 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: Kumbh Sans;
    line-height: 24px;
    border: 1px solid #A5A5A5;
    border-radius: 4px;
    background-color: #F6F7FA;
    /*down chevron*/
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41421 0.168945L0 1.58316L7.07105 8.65425L14.1421 1.58319L12.7279 0.168974L7.07107 5.82581L1.41421 0.168945Z' fill='%23383838'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right;
    background-position: right 8px center;
    /*background-position-x: 328px;*/
}

.select-title {
    width: 120px;
    height: 44px;
    color: #383838;
    padding: 8px 12px 8px 16px;
    font-size: 16px;
    font-weight: 500;
    font-family: Kumbh Sans;
    line-height: 24px;
    border: 1px solid #A5A5A5;
    border-radius: 4px;
    background-color: #F6F7FA;
    /*down chevron*/
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41421 0.168945L0 1.58316L7.07105 8.65425L14.1421 1.58319L12.7279 0.168974L7.07107 5.82581L1.41421 0.168945Z' fill='%23383838'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right;
    background-position-x: 92px;
}

.box {
    background-color: #383838;
    color: #fff;
    padding: 16px 12px;
    border-radius: 4px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.comment {
    min-width: 20px;
    min-height: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.assessment {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 12px;
    margin-top:30px;
    margin-right: 10px;
}

.statement {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

a {
    color: var(--primary-colour);
}

a:visited {
    color: var(--secondary-colour);
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*align-items: center;*/
}

span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    font-family: Kumbh Sans;
}

.flex-center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

p > span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    font-family: Kumbh Sans;
}

#rbEmploymentStatement > tbody > tr > td {
    margin-bottom: 10px;
}

#rbLicenceStatement > tbody > tr > td {
    margin-bottom: 10px;
}

/*Days of week checkbox*/

#chkDayPrefs > tbody > tr > td > input {
    display:none;
}

#chkDayPrefs > tbody > tr > td > label {
    text-align: center;
    width: auto;
    border-radius: 4px;
    padding: 8px 12px 8px 16px;
    background-color: #F6F7FA;
    border: 1px solid #A5A5A5;
    margin-right: 10px;
    margin-top: 12px;
}

#chkDayPrefs > tbody > tr > td > input:checked + label {
    background-color: #383838;
    color: #FFF;
}

#chkDayPrefs > tbody {
    display: flex;
    flex-wrap: wrap;
}

/*Times checkbox*/

#chkTimePrefs > tbody > tr > td > input {
    display: none;
}

#chkTimePrefs > tbody > tr > td > label {
    text-align: center;
    width: auto;
    border-radius: 4px;
    padding: 8px 12px 8px 16px;
    background-color: #F6F7FA;
    border: 1px solid #A5A5A5;
    margin-right: 10px;
    margin-top: 12px;
}

#chkTimePrefs > tbody > tr > td > input:checked + label {
    background-color: #383838;
    color: #FFF;
}

#chkTimePrefs > tbody {
    display: flex;
    flex-wrap: wrap;
}

.errorBox {
    color: #D9413C;
}


.container-third,
.container-half {
    display: flex;
    flex-wrap: wrap;
}




.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;  /*spacing between items*/ 
    margin-bottom: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 150px;
    box-sizing: border-box;
    /*margin-bottom: 21px;*/
}

/* Optional width modifiers */
.form-field.narrow {
    flex: 0 1 120px; /* good for title or postcode */
    min-width: 0; /* allow true narrowing */
}


.form-field.wide {
    flex: 2 1 300px; /* takes more space */
}

/* Ensure inputs behave */
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
}


/* Let the radio list shrink to fit its content */
.radio-list {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 0.5rem;
}

/* Optionally style radio elements */
/*.radio-list input[type="radio"] {
    margin-right: 0.5em;
    vertical-align: middle;
}*/

/*.radio-list label {
    vertical-align: middle;
}*/

input[type="radio"] {
    display: inline-block;
    width: 2.75em; /* or e.g. 24px */
    min-width: 2.75em;
    height: 2.75em;
    margin-right: 0.5em;
    vertical-align: middle;
}

input[type="checkbox"] {
    display: inline-block;
    width: 2.75em; /* or e.g. 24px */
    min-width: 2.75em;
    height: 2.75em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.inline-label-input {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space between label and input */
}

.inline-label-input .label {
    white-space: nowrap;
}


/* Mobile layout */
@media (max-width: 600px) {

    .container {
        padding: 0 20px 40px;
        border-radius: 0;
    }

    form {
        padding: 20px 0 !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    textarea,
    .select-title,
    .select-additional-ddl {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }

    #signatureCanvas {
        display: block;
        width: 100%;
        max-width: 400px;
        height: 200px;
        box-sizing: border-box;
    }
}