/**
 * Global styling shared between app, customer portal and potentially admin in the future
 */

/* prepared spinner icon on buttons */
.button-spinner-hidden { position: absolute; opacity: 0; z-index: -1; }

/* wider-spaced grid */
.grid-x.grid-margin-x.wider-x-space {
    & > .cell:not(:first-child) { padding-left: .5rem; }
    & > .cell:not(:last-child) { padding-right: .5rem; }
}

/* loader icon */
.inv_waiting-box {
    display: block;
    text-align: center;
    position: fixed; /* fixed position so it doesn't scroll */
    z-index: 9999; /* on top of everything else */
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    div {position: fixed;top: 50%;left:50%;margin-top:-1rem;margin-left:-10rem;height:2rem; width:20rem; background-color:#FFF;}
}

/**
 * Custom styling for AlpineJS forms
 */

    /* x-cloak directive */
    [x-cloak] { display: none !important; }

    /* Hidden input for required xchoices element */
    input.xchoices-hidden-required { display: block; opacity: 0; width: 0; height: 0 !important; padding: 0 !important; margin: 0 !important; position: relative; top: -20px; border: 1px solid transparent; z-index: -1; }

    /* Uppercase inputs */
    input.ttu { text-transform: uppercase; }

    /* Required fields, xchoices on single row */
    :required,
    [data-xchoices-validation="required"] .choices__inner {border: 1px solid #FF305D}
    .choices__item {white-space: nowrap; overflow:clip}

    /* Make x-choices fields same height as other inputs */
    div.choices div.choices__inner { min-height: 39px; padding-bottom: 0; }
    div.choices div.choices__inner .choices__list--single { padding-top: 0; padding-bottom: 0; }
    div.choices[data-type*=select-one] div.choices__inner { padding-bottom: 4.5px; }
    div.choices[data-type*=select-one] > .choices__list > .choices__list > .choices__item--selectable {padding-right: 0px;}
    div.choices[data-type*=select-one] > .choices__list > .choices__list > .choices__item--selectable::after{display: none;}

    div.choices[data-type*=select-multiple] div.choices__inner { padding-top: 2px; padding-bottom: 2px; }
    div.choices[data-type*=select-multiple] div.choices__inner input.choices__input { margin-top: 2px; height: 29px; margin-bottom: 2px; width: 1ch; }
    div.choices[data-type*=select-multiple] div.choices__inner .choices__list--multiple .choices__item { margin-top: 1px; margin-bottom: 2px; height: 29px; }

    /* Give x-choices extra border and shadow same as other fields when active */
    div.choices, div.choices:last-child { transition: box-shadow .5s; margin-bottom: 1rem; }
    div.choices > .choices__inner { transition: border-color .25s ease-in-out; }
    div.choices.is-focused { box-shadow: 0 0 5px #cacaca; }
    div.choices.is-focused > .choices__inner { outline: 0; border-color: #8a8a8a !important; }

    /* xchoices multiselect more contrast */
    div.choices__list--multiple div.choices__item { background-color: #14679E; border-color: #14679E; }
    div.choices__list--multiple div.choices__item.is-highlighted { background-color: #143f51; border-color: #222; }

    /* checkbox with description wrapped in label */
    label.builder-checkbox { line-height: 1.2; }
    label.builder-checkbox > input[type="checkbox"] { margin-bottom: 0; }

    /* fieldset wrapping checkboxes */
    fieldset.checkboxes-fieldset > legend { font-size: .875rem; color: #0a0a0a; }
    fieldset.checkboxes-fieldset > label { display: inline-block; }
    fieldset.checkboxes-fieldset > label:not(:last-child) { margin-right: 1em; }
    fieldset.checkboxes-fieldset > label > input { margin-right: .3em; }

    /* invisible checkbox to be used with labels and custom icons */
    input[type="checkbox"].invisible-checkbox { position: absolute; z-index: -1; opacity: 0; visibility: hidden; }

    /* non-native modal dialogs */
    div[x-data].non-native-dialog-open::before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 1000; }
    div[x-data].non-native-dialog-open dialog { position: fixed; inset-block-start: 0; inset-block-end: 0; max-width: calc((100% - 6px) - 2em); max-height: calc((100% - 6px) - 2em); user-select: text; visibility: visible; overflow: auto; z-index: 2000; }

    /* single file upload showing items inline besides button and fitting into grid */
    div[x-data^="fileUploadComponent("] { display: flex; align-items: flex-end; padding-bottom: 1rem;
        & > .button { margin-right: .2rem; margin-bottom: 0; }
        .inner { overflow: hidden;
            .preview { overflow: hidden;
                .image-preview { max-width: 150px; }
                .callout { display: flex; padding-top: .25rem; padding-bottom: .25rem;  padding-right: 0; min-height: 40px; margin-bottom: 0;
                    button.linklike { overflow: hidden; text-overflow: ellipsis; }
                    .text-file-name { overflow: hidden; text-overflow: ellipsis; display: block; align-self: center; }
                }
            }
            .text-alert { line-height: 1.25rem; margin-bottom: 0; min-height: 40px; display: flex; align-items: center; }
            .preview + .text-alert { min-height: 0; margin-top: .5rem; }
        }
    }

    /* multi file upload components not stretch file input field */
    div[x-data^="fileUploadComponentMultiple("] > input[type="file"] { overflow: hidden; text-overflow: ellipsis; max-width: 230px; }

    /* very invalid red field */
    input.strong-red-warning { background: red; }

/**
* Utility classes
*/
    .cursor-pointer { cursor: pointer; }
    .\!cursor-pointer { cursor: pointer !important; }
    .relative { position: relative; }
    .inline-block { display: inline-block; }
    .inline-flex { display: inline-flex; }

    .text-alert { color: #c60f13; }
    .text-warning { color: #d98f0d; }
    .\!text-white { color: #fff !important; }
    .\!m-0 { margin: 0 !important; }
    .mx-4 { margin-left: 1rem; margin-right: 1rem;}
    .\!my-0 { margin-top: 0 !important; margin-bottom: 0 !important;}
    .my-1 { margin-top: .25rem; margin-bottom: .25rem;}
    .my-2 { margin-top: .5rem; margin-bottom: .5rem;}
    .mb-0 { margin-bottom: 0; }
    .\!mb-0 { margin-bottom: 0 !important; }
    .mb-1 { margin-bottom: .25rem; }
    .mb-2 { margin-bottom: .5rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .\!ml-0 { margin-left: 0 !important; }
    .ml-1 { margin-left: .25rem; }
    .ml-2 { margin-left: .5rem; }
    .mr-\.5 { margin-right: .125rem }
    .mr-1 { margin-right: .25rem; }
    .\!mr-1 { margin-right: .25rem !important; }
    .mr-2 { margin-right: .5rem; }
    .mr-3 { margin-right: .75rem; }
    .mr-4 { margin-right: 1rem; }
    .mr-8 { margin-right: 2rem; }
    .mt-0 { margin-top: 0; }
    .mt-1 { margin-top: .25rem; }
    .mt-2 { margin-top: .5rem; }
    .mt-4 { margin-top: 1rem; }
    .mt-6 { margin-top: 1.5rem; }

    .p-1 { padding: .25rem; }
    .p-2 { padding: .5rem; }
    .px-0 { padding-left: 0; padding-right: 0; }
    .px-1 { padding-left: .25rem; padding-right: .25rem; }
    .px-2 { padding-left: .5rem; padding-right: .5rem; }
    .px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
    .pt-label-height { padding-top: 25px; }
    .pt-2 { padding-top: .5rem; }
    .pt-3 { padding-top: .75rem; }
    .pt-4 { padding-top: 1rem; }
    .pt-7 { padding-top: 1.75rem; }
    .pr-0 { padding-right: 0;}
    .pr-1 { padding-right: .25rem;}
    .pr-8 { padding-right: 2rem; }
    .pl-0 { padding-left: 0; }
    .pl-1 { padding-left: .25rem; }
    .pl-2 { padding-left: .5rem; }
    .pb-1 { padding-bottom: .25rem; }
    .\!pb-2 { padding-bottom: .5rem !important; }
    .\!px-1 { padding-left: .25rem !important; padding-right: .25rem !important; }

    .w-fit { width: fit-content; }
    .w-full { width: 100%; }
    .\!w-full { width: 100% !important; }
    .w-4 { width: 1rem; }
    .w-20 { width: 5rem; }
    .w-22 { width: 5.5rem; }
    .w-36 { width: 9rem; }
    .min-w-20 { min-width: 5rem; }
    .max-w-fit { max-width: fit-content; }
    .max-w-full { max-width: 100%; }

    .fz-0 { font-size: 0; }
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .\!text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
    .font-bold { font-weight: 700; }

    .leading-none { line-height: 1; }

    .text-left { text-align: left; }

    .whitespace-nowrap { white-space: nowrap; }
    .\!whitespace-pre-wrap { white-space: pre-wrap !important; }
    .pointer-events-none { pointer-events: none; }

    .opacity-30 { opacity: .3 }

    .vercical-align-middle { vertical-align: middle; }

    /* responsive variants */
    @media(min-width: 40em) {
        .md\:mt-8 { margin-top: 2rem; }
        .md\:pr-4 { padding-right: 1rem }
        .md\:pl-4 { padding-left: 1rem }
    }
    @media(max-width: 39.9em) {
        .sm-only\:mb-0 { margin-bottom: 0; }
    }