/*--------------------------------------------------------------
# Form wrap
--------------------------------------------------------------*/

.form-wrap .fields {
    position: relative;
}

.form-wrap .field {
    padding-bottom: 1.25rem;
}


.form-wrap .field .field-inner {
    display: block;
    position: relative;
}


/*--------------------------------------------------------------
# Form wrap white
--------------------------------------------------------------*/

.form-wrap.is-white .field .meta {
    color: rgba(255, 255, 255, 0.8);
}

.form-wrap.is-white.border-bottom .field select,
.form-wrap.is-white.border-bottom .field textarea,
.form-wrap.is-white.border-bottom .field input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
}


/*--------------------------------------------------------------
# Form field with icon
--------------------------------------------------------------*/

.field.has-icon,
.field.has-icon input {
    position: relative;
    display: flex;
    align-items: center;
}


/* Icon sizes */

.field.has-icon.icon-extrasmall svg {
    width: 1rem;
    height: 1rem;
}
.field.has-icon.icon-small svg {
    width: 1.15rem;
    height: 1.15rem;
}


/* Icon positions */

.field.has-icon.icon-right svg {
    right: 0.85rem;
    position: absolute;
    pointer-events: none;
}


/*--------------------------------------------------------------
# Form wrap meta messages
--------------------------------------------------------------*/

.form-wrap .field .meta {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    color: rgb(117, 117, 117);
}

.form-wrap .field .meta.error {
    font-size: 1rem;
    color: var(--red);
    top: -25px;
    z-index: 15;
    opacity: 0;
    position: absolute;
}


/*--------------------------------------------------------------
# Form wrap label
--------------------------------------------------------------*/

.form-wrap .field label.label {
    position: absolute;
    opacity: 0;
    left: 0;
    top: -25px;
    font-size: 0.9rem;
}


/*--------------------------------------------------------------
# Form wrap inputs
--------------------------------------------------------------*/

.form-wrap .field select,
.form-wrap .field textarea,
.form-wrap .field input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    outline: none;
    background: transparent;
    width: 100%;
    padding-bottom: 10px;
    font-size: 0.9rem;
    border: 2px solid var(--grey-border);
}
.form-wrap.has-border:not(.is-white) .field.focus select,
.form-wrap.has-border:not(.is-white) .field.focus textarea,
.form-wrap.has-border:not(.is-white) .field.focus input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    border: 2px solid var(--red);
}

.form-wrap.border-none .field select,
.form-wrap.border-none .field textarea,
.form-wrap.border-none .field input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    border: 0;
}
.form-wrap.border-bottom .field select,
.form-wrap.border-bottom .field textarea,
.form-wrap.border-bottom .field input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
    border-bottom: 1px solid #000;
}

.form-wrap .field:not(.file).focus .meta.placeholder,
.form-wrap .field:not(.file).filled .meta.placeholder {
    top: -25px;
    left: 0;
    font-size: 0.9rem;
    opacity: 1;
}

.form-wrap .field:has(textarea):not(.has-error).focus label.label,
.form-wrap .field:has(textarea):not(.has-error).focus .meta.placeholder,
.form-wrap .field:has(textarea):not(.has-error).filled .meta.placeholder,
.form-wrap .field:has(textarea):not(.has-error).filled label.label {
    opacity: 0;
}

body.ready .form-wrap .field select,
body.ready .form-wrap .field textarea,
body.ready .form-wrap .field:not(.select):not(.checkbox) .field-inner::before,
body.ready .form-wrap .field:not(.select):not(.checkbox) .field-inner::after,
body.ready .form-wrap .field input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),
body.ready .form-wrap .field .field-inner .meta,
body.ready .form-wrap .field .field-inner label.label,
body.ready .form-wrap .field .field-inner label.label > em {
    transition: 0.25s;
}


/* File input */

.form-wrap .field.file {
    text-align: center;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.form-wrap .field.file .field-inner {
    position: unset;
}

.form-wrap .field.file .meta.placeholder.hidden {
    display: none;
}

.form-wrap .field.file input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.form-wrap .field.file label {
    font-size: 1rem;
    display: block;
    font-weight: 600;
}
.form-wrap .field.file .meta {
    display: block;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.4em;
}

.form-wrap .field.file.border-dashed {
    border: 2px dashed #000;
    border-radius: 0.5rem;
}


/* Form input checkbox */

.form-wrap .field.checkbox {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form-wrap .field.checkbox label {
    display: flex;
    align-items: start;
    cursor: pointer;
    gap: 0.75rem;
    line-height: 1.2em;
    font-size: 0.925rem;
}
.form-wrap .field.checkbox label.center {
    align-items: center;
}
.form-wrap .field.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}
.form-wrap .field.checkbox .text {
    display: inline-block;
    padding-top: 1px;
}
.form-wrap .field.checkbox .checkmark {
    position: relative;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid var(--grey-border);
    background-color: var(--grey-border);
    transition: 200ms;
    flex-shrink: 0;
}
.form-wrap .field.checkbox:hover input ~ .checkmark {
    border: 1px solid var(--blue);
    background-color: var(--blue);
}

.form-wrap .field.checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.form-wrap .field.checkbox .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.form-wrap .field.checkbox input:checked ~ .checkmark,
.form-wrap .field.checkbox.checked .checkmark {
    background: var(--blue);
}
.form-wrap .field.checkbox input:checked ~ .checkmark:after,
.form-wrap .field.checkbox.checked .checkmark:after {
    display: block;
}


/* Form select boxes */

.form-wrap .field select {
    appearance: none;
    padding: 0.5rem 0.85rem;
    border: 2px solid var(--grey-border);
    border-radius: .5rem;
    font-size: 0.9rem;;
    color: rgb(117, 117, 117);
    cursor: pointer;
}


/* Hide label class */

.form-wrap .field .label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/*--------------------------------------------------------------
# Form wrap block
--------------------------------------------------------------*/

.form-wrap .form-block.top {
    margin-top: 1.5rem;
}
.form-wrap .form-block.bottom {
    margin-bottom: 1.25rem;
}

.form-wrap .form-block.spacing {
    margin: 1.5rem 0;
}

.form-wrap .form-block.file-inputs > .row > div {
    padding-bottom: 20px;
}



/*--------------------------------------------------------------
# Form wrap actions
--------------------------------------------------------------*/

.form-wrap .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-wrap .actions.reverse {
    flex-direction: row-reverse;
}
.form-wrap .actions.align-right {
    justify-content: end;
}
.form-wrap .actions.spacing {
    margin: 1.5rem 0;
}



.form-wrap .actions .logo-wrap {
    width: 55px;
}
.form-wrap .actions .logo-wrap svg {
    fill: var(--grey-text);
}


/*--------------------------------------------------------------
# Job detail apply form
--------------------------------------------------------------*/

.job-detail-apply-form .field {
    padding-bottom: 1.85rem;
}

.job-detail-apply-form .field textarea {
    resize: none;
    min-height: 7.5rem;
}


/*--------------------------------------------------------------
# Form wrap utility classes
--------------------------------------------------------------*/

.form-wrap.offset-top {
    margin-top: 3rem;
}


/*--------------------------------------------------------------
# Contact form
--------------------------------------------------------------*/

.contact-form.columns .fields {
    position: relative;
    padding-right: 50%;
}

.contact-form.columns .fields .field:not(:last-child):not(.textarea) {
    padding-right: 20px;
}

.contact-form .form-wrap .field {
    position: relative;
    margin-bottom: 1rem;
}

.contact-form.columns .fields .field.textarea:last-child {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
}

.contact-form .field.textarea textarea {
    height: 10.9rem;
}

.contact-form .form-wrap .field.textarea.focus .meta.placeholder, 
.contact-form .form-wrap .field.textarea.filled .meta.placeholder {
    opacity: 1;
}


/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 992px) {

    /* Job overview page filter form  */

    .job-overview-filter-form .actions {
        margin-bottom: 1.25rem;
    }


}

@media all and (max-width: 575px) {

    .job-detail-apply-form .form-block.file-inputs .col-lg-6 {
        margin-bottom: 1.5rem;
    }



    /* Contact form */

    .contact-form.columns .fields {
        padding-right: 0;
    }

    .contact-form.columns .fields .field.textarea:last-child {
        position: relative;
        width: 100%;
    }




    /* Apply card file inputs */

    .apply-now-card .form-block.file-inputs .col-12 {
        margin-bottom: 1rem;
    }

}