:root {
    --input-padding-x: .75rem;
    --input-padding-y: .48rem;
}

.form-label-group {
    position: relative;
}

    .form-label-group > input,
    .form-label-group > textarea,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

.block-joblist .form-label-group > input,
.block-joblist .form-label-group > textarea,
.job-filter-select > select {
    padding-top: 13px;
}

.form-label-group > label:not(.no-float-label) {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin-bottom: 0; /* Override default `<label>` margin */
    line-height: 1.5;
    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
    white-space: nowrap;
    right: 0;
}

    .form-label-group > label .text {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        padding-left: 3px;
        padding-right: 3px;
    }

    .form-label-group > label.text-area {
        white-space: normal;
        display: inline-block;
    }

        .form-label-group > label.text-area .text {
            display: inline;
        }

    .form-label-group > label.overflow {
        width: 100%;
    }

        .form-label-group > label.overflow .text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: auto;
        }

        .form-label-group > label.overflow .required-asterisk {
            position: relative;
            top: -8px
        }

.form-label-group input::-webkit-input-placeholder,
.form-label-group textarea::-webkit-input-placeholder,
.form-label-group select::-webkit-input-placeholder {
    color: transparent;
}

.form-label-group input:-ms-input-placeholder,
.form-label-group textarea:-ms-input-placeholder ,
.form-label-group select:-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-ms-input-placeholder,
.form-label-group textarea::-ms-input-placeholder,
.form-label-group select::-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-moz-placeholder,
.form-label-group textarea::-moz-placeholder, 
.form-label-group textarea::-moz-placeholder {
    color: transparent;
}

.form-label-group input::placeholder,
.form-label-group textarea::placeholder,
.form-label-group select::placeholder {
    color: transparent;
}

.form-label-group input:focus,
.form-label-group input:not(:placeholder-shown),
.form-label-group textarea:focus,
.form-label-group textarea:not(:placeholder-shown),
.form-label-group select:focus,
.form-label-group select.option-selected {
    padding-top: calc(var(0.18rem) + var(0.18rem) * (2 / 3));
    padding-bottom: calc(var(0.18rem) / 3);
}

    .form-label-group input ~ label,
    .form-label-group textarea ~ label:not(.no-float-label),
    .form-label-group select ~ label ,
    .form-label-group .iti--inline-dropdown ~ label {
        pointer-events: none; /* NOTE: when the label is layered over the input/select, ignore click-events on the label and let
                                       them pass straight onto the field beneath. This is especially relevant for <select>-fields
                                       where clicking the label will focus the field, but not trigger the dropdown in one click.
        */
    }

    .form-label-group input:focus ~ label,
    .form-label-group input:not(:placeholder-shown) ~ label,
    .form-label-group textarea:focus ~ label:not(.no-float-label),
    .form-label-group textarea:not(:placeholder-shown) ~ label:not(.no-float-label),
    .form-label-group select:focus ~ label,
    .form-label-group select.option-selected ~ label,
    .form-label-group select.option-selected ~ label,
    /* NOTE: :has may not be supported yet by older browsers (Q2 2025). Hopefully it doesn't cause too much trouble. */
    .form-label-group .iti--inline-dropdown:has(input:focus) ~ label,
    .form-label-group .iti--inline-dropdown:has(input:not(:placeholder-shown)) ~ label
    {
        left: 12px;
        line-height: 10px;
        top: 0px;
        transform: translate(0,-14px);
        font-size: 75%;
        padding: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-flex;
        pointer-events: auto; /* NOTE: resume normal label-behavior. */
    }

    .form-label-group textarea:not(:placeholder-shown) ~ label {
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-flex;
    }

        .form-label-group textarea:not(:placeholder-shown) ~ label .text {
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 100%;
            display: inline-block;
        }

.block-joblist input:not(:placeholder-shown) ~ label, 
.block-joblist textarea:not(:placeholder-shown) ~ label,
.block-joblist select:not(:placeholder-shown) ~ label {
    pointer-events: none; /* NOTE: when the label is layered over the input/select, ignore click-events on the label and let
                                   them pass straight onto the field beneath. This is especially relevant for <select>-fields
                                   where clicking the label will focus the field, but not trigger the dropdown in one click.
    */
    z-index: 0;
    position: absolute;
    transform: translate(0,-14px);
    top: 16px;
    left: 13px;
    margin: 0;
    font-size: 10px;
    font-weight: bold;
    background: transparent;
}

.form-label-group input:not(:placeholder-shown) ~ label.overflow,
.form-label-group textarea:not(:placeholder-shown) ~ label.overflow,
.form-label-group select:not(:placeholder-shown) ~ label.overflow {
    width: auto;
    right: 12px;
    height: 23px;
}

small.d-block.overflow {
    font-size: 16px;
    color: #495057;
    margin-bottom: 10px;
}

.job-form-container .form-group {
    margin-bottom: 1.7rem;
    align-self: end;
}