
.form {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.2;
    margin: 1.2rem auto;
    max-width: 650px;
}

    .form :focus {
        outline: 1px solid var(--color-brand50);
    }

    .form button, .form input, .form optgroup, .form select, .form textarea {
        line-height: 1.3;
    }

.form__title {
    border-bottom: 2px solid var(--color-brand50);
    color: var(--color-brand50);
    font-size: 1.6rem;
    font-weight: 700;
    margin: .6rem 0;
    padding: .6rem;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.form__group {
    margin: .3rem 0;
    padding: 0 .6rem;
    width: 100%;
}

.form__label {
    display: inline-block;
    font-size: 1.4rem;
    margin-bottom: .3rem;
}

.form__field {
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form__input {
    align-items: center;
    background-color: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-text);
    display: flex;
    font-size: 1.6rem;
    min-height: 3.6rem;
    padding: .6rem 3.6rem .6rem .6rem;
    width: 100%;
}

    .form__input:hover {
        background-color: var(--color-input-background-hover);
    }

    .form__input:focus, .form__input:hover {
        border-color: var(--color-input-border);
        color: var(--color-input-text);
    }

    .form__input:focus {
        background-color: var(--color-input-background-focus);
    }

select.form__input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--select-arrow-url);
    background-position: right 2px center;
    background-repeat: no-repeat;
    background-size: 14px 10px;
    border-radius: 0;
}

.form__icon:after {
    align-items: center;
    background: var(--color-input-background);
    border: 1px solid var(--color-subtle-text);
    border-radius: 50%;
    color: var(--color-subtle-text);
    content: var(--icon-check-solid);
    display: flex;
    font-family: svgtofont;
    font-size: 1rem;
    height: 1.8rem;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    right: 1.8rem;
    top: 0;
    transform: translateY(50%);
    width: 1.8rem;
}

[required] ~ .form__icon:after {
    border: 1px solid var(--color-brand50);
    color: var(--color-brand50);
}

.form__file-input[required]:valid ~ .form__icon:after, .form__input[required]:valid ~ .form__icon:after {
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.form__radio-field:not(:last-child) {
    margin: 0 0 .6rem;
}

.form__radio-input {
    opacity: 0;
    position: absolute;
    width: 0;
}

    .form__radio-input + .form__btn {
        background-color: var(--color-input-background);
        border: 1px solid var(--color-input-border);
        color: var(--color-body-text);
        font-weight: 400;
    }

    .form__btn, .form__radio-input:checked + .form__btn {
        background-color: var(--color-brand50);
        color: var(--color-button-primary-text);
    }

.form__btn {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    height: 3.6rem;
    justify-content: center;
    margin: 0 auto;
    padding: .6rem;
}

    .form__btn:hover {
        opacity: .7;
    }

.form__file-input {
    opacity: 0;
    position: absolute;
    width: 0;
}

.form__file-btn {
    align-items: center;
    background: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-text);
    cursor: pointer;
    display: flex;
    height: 3.6rem;
    justify-content: center;
    padding: .6rem;
    position: absolute;
    width: 3.6rem;
}

.form__file-label {
    cursor: pointer;
    padding-left: 4.2rem;
}

.form__file-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.form__checkbox-field {
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    padding: 1.2rem .6rem;
}

.form__checkbox-input {
    display: inline-block;
    flex-shrink: 0;
    height: 1.6rem;
    margin: 0 .6rem;
    width: 1.6rem;
}

    .form__checkbox-input:focus {
        outline: none;
    }

.form__submit {
    margin: 0 auto;
    width: 100%;
    text-transform:math-auto;
}

    .form__submit[hidden] {
        display: none;
    }

.form__footnote {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    font-size: 1.2rem;
    justify-content: space-between;
}

    .form__footnote > :first-child {
        align-self: start;
        margin: .3rem .3rem .3rem 0;
    }

    .form__footnote > :last-child {
        align-self: end;
        flex-grow: 1;
        margin: .3rem 0 .3rem .3rem;
        text-align: right;
    }

.form-text {
    flex-shrink: 0;
    margin-bottom: 32px;
    width: 100%;
}

select.form__input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('/img/svg/dropdown-arrow.svg');
    background-position: right 2px center;
    background-repeat: no-repeat;
    background-size: 14px 10px;
    border-radius: 0;
}

.alert-container--block {
    grid-template-columns: 1fr;
    width: 100%;
}

.alert-container {
    grid-gap: 16px;
    display: grid;
    justify-content: flex-start;
    margin: 16px 0;
}

.alert--block {
    display: block;
    width: 100%;
}


.alert--icon {
    padding: 13px 13px 13px 48px;
}

.alert {
    align-items: center;
    border: 1px solid;
    border-radius: var(--border-radius-xs);
    min-height: 48px;
    position: relative;
    text-align: left;
}


.alert--icon:before, .alert__icon {
    align-items: center;
    display: flex;
    font-size: 20px;
    height: 48px;
    justify-content: center;
    left: 0;
    line-height: 48px;
    position: absolute;
    top: 0;
    width: 48px;
}

.alert--icon:before {
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: svgtofont !important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.alert--block > p:last-child {
    margin-bottom: 0;
}

.alert--block > p:first-child {
    margin-top: 0;
}

.alert--icon.alert--error:before {
    content: var(--icon-warning-circle-fill)
}

.alert--icon.alert--success:before {
    content: var(--icon-check-circle-fill);
}

.alert--success {
    background: var(--color-success10);
    border-color: var(--color-success50);
    color: var(--color-success50);
}

.alert--error {
    background: var(--color-error90);
    border-color: var(--color-error90);
    color: var(--color-neutral30);
}

.job-contact-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;
    margin-top: 2em;
}

    .job-contact-box .contact {
        text-align: center;
    }

        .job-contact-box .contact img {
            border-radius: 50%;
            height: 175px;
            width: 175px;
        }