:root {
    --input-width-unit: 6em;
}

/* Main form */

.cForm {
    padding: 0 0 2em 0;
}

.cForm input,
.cForm button,
.cForm select {
    vertical-align: top;
}

/* Each row */

.cForm_row {
    -moz-border-radius: .5em;
    border-radius: .5em;
    padding: .5em .2em;
    white-space: nowrap;
}

.cForm_row:hover {
    background-color: #EEF6FB;
}

/* Used to highlight form rows with focus. */
.formFocused {
    background-color: #DEEDF7;
}

/* Row content (general) */

.cForm_row label {
    display: inline-block;
    font-weight: normal;
    padding: .2em .5em 0 0;
    text-align: right;
    vertical-align: top;
    white-space: normal;
    width: calc(var(--input-width-unit) * 2);
}

/* Action row (submit buttons) */

.cForm_action {
    padding: .2em 0 0 calc(var(--input-width-unit) * 2 + 0.75em);
}

.cForm_action button {
    margin: 0 .5em 0 0;
    min-height: 3em;
    min-width: calc(var(--input-width-unit) * 1.5);
    padding: .1em .4em;
}

/* Error messages */

.cForm_error {
    background-image: url(../images/Error.svg);
    background-position: 0px 3px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    clear: left;
    color: #ff0000;
    direction: ltr;
    margin: 0 0 .3em calc(var(--input-width-unit) * 2 + 0.5em);
    padding: .2em 0 .2em 1.5em;
}

/* Manditory fields

   The class is still put on required inputs, but it has no styling: the image it
   used to point at was fully transparent, so it never marked anything. */

/* Sizing (general) */

.cForm_size_xxs {
    width: calc(var(--input-width-unit) / 2);
}

.cForm_size_xs {
    width: var(--input-width-unit);
}

.cForm_size_s {
    width: calc(var(--input-width-unit) * 2);
}

/* Unsized takes the medium width rather than a width of its own, so a field
   left unsized lines up with the rest of the form instead of sizing itself to
   whatever it happens to contain. Grouped with medium so the two cannot drift
   apart. Inputs that genuinely need the full row -- the display header, say --
   set their own width and are unaffected. */

.cForm_size_us,
.cForm_size_m {
    width: calc(var(--input-width-unit) * 4);
}

.cForm_size_l {
    width: calc(var(--input-width-unit) * 6);
}

.cForm_size_xl {
    width: calc(var(--input-width-unit) * 8);
}

.cForm_size_xxl {
    width: calc(var(--input-width-unit) * 10);
}

/* cInput styles */

/* Headers */

.cInput_displayHeader_wrapper label {
    display: none;
}

.cInput_displayHeader {
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: .5em;
    width: 100% !important;
}


/* Check box */

.cInput_checkbox_wrapper {
    direction: rtl;
    text-align: left;
}

.cInput_checkbox_wrapper label {
    direction: ltr;
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

.cInput_checkbox_wrapper .cInput_checkbox {
    margin-left: calc(var(--input-width-unit) * 2 + 0.5em);
}

.cInput_checkbox {
    margin-top: .3em;
    vertical-align: middle;
}

/* Check list */

.cInput_checklist {
    display: inline-block;
    list-style: none;
}

.cInput_checklist li {
    margin: 0 0 .3em 0;
}

.cForm_row .cInput_checkbox_label {
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

.cInput_checklist_checkall {
    border-right: .1em solid #3F4043;
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 .5em 0 0;
}

.cInput_checklist_uncheckall {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 0 0 .5em;
}

.cInput_colour {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* date */

.cInput_date {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* datetime */

.cInput_datetime {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_dateMonthYear {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* date range */

.cInput_dateRange {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* display (general) */
.cInput_display {
    /* border-bottom: .1em dotted #3F4043; */
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;
}

/* displayImage */

.cInput_displayImage_image {
    min-height: 1.5em;
    width: 100%;
}

/* displayNote */

.cInput_displayNote {
    /* The blue the theme already uses for a focused row. */
    background-color: #DEEDF7;
    border: .1em solid #4A7EA8;
    border-radius: .5em;
    color: #1F4E6B;
    min-height: 1.5em;
    padding: .5em;
    vertical-align: top;
    white-space: normal;

    /* Flex so that a note running onto a second line stays beside the icon
       rather than wrapping underneath it. */
    align-items: flex-start;
    display: inline-flex;
    gap: .5em;

    /* The icon is drawn as a mask rather than a background image: the reference
       icons are stroked with currentColor, which an image cannot resolve, so it
       would come out black. As a mask the colour comes from the box instead. */
    &::before {
        background-color: currentColor;
        content: "";
        flex: none;
        height: 1.25em;
        width: 1.25em;
        -webkit-mask: url(../images/Note.svg) center / contain no-repeat;
        mask: url(../images/Note.svg) center / contain no-repeat;
    }
}

/* displayState */

.cInput_displayState_wrapper {
    direction: rtl;
    text-align: left;
}

.cInput_displayState_wrapper label {
    direction: ltr;
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

/* The state icons are masks rather than background images, so that they take the
   colour of the text around them and stay sharp at any size. Each state supplies
   only its own shape; everything else is shared here. */

.cInput_displayState {
    background-color: currentColor;
    border-bottom: none;
    display: inline-block;
    height: 16px;
    margin: 0 .2em 0 calc(var(--input-width-unit) * 2 + 0.5em);
    overflow: hidden;
    text-indent: 99999px;
    width: 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.cInput_state_check {
    -webkit-mask-image: url(../images/State_On.svg);
    mask-image: url(../images/State_On.svg);
}

.cInput_state_uncheck {
    -webkit-mask-image: url(../images/State_Off.svg);
    mask-image: url(../images/State_Off.svg);
}

.cInput_state_folder {
    -webkit-mask-image: url(../images/State_Folder.svg);
    mask-image: url(../images/State_Folder.svg);
}

.cInput_state_document {
    -webkit-mask-image: url(../images/State_Document.svg);
    mask-image: url(../images/State_Document.svg);
}

.cInput_state_unknown {
    -webkit-mask-image: url(../images/State_Unknown.svg);
    mask-image: url(../images/State_Unknown.svg);
}

.cInput_multi_element .cInput_displayState {
    margin-left: 0;
}

/* displayTextArea */

.cInput_displayTextArea {
    display: inline-block;
}

/* displayTextHtml */

.cInput_displayTextHtml {
    display: inline-block;
    min-height: 1.5em;
}

/* displayTextRich */

.cInput_displayTextRich {
    border: .1em dotted #3F4043;
    min-height: 1.5em;
}

.cInput_displayTextRich iFrame {
    background-color: white;
    border: .1em solid #3F4043;
    min-height: 1.5em;
}


/* displayWarning */

.cInput_displayWarning {
    background-color: #FBE9E7;
    border: .1em solid #B3261E;
    border-radius: .5em;
    color: #8C1D18;
    min-height: 1.5em;
    padding: .5em;
    vertical-align: top;
    white-space: normal;

    align-items: flex-start;
    display: inline-flex;
    gap: .5em;

    &::before {
        background-color: currentColor;
        content: "";
        flex: none;
        height: 1.25em;
        width: 1.25em;
        -webkit-mask: url(../images/Warning.svg) center / contain no-repeat;
        mask: url(../images/Warning.svg) center / contain no-repeat;
    }
}

/* dropdown -- see "selectbox and dropdown" below; styled by Tom Select. */

/* file */

.cInput_file {
    background-color: white;
    border: .1em solid #3F4043;
    /* Fixed rather than a minimum: the browser's own "choose file" control is
       taller than 1.5em, and the button beside it has to be the same height. */
    height: 1.5em;
    padding: .2em;
}

.cInput_file_remove {
    background-color: white;
    border: .1em solid #3F4043;
    /* Sits over the right-hand end of the field, so pull it back by its own full
       width: 6em of content, plus .2em of padding and .1em of border each side.
       The same border, padding and height as the field keep the two the same
       height, so their tops and bottoms line up. */
    margin: 0 0 0 -6.6em;
    height: 1.5em;
    min-width: 6em;
    padding: .2em;
}

/* fileImage */

.cInput_fileImage {
    background-color: white;
    border: .1em solid #3F4043;
    height: 1.5em;
    padding: .2em;
}

.cInput_fileImage_remove {
    background-color: white;
    border: .1em solid #3F4043;
    /* Sits over the right-hand end of the field, so pull it back by its own full
       width: 6em of content, plus .2em of padding and .1em of border each side.
       The same border, padding and height as the field keep the two the same
       height, so their tops and bottoms line up. */
    margin: 0 0 0 -6.6em;
    height: 1.5em;
    min-width: 6em;
    padding: .2em;
}

.cInput_fileImage_preview {
    background-color: white;
    border: .1em solid #3F4043;
    margin-left: 12.5em;
    padding: .2em;
    width: calc(var(--input-width-unit) * 2);
    height: calc(var(--input-width-unit) * 2);
}

.cInput_fileImage_image {
    max-height: 100%;
    max-width: 100%;
}

/* filePreview */

.cInput_filePreview {
    background-color: white;
    border: .1em solid #3F4043;
    height: 1.5em;
    padding: .2em;
}

.cInput_filePreview_remove {
    background-color: white;
    border: .1em solid #3F4043;
    /* Sits over the right-hand end of the field, so pull it back by its own full
       width: 6em of content, plus .2em of padding and .1em of border each side.
       The same border, padding and height as the field keep the two the same
       height, so their tops and bottoms line up. */
    margin: 0 0 0 -6.6em;
    height: 1.5em;
    min-width: 6em;
    padding: .2em;
}

.cInput_filePreview_preview {
    margin-left: calc(var(--input-width-unit) * 2 + 0.75em);
    padding: .2em;
}

/* float */

.cInput_float {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* int */

.cInput_int {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* password */

.cInput_password {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* radiolist */

.cInput_radiolist {
    display: inline-block;
    list-style: none;
}

.cInput_radiolist li {
    margin: 0 0 .3em 0;
}

.cForm_row .cInput_radiobox_label {
    font-weight: normal;
    margin: 0 0 0 .2em;
    text-align: left;
    width: auto;
}

/* selectbox and dropdown

   Both are driven by Tom Select. Its own default styling is kept, apart from the
   border, which is matched to the rest of the form's inputs.

   Tom Select copies the original select's classes -- the size class among them --
   onto its wrapper, so the wrapper is what carries the width. The theme is
   content-box, so putting the border and padding there, exactly as on
   .cInput_text, also lands the field at the same overall width as every other
   input of its size.

   display:inline-flex is layout, not styling: Tom Select's wrapper is
   display:flex, which is block level and would drop the field onto the line
   below its label. Every other field in a form row sits inline beside it. */

/* stretch, not center: the control must fill the wrapper's height. A single
   select whose chosen item is the blank option has no text, and Tom Select
   hides its search input while unfocused, so a centred control collapses to
   0px. Its overflow:hidden then clips the caret away and the visible box is
   only the wrapper, which Tom Select does not listen to, so nothing opens. */

.cForm .ts-wrapper {
    align-items: stretch;
    background-color: #FFF;
    border: .1em solid #3F4043;
    display: inline-flex;
    /* Tom Select asks for a fixed 36px; use the same min-height as the rest. */
    min-height: 1.5em;
    padding: .2em;
    vertical-align: top;
}

/* Tom Select's stylesheet loads after this one, so these have to be at least as
   specific as its own rules, the multi and focus variants included. */

.cForm .ts-wrapper .ts-control,
.cForm .ts-wrapper.focus .ts-control,
.cForm .ts-wrapper.multi.has-items .ts-control {
    /* The control now stretches to the wrapper's height, so centre its own
       content to keep the text where it sat before. */
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Tom Select lays the chosen item and its search input out as one flex row and
   asks for min-width:7rem on the input. At our field widths that does not fit
   beside the item, so the input wraps onto a second line and the control renders
   at double height. The input only needs room while it is actually being typed
   into, so let it shrink; a single select has just the one item, so it has
   nothing legitimate to wrap. */

.cForm .ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}

.cForm .ts-wrapper .ts-control > input {
    min-width: 0;
}

/* Tom Select parks the caret 15px in from the edge, which reads as a gap once
   the control is at our border and padding rather than its own. Sit it closer
   to the edge, in em so it tracks the field's text size. */

.cForm .ts-wrapper.single .ts-control:not(.rtl)::after {
    right: .5em;
}

.cInput_selectBox_wrapper ul {
    list-style: none;
    margin-left: calc(var(--input-width-unit) * 2 + 0.75em);
}

.cInput_selectBox_selectall {
    border-right: .1em solid #3F4043;
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 .5em 0 0;
}

.cInput_selectBox_unselectall {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0 0 0 .5em;
}

/* email */

.cInput_email {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* phone */

.cInput_phone {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* text */

.cInput_text {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* multi lang text */

.cInput_textMultiLang_actual {
    display: none;
}

.cInput_textMultiLang_languages {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5em;
    list-style: none;
}

.cInput_textMultiLang_languages li {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2em;
}

.cInput_textMultiLang_languageName {
    font-size: 0.9em;
    font-weight: normal;
}

.cInput_textMultiLang_language {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* mask text */

.cInput_textMask {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_textMask_toggle {
    display: block;
    margin: 0 0 0 calc(var(--input-width-unit) * 2 + 0.5em);
    padding: .2em;
    text-align: left;
    width: var(--input-width-unit);
}

.cInput_displayTextMask_toggle {
    display: block;
    padding: .2em;
    text-align: left;
    width: var(--input-width-unit);
}

/* textArea */

.cInput_textArea {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

.cInput_textArea.cForm_size_xxs {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_textArea.cForm_size_xs {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_textArea.cForm_size_s {
    height: var(--input-width-unit);
}

.cInput_textArea.cForm_size_m {
    height: calc(var(--input-width-unit) * 2);
}

.cInput_textArea.cForm_size_l {
    height: calc(var(--input-width-unit) * 4);
}

.cInput_textArea.cForm_size_xl {
    height: calc(var(--input-width-unit) * 6);
}

.cInput_textArea.cForm_size_xxl {
    height: calc(var(--input-width-unit) * 6);
}

/* textRich */

/* The border and padding sit on the wrapper, exactly as they do on
   .cInput_textArea, so the field comes out the same width as every other input
   of the same size. The theme is content-box, so both add to the size class. */

.cInput_quill {
    background-color: #FFF;
    border: .1em solid #3F4043;
    display: inline-block;
    padding: .2em;
    vertical-align: top;
    /* The form row sets nowrap to keep labels on one line; let the toolbar wrap. */
    white-space: normal;
}

/* Quill's own stylesheet loads after this one and its rules match just as
   tightly, so name .ql-snow here as well to win back the theme's styling. */

.cInput_quill .ql-toolbar.ql-snow {
    border: 0;
    border-bottom: .1em solid #3F4043;
}

.cInput_quill .ql-container.ql-snow {
    border: 0;
}

/* Heights follow the same scale as the plain text area. */

.cInput_quill.cForm_size_xxs .ql-container {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_quill.cForm_size_xs .ql-container {
    height: calc(var(--input-width-unit) / 2);
}

.cInput_quill.cForm_size_s .ql-container {
    height: var(--input-width-unit);
}

.cInput_quill.cForm_size_m .ql-container {
    height: calc(var(--input-width-unit) * 2);
}

.cInput_quill.cForm_size_l .ql-container {
    height: calc(var(--input-width-unit) * 4);
}

.cInput_quill.cForm_size_xl .ql-container {
    height: calc(var(--input-width-unit) * 6);
}

.cInput_quill.cForm_size_xxl .ql-container {
    height: calc(var(--input-width-unit) * 6);
}

/* time */

.cInput_time {
    border: .1em solid #3F4043;
    min-height: 1.5em;
    padding: .2em;
}

/* Display list */

.cInput_displayList {
    list-style: none;
    /* One item per line, so line the list up by its first item rather than by
       the baseline of its last, which is what an inline-block aligns on. */
    vertical-align: top;
}

.cInput_displayList>li {
    display: block;
    min-width: inherit;
}

/* Hidden */

.cInput_hidden_wrapper,
.cInput_hidden_wrapper * {
    display: none !important;
}

/* Group Multi Inputs */

.cInput_multi,
.cInput_multiStatic {
    display: inline-block;
    list-style: none;
}

.cInput_multi li,
.cInput_multiStatic li {
    border-bottom: .1em solid #3F4043;
    margin-bottom: .2em;
    padding-bottom: .2em;
    white-space: nowrap;
}

.cInput_multi .cInput_multi_element,
.cInput_multiStatic .cInput_multi_element {
    display: inline-block;
    margin-right: 0.1em;
    vertical-align: top;
}

.cInput_multi .cInput_multi_addRemove {
    display: inline-block;
    vertical-align: bottom;
}

.cInput_multi .cInput_multi_addRemove a {
    display: inline-block;
}

.cInput_multi .cInput_multi_add {
    border-right: .1em solid #3F4043;
    padding: 0 .5em;
}

.cInput_multi .cInput_multi_remove {
    padding: 0 .5em;
}

.cInput_multi .cInput_multi_element label,
.cInput_multiStatic .cInput_multi_element label {
    display: block;
    font-weight: normal;
    height: .1em;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    width: auto;
}

.cInput_multi li:first-child .cInput_multi_element label,
.cInput_multiStatic li:first-child .cInput_multi_element label {
    display: block;
    height: auto;
    text-align: left;
    width: auto;
}

.cInput_multi .cInput_multi_element .cInput_checkbox,
.cInput_multiStatic .cInput_multi_element .cInput_checkbox {
    margin: 0;
}

.cInput__wrapper {
    white-space: nowrap;
}

.cInput__wrapper label,
.cInput__wrapper .cInput_multi {
    white-space: normal;
}

/* drawing and signiture

   The field is a span that the script fills with a canvas, and it sets the
   display and position itself; these are only the colours and the frame, to
   match the rest of the form's inputs. No padding: the signature canvas is laid
   over the whole box, so padding would shift it out of place. The canvas is
   sized to include the border, so the overflow is clipped. */

.cInput_drawing,
.cInput_signature {
    background-color: white;
    border: .1em solid #3F4043;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

/* The popup drawing and signiture */

.cInput_drawing_popupOverlay {
    background-color: #3F4043;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}

.cInput_drawing_popupWindow {
    background-color: white;
    border: 0.2rem solid #3F4043;
    box-shadow: 1rem 1rem 2rem 0 #3F4043;
    left: 50%;
    min-height: min(100vh, 30rem);
    min-width: min(100vw, 45rem);
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    z-index: 201;

    & .cInput_drawing_popupImage {
        display: block;
        margin: 0 auto;
        max-height: max(50px, calc(100vh - 21rem));
        max-width: max(26rem, calc(100vw - 3rem));
    }


    & .cInput_drawing_popupToolbar {
        border-top: 1px solid #3F4043;

        & label {
            display: inline-block;
            padding: 0.3rem;
        }

        & input[type=radio] {
            margin-right: 0.2rem;
            vertical-align: middle;
        }

        & .cInput_drawing_popupToolbar_tools,
        .cInput_drawing_popupToolbar_colours,
        .cInput_drawing_popupToolbar_sizes,
        .cInput_drawing_popupToolbar_menu {
            padding: 1rem;
        }

        & .cInput_drawing_popupToolbar_tools_title,
        .cInput_drawing_popupToolbar_colours_title,
        .cInput_drawing_popupToolbar_sizes_title,
        .cInput_drawing_popupToolbar_menu_title {
            display: inline-block;
            width: 4rem;
        }

        & button {
            padding: 0.5rem;
        }
    }
}

.cInput_signature_popupOverlay {
    background-color: #3F4043;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}

.cInput_signature_popupWindow {
    background-color: white;
    border: 0.2rem solid #3F4043;
    box-shadow: 1rem 1rem 2rem 0 #3F4043;
    left: 50%;
    min-height: min(100vh, 30rem);
    min-width: min(100vw, 45rem);
    padding: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    z-index: 201;

    & .cInput_signature_popupImage {
        display: block;
        margin: 0 auto;
        max-height: max(50px, calc(100vh - 21rem));
        max-width: max(26rem, calc(100vw - 3rem));
    }

    & .cInput_signature_popupToolbar {
        border-top: 1px solid #3F4043;

        & .cInput_signature_popupToolbar_menu {
            padding: 1rem;
        }

        & .cInput_signature_popupToolbar_menu_title {
            display: inline-block;
            width: 4rem;
        }

        & button {
            padding: 0.5rem;
        }
    }
}

/* displayButton */

.cInput_displayButton {
    min-height: 2em;
    padding: 0.2em 0.5em;
}

/* displayLink variants */

.cInput_displayLink,
.cInput_displayPopupLink,
.cInput_displayImageLink,
.cInput_displayPopupImageLink {
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;

    & img {
        height: stretch;
        width: stretch;
    }
}

/* disabled link variants */

.cInput_displayDisabledLink,
.cInput_displayDisabledImageLink,
.cInput_displayDisabledPopupLink,
.cInput_displayDisabledPopupImageLink {
    color: #888888;
    display: inline-block;
    min-height: 1.5em;
    padding: .2em;

    & img {
        height: stretch;
        width: stretch;
    }

    /* These render the anchor without an href so that it does not act as a
       link, which also costs it the underline. Put that back, and set the
       colour here rather than inheriting it: the global rule in main.css gives
       every element its own colour, so the one above never reaches the anchor. */
    & a {
        color: #888888;
        text-decoration: underline;
    }
}

/* image link variants

   An underline is drawn under text, so it never shows on a link that holds only
   an image. Put the line on the image itself instead. It goes here rather than
   on the anchor so that nothing about the layout changes: these images are sized
   with width and height of stretch, which resolves against whatever box contains
   them, so giving the anchor a size of its own throws that sizing out. */

.cInput_displayImageLink img,
.cInput_displayPopupImageLink img {
    border-bottom: .1em solid #3F4043;
    padding-bottom: .2em;
}

.cInput_displayDisabledImageLink img,
.cInput_displayDisabledPopupImageLink img {
    border-bottom: .1em solid #888888;
    padding-bottom: .2em;
    /* Drain the colour out and lift it towards the background, so a disabled
       image reads as disabled the same way the greyed text beside it does. */
    filter: grayscale(1);
    opacity: .6;
}