/* Minification failed. Returning unminified contents.
(186,68): run-time error CSS1030: Expected identifier, found '.'
(186,89): run-time error CSS1031: Expected selector, found ')'
(186,89): run-time error CSS1025: Expected comma or open brace, found ')'
 */
.floating-labels .field-show-floating-label .field-label {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}

    /* Once the field has a value the floated label carries the required
       marker: red text plus a red asterisk docked to its right. width:auto
       lets the label shrink to its text so the asterisk sits right behind
       the words (padding-right reserves the space; the asterisk is an inline
       SVG data URI so it survives bundle URL rewriting). */
    .floating-labels .field-show-floating-label .field-label.required {
        width: auto;
        max-width: calc(100% - 7px);
        padding-right: 13px;
        color: #b94a48;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg stroke='%23b94a48' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='5' y1='1.5' x2='5' y2='8.5'/%3E%3Cline x1='1.97' y1='3.25' x2='8.03' y2='6.75'/%3E%3Cline x1='8.03' y1='3.25' x2='1.97' y2='6.75'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center;
    }

/* Required-field empty-state styling lives with the label-as-placeholder rules
   below (search "Label-as-placeholder"), so the red asterisk image renders the
   same way on inputs, textareas and selects. */

.floating-labels .field-show-floating-label .field-input {
    padding-top: 1.5em;
    padding-bottom: 0.35714em;
}

.floating-labels .field-label,
.floating-labels .field-input {
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.floating-labels .field {
    width: 100%;
    float: left;
    padding: 0.42857em 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-labels .field-input-wrapper {
    position: relative;
}

.floating-labels .field-label {
    font-size: 0.85714em;
    font-weight: normal;
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 0.42857em;
    margin-left: 1px;
    padding: 0 0.91667em;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    color: #737373;
    display: block;
    text-align: left;
    margin: 0.5em 0;
    line-height: 1.5;
    font-size: 12px;
}

.floating-labels .field-input {
    background-color: white;
    color: #333333;
    border-color: #d9d9d9;
    background-clip: padding-box;
    border-radius: 5px;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0.92857em 0.78571em;
    word-break: normal;
    line-height: inherit;
    font-size: 14px;
}

    .floating-labels .field-input:focus {
        outline: none;
        border-color: #64b0f2;
        -webkit-box-shadow: 0 0 0 1px #64b0f2;
        box-shadow: 0 0 0 1px #64b0f2;
    }

.floating-labels .field-input-select {
    padding-right: 2.07143em;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-font-smoothing: inherit;
    background: transparent;
    cursor: pointer;
}

    .floating-labels .field-input-select[disabled] {
        background-color: #eee;
    }

.floating-labels .field-caret {
    border-left: 1px rgba(179,179,179,0.5) solid;
    display: block;
    width: 2.14286em;
    height: 43%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: center;
    color: #919191;
}

    .floating-labels .field-caret > svg {
        vertical-align: 0 !important;
    }

/* ---- Label-as-placeholder (the Bootstrap 5 / Material pattern) ----
   A native ::placeholder can be coloured but not decorated with an image, so to
   show the red asterisk IMAGE right after the text on EVERY control type, the
   field's own <label> stands in for the placeholder while the field is empty and
   the native placeholder is hidden. Selects always use this (they have no native
   placeholder); required text inputs / textareas opt in via .field-ph, both added
   by resumes.js. field-show-floating-label — toggled by shared.js on keyup and by
   resumes.js on select change — raises the label once the field has a value. */
.floating-labels .field-ph .field-input::placeholder {
    color: transparent;
}

.floating-labels .field-select:not(.field-show-floating-label) .field-label,
.floating-labels .field-ph:not(.field-show-floating-label) .field-label {
    opacity: 1;
    margin-top: 0;
    width: auto;
    max-width: calc(100% - 2.4em);
    font-size: 14px;
    color: #737373;
}

    /* Single-line inputs and selects: label vertically centred like a placeholder. */
    .floating-labels .field-select:not(.field-show-floating-label) .field-label,
    .floating-labels .field-ph-input:not(.field-show-floating-label) .field-label {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    /* Textareas: label at the top-left, where the first line of text begins. */
    .floating-labels .field-ph-textarea:not(.field-show-floating-label) .field-label {
        top: 0;
        margin-top: 0.92857em;
        -webkit-transform: none;
        transform: none;
    }

    /* Required + empty: red label with the asterisk image docked right after it
       (width:auto shrinks the label to its text, so "right" lands right after it —
       the same treatment as the floated label). */
    .floating-labels .field-select:not(.field-show-floating-label) .field-label.required,
    .floating-labels .field-ph:not(.field-show-floating-label) .field-label.required {
        color: #b94a48;
        padding-right: 13px;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg stroke='%23b94a48' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='5' y1='1.5' x2='5' y2='8.5'/%3E%3Cline x1='1.97' y1='3.25' x2='8.03' y2='6.75'/%3E%3Cline x1='8.03' y1='3.25' x2='1.97' y2='6.75'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center;
    }

    /* A disabled conditional field (e.g. an "Other" description that only
       applies once its checkbox is ticked) shouldn't advertise as required:
       grey the placeholder-label and drop the asterisk until it's enabled. */
    .floating-labels .field-ph:not(.field-show-floating-label):has(.field-input:disabled) .field-label.required,
    .floating-labels .field-select:not(.field-show-floating-label):has(.field-input:disabled) .field-label.required {
        color: #737373;
        padding-right: 0;
        background: none;
    }

#resumeForm .left-label {
    width: 245px;
    padding-right: 10px !important;
    padding-top: 15px !important;
    vertical-align: top;
}

#contactform .left-label {
    width: 120px;
    padding-right: 10px !important;
    padding-top: 15px !important;
    vertical-align: top;
}

.no-top-padding {
    padding-top: 0 !important;
}

.instructions {
    padding-bottom: 25px;
    font-style: italic;
}

.checkbox-row {
    padding-bottom: 15px;
}

#dpDateAvailable {
    max-width: 150px;
    margin-right: 3px;
    display: inline-block;
}

#txtSummaryOfExperience,
#txtReferences,
#txtAdditionalInfo,
#txtWellControlInfo {
    height: 300px;
    margin-bottom: 0;
}

/* Contact Us message box (shares the floating-label form CSS with resumes). */
#message {
    height: 200px;
    margin-bottom: 0;
}

.section-row .section-title {
    padding-top: 53px;
}

.section-row .na-checkbox {
    padding-top: 55px;
}

.section-row .top-section.section-title {
    padding-top: 0;
}

.section-row .top-section.na-checkbox {
    padding-top: 5px;
}

.resume-form label {
    display: inline;
}

.resume-form h6 {
    margin-bottom: 15px;
}

#txtLanguageOther {
    margin-bottom: 0;
}

#btnSubmit {
    margin-top: 53px;
}

/* Toast notifications — a full-width banner pinned to the top of the page,
   red for validation/errors and green for success, matching the Business
   Portal's toastr look. Replaces the old static validation summary, so the
   page never has to scroll to show feedback. */
#core-toast-container {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.pci-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 52px 16px 24px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    transform: translateY(calc(-100% - 16px));
    opacity: 0;
    transition: transform 0.28s ease-out, opacity 0.28s ease-out;
}

    .pci-toast.pci-toast--in {
        transform: translateY(0);
        opacity: 1;
    }

    .pci-toast.pci-toast--out {
        transform: translateY(calc(-100% - 16px));
        opacity: 0;
    }

    /* Slightly translucent, like the Business Portal's toastr. */
    .pci-toast.pci-toast--error {
        background-color: rgba(189, 54, 47, 0.92);
    }

    .pci-toast.pci-toast--success {
        background-color: rgba(81, 163, 81, 0.92);
    }

.pci-toast__icon {
    font-size: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    color: #ffffff;
}

.pci-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pci-toast__title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.pci-toast__text {
    color: #ffffff;
}

.pci-toast__list {
    margin: 4px 0 0;
    padding-left: 18px;
    list-style: disc;
}

    .pci-toast__list li {
        margin: 2px 0;
        word-wrap: break-word;
    }

    /* "Maximum error count reached." notice line, shown when the list is capped. */
    .pci-toast__list li.pci-toast__more {
        list-style: none;
        margin-left: -18px;
        margin-top: 4px;
        font-style: italic;
        opacity: 0.9;
    }

.pci-toast__close {
    position: absolute;
    top: 10px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    opacity: 0.85;
    cursor: pointer;
    padding: 0 6px;
}

    .pci-toast__close:hover {
        opacity: 1;
    }

@media (prefers-reduced-motion: reduce) {
    .pci-toast {
        transition: none;
        transform: none;
    }

        .pci-toast.pci-toast--out {
            opacity: 0;
        }
}

/* Required section markers — the big free-text sections (Summary, References,
   Well Control) advertise their required status up front with a red asterisk
   on the heading, so it no longer takes a failed submit to reveal it. Uses the
   same asterisk glyph as the required field labels. */
.resume-form h4.required-section::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 7px;
    vertical-align: middle;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'%3E%3Cg stroke='%23b94a48' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='5' y1='1.5' x2='5' y2='8.5'/%3E%3Cline x1='1.97' y1='3.25' x2='8.03' y2='6.75'/%3E%3Cline x1='8.03' y1='3.25' x2='1.97' y2='6.75'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
}

@media screen and (max-width: 767px) {
    .na-checkbox.pull-right {
        float: left !important;
        padding-top: 0;
    }

    .resume-instructions {
         padding-bottom: 50px;
    }

    .resume-form h6 {
        margin-top: 50px;
    }

    #lblBusinessPrograms {
        margin-top: 0 !important;
    }
}
