.d-swap-icon.d-eye > .fa-eye,
.d-swap-icon.d-eye-slash > .fa-eye-slash {
    display: block;
}

.d-swap-icon.d-eye-slash > .fa-eye,
.d-swap-icon.d-eye > .fa-eye-slash {
    display: none;
}

[v-cloak] {
    display: none;
}

label.btn:focus-within {
    box-shadow: 0 0 0 0.2rem var(--green-600-transparent);
    background-color: transparent;
}
label.btn > [class*="fa-"] {
    margin-left: 1.25ch;
    transform: translateX(-0.5ch);
    transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

label.btn:hover > [class*="fa-"] {
    transform: translateX(0ch);
}

label.btn:focus-within > [class*="fa-"] {
    transform: translateX(0.25ch);
}

/* makes btn match form control more */
.btn-form-control {
    min-height: 60px;
}

.input-btn {
    display: grid;
    grid-template-columns: 1fr minmax(min-content, max-content);
}

.input-btn > * {
    grid-row: 1;
}

.input-btn > label,
.input-btn > input {
    grid-column: 1 / -1;
}

.input-btn > button {
    grid-column: 2;
    position: relative;
    z-index: 1;
    background-color: var(--white);
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid var(--blue-800);
    border-left: unset;
}

.input-btn > .btn:not(.btn-border):hover {
    border-color: var(--blue-800);
}

.input-btn > .btn:not(.btn-border):active,
.input-btn > .btn:not(.btn-border):focus {
    opacity: 1;
    background-color: var(--white);
}

.input-btn > .btn:not(.btn-border):focus:hover {
    color: var(--blue-800);
}

.form-container-small {
    padding: 18px 15px;
}

.form-container-dark {
    background-color: var(--green-300);
}

.form-container-dark .btn {
    color: var(--green-200);
}

.form-container-dark .form-header {
    color: var(--blue-800);
}

.form-container-dark .form-header > .h1,
.form-container-dark .form-header > .h2,
.form-container-dark .form-header > .h3,
.form-container-dark .form-header > .h4 {
    color: var(--white);
}

.form-container-small .form-footer {
    padding-top: 20px;
}

.form-container-small .form-main {
    padding-top: 20px;
}

.form-col > label {
    display: block;
    margin-bottom: 10px;
}

.form-control {
    display: block;
    width: 100%;
    font-size: 18px;
    background-color: var(--white);
    border: 1px solid var(--blue-800);
    border-radius: 4px;
}

.form-control:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 0.2rem var(--green-600-transparent);
    outline: 0;
    color: var(--black);
}

.form-control::-webkit-input-placeholder {
    color: var(--placeholder);
    font-family: 'Nunito Sans', var(--system);
}

.form-control::-moz-placeholder {
    color: var(--placeholder);
    opacity: 1;
    font-family: 'Nunito Sans', var(--system);
}

.form-control:-ms-input-placeholder {
    color: var(--placeholder);
    font-family: 'Nunito Sans', var(--system);
}

.form-control:-moz-placeholder {
    color: var(--placeholder);
    font-family: 'Nunito Sans', var(--system);
}

.form-control::placeholder {
    color: var(--placeholder);
    font-family: 'Nunito Sans', var(--system);
}


.fieldset-group {
    border: unset;
    padding: 0;
    margin: 0;
}

.fieldset-group + .fieldset-group {
    margin-top: 2rem;
}

.fieldset-group-legend {
    border-bottom: 1px solid var(--blue-800);
    color: var(--black-100);
    font-size: var(--heading-4);
    line-height: 1.67;
    padding-bottom: 0.25em;
    margin-bottom: 0.5em;
}

/**
 * Only meant to be used on elements
 * that contain 1 input[type="checkbox"]
 */
.fieldset-checkbox-group {
    background-color: var(--blue-800);
    padding: 1rem;
    border-radius: 4px;
}

.fieldset-checkbox-group label {
    color: var(--black-100);
}

.fieldset-group-description {
    color: var(--blue-300);
    line-height: 1;
}

.fieldset-group-list {
    margin-top: 30px;
    margin-bottom: 0;
    padding-left: 0;
    columns: 2;
}

.fieldset-group-list > li {
    list-style-type: none;
}


.form-col > .checkbox-group-list ~ .checkbox-group-list {
    margin-top: 1rem;
}



.form-container-application .btn-container {
    margin-top: 2rem;
    margin-top: clamp(1rem, 4vh, 2.25rem);
}

.fieldset-group > .form-row + .form-row,
.fieldset-group > .fieldset-group-description + .form-row {
    margin-top: 15px;
}


/**
    ## Floating Label Input
    
    Minimum HTML Needed
    
    ```html
    <label for="inputID" data-float>
        <input placeholder="{{ Label Text }}" type="..." name="..." id="inputID" />
        <span data-float-label aria-hidden="true">{{ Label Text }}</span>
        <span data-float-placeholder>{{ Label Text }}</span>
    </label>
    ```

*/

.form-col > [data-float],
[data-float] {
    display: grid;
    grid-gap: 0.5em;
    grid-template-columns: 1fr;
    align-items: center;
    will-change: transform;
}

[data-float] {
    --ch: calc(1ch * 1px);
    --chh: var(--ch);
    --prepend: var(--float-prepend, 0px);
    --pad-left: calc(var(--prepend) + 15px);
}

[data-float] > * {
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
    position: relative;
    z-index:1;
}
 
[data-float] > [data-float-prepend],
[data-float] > [data-float-description],
[data-float] > [data-float-placeholder],
[data-float] > [data-float-input] {
    grid-row: 1 / span 2;
    padding-left: var(--pad-left, 15px);
}

[data-float="select"] > [data-float-input] {
    padding-left: 0;
}

[data-float] > [data-float-description],
[data-float] > [data-float-placeholder],
[data-float] > [data-float-label] {
    pointer-events: none;
}


[data-float]:not([data-float="select"]) > [data-float-input],
[data-float="select"] > [data-float-input] > select {
    padding: 29px 15px 5px var(--pad-left, 15px);
}

[data-float] > [data-float-prepend] {
    grid-column: 1;
    align-self: flex-end;
    padding-left: 15px;
    z-index: 2; /* z-index: 2; since the prepend must be before the input. Grid will naturally stack grid items from top to bottom, meaning the eldest sibling will be behind the younger */
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
}

[data-float] > [data-float-label] {
    grid-row: 1;
    line-height: 1;
    padding-top: 7px;
    padding-left: var(--pad-left, 15px);
}

[data-float] > [data-float-description],
[data-float] > [data-float-placeholder] {
    opacity: 0; /* set this for people who prefer reduced motion */
}

[data-float] > [data-float-description] {
    z-index: 0;
    line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
    [data-float] > [data-float-description],
    [data-float] > [data-float-placeholder],
    [data-float] > [data-float-label] {
        transition: all 0.2s ease-in-out;
        transition-property: transform, opacity;
    }
    
    [data-float] > [data-float-input]:placeholder-shown {
        padding: 17px 15px 17px var(--pad-left);
    }
    
    [data-float] > [data-float-label],
    [data-float] > [data-float-input]:placeholder-shown ~ [data-float-placeholder] {
        opacity: 1;
        transform: translateY(0);
    }
    
    [data-float] > [data-float-input]:placeholder-shown + [data-float-label] {
        transform: translateY(0.5em);
        opacity: 0;
    }
    
    [data-float] > [data-float-input]:not(:placeholder-shown) ~ [data-float-placeholder] {
        transform: translateY(-1em);
        opacity: 0;
    }
    
    [data-float] > [data-float-input]:focus ~ [data-float-description] {
        opacity: 0.95;
        transform: translateY(var(--float-desc-translate, 3em));
    }
    
    [data-float] > [data-float-input] ~ [data-float-description] {
        opacity: 0;
        transform: translateY(2em);
    }
    
    [data-float] > [data-float-input]:not(:placeholder-shown) ~ [data-float-prepend] {
        transform: translateY(-0.6ch);
    }
    
    [data-float] > [data-float-input]:placeholder-shown {
        color: transparent;
        caret-color: var(--heading);
        transition: color 0.2s ease-in-out;
    }
}

[data-float] > [data-float-input]::-webkit-input-placeholder {
    opacity: 0;
}

[data-float] > [data-float-input]::-moz-placeholder {
    opacity: 0;
}

[data-float] > [data-float-input]:-ms-input-placeholder {
    opacity: 0;
}

[data-float] > [data-float-input]:-moz-placeholder {
    opacity: 0;
}

[data-float] > [data-float-input]::placeholder {
    opacity: 0;
}


/** Select Styles */

/**

    ## Floating Label Select
    
    Unfortunately there isn't a pseudo-element or pseudo-class as of 7/21 to
    determine the state of a <select /> element in regards to a "placeholder"
    being shown
    
    To make this work, there needs to be a small amount of javascript, which
    can be implemented simply by extending the above CSS as demonstrated below
    and changing the HTML to match accordingly.
    
    ```html
    <label for="inputID" data-float>
        <span class="placeholder-shown" data-float-input="select">
            <select name="..." id="inputID" class="..." @change="updatePlaceholderShown">
                <option value="false"></option>
                <option value="1">Option 1</option>
                {{ ... }}
                <option value="8">Option 8</option>
            </select>
            <i class="fas fa-chevron-down"></i>
        </span>
        <span data-float-label aria-hidden="true">Business Type</span>
        <span data-float-placeholder>Business Type</span>
    </label>
    ```
    The select element is wrapped in a <span /> and given the dataset.floatInput attribute
    with a value of "select". This is used to differentiate it as needing a different
    set of methods and styles, but also lets us "pick it out of a crowd" without adding
    on unnecessary selectors.
    
    The first <option /> is left with no textContent, as we will be using a pseudo-
    placeholder with out [data-float-placeholder], and the value of 'false'.
    
    There is a directive on the select element of @change="updatePlaceholderShown" which
    just translates to `onchange="updatePlaceholderShown"`
    
    This can be reimplemented with vanilla Javascript using something along these lines:
    
    ```js
    // $el = document.querySelector('[data-float]');
    const FloatingLabelSelect = ($el) => {
        if (!$el.matches('[data-float]') throw new Error('Cannot create FloatingLabelSelect, $el must match [data-float] selector.');
        if ($el.querySelector('[data-float-input="select"]' === null) throw new Error('Cannot create FloatingLabelSelect, no valid [data-float-input="select"] child found.');
        
        const select = $el.querySelector('[data-float-input="select"] select');
        const wrapper = $el.querySelector('[data-float-input="select"]');
        
        const togglePlaceHolderShown = () => {
            let selectedOptionValue = select.selectedOptions[0].value;
            wrapper.classList.toggle('placeholder-shown', selectedOptionValue === 'false');
        }
        
        select.addEventListener('change', togglePlaceholderShown);
        
        // Set default .placeholder-shown class in case it hasn't been already
        wrapper.classList.add('placeholder-shown');
        
        // Set the $el as being .active
        $el.classList.add('active');
        
        return {
            wrapper,
            select,
            togglePlaceholderShown,
            clearEvent: () => select.removeEventListener('change', togglePlaceholderShown);
        };
    }
    
    ```

*/

[data-float] > [data-float-input="select"] {
    padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
    [data-float="select"] > [data-float-input]:not(.placeholder-shown) + [data-float-label],
    [data-float="select"] > [data-float-input].placeholder-shown ~ [data-float-placeholder] {
        opacity: 1;
        transform: translateY(0);
    }
    
    [data-float="select"] > [data-float-input].placeholder-shown + [data-float-label] {
        transform: translateY(0.5em);
        opacity: 0;
    }
    
    [data-float="select"] > [data-float-input]:not(.placeholder-shown) ~ [data-float-placeholder] {
        transform: translateY(-1em);
        opacity: 0;
    }
    
    [data-float="select"] > [data-float-input]:not(.placeholder-shown) ~ [data-float-placeholder="opacity"] {
        transform: translateY(0);
        opacity: 0;
    }
}


/**
 * Floating Label Textarea
 *
 * The floating label pattern doesn't make sense for the textarea, so instead
 * it only makes sense to keep it as the normal `:not(:placeholder-shown)` state of the other 
 * floating label inputs
 *
 *
 * the HTML would look like this
 * 
 * ```html
 * <label for="..." data-float="textarea">
 *     <textarea data-float-input name="..." id="..."></textarea>
 *     <span data-float-label>...</span>
 * </label>
 * ```
 */

[data-float="textarea"] > [data-float-input] ~ [data-float-label] {
    min-height: 2.5em;
    background-image: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0));
    margin: 1px;
}


/** Unset all [data-float] label styles if there is no JS to only show the top label, as if the placeholder was hidden */
.nojs [data-float] > [data-float-input]:placeholder-shown + [data-float-label],
.nojs [data-float] > [data-float-input].placeholder-shown + [data-float-label] {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.nojs [data-float] > [data-float-input] ~ [data-float-description] {
    opacity: 0.95 !important;
    transform: translateY(3em) !important;
}

.nojs [data-float] > [data-float-placeholder] {
    display: none !important;
    content-visibility: hidden !important;
}
.nojs [data-float] > [data-float-input],
.nojs [data-float="select"] > [data-float-input] > select {
    padding: 29px 15px 5px !important;
}

.nojs [data-float="select"] > [data-float-input] {
    padding: 0 !important;
}



/** Guarantor Inputs */
.guarantor-input {}

.guarantor-input small {
    font-size: var(--small-copy);
}

/** /Guarantor Inputs */


/** Form Assembly Styles */

/**
 * The `Remove Principal` button in the Principal Repeating section
 */
.removeSpan {
    display: flex;
    justify-content: flex-end;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.thin-remove-link .removeSpan {
    padding-top:10px;
}

.removeSpan > a {
    text-decoration: none;
    color: var(--blue-300);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    background-color: var(--blue-800-transparent);
    transition: all 0.25s ease;
    transition-property: opacity, background-color;
}
.removeSpan > a:focus,
.removeSpan > a:hover {
    background-color: var(--blue-800);
    outline-offset: 2px;
}
.removeSpan > a:active {
    opacity: 0.9;
}

/** Placeholder Input
 * Since some form values can only be passed along using the URL, it
 * has to be added to a readonly `<input />`
 * 
 * For example: https://link.example.com/form?tfa_1=24
 * 
 * ```html
 * <input readonly name="tfa_1" id="tfa_1" />
 * ```
 * 
 * Then the input would show the value that is
 * passed in as `tfa_1`
 */

.fa-placeholder > [readonly] {
    border: unset;
    
}


/** File Inputs */

.file-upload {}

[data-file-upload] {
    display: grid;
    grid-template-columns: minmax(10px, 1fr) minmax(min-content, max-content);
    margin-bottom: 10px;
}

[data-file-upload] > * {
    grid-row: 1;
}

[data-file-input] {
    grid-column: 1 / -1;
}

[data-file-output] {
    grid-column: 1 / span 1;
}

[data-file-btn] {
    grid-column: 2 / span 1;
}

[data-file-input] {
    cursor: pointer;
    border: unset;
    border-radius: 4px;
    transition: all 0.2s ease;
    transition-property: box-shadow, border-color;
}

[data-file-output] {
    display: grid;
    grid-template-columns: 1fr auto;
    position: relative;
    z-index: 1;
}

[data-file-output] > output {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    align-content: center;
    flex: 1;
    background-color: var(--base);
    border: 1px solid var(--blue-800);
    padding-left: 15px;
}

[data-file-btn] {
    position: relative;
    z-index: 0;
    pointer-events: auto;
    grid-columns: -1;
}

button[data-file-clear] {
    background-color: var(--blue-800);
    color: var(--tertiary);
    pointer-events: auto;
    grid-column: -1;
    grid-row: 1;
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    right: 0;
    align-self: center;
    margin-right: 1rem;
    border-radius: 10rem;
    display: grid;
    place-content: center;
}

button[data-file-clear]:focus {
    background-color: var(--green-100);
    color: var(--base);
}

.nojs button[data-file-clear] {
    display: none !important;
}

[data-file-btn] > label {
    background-color: var(--blue-800);
    color: var(--tertiary);
    padding: 15px 69px;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    transition-property: background-color, opacity, border-color;
}

[data-file-upload]:hover > [data-file-output] > output {
    color: var(--black-100);
}

[data-file-upload]:hover > [data-file-btn] > {
    opacity: 0.9;
}

[data-file-input]:focus {
    outline: transparent 1px;
    box-shadow: var(--green-focus);
    border-color: var(--primary);
}

[data-file-input]:focus ~ [data-file-output] > output,
[data-file-input]:focus ~ [data-file-btn] > label {
    border-color: var(--primary);
}

[data-file-input]:focus ~ [data-file-btn] > label {
    background-color: var(--green-100);
    color: white;
}

/** The fallback for outputs in case Javascript is turned off */
.nojs [data-file-input]:valid ~ [data-file-output] > output {
    color: transparent;
    position: relative;
}

.nojs [data-file-input]:valid ~ [data-file-output] > output::after {
    color: var(--black-100);
    content: 'File Uploaded';
    grid-column: 1;
    grid-row: 1;
    position: absolute;
}

[data-file-output],
[data-file-output] *,
[data-file-btn] > label * {
    pointer-events: none;
}

[data-file-upload="left"] > [data-file-btn] > label {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

[data-file-upload="left"] > [data-file-output] > output {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left-width: 0;
}

[data-file-upload="right"] > [data-file-output] > output {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right-width: 0;
}

[data-file-upload="right"] > [data-file-btn] > label {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}




/** /File Input **/

/** FilePond **/

.filepond--panel-root {
    background-color: var(--blue-800);
    border-radius: 4px;
}

.filepond--drop-label {
    color: var(--tertiary);
}

/** /FilePond **/


/** Placeholder **/
/**
    FormAssembly URL Prefill
    doesn't work on text fields, only inputs
    So we need to add some extra styling for 
    the [readonly] inputs
 **/
/* Sub Grid polyfill *kinda* */
.fa-placeholder-wrapper {
    display: grid;
    grid: inherit;
    grid-column: 1 / -1;
    padding-bottom: 0.25rem;
}

.fa-placeholder-wrapper > .fa-placeholder-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--blue-300);
}

.fa-placeholder-wrapper > .fa-placeholder-value {
    color: var(--green-300);
    font-size: 0.9rem;
}
/** /Placeholder */


.pretty.p-has-focus input ~ .state label::before {
    transition-duration: 0.25s;
}

.pretty.p-has-focus input:focus ~ .state label::before {
    box-shadow: 0 0 0 0.2rem rgba(60, 91, 106, 0.3);
}



.error-message {
    color: var(--red-500);
}

.error.form-control:focus {
    border-color: var(--red-500);
    box-shadow: var(--red-focus);
}

/**
    FormAssembly inserts a `<a href="site-resources/developer-resources/styles/form.styles.css#" />` element
    to use as a "remove section" button, which avoids all
    Bootstrap styles. This adds in the missing user-select styles
 */
.removeLink,
.removeLink * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.removeLink {
    display: inline-block;
}