@charset "utf-8";
/*
Core form styling
 */

form, fieldset {
    border: 0;
    padding: 0;
}
form dd, form dt {
    margin-inline-end: 0;
    margin-inline-start: 0;
}
label input[type="text"] {
    font-weight:normal;
}


main, dialog {


    /* inline elements for table filters */
    form.vi-table-filter {

        background-color: var(--bg-accent-1);
        border: 1px solid var(--border-color);
        border-bottom-width: 0;
        &:not(.vi-form-container) {
            padding: var(--space-3xs-2xs);
            padding-bottom: var(--space-m);
        }

        fieldset {
            margin-top:var(--focus-outline-width);
            margin-bottom: 0;

            &.vi-visible-filters {
                padding: 0 var(--space-3xs-2xs) var(--space-3xs-2xs) 0;
            }

            /* inline elements for table filters, not in an accordion */
            &.vi-visible-filters , &.vi-visible-filters > div {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-m) var(--space-2xs);
                align-content: center;
                justify-content: flex-start;
                align-items: center;

                label {
                    display: inline-flex;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    font-weight:300;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: row;
                    gap: var(--space-3xs);
                    margin-right: var(--space-2xs);

                }
                input, select {
                    margin:0;
                }
                .form-check:not(.ll-twolevel-container) {
                    columns: 1;
                }
                .optiongroup, .elementgroup {
                    display:inline-flex;
                    align-items: center;
                    gap:var(--space-3xs);
                    label {
                        margin-right: var(--space-m);
                    }
                    &:has(.vi-maywrap) {
                        flex-wrap: wrap;
                        gap:var(--space-s);
                    }
                }
            }
            &.vi-visible-filters > div {
                flex-wrap:nowrap;
            }
            &.vi-visible-filters > div:has(.vi-maywrap) {
                flex-wrap: wrap;
            }

        }

        .action , .actionbuttons {
            display: inline;
            position: sticky;
            bottom: 0;
            padding-bottom: var(--space-l);
        }

        /* the visible, inline ones aren't in a fieldset
        :not(fieldset) {

            div:has(input, select) {
                display:inline-flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                @media (max-width: 768px) {
                    flex-wrap:wrap;
                }
            }
            label {
                margin:0;
            }
            input, select {
                margin-left:var(--space-2xs);
                margin-right: var(--space-m);
            }

            div.actionbuttons, div.action {
                display: inline;
            }
        }
*/

    }

    /* elements inside details/summary elements */
    details {
        :is(h1,h2,h3,h4,h5,h6) {
            color: var(--theme-color);
            font-size: var(--step-1);
        }
    }


    input, button, [role="button"], textarea, select , .lplt-rte-viewer , .vi-input, .yui-pg-current-page {
        border-width: var(--border-width);
        border-style: solid;
        border-color: var(--border-color);
        background: var(--white-black);
        color: var(--color);
        border-radius: var(--border-radius);
        outline: var(--focus-outline-width);
        outline-color: var(--bg);
        /*outline-style: solid;*/
        &.vi-input-wide {
            width: 100%;
        }
    }
    td textarea {
        height: 5rem;
        width:100%;
    }
    textarea:not([rows]) {
        height: 12rem;
    }

    button:has(.icon) {
        display:flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
    }

    a:has(button .icon) {
        text-decoration: none;
    }
    input, textarea, select {
        padding: var(--space-3xs);
        margin-block-start: var(--focus-outline-width);
    }

    form:not(.inline) :not(.action) button[type="submit"] {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        box-shadow: 1px 4px 1px 0 #676767;
        border-bottom: 1px solid #d5d5d5;
        border-right: 1px solid #d5d5d5;
        text-shadow: 1px 0 black;

    }

    .primary > a > button, .primary > button,
    form .action .saveButton,
    form :is(button, input)[type="submit"]:not(.secondary),
    :is(button, input)[type="submit"][form] {
        background-color: var(--theme-color-3);
        color: var(--color-on-dark);
        border-color:var(--theme-color-3);
        border-radius: var(--border-radius);
    }


    .lplt-profile-container form:not(.vi-table-filter) {
        background:none;
    }
    form {
        background-color: var(--bg-accent-2);

        /* if there's no top save button: */
        [role="tablist"] + fieldset {
            margin-top: var(--space-m);
        }

        fieldset {
            margin-block-end: var(--space-m);

            &.formtab legend {
                display:none;
            }
        }
        fieldset:not(.rounded):focus {
            outline-offset: var(--space-2xs);
        }

        fieldset fieldset:last-of-type button.ll-tab-next{
            display: none;
        }
        fieldset fieldset:first-of-type button.ll-tab-prev{
            visibility:hidden; /* display mucks up layout and puts the next button on the left */
        }


        /* list of checkboxes as lozenges */
        fieldset div.optiongroup:has(.vi-checkbox-taglist) {
            display:flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap: var(--space-2xs);

            >label {
                margin-top:var(--space-s);
                display: flex;
                align-items: center;
                gap: var(--space-3xs);
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: space-between;

                &:has(> .vi-checkbox-taglist) {
                    border:1px solid var(--border-color);
                    border-radius:50000px;
                    padding: var(--space-3xs) var(--space-xs);
                    margin-top:0;
                }

                input {
                    margin-left: var(--space-2xs);
                }
            }
        }

        /* Spacing after form element blocks: a bit complicated by .hints appearing after main element */
        .vi-visible-filters *:has( > label) {
            margin-block-end: 0;
        }
        *:has( > label) {
            margin-block-end: var(--space-l);
        }
        /* move the spacing to after a .hint or .form-text */
        *:has(>label):has(+ .hint, + * + .form-text) {
            margin-block-end:0;
            & + :is(.hint), & + * + :is(.form-text) {
                margin-block-end: var(--space-l);
            }
        }

        label {
            display: block;
            margin-block-start: 0;
            margin-block-end: var(--space-2xs);
        }
        label:has(input,textarea) {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            flex-direction: row;
            gap: var(--space-3xs);

            input , textarea {
                margin-right: 1rem;
                font-weight: normal;
            }
        }
        label:has(textarea, input[type="text"]) {
            align-items: baseline;
        }

        .optiongroup {
            label {
                margin-block-start: 0;
                break-inside: avoid-column;
            }
            br {
                display:none;
            }

        }


        :root {
            --num-columns: 2;
            --input-width: 50%;
        }
        @container (width > 1200px) {
            --num-columns: 3;
        }
        @container (width < 768px) {
            --num-columns: 1;
            --input-width: 100%;
        }



        input[maxlength="1"] {
            --input-width: 2rem;
        }
        input[maxlength="2"] {
            --input-width: 3rem;
        }
        input[maxlength="4"] {
            --input-width: 5rem;
        }

        input[maxlength="6"] {
            --input-width: 7rem;
        }
        input[maxlength="10"] {
            --input-width: 11rem;
        }
        input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select {
            min-width: var(--input-width);
            max-width: 100%;

        }
        textarea {
            width: 100%;
        }
        input[type="number"][maxlength] {
            text-align: center;
            margin-left: 1rem;
            width: var(--input-width); min-width: var(--input-width); max-width: var(--input-width);
        }
        label:has(+input[maxlength][type="number"]), input[type="number"][maxlength] {
            display:inline-block;
        }
        input[type="date"] , input[type="time"]{
            min-width: 14ch;
            max-width: 20ch;
        }
        input[type="datetime-local"] {
            min-width: 18ch;
            max-width: 20ch;
        }

        @media (max-width: 768px) {

            --input-width: 100%;
            .vi-visible-filters {
                input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"]), textarea, select {
                    min-width: auto;
                    width: auto;
                    margin-left: 0;
                }
            }
            input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"]), textarea, select {
                min-width: var(--input-width);
                width: var(--input-width);
                margin-left: 0;
            }

            input:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"]), textarea, select {
                min-width: 100%;
                width: 100%;
                margin-left: 0;
            }

            /* no rich text on small screens */
            .ll-texteditor-container [role="toolbar"] {
                display: none;
            }
        }



        /** Single line checkboxes - put checkbox on same line as label */
        div:has(>.form-check-single) {

            display: flex;
            gap: var(--space-2xs) var(--space-m);
            justify-content: start;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            justify-items: start;
            margin-block-start: var(--space-l);


            label {
                margin-block-start:0;
                margin-block-end: 0;
                max-width: 75%;
            }
            input {
                padding: 0;
                margin: 0 0 0 var(--space-m);

            }
        }

        .form-check:not(.ll-twolevel-container) {
            columns: var(--num-columns);
        }
        .form-check li.form-check,
        .form-check:has(.vi-single-column) {
            columns: 1;
        }
        /** Columns for multiple checkboxes */
        div.vi-twolevel-container:has(input:nth-of-type(3)):not(:has(ol input)),
        div.vi-twolevel-container:has(:nth-child(5)) {
            columns: var(--num-columns);
        }
        /* except workareas */
        div.vi-twolevel-container:has(input:nth-of-type(3)):not(:has(ol input)),
        div.vi-twolevel-container:has(:nth-child(5)) {
            columns: 1;
        }
        .vi-twolevel-container {
            label {
                font-weight: normal;
                margin-block-start: var(--space-2xs);
                margin-block-end: var(--space-2xs);

                &[for^="workarea"], &[for^="location"] {
                    border-style:solid;
                    border-width: 0 0 0 8px;
                    background-color: var(--bg);
                    min-height: 44px;
                    border-radius: var(--border-radius);
                    display:flex;
                    padding: var(--space-xs);
                    align-items: center;
                    width: 100%;
                    input {
                        margin-top: 0;
                        margin-left:0;
                    }
                }
            }

            .ll-submenu {
                columns: var(--num-columns);
                background: var(--bg);
                margin-top: calc(-1 * var(--space-2xs));
                margin-left: 8px; /* border width*/

                *:has(>label) {
                    margin-block-end:var(--space-2xs);
                    break-inside: avoid-column;
                    display: inline-grid;
                    align-items: center;
                    grid-template-columns: 1fr 7fr;
                    justify-content: start;
                    justify-items: start;
                    gap: var(--space-3xs);
                }
            }
        }

        /** More general checks / radios */
        input:is([type="radio"], [type="checkbox"]) {

            margin-left: var(--space-m);

            ~ label {
              /*  display: inline-block;*/
                font-weight: 400;
                padding: 0;
                margin: 0;
                margin-block-end: 0;
                /*margin-block-start: -22px;  /* 22px is half the height of a checkbox */
                /*vertical-align: middle;*/
            }

            ~ div {

                ol:not(:empty) {
                    columns: var(--num-columns);
                    margin-block-end:var(--space-m);
                    margin-block-start: var(--space-xs);
                }

                li {

                    margin-left: var(--space-xl);

                    input:is([type="radio"], [type="checkbox"]) {
                        margin-left: 0;
                    }
                }


            }
        }

        /** Tab navigation in forms */
        [role="tablist"] {
            background-color: var(--bg);
            border: 0;
            counter-reset: form-tab-counter;
            padding-left: calc(22px + var(--space-xs-m));

            :is([role="tab"], [role="tab"]:focus) {
                border: 3px solid transparent;
                border-top-right-radius: 22px;
                border-bottom-right-radius: 22px;
                counter-increment: form-tab-counter;
                margin-right: 2rem;
                padding: 0 22px 0 2px;

                /* start with 'previous' tabs */
                .counter {
                    &:before {
                        content: counter(form-tab-counter);
                    }
                    background-color:var(--theme-color) !important;
                    border-radius: 50%;
                    color: var(--color-on-dark);
                    padding: 2px 6px 0;
                    width: 44px;
                    height: 44px;
                    text-align: center;
                    /* margin-right: 0.3rem; */
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: -4px;
                    margin-bottom: -4px;
                    left: -22px;
                    position: relative;
                }

                .label {
                    margin-left: -22px;
                    padding-left:0.5rem;
                    background: transparent !important;
                }

                /* current tab */
                &[aria-selected="true"] {

                    border-color: var(--theme-color-2);

                    .counter {
                        background-color:var(--theme-color-2) !important;
                        &:before {
                            content: '✔';
                        }
                    }

                    /* subsequent tabs */
                    ~ [role="tab"] .counter {
                        background-color: var(--bg-dark) !important;
                    }
                }

                /* disabled tab */
                &[aria-disabled="true"] {
                    color: var(--gray);
                    &:before {
                        background-color: var(--gray);
                    }
                }


            }
        }
        .vi-form-progress-container {
            width:100%;
            margin-top: var(--space-2xl);
            progress {
                width:100%;
                height:var(--space-l);
                accent-color: var(--theme-color-3);
            }
            progress:after{
                content: "Section " attr(value) " of " attr(max);
                display: flex;
                justify-content: space-around;
                top: var(--space-m);
                font-size: var(--step--1);
                position: relative;
            }
        }
        .vi-form-nextprev-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-s);
        }


        /** Big save buttons */
        input:is([type="submit"]) {
            margin-left: 0;
            min-width: 30%;
        }
        .action:has(.saveButton.primary) {
            margin: var(--space-s) 0 var(--space-m) 0;
        }
        [type="checkbox"], [type="radio"] {
            margin-left: var(--space-m);
        }

    }


    /**
     * Toolbars
     */
    .ll-widget {
        [role="toolbar"] {


            font-size: var(--step--1);
            background: var(--bg-accent-1);
            padding: var(--space-2xs);


            fieldset {

                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: stretch;
                justify-content: flex-start;
                align-items: flex-end;
                margin-right: var(--space-s);

                input, select, textarea {
                    min-width: auto;
                    padding: var(--space-3xs);
                    margin: 0;
                    min-height: 44px;
                }


                label {
                    font-weight: 300;
                    margin-block: 0 0;
                }

                span {
                    label {
                        display: block;
                        white-space: nowrap;
                    }

                    margin: 0 var(--space-3xs);
                }


                /** grouped buttons */
                button:has(+button), .vi-input:has(+.vi-input) {
                    margin-right: calc(-1 * var(--focus-outline-width));
                    margin-left: 0;
                    border-right-width: 0;
                    border-radius: 0;
                    padding: var(--space-3xs);
                    padding-right: var(--space-2xs);
                }

                button:has(+button):first-of-type, .vi-input:has(+.vi-input):first-of-type {
                    border-top-left-radius: var(--border-radius);
                    border-bottom-left-radius: var(--border-radius);
                }

                button:not(:has(+button)), .vi-input:not(:has(+.vi-input)) {
                    margin-left: 0;
                    border-right-width: var(--border-width);
                    border-radius: 0 var(--border-radius) var(--border-radius) 0;
                }
                &:has(>button:only-of-type) button, &:has(>.vi-input:only-of-type) .vi-input {
                    border-radius: var(--border-radius);
                }

            }
        }
    }



    /**
     * Text editor
     */
    .ll-texteditor-container {

        margin-bottom: var(--space-s);
        border-style: solid;
        border-color: var(--theme-color);
        border-width: var(--border-width);
        border-radius: var(--border-radius);
        background-color: var(--bg);
        color: var(--color);

        .ll_editor_footer {
            background: var(--bg-accent-1);
            padding: var(--space-3xs);
            font-weight: 300;
            font-size: 85%;
            border-top: 1px solid var(--border-color);
        }


        [role="toolbar"] {


            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            background: var(--bg-accent-1);
            padding: var(--space-2xs);
            border-bottom: 1px solid var(--border-color);


            fieldset {

                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: stretch;
                justify-content: center;
                align-items: flex-end;
                margin-right: var(--space-s);
                margin-block-end: 0;

                input, select, textarea {
                    min-width: auto;
                    padding: var(--space-3xs);
                    margin: 0;
                    min-height: 44px;
                }

                legend {
                    font-variant: small-caps;
                }

                label {
                    font-weight: 300;
                    font-size: 85%;
                    margin-block: 0 0;
                }
                .optiongroup label {
                    font-weight: 400;
                }
                [value="bold"] {
                    font-weight: bold;
                }
                [value="italic"] {
                    font-style:italic;
                }
                [value="underline"] {
                    text-decoration:underline;
                }
                [value="strikethrough"] {
                    text-decoration:line-through;
                }
                [value="h1"] {
                    font-weight:900;
                    font-size: 130%;
                }
                [value="h2"] {
                    font-weight:750;
                    font-size: 120%;
                }
                [value="h3"] {
                    font-weight:600;
                    font-size: 110%;
                }

                span {
                    label {
                        display: block;
                        white-space: nowrap;
                        font-size: var(--step--1);
                    }

                    margin: 0 var(--space-3xs);
                }


                /** grouped buttons */

                button {
                    margin-right: 0;
                    outline-offset: calc(-1 * var(--focus-outline-width));
                    margin-left: 0;
                    border-right-width: 0;
                    border-radius: 0;

                    svg {
                        vertical-align: middle;
                    }
                }

                button:first-of-type {
                    border-top-left-radius: var(--border-radius);
                    border-bottom-left-radius: var(--border-radius);
                }

                button:last-of-type {
                    margin-left: 0;
                    border-right-width: var(--border-width);
                    border-top-right-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);
                }


            }
        }

        .ll-texteditor {

            padding: var(--space-2xs);
        }

    }



    .action {
        display:flex;
        flex-wrap: wrap;
        gap: var(--space-s);
        justify-content: flex-end;

        button, [role="button"], button:focus, [role="button"]:focus {
            border-radius: 50000px;
            border-color: var(--bg-dark);

            padding-left: var(--space-s);
            padding-right: var(--space-s);
            margin-bottom: var(--space-3xs);

            display:inline-flex;
            align-items: center;

            &.primary {
                background-color: var(--bg-dark);
                color: var(--color-on-dark);
            }
        }
    }



    /* labels for textareas */
    label:has( + textarea) {
        /* vertical-align: top; */
        /* padding-top: var(--space-xs); */
        /* display: inline-block; */
    }


    [role="toolbar"] {

        input, select, textarea {
            min-width: auto;
        }
    }
}


/* Radio buttons with labels that look like buttons */
.vi-toggle {

    label {
        min-height: 44px;
        padding-inline-start: 6px;
        padding-inline-end: 6px;
        align-content: center;
    }

}

/* Inline forms */
main, dialog {
    form.ll-inline {
        div {
            display:inline-block;
        }
        input {
            margin-left: 0;
        }
    }
}

/* report forms */
form.vi-report {
    .actionbuttons {
        text-align: right;
    }
}
/* search */

.vi-ll-is-searching {
    display:none;
}
.ll-searching + .vi-ll-is-searching {
    display:block;
    width:fit-content;
    margin-top: var(--space-xs);
}
/* comm form */
#commform .vi-tableeditor_container  label:has(>[value="attendees"]) {
    display:none;
}




/*
Form validity - see form-behaviours.js for same css
 */
div:has(>label[data-required="required"]):not(:has( input:is([type="radio"],[type="checkbox"]):checked)),
div:has(>label[data-required="required"] + .optiongroup input[type="checkbox"]):not(:has( input:checked)),
div:has(>label[data-required="required"] + .optiongroup input[type="radio"]):not(:has( input:checked)),
div:has(>label[data-required="required"] + .ll-submenu input[type="checkbox"]):not(:has( input:checked)),
div:not(.optiongroup):has(>label>input[data-required="required"]):not(:has( input:checked)),
div:has(>label + input + input[data-required="required"]),
input:not([type="checkbox"], [type="radio"]):invalid,select:invalid,textarea:invalid
    /* label at top level for multi checkboxes in the .optiongroup*/
/*, div:has(>label.required + .optiongroup input[type="checkbox"]):not(:has(>label.required+ .optiongroup input[type="checkbox"]:checked)),
div:has(>label.required + .optiongroup input[type="radio"]):not(:has(>label.required+ .optiongroup input[type="radio"]:checked)) */ {
    outline: 3px solid #a21d1d;
    outline-offset: var(--space-3xs);
    border-radius:3px;
}
label:has(+ *:required:invalid)::after,
/* single checkbox */
label.required:has(+ input + input[type="checkbox"]:not(:checked) )::after,
/* label at top level for multi checkboxes in the .optiongroup*/
label.required:has(+ .optiongroup input[type="checkbox"]):not(:has(+ .optiongroup input[type="checkbox"]:checked))::after,
label.required:has(+ .optiongroup input[type="radio"]):not(:has(+ .optiongroup input[type="radio"]:checked))::after,
dt:has(+ dd textarea:required:invalid) label::after,
label:has(+ .ll-twolevel-container *:required:invalid)::after {
    content :" (required)";
    color:#a21d1d;
    font-weight: 300;
    font-size: var(--step-0);
}
label:has(+ *:required:valid)::after {
    content : " ✓";
    color:var(--theme-color);
    /*
    font-variant-position:super;
    font-size:65%;
    font-weight:bold;
    vertical-align:super;
     */
}
/*input:user-invalid:required+.lplt-inline-error::after {
    content: '◁ this is required';
    color:#a21d1d;
    padding-left:1rem;
}*/

input:invalid,select:invalid,textarea:invalid {
    border: 2px solid #a21d1d;
    border-radius: 3px;
}

.vi-form-not-valid {
    display:none;
}

.vi-form-valid {
    display:inline-block;
}
input[type=submit][disabled],
button[type=submit][disabled] {
    opacity: 0.75;
    cursor:not-allowed;
}
form:invalid input[type=submit]:not([formnovalidate="formnovalidate"]),
form:invalid button[type=submit]:not([formnovalidate="formnovalidate"]) {
    opacity: 0.75;
    cursor:not-allowed;

    .vi-form-not-valid {
        display:inline-block;
    }
    .vi-form-valid {
        display:none;
    }
    /*
    border: 2px solid #a21d1d;
    border-radius: 3px;

    background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
    color: light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
     */
}
.errors {
    margin-bottom:var(--space-l);
    padding-left:var(--space-m);
    color: #a21d1d;
}


label {
    font-weight: 600;
    display: block;
    background-color: transparent;
    /* margin-block-start: 2rem; */
    /* margin-block-end: 0.5rem; */
}
label + div > label {
    font-weight: 400 ;
}



/* Some specific styling for particular types of form elements */
.ll-recur-container {
    margin-top: var(--space-xs);
    margin-left: var(--space-3xl);
    select {
        min-width: fit-content;
    }
    td input[type="checkbox"] {
        margin-left: 0;
    }
}






/* Built in show/if */

/* For profile type first/last names or full names */
form:has(*[id="typeuserorg-0"]:checked) #fieldset-Fullname,
form:has(*[id="typeuserorg-2"]:checked, *[id="typeuserorg-1"]:checked) #fieldset-Userdetails {
    display:none;
}

/* Comms - SMS */
form:has(input[name="comm_type"][value="4"]:not(:checked)) div:is(#lplt-rowbox-replyMobile,#lplt-rowbox-when_to_send_sms,#lplt-rowbox-sms_reply_email) {
    display:none;
}

/*
Numeric match fields. Value 4 = "between" .
Hides upperbound field if the 'matchfield' is not set to 'between'
*/
.lplt_numberrange select {
    min-width: fit-content;
}
.lplt_numberrange input:not([type="checkbox"], [type="radio"]) {
    min-width: fit-content;
    margin-left: var(--space-3xs);
}
.elementgroup:has(.form-control[name^="match"]) [id$="upperBoundContainer"] {
    display:inline;
}
.elementgroup:has(.form-control[name^="match"] option[value="4"]:not(:checked)) [id$="upperBoundContainer"] {
    display:none;
}

/*
    date ranges - hide upper bound if match is not set to between
 */
.elementgroup:has(.lplt_daterange_datechooser option[value="4"]:not(:checked)) span:has(*[name*="upperBound"]){
    display:none;
}
/* separator between the date fields */
.lplt_daterange_lowerbound:has([name*="upperBound"])::before {
    content: " and ";
    display: inline-block;
    margin-top: var(--space-2xs);
}
/* keep date choosers together */
.lplt_daterange {
    white-space: nowrap;
    display: inline-block;
    margin-left: 1rem;
    select {
        margin-left: var(--space-3xs);
        min-width:fit-content;
    }
}
/* gap between search and table */
#lplt-rowbox-bodysearch {
    margin-block-end: 0;
}

/*
date ranges - hide 'num weeks' if date type is not week or week ahead
 */
.lplt_daterange select[name$="_numweeks"] {
    display: none;
}
.lplt_daterange:has(
option[value="week"]:checked,
option[value="week_ahead"]:checked,
option[value="weeksAgoStartingMonday"]:checked,
option[value="weeksAheadStartingMonday"]:checked
) select[name$="_numweeks"] {
    display: inline;
}
/*
date ranges - hide 'num months' if date type is not month or month ahead
 */
.lplt_daterange select[name$="_nummonths"] {
    display: none;
}
.lplt_daterange:has(option[value="month"]:checked, option[value="month_ahead"]:checked) select[name$="_nummonths"] {
    display: inline;
}
/*
date ranges - hide 'num years' if date type is not year or year ahead
 */
.lplt_daterange select[name$="_numyears"] {
    display:none;
}
.lplt_daterange:has(
option[value="year"]:checked,
option[value="year_ahead"]:checked
) select[name$="_numyears"] {
    display:inline;
}
.lplt_daterange :is(*[name$="_day"], *[name$="_month"], *[name$="_year"]) {
    display:none;
}
.lplt_daterange:has(option[value^="startQuarter"]:checked, option[value^="endQuarter"]:checked) :is( *[name$="_year"]) {
    display:inline;
}
/* date ranges - hide 'fixed date' if date type is not fixed */
.lplt_daterange :is(input[name$="_date"]) {
    display:none;
}
.lplt_daterange:has(option[value="fixed"]:checked) :is(input[name$="_date"])  {
    display:inline;
}

/* date ranges - show year selector for quarters */
.lplt_daterange:has(
option[value="startQuarter1"]:checked,
option[value="startQuarter2"]:checked,
option[value="startQuarter3"]:checked,
option[value="startQuarter4"]:checked,
option[value="endQuarter1"]:checked,
option[value="endQuarter2"]:checked,
option[value="endQuarter3"]:checked,
option[value="endQuarter4"]:checked
) select[name$="_year"] {
    display:inline;
}

input[type="number"]:has(+select option:is([value="today"], [value="tomorrow"], [value="yesterday"]):checked) {
    display:none;
}


/*
Specfic elements
 */

/* group and outcome selectors go too wide in the report, potentially */
#reportform :is(#groupid, #oneoutcomeid) {
    width: calc(100% - var(--space-3xs));
}


.vi-outcome-measure-intab {
    padding-bottom: var(--space-xl);
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: var(--space-xl);
}
/* star rating outcomes */
.lplt-image-radios-outer {

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-s);
    width: 100%;

    .lplt-image-radios {
        display: inline-block;
        width: auto;
        cursor: pointer;
        font-style: normal;
        margin:0;
        padding: 0;
        text-align: center;

        :checked + span.lplt-image-container {
           /* filter: drop-shadow(2px 4px 6px black);
            background: white;*/
            border-radius: 50%;
            border: 5px var(--accent-color) solid;
        }

        span {
           /* filter: grayscale(1);*/
            margin-left: -5px;
            margin-right: 10px;
        }
        input {
            visibility: hidden;
            margin: 0;
            min-height: 0;
            min-width: 0;
        }

        .lplt-image-container {
            display: flex;
            align-content: center;
            justify-content: center;
            flex-direction: row;
            margin-bottom: 1rem;
            border: 5px transparent solid;
            padding: 15px;

            &.size-100 {
                font-size:100%;
            }
            &.size-200 {
                font-size:200%;
            }
            &.size-300 {
                font-size:300%;
            }
        }
    }
}

main form input.lplt-form-outcome-userissue {
    width: 100%;
    min-width: 100%;
}
/* mycaw / mymop */
.vi-outcomes-external-source-7612, .vi-outcomes-external-source-7613 {
    .lplt-form-outcome-comment, .lplt-form-outcome-ourwork {
        display:none;
    }
    /* except medication in mymop */
    .lplt-form-outcome-score-container:has(.mymop-measure-6) .lplt-form-outcome-comment {
        display:block;
    }
    .lplt-form-outcome-notes {
        margin-block-start: var(--space-m);
        display:block;
    }
    .lplt-image-radios-outer {
        display: grid;
        align-items: start;
        justify-items: center;
        grid-template-columns: repeat(7, 1fr);
    }
}

.lplt-form-element-matrix {
    td {
        text-align:center;
        vertical-align: middle;
        dd,dt,select,div, div:has(>.form-check-single) {
            margin:0;
        }
        input:is([type="checkbox"], [type="radio"]) {
            margin:auto;
        }
        &:first-child {
            text-align:left;
        }
    }
}

/* extra save buttons on comms - but them inline so they're not so big */
#lplt-rowbox-commformdo_testbutton, #lplt-rowbox-commformtempsave {
    display:inline;
}

/** inline search for things */
.ll-filterable-block:has(a) {
    display:none;
}
.ll-filterable-block:has(a:not([hidden])) {
    display:block;
}

/* safeguarding form */
#happen_sg_case {
    #case_name {
        height:4em; width:60%;
    }
}