html {
    /* Force-enable scrollbars on this page so there's no horizontal jumping when the scrollbar would become visible because the user expanded a details row. */
    overflow-y: scroll;
}

/* Disabled for now as we don't use jQueryUI anymore (wooo!) but this CSS may be useful elsewhere.

/* Hide accordion content by default until jQuery loads to prevent page glitching.
Need to use our own selectors because this is before jQueryUI's `accordion()` runs. * /
html.loading #checklistSection > h3,
html.loading #checklistSection > .accordionPane {
	/*display: none;* /
	visibility: hidden;
}

#checklistLoading {
	display: none;
}
html.loading #checklistLoading {
	display: flex;
	flex-direction: column;
	align-items: center;

	position: relative;
	margin: 0.25em auto;
}
	html.loading #checklistLoading::after {
		content: '';
		display: block;
		width: 128px;
		height: 128px;
		box-sizing: border-box;
		border-radius: 50%;
		border: 12px solid rgba(0, 0, 0, 0.2);
		border-color: rgba(0,0,0,0.4) transparent rgb(128, 128, 128) transparent;
		border-color: rgba(0,0,0,0.4) transparent var(--color-accent) transparent;
		animation: rotate360 1.2s linear infinite;
	}

*/

/* #######################################################################
# On-load animation
####################################################################### */
body.firstChecklistLoad #checklistSection {
    /* Same as div.tableWrapper in InspectionList.css */
    /* This also should distract-from (mentally hide) any visible checklist loading (e.g. iAutoHaus with too many Conclusions) */
    animation-name: panel;
    /* */
    animation-duration: 0.8s;
    animation-duration: 1.2s;
    /*	animation-duration: 1.6s;*/
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}



/* #######################################################################
# <section.pageHeader> and inspection information/details fields:
####################################################################### */

section.pageHeader {
    position: -webkit-sticky;
    position: sticky;
    /* Don't make the pageHeader sticky in all pages (just yet) as there are problems when a page has multiple sticky elements. */
    top: 5px;
    /* 5px because the .pageHeader has `margin: 0;` and `body { padding: 5px; }` */
    z-index: 104;

    /*
		box-shadow:
			{inset} {x} {y} {blur-radius} {spread-radius} {color}

		Reminder:
			* spread-radius can be negative.
			* spread-radius defines the size of the shadow's initial area before the blur filter is applied.

		To have a hard (sharp edge) that's 10px from all sides of a box, do:
			`0 0 0 10px`

		To have a soft bluured edge that has a gradient midpoint 5px from all sides of a box and 10px total, do:
			`0 0 0 10px`

		From the W3.org CSS spec (emphasis mine):
		> Note this means for a long, straight shadow edge, the blur radius will create a visibly apparent color transition
		> ***approximately the twice length of the blur radius*** that is perpendicular to and centered on the shadow’s edge,
		> and that ranges from almost the full shadow color at the endpoint inside the shadow to almost fully transparent at the endpoint outside it.

		So we want a 6px *total transition* height.
	*/

    /*
	box-shadow:
		0  0    1px  1px rgba(134, 134, 134, 0.5),
		0  0   10px  5px white,
		0 -3px  4px 10px white; / * This has sufficient 'spread' of white at 100% opacity to ensure nothing is visible in the gap between the <section.pageHeader> and each sticky <h3> * /

	box-shadow:
		0  0    1px  1px rgba(134, 134, 134, 0.5),  / * This is effectively a 1px grey border to give it an outline. * /
		0  0   10px  5px var(--color-background),
		0 -3px  4px 10px var(--color-background);

	*/

    box-shadow:
        0 0 1px 1px rgba(134, 134, 134, 0.5),
        0 -10px 10px 5px white;

    box-shadow:
        0 0 1px 1px rgba(134, 134, 134, 0.5),
        0 -10px 10px 5px var(--color-background);

    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 0.25em;
}

section.pageHeader h2 {
    text-align: center;
    flex-grow: 1;
    /*margin-bottom: 0.5em;*/
}

section.pageHeader>ul.actions {
    flex-grow: 1;
}

section.pageHeader>ul.actions>li#settingsLI {
    margin-right: auto;
}

@media (min-width: 769px) {
    section.checklistPageHeader li:not(.itemDetailsLI):not(.carfaxLI) span[data-emoji] {
        display: none;
    }
}

.isPreview section.checklistPageHeader li.expandAllLI span[data-emoji] {
    display: none !important;
}

.isPreview section.checklistPageHeader li.expandAllLI span.cut480,
.isPreview section.checklistPageHeader li.expandAllLI span.cut767 {
    display: inline !important;
}

section.pageHeader>ul#checklistSettings,
section.pageHeader>div#checklistLoginLinkForm {
    flex-basis: 100%;
}

div#checklistLoginLinkForm {
    align-items: baseline;
}

div#checklistLoginLinkForm>p {
    margin: 0;
    margin-right: 1em;
}

div#checklistLoginLinkForm label {
    display: contents;
}

div#checklistLoginLinkForm label>input[type=tel] {
    margin-left: 0.5em;
}

div#checklistLoginLinkForm button {
    margin-left: 0.5em;
    align-self: center;
}

label[for=itemDetailsToggle]>span:last-child {
    display: none;
}

label[for=checklistSettingsToggle]>span:first-child {
    display: none;
}

#autoSaveToggle:checked~section.pageHeader .saveInspectionLI {
    /* Keep the <li> visible so we can print save messages to it... */
}

#autoSaveToggle:checked~section.pageHeader .saveInspectionLI>button {
    display: none;
}

#autoSaveToggle:checked~div.actions button#footerSaveButton {
    display: none;
}

#checklistSettingsToggle:checked~section.pageHeader,
#loginLinkToggle:checked~section.pageHeader {
    flex-wrap: wrap;
}

#checklistLoginLinkForm,
#checklistSettings {
    margin: 0.25em;
    padding: 0.25em;

    flex-wrap: wrap;

    justify-content: space-between;
    justify-content: center;

    border-radius: 6px;

    background-color: #999;
    background-color: var(--color-accent-hover);
    /* This looks nicer, but it's 40% opaque, we need a 100% opaque version */

    color: white;
}

section.pageHeader>ul.actions a.vehicleDetails {
    background-image: url("/images/Content/CarFax-C.svg");
    background-image: var(--image-carFaxCompact);
    background-size: 50%;
    /* So the image's width is 50% of the button's width. */
    background-repeat: no-repeat;
    width: auto;
}

@media (min-width: 1024px) {
    section.pageHeader>ul.actions:first-of-type>li:first-child {
        margin-left: auto;
    }


    #checklistLoginLinkForm,
    #checklistSettings {}

    #checklistSettings>li {
        margin: 0.25em;
    }

    /* Hide these elements when the browser is *wider* than 1023px, because the section.pageHeader is big enough to display them. */
    .inspectionFields>.roNumber,
    .inspectionFields>.subjectSummary {
        display: none;
    }

    section.pageHeader>ul.actions a.vehicleDetails {
        /* Same as `a.vehicleDetails.wide` */
        background-image: url("/images/Content/CarFax-Full.svg");
        background-image: var(--image-carFaxFull);
        background-size: contain;
        background-size: 85%;
        /* This looks nicer than `contain` */
        width: 75px;
    }
}

@media (max-width: 1023px) {

    /*
	Because the <section.pageHeader> is sticky, we want to make it as small as possible, especially on smaller screens.
	So hide the <h2>Inspection</h2> heading and don't let the first <ul.actions> get the dark background and extra padding.
	The <h2 will be hidden due to `.cut` anwyay.
*/
    section.pageHeader>ul.actions:first-of-type {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
    }

    section.pageHeader {
        padding: 0.5em;
    }

    /*  */
}

@media (max-width: 767px) {
    label[for=itemDetailsToggle]>span:first-child {
        display: inline;
    }

    label[for=itemDetailsToggle]>span:last-child {
        display: none;
    }

    label[for=checklistSettingsToggle]>span:first-child {
        display: inline;
    }

    label[for=checklistSettingsToggle]>span:last-child {
        display: none;
    }
}


/* #######################################################################
# Checklist area:
####################################################################### */

#checklistSection h3 {
    background-color: rgb(177, 199, 230);
    background-color: var(--color-accent-light);

    color: black;
    color: var(--color-foreground);

    border-radius: 6px;
    border: none;
    /* Main.css gives <h3> a border. */

    transition: background-color 0.1s;

    font-size: 1em;
    font-weight: normal;
}

#checklistSection h3:hover {
    background-color: #1356b4;
    background-color: var(--color-accent);
    transition: none;
}

#accordionToggleAll:checked~#checklistSection h3,
#checklistSection input.trigger[name=checklistCategories]:checked+h3 {
    /* Active Category header: */
    background-color: #1356b4;
    background-color: var(--color-accent);
    color: white;
    color: var(--color-accent-text);
}

#checklistSection input.trigger[name=checklistCategories]:not(:checked)+h3:hover>label,
#checklistSection input.trigger[name=checklistCategories]:checked+h3:hover>label {
    color: white;
    color: var(--color-accent-text);
}

/*#checklistSection input.clicked + h3,*/
#checklistSection h3:active,
#checklistSection input.trigger[name=checklistCategories]:focus+h3,
#checklistSection input.trigger[name=checklistCategories].hasFakeFocus+h3,
/* `.hasFakeFocus` is because `:focus-within` won't work in this case (I want `h3 + div:focus-within` such that `h3` is the style target. */
#checklistSection h3:focus-within {
    /*outline: 3px solid orange;*/
    box-shadow: 0 0 10px 0 #1356b4;
    box-shadow: 0 0 10px 0 var(--color-accent);
}

/* */

#checklistSection h3>label:not(.uncheck) {
    display: flex;
    align-items: baseline;
    /* NOTE: For `align-items: baseline;` to work, flex-items have to be `display: inline` (so vertical margins have no effect, right?). */
    align-items: center;
    padding: 0.25em 0.75em;
}

#checklistSection h3>label:not(.uncheck)>* {
    margin-top: 0;
    margin-right: 3em;
    margin-bottom: 0;
    margin-left: auto;

    white-space: nowrap;
}

/* The disclosure chevron is `label::before` */
#checklistSection h3>label:not(.uncheck)::before {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    align-self: center;

    margin-right: 1em;

    opacity: 1;
    transform: rotate(0);

    transition: transform 0.2s, opacity 0.2s;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

#accordionToggleAll:checked~#checklistSection h3>label:not(.uncheck)::before {
    /* Hide the disclosure chevrons when the "Expand All" checkbox is checked: */
    opacity: 0;
}

#checklistSection h3>label>span.categoryName {
    width: 33vw;
    /* Need to give them all the same width so everything is neatly aligned in different <h3> elements. */
    overflow: hidden;

    margin-right: 0;
    margin-left: 0;

    flex-basis: 17em;
    flex-grow: 0;
    flex-shrink: 1;
}

#checklistSection h3>label>span.otherUsersSpan {}

#checklistSection h3>label>span.itemCountSpan {
    width: 8em;
    /* approx 100px */
    text-align: right;
    display: inline-flex;
    display: block;
}

#checklistSection h3>label>span.invalidItemCountSpan {
    width: 4.5em;
    text-align: right;
    display: block;

    padding-left: 1.5em;

    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /*background-size    : 1.5em; <-- This gets clipped, `contain` works fine. I don't know why I used 1.5... */
}

#checklistSection h3>label>span.invalidItemCountSpan:not(.zero) {
    background-image: url("/images/NounProject/noun_exclamation_1081370-red.svg");
    background-image: var(--image-invalid);
}

#checklistSection h3>label>span.itemResultsSpan {}

#checklistSection h3>label>span.requiredItemCountSpan {
    width: 8em;
    text-align: right;
    margin-right: 0;
    margin-left: 0;
}

/* ----- */

/* Apple has opposing rules for Disclosure Chevrons vs. Disclosure Triangles (and this is an example of a Disclosure Triangle, not a Chevron): */
/*
	https://developer.apple.com/design/human-interface-guidelines/macos/buttons/disclosure-controls/
	> A disclosure triangle reveals and hides information and functionality associated with a view or in a list of disclosable items.
	> The position of a disclosure triangle reflects the visibility of the disclosable content.
	> The triangle points to the right when the content is hidden and down when the content is visible.

	This is what we do already for the checklist, but with chevrons instead of triangles (chevron points right when collapsed, and points down when visible).
*/

#checklistSection input.trigger[name=checklistCategories]:not(:checked)+h3>label::before {
    /* Collapsed, normal. */
    background-image: url("/images/Chevron-Right-Black.svg");
    background-image: var(--image-chevron-right-black);

    transform: rotate(0);
    transition: transform 0.2s;
}

#checklistSection input.trigger[name=checklistCategories]:not(:checked)+h3:hover>label::before {
    /* Collapsed, hover. */
    background-image: url("/images/Chevron-Right-White.svg");
    background-image: var(--image-chevron-right-white);
}

#checklistSection input.trigger[name=checklistCategories]:checked+h3>label::before {
    /* Open, normal. */
    background-image: url("/images/Chevron-Right-White.svg");
    background-image: var(--image-chevron-right-white);

    transform: rotate(90deg);
    transition: transform 0.2s;
}

#checklistSection input.trigger[name=checklistCategories]:checked+h3:hover>label::before {
    /* Open, hover. */
    background-image: url("/images/Chevron-Right-White.svg");
    background-image: var(--image-chevron-right-white);
}

/* ------------------  */

/* Second, override and of our own styles we want to disregard, like rounded table corners: */
table.checklistTable>tbody:first-child>tr:first-child>th,
table.checklistTable>tbody:first-child>tr:first-child>td {
    border-top: none;
}

table.checklistTable>thead:first-child>tr:first-child>th:first-child,
table.checklistTable>thead:first-child>tr:first-child>td:first-child,
table.checklistTable>tbody:first-child>tr:first-child>th:first-child,
table.checklistTable>tbody:first-child>tr:first-child>td:first-child {
    border-top-left-radius: 0;
}

table.checklistTable>thead:first-child>tr:first-child>th:last-child,
table.checklistTable>thead:first-child>tr:first-child>td:last-child,
table.checklistTable>tbody:first-child>tr:first-child>td:last-child {
    border-top-right-radius: 0;
}

table.checklistTable>tbody:last-child>tr:last-child>td:first-child,
table.checklistTable>tfoot:last-child>tr:last-child>td:first-child,
table.checklistTable>tbody:last-child>tr:last-child>th:first-child,
table.checklistTable>tfoot:last-child>tr:last-child>th:first-child {
    border-bottom-left-radius: 0;
}

table.checklistTable>tbody:last-child>tr:last-child>td:last-child,
table.checklistTable>tfoot:last-child>tr:last-child>td:last-child {
    border-bottom-right-radius: 0;
}

#checklistSection h3[data-has-invalid-items="true"] {
    color: black;
    color: var(--color-foreground);
    background-color: lavenderblush;
    /* Or maybe a bit darker and vibrant? Or only apply it to the right half of the <h3>? */
}

#checklistSection h3[data-has-invalid-items="true"]:hover {
    color: black;
    color: var(--color-foreground);
    background-color: #e2d1d7;
}

#checklistSection h3[data-has-required-tasks="false"] .requiredItemCountSpan,
#checklistSection h3[data-has-invalid-items="false"] .invalidItemCountSpan,
#checklistSection h3 .invalidItemCountSpan.zero {
    visibility: hidden;
}

#checklistSection h3 .requiredItemCountSpan {}

.requiredHighlight {
    color: red;
    font-weight: bold;
}

.requiredZero {
    color: transparent;
}

/* Item Counts */
span.itemResultsSpan {
    width: 12em;
    display: flex;
    justify-content: space-between;
    justify-content: space-evenly;
}

span.itemResultsSpan>span {
    padding-left: 22px;
    padding-right: 16px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: 16px 16px;

    display: inline-block;
    flex-basis: 45px;
    overflow: hidden;
}

span.itemResultsSpan>span:empty {
    visibility: hidden;
}

span.itemResultsNota {
    background-image: url("/images/NounProject/Ignore-Stroke.svg");
    background-image: var(--image-nota);
}

span.itemResultsPass {
    background-image: url("/images/NounProject/noun_CheckMark_835.svg");
    background-image: var(--image-pass);
}

span.itemResultsWarn {
    background-image: url("/images/NounProject/noun_Warning_488896.svg");
    background-image: var(--image-warn);
}

span.itemResultsFail {
    background-image: url("/images/NounProject/noun_fail_334199.svg");
    background-image: var(--image-fail);
}

span.itemResultsNotes {
    background-image: url("/images/NounProject/noun_Information_488911.svg");
    background-image: var(--image-notes);
}

div.accordionPaneWrapper[data-count-item-pass="0"] span.itemResultsPass {
    visibility: hidden;
}

div.accordionPaneWrapper[data-count-item-warn="0"] span.itemResultsWarn {
    visibility: hidden;
}

div.accordionPaneWrapper[data-count-item-fail="0"] span.itemResultsFail {
    visibility: hidden;
}

div.accordionPaneWrapper[data-count-item-notes="0"] span.itemResultsNotes {
    visibility: hidden;
}

/*  */

#messagesList {
    display: none;
}


.conclusionFilter:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.conclusionFilter>label:first-child:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: baseline;

}

.conclusionFilter>label:first-child:not([hidden]) input[type=search] {
    margin: 0.25em;
    border-radius: 15px;
}

.conclusionFilter>label:first-child:not([hidden]) input[type=search]:focus {
    outline: none;
}

.conclusionFilter>label:last-child:not([hidden]) {
    display: block;
    width: 80%;
}

.conclusionFilter select.conclusionFilterSelector {
    display: block;
    width: 100%;
}



/* This file is concerned with layout and behaviour, not colour - nor the content of <h3> and <div>. */
#checklistSection h3 {

    margin: 4px 0 4px 0;
    padding: 0;
    /* 0 padding is important because <label> (the interactive element) needs to fill it. */

    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;

    position: -webkit-sticky;
    position: sticky;
    top: 49px;
    /* The `top:` value is overridden in the page by a script that measures the height of the <section.pageHeader> */
    z-index: 103;
}

#checklistSection .accordionPane {
    box-sizing: border-box;
    /* Slightly indent the accordion pane's content so it visually seems like a child of <h3> */
    padding: 0;
    padding-right: 0.5em;
    padding-left: 0.5em;
}

/* Label to uncheck the hidden pane trigger radio: */

#checklistSection h3>label.uncheck {
    display: none;
    /* Hidden by default. */
}

#checklistSection input.trigger[name=checklistCategories]:not(:checked)+h3>label.uncheck {
    display: none;
}

#checklistSection input.trigger[name=checklistCategories]:checked+h3>label.uncheck {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Static (non-animated) collapse/show behaviour: */
input.trigger[name=checklistCategories]:not(:checked)+h3+.accordionPane {
    display: none;
}

#accordionToggleAll:checked~#checklistSection h3+.accordionPane,
input.trigger[name=checklistCategories]:checked+h3+.accordionPane {
    display: block;
}


/* Accordion Measure Mode: */
#checklistSection.accordionMeasureMode {
    position: relative;
}

#checklistSection.accordionMeasureMode>input.trigger[name=checklistCategories]+h3+.accordionPane {
    max-height: none !important;
    /* This is only set as a preemptive bugfix, as this property should be un-set in this context. */
    animation-name: none !important;
    transition-property: none !important;
}

#checklistSection.accordionMeasureMode>input.trigger[name=checklistCategories]:not(:checked)+h3+.accordionPane {
    /* Render collapsed sections as though they were open, but hidden - so we can get their actual height. */
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;

    visibility: hidden;
    max-height: none;
}


/* Animated accordion rules: */
/* Note that this now uses CSS Animations instead of CSS Transitions. Transitions are very hard to reason about compared to animations (especially w.r.t. `transitionend`/`transitioncancel`). */

input.trigger[name=checklistCategories]:not(:checked).opening+h3+.accordionPane,
input.trigger[name=checklistCategories]:not(:checked).closing+h3+.accordionPane {
    display: block !important;
}

div.accordionPane.opening,
div.accordionPane.closing {
    transform-origin: top;
    overflow: hidden;

    animation-delay: 0;
    animation-direction: normal;
    animation-duration: 0.1s;
    /* Anything slower than 0.1s hinders the UX, imo. */
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
}

div.accordionPane.opening {
    animation-name: openAccordionPane;
}

div.accordionPane.closing {
    animation-name: closeAccordionPane;
}

@media (prefers-reduced-motion: reduce) {
    div.accordionPane.opening {
        animation-name: none !important;
    }

    div.accordionPane.closing {
        animation-name: none !important;
    }
}

@keyframes openAccordionPane {
    from {
        opacity: 0;
        max-height: 0;
        transform: scaleY(0);
    }

    to {
        opacity: 1;
        max-height: 100vh;
        max-height: var(--measured-height);
        transform: scaleY(1);
    }
}

@keyframes closeAccordionPane {
    from {
        opacity: 1;
        max-height: 100vh;
        max-height: var(--measured-height);
        transform: scaleY(1);
    }

    to {
        opacity: 0;
        max-height: 0;
        transform: scaleY(0);
    }
}

/* Item visibility toggles: */
/* The item filter is always visible, at all screen-sizes for now. */
section.pageHeader.checklistPageHeader>ul.actions.filterActions {
    position: relative;

    margin: 0.25em;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgb(21, 59, 118);
    background-color: var(--color-accent-hover);
    padding: 0.25em;
    border-radius: 6px;
}

section.pageHeader.checklistPageHeader>ul.actions.filterActions>li {
    margin: 0.25em;
}

ul.actions.filterActions>li.filterLabel {
    align-self: center;
    font-size: 90%;
    /*	text-transform: none; // This looks weird */
    /*	margin-right: auto !important; This looks okay but I don't want it to bunch-up the rest of the buttons. */
    /*	position: absolute;
	left: 0.5em;*/
}

@media (min-width: 1024px) {

    /* Ensure the .filterActions element has a row to itself: */
    section.pageHeader.checklistPageHeader>ul.actions.filterActions {
        flex-basis: 80vw;
    }
}

@media (max-width: 719px) {
    ul.actions.filterActions>li.filterLabel {
        display: none;
    }
}

@media (max-width: 560px) {

    label[for="hideUncheckedToggle"]>span,
    label[for="hideCheckedToggle"]>span,
    label[for="hideUNWFNAToggle"]>span,
    label[for="hideNAPassToggle"]>span {
        font-size: 0;
        width: 32px;
        height: 16px;
    }

    label[for="hideUncheckedToggle"]>span {
        width: 16px;
    }

    label[for="hideCheckedToggle"]>span {
        width: 16px;
    }
}

@media (min-width: 870px) {

    label[for="hideCheckedToggle"]>span,
    label[for="hideUncheckedToggle"]>span {
        padding-left: 21px;
        /* 16px + 3px */
    }

    label[for="hideUNWFNAToggle"]>span,
    label[for="hideNAPassToggle"]>span {
        padding-left: 37px;
        /* 32px + 5px */
    }
}

@media (max-width: 560px),
(min-width: 870px) {

    label[for="hideUncheckedToggle"]>span,
    label[for="hideCheckedToggle"]>span,
    label[for="hideUNWFNAToggle"]>span,
    label[for="hideNAPassToggle"]>span {
        display: inline-block;
        background-size: contain, contain;
        background-position-x: 0, 16px;
        background-repeat: no-repeat;
    }

    label[for="hideUncheckedToggle"]>span {
        background-image: url("/images/Results/Checked.svg");
        background-image: var(--image-checked);
    }

    label[for="hideCheckedToggle"]>span {
        background-image: url("/images/Results/Unchecked.svg");
        background-image: var(--image-unchecked);
    }

    label[for="hideUNWFNAToggle"]>span {
        background-image: url("/images/Results/Result_Pass.svg"), url("/images/Results/Result_Notes.svg");
        background-image: var(--image-pass), var(--image-notes);
    }

    label[for="hideNAPassToggle"]>span {
        background-image: url("/images/Results/Result_Warning.svg"), url("/images/Results/Result_Fail.svg");
        background-image: var(--image-warn), var(--image-fail);
    }
}

#hideNothingToggle:checked {
    /* aka "Show All" */
}

#hideUncheckedToggle:checked~* tr[data-item-result="none"]:not([data-item-notes="true"]),
#hideUncheckedToggle:checked~* div.accordionPaneWrapper[data-count-item-nota="0"][data-count-item-notes="0"][data-count-item-pass="0"][data-count-item-warn="0"][data-count-item-fail="0"] {
    /* aka "Show Checked" */
    display: none;
}

#hideCheckedToggle:checked~* tr[data-item-result="none"][data-item-notes="true"],
/* So `tr[data-item-result="none"]` should still be visible. */
#hideCheckedToggle:checked~* tr[data-item-result="nota"],
#hideCheckedToggle:checked~* tr[data-item-result="pass"],
#hideCheckedToggle:checked~* tr[data-item-result="warn"],
#hideCheckedToggle:checked~* tr[data-item-result="fail"],
#hideCheckedToggle:checked~* div.accordionPaneWrapper[data-count-item-none="0"] {
    /* aka "Show Unchecked" */
    display: none;
}

#hideUNWFNAToggle:checked~* tr[data-item-result="none"],
#hideUNWFNAToggle:checked~* tr[data-item-notes="true"],
#hideUNWFNAToggle:checked~* tr[data-item-result="nota"],
#hideUNWFNAToggle:checked~* tr[data-item-result="warn"],
#hideUNWFNAToggle:checked~* tr[data-item-result="fail"],
#hideUNWFNAToggle:checked~* div.accordionPaneWrapper[data-count-item-pass="0"] {
    /* aka "Show Pass" */
    display: none;
}

#hideNAPassToggle:checked~* tr[data-item-result="none"],
#hideNAPassToggle:checked~* tr[data-item-result="nota"],
#hideNAPassToggle:checked~* tr[data-item-result="pass"],
#hideNAPassToggle:checked~* div.accordionPaneWrapper[data-count-item-warn="0"][data-count-item-fail="0"] {
    /* aka "Show Warn/Fail" */
    display: none;
}

/* TODO: Show which icons in the left-side of the <ul> are visible */
#hideNothingToggle:checked~* ul.actions.filterActions {}

#hideUncheckedToggle:checked~* ul.actions.filterActions {
    background-color: #cee7fc !important;
    background-color: var(--color-note) !important;
}

#hideCheckedToggle:checked~* ul.actions.filterActions {
    background-color: #cee7fc !important;
    background-color: var(--color-note) !important;
}

#hideUNWFNAToggle:checked~* ul.actions.filterActions {
    /* Hide Unchecked, N/A, Warn, Fail */
    /* Show Pass, Notes */
    background-color: #d5f3bb !important;
    background-color: var(--color-pass) !important;
}

#hideNAPassToggle:checked~* ul.actions.filterActions {
    /* Hide Unchecked, N/A, Pass */
    /* Show Warn, Fail */
    background-color: #fcd6ce !important;
    background-color: var(--color-fail) !important;
}

:root {}

/* Checklist table and row default styles: */
table.checklistTable {
    border-collapse: collapse;
    table-layout: fixed;
}

table.checklistTable>thead {
    visibility: hidden;
}

table.checklistTable>thead>tr {
    font-size: 0;
}

table.checklistTable>thead>tr>td {
    height: 0;
}

table.checklistTable>tbody>tr {
    /*height: 1px; /* Needed to be able to fill <td> UPDATE: It seems to work fine without this now... and when it's set it breaks Firefox, fwiw. */
}

table.checklistTable>tbody>tr>td {
    /* !important to override jQuery UI's widget `table` classes. */
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-color: var(--color-table-border) !important;
}

table.checklistTable>tbody>tr:last-child>td {
    border-bottom: none !important;
}

table.checklistTable>tbody>tr:hover {
    outline: 1px solid #1356b4;
    outline: 1px solid var(--color-accent);
    outline-offset: -1px;
}

table.checklistTable>tbody>tr:hover>td {
    border-bottom-color: transparent !important;
}

/* Consistent styling for all form controls within the table: */
table.checklistTable input[type=text],
table.checklistTable input[type=number],
table.checklistTable textarea,
table.checklistTable select {
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: background-color 0.1s, border 0.1s;
    box-shadow: none;
    /* Otherwise it gives the textarea soft edges which don't look good */
    font: inherit;
    /* For smaller font-sizes mainly. */

    background-color: rgba(255, 255, 255, 0.5);
    margin: 0.25em;
}

table.checklistTable input[type=text]:hover,
table.checklistTable input[type=number]:hover,
table.checklistTable textarea:hover,
table.checklistTable select:hover {
    background-color: white;
    background-color: white;
    outline: none;
    border: 1px solid #999;
    transition: background-color 0.1s, border 0.1s;
}

table.checklistTable input[type=text]:focus,
table.checklistTable input[type=number]:focus,
table.checklistTable textarea:focus,
table.checklistTable select:focus {
    background-color: white;
    background-color: white;
    outline: none;
    border: 1px solid #999;
    transition: background-color 0.1s, border 0.1s;
}

table.checklistTable input[type=text]:active,
table.checklistTable input[type=number]:active,
table.checklistTable textarea:active,
table.checklistTable select:active {
    background-color: rgba(249, 249, 249, 0.8);
    background-color: var(--color-offwhite-08);
    outline: none;
    border: 1px solid #1462ce;
    border-color: var(--color-accent);
    transition: background-color 0.1s, border 0.1s;
    box-shadow: inset 0 0 5px 0px rgba(0, 0, 0, 0.21);
}

table.checklistTable select:not([multiple]) {
    cursor: pointer;
}

table.checklistTable select[multiple] {
    resize: vertical;
    max-height: 50vh;
}

table.checklistTable select:not(),
table.checklistTable select option:not([value]),
table.checklistTable select option[value=""] {
    color: #999;
}

table.checklistTable th,
table.checklistTable td {
    /*	transition: width 0.2s; /* Hmm, this doesn't seem to work at all (until `display: grid;` is activated) :( */
}

/* ----------------- */
/* Item Status Column */
td.statusColumn {
    width: 50px;
    /*height: 1em; /* Height is used to enable the div to fill it, the actual height value is immaterial. UPDATE: Now disabling all explicit heights on <tr>, <td>, and <td><*> to see what happens. */
    padding: 0;

    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

td.statusColumn>div {
    display: flex;
    flex-wrap: wrap;
    /* 2021-08-12: I think this will make it easier to use instead of shrinking the icons? I could swear I did this previously but removed it, so... let's try again. */
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0.25em;
}

td.statusColumn>div>.itemResultIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0.25em;

    background-repeat: no-repeat;
    background-size: contain;
}

td.statusColumn>div>.taskRequired,
td.statusColumn>div>.taskInternal {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0.25em;

    background-repeat: no-repeat;
    background-size: contain;
}

td.statusColumn>div>.taskRequired {
    background-image: url("/images/Results/Required_Red.svg");
    background-image: var(--image-required);
}

td.statusColumn>div>.taskInternal {
    background-image: url("/images/Actions/Vis_Hidden_Black.svg");
    background-image: var(--image-hidden-black);
}

td.statusColumn>div>.taskRequired>span,
td.statusColumn>div>.taskInternal>span {
    display: none;
}

td.statusColumn>div>.invalidItemIcon {
    display: none;
    width: 15px;
    height: 15px;
    margin: 0.25em;

    cursor: help;

    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/images/Results/Exclamation_Red.svg");
    background-image: var(--image-invalid);
}

td.statusColumn>div>.invalidItemIcon>span {
    /* Always hide the <span> text wrapper */
    display: none;
}

tr[data-item-valid="validempty"]>td.statusColumn {}

tr[data-item-valid="required"]>td.statusColumn {}

tr[data-item-valid="invalid"]>td.statusColumn {
    background-color: lavenderblush !important;
}

tr[data-item-valid="invalid"]>td.statusColumn>div>.invalidItemIcon {
    display: inline-block;
}

tr[data-item-valid="valid"]>td.statusColumn {}



td.statusColumn>div>input[type=radio] {
    /* Hide the 'ItemResult=None' radio */
    display: none;
}

/* ----------------- */
/* Previous Inspection Item Status Column */
td.previousStatusColumn {
    width: 25px;
    /*height: 1em; /* Height is used to enable the div to fill it, the actual height value is immaterial. */
    padding: 0;

    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    /*filter: grayscale(50%); Don't enable this because it creates a new stacking context, which messes-up z-indexing. */
}

td.previousStatusColumn>label[for] {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    height: 100%;
    padding: 0.25em;

    cursor: pointer;
}

td.previousStatusColumn>label[for]::before {
    margin-left: 25px;
    margin-bottom: 30px;
}

td.previousStatusColumn>label[for]>.itemResultIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0.25em;

    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0.6;
}

td.previousStatusColumn input[type=checkbox].previous {
    display: none;
}

td.previousStatusColumn input[type=checkbox].previous:not(:checked)~div.previous {
    display: none;
}

td.previousStatusColumn input[type=checkbox].previous:checked~div.previous {
    display: block;
    /* Almost the same as `.titleHelp[title]::before */

    position: absolute;
    z-index: 104;
    /*
			z-index 11 to overlay the position: sticky <thead> cells
			UPDATE: Now 102 because the checklist labels are `z-index: 101`
			UPDATE: Now 103 because <h3> is `z-index: 102;`.
			UPDATE: Now 104 because <h3> is `z-index: 103;`.
		*/

    background-color: white;
    background-color: var(--color-background);

    padding: 0.5em 0.75em;

    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
    /* can we get the triangle-pointer-border trick to work here? */

    border-radius: 5px;
    max-width: 26em;
    white-space: normal;

    width: 15em;
    width: max-content;
    /* This works, and I don't know why! */
}

td.previousStatusColumn div.previous>h4 {
    margin: 0.25em 0 0 0;
    border: none;
}

td.previousStatusColumn div.previous>table th {
    white-space: nowrap;
    text-align: left;
}

td.previousStatusColumn div.previous>table td {
    text-align: left;
}

td.previousStatusColumn div.previous>.controls {

    line-height: 1.15;

    display: flex;

    margin-top: 0.5em;
}

td.previousStatusColumn div.previous>.controls>button.copyItem {
    margin-left: auto;
}

td.previousStatusColumn[data-item-result=nota] {
    background-color: #dddddd !important;
    background-color: var(--color-nota-fade) !important;
}

td.previousStatusColumn[data-item-result=pass] {
    background-color: #e1eed3 !important;
    background-color: var(--color-pass-fade) !important;
}

td.previousStatusColumn[data-item-result=warn] {
    background-color: #faf6e1 !important;
    background-color: var(--color-warn-fade) !important;
}

td.previousStatusColumn[data-item-result=fail] {
    background-color: #ebd9d5 !important;
    background-color: var(--color-fail-fade) !important;
}

td.previousStatusColumn[data-item-result=none][data-item-notes=true] {
    background-color: #cee7fc !important;
    background-color: var(--color-note) !important;
    /* There is no color var() for Notes, btw. */
}

td.previousStatusColumn[data-item-result=nota] .itemResultIcon {
    background-image: url("/images/Results/Result_NA.svg");
    background-image: var(--image-nota);
}

td.previousStatusColumn[data-item-result=pass] .itemResultIcon {
    background-image: url("/images/Results/Result_Pass.svg");
    background-image: var(--image-pass);
}

td.previousStatusColumn[data-item-result=warn] .itemResultIcon {
    background-image: url("/images/Results/Result_Warning.svg");
    background-image: var(--image-warn);
}

td.previousStatusColumn[data-item-result=fail] .itemResultIcon {
    background-image: url("/images/Results/Result_Fail.svg");
    background-image: var(--image-fail);
}

td.previousStatusColumn[data-item-result=none][data-item-notes=true] .itemResultIcon {
    background-image: url("/images/Results/Result_Notes.svg");
    background-image: var(--image-notes);
}

/* ----------------- */
/* Task Name + Measurement Column */
td.taskColumn {
    width: 25%;
    width: 40%;
    /*height: 1em; /* The value of the height attribute is immaterial, it's just to allow filling the <td> */
    padding: 0;

    background-color: transparent;
    /* https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css */
}

.taskAndUnit {
    display: flex;
    align-items: baseline;
    align-items: center;
    height: 100%;
    /* This only works because `td.taskColumn { height: 1em; }` above */
    padding-left: 0.5em;
    justify-content: space-between;
    justify-content: flex-start;
    /* Need to use this instead of `space-between` so  */
}

.taskAndUnit span.taskName {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

.taskAndUnit[data-value-count="0"]>div.itemValues {
    display: contents;
}

/* Make room for multiple values, if necessary: */
.taskAndUnit[data-value-count="0"] {}

.taskAndUnit[data-value-count="0"]>div.itemValues {
    display: none;
}

.taskAndUnit[data-value-count="1"] {}

.taskAndUnit[data-value-count="1"]>div.itemValues {
    display: contents;
}

.taskAndUnit[data-value-count="2"] {
    flex-wrap: wrap;
}

.taskAndUnit[data-value-count="3"],
.taskAndUnit[data-value-count="4"] {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.taskAndUnit[data-value-count="3"]>span.taskName,
.taskAndUnit[data-value-count="4"]>span.taskName {
    display: block;
    text-align: left;

    flex-basis: 100%;
    flex-grow: 1;
}

.taskAndUnit[data-value-count="2"]>div.itemValues,
.taskAndUnit[data-value-count="3"]>div.itemValues,
.taskAndUnit[data-value-count="4"]>div.itemValues {
    flex-basis: 100%;
    /* Fill-width */

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: baseline;
}

.taskAndUnit[data-value-count="4"]>.assetsListOuter {
    /* has `display: contents;` */
}

.taskAndUnit[data-value-count="3"]>.assetsListOuter>ul.assetsList,
.taskAndUnit[data-value-count="4"]>.assetsListOuter>ul.assetsList {
    flex-basis: 100%;
    flex-grow: 1;

    align-self: flex-end;
}



.taskAndUnit[data-value-count="0"]>.assetsListOuter>ul.assetsList {
    margin-left: auto;
}

.taskAndUnit[data-value-count="1"]>.assetsListOuter>ul.assetsList {
    margin-left: 0;
}

.taskAndUnit[data-value-count="2"]>.assetsListOuter>ul.assetsList {
    margin-left: 0;
}

/* ----- */

.taskAndUnit label.itemValue {
    /*padding: 4px;*/
    margin: 0.25em 0.25em 0.25em auto;
    background: #eee;
    background-color: #f0f0f0;
    background-color: var(--color-container1);

    color: black;
    color: var(--color-foreground);

    border-radius: 5px;
    border: 1px solid #999;
    white-space: nowrap;
}

.taskAndUnit label.itemValue.visible {}

.taskAndUnit label.itemValue.hidden {
    display: none;
}

.taskAndUnit label.itemValue>input.valueText {
    margin-right: 0;
}

.taskAndUnit label.itemValue>span.valueName,
.taskAndUnit label.itemValue>span.valueUnit {
    font-size: 0.8em;
    margin: 0.5em;
}

.taskAndUnit label.itemValue>input[type="date"] {
    font-size: 90%;
}

.taskAndUnit label.itemValue>input[type="datetime-local"] {
    font-size: 80%;
}

/* Checklist Task Instructions: */

td.taskColumn>.taskAndUnit input.instructions {
    display: none;
}

td.taskColumn>.taskAndUnit label.taskInstructions {
    margin-left: 0.5em;
}

td.taskColumn>.taskAndUnit div.instructions {
    display: none;
}

td.taskColumn>.taskAndUnit input.instructions:checked~div.instructions {}

td.taskColumn>.taskAndUnit input.instructions:checked~div.instructions {
    display: block;
    /* Almost the same as `.titleHelp[title]::before */

    position: absolute;
    z-index: 104;
    /*
				z-index 11 to overlay the position: sticky <thead> cells
				UPDATE: Now 102 because the checklist labels are `z-index: 101`
				UPDATE: Now 103 because <h3> is `z-index: 102;`.
				UPDATE: Now 104 because <h3> is `z-index: 103;`.
			*/

    background-color: white;
    background-color: var(--color-background);

    padding: 0.5em 0.75em;

    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
    /* can we get the triangle-pointer-border trick to work here? */

    border-radius: 5px;
    max-width: 26em;
    white-space: normal;

    width: 15em;
    width: max-content;
    /* This works, and I don't know why! */
}

td.taskColumn>.taskAndUnit div.instructions>label.button:last-child {
    display: block;
    margin-right: auto;
    width: 5em;
    width: fit-content;
    width: max-content;
}

@media (max-width: 768px) {

    td.taskColumn>.taskAndUnit label.taskInstructions::before,
    td.taskColumn>.taskAndUnit input.instructions:checked~div.instructions {
        position: static;
        display: block;
        max-width: none;
        width: auto;
    }
}

/* Checklist ul.assetsList: */

td.taskColumn div.assetsListOuter {
    display: contents;
}

td.taskColumn ul.assetsList {
    display: flex;
    padding: 0.1em;
    margin: 0;
    margin-right: 0.5em;
    list-style: none;

    /*height: 100%;*/
    align-self: center;
    align-items: center;

    background-color: #ccc;
    background-color: rgba(204, 204, 204, 0.5);
    border-radius: 7px;
}

/* To keep this on the right edge of the cell as we aren't using `justify-content: space-between;` on the .taskAndUnit anymore. */
td.taskColumn .itemValue {
    margin-left: auto;
}

td.taskColumn ul.assetsList {
    /*margin-left: auto;*/
}

td.taskColumn .itemValue~ul.assetsList {
    margin-left: 0;
}

/* ------- */

td.taskColumn ul.assetsList>li {
    display: inline-block;
    /* `inline-block` instead of `flex` (the <li>'s single child (<label>) has `display: flex;` already). */
    flex-basis: auto;

    min-width: 30px;
    /* Should the size be set on the <li>, or its contents? (i.e. the <img/>)? */
    max-width: 50px;

    height: auto;
    /* Unset the hardcoded `height: 100px;` in AssetList.css */
    min-height: 28px;
    max-height: none;

    margin: 0 0.25em;

    /* Remove styles inherited from `ul.assetsList > li`: */
    background: none;
    border-radius: 0;
}

td.taskColumn ul.assetsList>li:not(:hover) {
    background-color: transparent;
}

td.taskColumn ul.assetsList>li>label {
    position: static;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;

    background-color: transparent;
    border-width: 1px;
    margin: 0;

    line-height: 0.9;
}

td.taskColumn ul.assetsList>li span.assetTitle {
    /*display: none;*/
}

#uploadVisibleToggle:not(:checked)~section table td.taskColumn ul.assetsList {
    display: none;
}

#uploadVisibleToggle:checked~section table td.taskColumn ul.assetsList {
    display: inline-flex;
    flex-wrap: wrap;
}

td.taskColumn ul.assetsList li>a,
td.taskColumn ul.assetsList li>label {
    display: inline-block;
    line-height: normal;
}

td.taskColumn ul.assetsList>li:not(:hover):not(.itemImageMenuOpen) .controls {
    z-index: 0;
    pointer-events: none;
}

td.taskColumn ul.assetsList a.button,
td.taskColumn ul.assetsList label.button {
    /*
			background-color: transparent;
			margin: 0.25em;
			border-width: 1px;
			*/
}

td.taskColumn ul.assetsList a.button:hover,
td.taskColumn ul.assetsList label.button:hover {
    background-color: #1356b4;
    background-color: var(--color-accent);
}

td.taskColumn ul.assetsList a.button:focus,
td.taskColumn ul.assetsList label.button:focus {
    background-color: #1356b4;
    background-color: var(--color-accent);
}

td.taskColumn ul.assetsList a.button:focus-visible,
td.taskColumn ul.assetsList label.button:focus:focus-visible {}

td.taskColumn ul.assetsList a.button:-moz-focusring,
td.taskColumn ul.assetsList label.button:focus:-moz-focusring {}

td.taskColumn ul.assetsList label>input[type=file],
td.taskColumn ul.assetsList label>progress {
    display: none;
}

td.taskColumn ul.assetsList a.button img {
    height: 100%;
}

td.taskColumn ul.assetsList>li.uploadButton {}

tr:not(:hover)>td.taskColumn ul.assetsList>li.newAssetUpload {
    opacity: 0.2;
    transition: opacity 0.2s;
}

tr:hover>td.taskColumn ul.assetsList>li.newAssetUpload {
    opacity: 0.5;
    transition: opacity 0;
}

tr:hover>td.taskColumn ul.assetsList>li.newAssetUpload:hover {
    opacity: 1;
    transition: opacity 0;
}

td.taskColumn ul.assetsList li.newAssetUpload>label>span:not([data-emoji]) {
    display: none;
}

td.taskColumn ul.assetsList li.newAssetUpload>label>span[data-emoji] {
    display: inline;
    font-size: 18px;
}

/* ----------------- */
/* OtherUsers display

/* Argh, need to tweak flexbox layout: */
tr .itemValues+span.otherUsersSpan {
    margin: 0;
    align-self: stretch;
    margin-left: auto;
}

/* Also, in Task-Rows, the list grows right-to-left rather than left-to-right due to the checklist's task-rows layout: */
tr .itemValues+span.otherUsersSpan>span.otherUser {
    top: 4px;
    /* Getting this to align with the baseline is impossible, gah. */
    left: auto;
    right: 0;
}

tr .itemValues+span.otherUsersSpan>span.otherUser:nth-child(2) {
    left: auto;
    right: 10px;
}

tr .itemValues+span.otherUsersSpan>span.otherUser:nth-child(3) {
    left: auto;
    right: 20px;
}

tr .itemValues+span.otherUsersSpan>span.otherUser:nth-child(4) {
    left: auto;
    right: 30px;
}

tr .itemValues+span.otherUsersSpan>span.otherUser:nth-child(5) {
    left: auto;
    right: 40px;
}

tr .itemValues+span.otherUsersSpan>span.otherUser:nth-child(6) {
    left: auto;
    right: 50px;
}

/* span.otherUsersSpan */
.taskAndUnit[data-value-count="0"] .itemValues+span.otherUsersSpan {
    margin-left: auto;
}

.taskAndUnit[data-value-count="1"] .itemValues+span.otherUsersSpan,
.taskAndUnit:not([data-value-count="0"]) .itemValues+span.otherUsersSpan {
    margin-left: 0;
}

/* ul.assetsList: */
.taskAndUnit[data-value-count="0"]>.assetsListOuter>ul.assetsList {
    margin-left: 0.25em !important;
    /* So the otherUsersList will fit-in. */
}

.taskAndUnit[data-value-count="0"]>.assetsListOuter>ul.assetsList {
    margin-left: 0.25em !important;
}


.taskAndUnit>.assetsListOuter>ul.assetsList {
    margin-left: 0.25em !important;
}

#checklistSection h3>label>span.otherUsersSpan {
    margin-top: -2px;
}

/* 2020-12-04: HACK quick-fix for images in <img/> that don't appear because their rendered size is 30x300px for some reason. */
#checklistSection ul.assetsList>li>a>img,
#checklistSection ul.assetsList>li>label>img {
    width: 36px;
    height: 36px;
    max-height: none;
    object-fit: contain;
}

#checklistSection ul.assetsList>li.asset.asset-pending {}

#checklistSection ul.assetsList>li.asset.asset-pending>label>img {}

/* ----------------- */
/* Pass/Warn/Fail Checkbox Columns */
td.notaColumn,
td.passColumn,
td.warnColumn,
td.failColumn {
    /*height: inherit; /* `height: 1px` is defined on <tr> */
    width: 40px;
    padding: 0;

    /*
	position: relative;
	vertical-align: baseline;
	*/

    /*z-index: -1; /* This is to allow the previousInspection::after  element to be visible, otherwise the background-colors of these cells obscure the tooltip. */
    /* UPDATE: nooooo! this makes the checklist broken because the pass/warn/fail inputs aren't clickable! */
}

td.notaColumn>input[type=radio],
td.passColumn>input[type=radio],
td.warnColumn>input[type=radio],
td.failColumn>input[type=radio] {
    display: none;
}

td.notaColumn>div,
td.passColumn>div,
td.warnColumn>div,
td.failColumn>div {
    /* Fill the <td> without using `position` */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

td.notaColumn>div>label,
td.passColumn>div>label,
td.warnColumn>div>label,
td.failColumn>div>label {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    box-sizing: border-box;
    height: 30px;

    margin: 0;
    padding: 0;

    cursor: pointer;

    position: relative;
}

td.notaColumn>div>label::before,
td.passColumn>div>label::before,
td.warnColumn>div>label::before,
td.failColumn>div>label::before {
    /* This is the rounded-square in the centre of the <td> (and center of the <label>) */

    display: block;
    content: '';

    box-sizing: border-box;

    width: 22px;
    height: 22px;
    margin: auto;
    /*outline: 1px solid green;*/

    border: 1px solid #999;
    border-radius: 5px;

    background-color: white;
    background-color: var(--color-background);
    cursor: pointer;
}

td.notaColumn>div>label::after,
td.passColumn>div>label::after,
td.warnColumn>div>label::after,
td.failColumn>div>label::after {
    /* This is the checkbox checkmark symbol in the centre of the rounded-square defined by ::before */
    /* We use a separate pseudo-element rather than using multiple background-image layers so we can control its opacity independently. */

    display: block;
    content: '';

    box-sizing: border-box;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;

    opacity: 1;
    transition: opacity 0.2s;
}

td.notaColumn>div>label:hover::after,
td.passColumn>div>label:hover::after,
td.warnColumn>div>label:hover::after,
td.failColumn>div>label:hover::after {
    transition: opacity 0s;
    opacity: 0.66;
    opacity: 0.5;
}

td.notaColumn>div>label::after {
    background-image: url("/images/Results/Result_NA.svg");
    background-image: var(--image-nota);
}

td.passColumn>div>label::after {
    background-image: url("/images/Results/Result_Pass.svg");
    background-image: var(--image-pass);
}

tr[data-task-type="ck"]>td.passColumn>div>label::after,
tr[data-task-type="na-ck"]>td.passColumn>div>label::after {
    background-image: url("/images/Results/Result_Checked.svg");
    background-image: var(--image-check);
}

td.warnColumn>div>label::after {
    background-image: url("/images/Results/Result_Warning.svg");
    background-image: var(--image-warn);
}

td.failColumn>div>label::after {
    background-image: url("/images/Results/Result_Fail.svg");
    background-image: var(--image-fail);
}

/*
		label.


{ outline: 1px solid red;  }
		label.checkItemLabel   { outline: 1px solid blue; }
		*/

td.notaColumn>div>label.uncheckItemLabel,
td.passColumn>div>label.uncheckItemLabel,
td.warnColumn>div>label.uncheckItemLabel,
td.failColumn>div>label.uncheckItemLabel {
    /*display: none;*/
}

td.notaColumn>div>label.uncheckItemLabel::after,
td.passColumn>div>label.uncheckItemLabel::after,
td.warnColumn>div>label.uncheckItemLabel::after,
td.failColumn>div>label.uncheckItemLabel::after {}

td.notaColumn>div>label.checkItemLabel::after,
td.passColumn>div>label.checkItemLabel::after,
td.warnColumn>div>label.checkItemLabel::after,
td.failColumn>div>label.checkItemLabel::after {
    opacity: 0;
}

td.notaColumn>div>label.uncheckItemLabel:hover::after,
td.passColumn>div>label.uncheckItemLabel:hover::after,
td.warnColumn>div>label.uncheckItemLabel:hover::after,
td.failColumn>div>label.uncheckItemLabel:hover::after {
    opacity: 0.5;
}

td.notaColumn>div>label.checkItemLabel:hover::after,
td.passColumn>div>label.checkItemLabel:hover::after,
td.warnColumn>div>label.checkItemLabel:hover::after,
td.failColumn>div>label.checkItemLabel:hover::after {
    transition: opacity 0s;
    opacity: 1;
}

/* Hide the nota and warn columns if no tasks in the table accept those as results: */
table.noNota .notaColumn {
    display: none;
}

table.noWarn .warnColumn {
    display: none;
}

/* ----------------- */
/* Notes, Finding + Recommendation, Time, Price, Sold, and Priority column */
td.detailsColumn {
    padding: 0;
}

td.detailsColumn>div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

td.detailsColumn>div>ul.itemValidationMessages {
    margin: 0;
    padding-top: 0.25em;
    padding-right: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0.5em;
}

td.detailsColumn>div>ul.itemValidationMessages:empty {
    display: none;
}

@supports selector(ul.itemValidationMessages:-moz-only-whitespace) {
    td.detailsColumn>div>ul.itemValidationMessages:-moz-only-whitespace {
        display: none;
    }
}

td.detailsColumn>div>ul.itemValidationMessages>li {}

td.detailsColumn>div>ul.itemValidationMessages>li.blockingError {
    /*list-style-image: url("/images/Results/Result_Fail.svg");
				/*list-style-image: var(--image-fail);*/
}

td.detailsColumn>div>ul.itemValidationMessages>li.nonBlockingError {
    /*list-style-image: url("/images/Results/Result_Warning.svg");
				/*list-style-image: var(--image-warn);*/
}

td.detailsColumn>div>ul.itemValidationMessages>li {
    list-style: none;
}

td.detailsColumn>div>ul.itemValidationMessages>li::before {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;

    /*margin-left: calc( -16px - 1em );
					margin-right: 0;*/

    margin-top: 0px;
    margin-right: 0.25em;
    margin-bottom: -2px;
    /* To shift-it to be inline with text */
    margin-left: 0;

    background-size: contain;
}

td.detailsColumn>div>ul.itemValidationMessages>li.blockingError::before {
    background-image: url("/images/Results/Exclamation_Red.svg");
    background-image: var(--image-invalid);
}

td.detailsColumn>div>ul.itemValidationMessages>li.nonBlockingError::before {
    background-image: url("/images/Results/Exclamation_Red.svg");
    background-image: var(--image-invalid);
}

/* InspectionChecklistFindingSelectColumn */
td.detailsColumn>div>div.itemFinding.itemFindingSelect {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    align-items: center;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect>label:not(.trigger) {}

td.detailsColumn>div>div.itemFinding.itemFindingSelect.manyFindings>label.trigger {
    margin-right: 0.25em;
}

td.detailsColumn .conclusionButtons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

td.detailsColumn .conclusionButtons>* {
    margin: 0.25em;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect>.findingAndReco>label>span.labelText,
td.detailsColumn>div>div.itemFinding.itemFindingSelect>label>span.labelText {
    display: none;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect>.findingAndReco {
    flex-grow: 2;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 0.25em;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect>.findingAndReco>label.findingLabel {
    padding: 0.25em;
    /* To match the <select>, except without the border */
    border: 1px solid transparent;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect>.findingAndReco>label.findingLabel>span.findingText {
    display: block;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect label input:not([type=checkbox]):not([type=radio]),
td.detailsColumn>div>div.itemFinding.itemFindingSelect label select {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    /* Needed for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1242914 */
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect:not(.manyFindings)>div.findingAndReco label select {
    /* To make a <select> element play-nice in a flexbox container, set `width: 100%;` and `flex-basis: 0;`, see here: https://stackoverflow.com/questions/43123117/select-element-grows-differently-than-input-in-display-flex */

    width: 100%;
    box-sizing: border-box;
    margin: 0;

    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 2;
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect.manyFindings label select {
    width: 100%;
    box-sizing: border-box;
    margin: 0.25em;

    flex-basis: 50%;
    flex-basis: 7em;
    min-width: 7em;
    flex-grow: 1;
    flex-shrink: 2;

    transition: width 0.2s;
}

@media (min-width: 768px) and (max-width: 1140px) {
    #touchFriendlyMode:checked~* td.detailsColumn>div>div.itemFinding.itemFindingSelect.manyFindings {
        flex-direction: column;
    }

    #touchFriendlyMode:checked~* td.detailsColumn>div>div.itemFinding.itemFindingSelect.manyFindings label select {
        flex-basis: auto;
        align-self: stretch;
    }
}

td.detailsColumn>div>div.itemFinding.itemFindingSelect button {
    margin: 0.25em;
    margin-left: 0.5em;
}

/* Animate the collapse of the existing-findings <select> when "New Finding" is checked: */
/* UPDATE: Boo, apparently this doesn't work :( */
/*
		.newFindingTrigger:not(:checked) ~ * select.findingNameSelect,
		.newFindingTrigger:not(:checked) ~ * select.conclusionIdSelect {
			width: 100%;
		}
		.newFindingTrigger:checked ~ * select.findingNameSelect,
		.newFindingTrigger:checked ~ * select.conclusionIdSelect {
			width: 0 !important;
			flex-grow: 0;
		}
		*/
.newFindingTrigger:checked~div.itemFinding>label.triggered-not.t5 {
    /*visibility: hidden;*/
    display: contents !important;
    /* Override Triggers.css */
}

div.itemFinding>label.triggered-not.t5 .findingAndReco {
    transition: opacity 0.5s;
}

.newFindingTrigger:checked~div.itemFinding>label.triggered-not.t5 .findingAndReco {
    opacity: 0;
    pointer-events: none;
}

td.detailsColumn>div>div.newItemFinding {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    margin: 3px;
    padding: 3px;

    display: flex;
    flex-direction: column;
    /* So each <label> is on its own line. */
}

@media (max-width: 1023px) {
    td.detailsColumn>div>div.newItemFinding>div {
        flex-wrap: wrap;
    }
}

td.detailsColumn>div>div.newItemFinding>* {
    display: flex;
    align-items: baseline;
    align-items: center;
}

td.detailsColumn>div>div.newItemFinding>div>label.newItemFindingPriceLabel {
    display: contents;
}

td.detailsColumn>div>div.newItemFinding>label>span {
    flex-basis: 4em;
    flex-grow: 0;
    width: 4em;
    display: inline-block;
}

td.detailsColumn>div>div.newItemFinding>div>label.newItemFindingPriceLabel>span {
    width: 4em;
    display: inline-block;
    white-space: nowrap;
}

td.detailsColumn>div>div.newItemFinding>label>input,
td.detailsColumn>div>div.newItemFinding>label>textarea {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

td.detailsColumn>div>div.newItemFinding>div>label.newItemFindingInspectionSpecificLabel {
    margin: 0 0.25em;
    padding: 0.25em 0.5em;
}

td.detailsColumn>div>div.newItemFinding input.newFindingPrice {
    flex-basis: 0;
    width: 3em;
    flex-grow: 1;
    flex-shrink: 1;
}

td.detailsColumn>div>div.newItemFinding .errors:empty {
    display: none;
}

td.detailsColumn>div>div.itemNotes {
    display: contents;
}

td.detailsColumn>div>div.itemNotes textarea {
    /*width: 100%; <-- don't do this because the `margin: 0.25em` defined above causes this to break-out of its parent, even with `box-sizing: content-box` */
    min-height: 2em;
    resize: vertical;
    vertical-align: middle;
    /* I don't know why this works, but this solves the phantom bottom margin under the textboxes. */
}

td.detailsColumn>div>div.itemDetails {
    display: flex;
    justify-content: space-around;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

td.detailsColumn>div>div.itemDetails>label {
    display: contents;
}

td.detailsColumn>div>div.itemDetails>label>span {
    flex-shrink: 1;
}

td.detailsColumn>div>div.itemDetails>label>input:not([type=checkbox]) {
    flex-shrink: 1;
    width: 5em;
    /* why doesn't `flex-basis: 3em;` work here? */
}

td.detailsColumn>div>div.itemDetails>label.itemIsPerformed {
    cursor: pointer;
    display: inline-block;
}

td.detailsColumn>div>div.itemDetails>label.itemIsPerformed>input[type=checkbox] {
    align-self: center;
    background-color: rgba(255, 255, 255, 0.5);
}

/* ----------------- */
/* Finding + Recommendations (here to avoid excessive indentation) */

div.itemFinding.itemFindingSelect.manyFindings label.itemFindingRecommendations

/*.not-selected*/
    {
    display: contents;
}

div.itemFinding.itemFindingSelect.manyFindings .itemFindingRecommendations select[data-finding-id]:disabled {
    /* This is for the special-case of when there's too many Findings and Recommendations so each set of Recommendations is rendered to its own separate <select>, and only 1 is visible at a time. */
    display: none;
}

/* ----------------- */
/* Task-Type Row-specific styles: ----------------- */
tr[data-task-type="none"i] {}

tr[data-task-type="none"i]>td.notaColumn>div {
    display: none;
}

tr[data-task-type="none"i]>td.passColumn>div {
    display: none;
}

tr[data-task-type="none"i]>td.warnColumn>div {
    display: none;
}

tr[data-task-type="none"i]>td.failColumn>div {
    display: none;
}

tr[data-task-type="na"i] {}

tr[data-task-type="na"i]>td.notaColumn {
    background-color: #cccccc !important;
    background-color: var(--color-nota) !important;
}

tr[data-task-type="na"i]>td.passColumn>div {
    display: none;
}

tr[data-task-type="na"i]>td.warnColumn>div {
    display: none;
}

tr[data-task-type="na"i]>td.failColumn>div {
    display: none;
}

tr[data-task-type="yn"i] {}

tr[data-task-type="yn"i]>td.notaColumn>div {}

tr[data-task-type="yn"i]>td.passColumn {
    background-color: #d5f3bb !important;
    background-color: var(--color-pass) !important;
}

tr[data-task-type="yn"i]>td.warnColumn>div {
    display: none;
}

tr[data-task-type="yn"i]>td.failColumn {
    background-color: #fcd6ce !important;
    background-color: var(--color-fail) !important;
}

tr[data-task-type="na-yn"i] {}

tr[data-task-type="na-yn"i]>td.notaColumn {
    background-color: #cccccc !important;
    background-color: var(--color-nota) !important;
}

tr[data-task-type="na-yn"i]>td.passColumn {
    background-color: #d5f3bb !important;
    background-color: var(--color-pass) !important;
}

tr[data-task-type="na-yn"i]>td.warnColumn>div {
    display: none;
}

tr[data-task-type="na-yn"i]>td.failColumn {
    background-color: #fcd6ce !important;
    background-color: var(--color-fail) !important;
}

tr[data-task-type="pwf"i] {}

tr[data-task-type="pwf"i]>td.notaColumn>div {
    display: none;
}

tr[data-task-type="pwf"i]>td.passColumn {
    background-color: #d5f3bb !important;
    background-color: var(--color-pass) !important;
}

tr[data-task-type="pwf"i]>td.warnColumn {
    background-color: #fff8cc !important;
    background-color: var(--color-warn) !important;
}

tr[data-task-type="pwf"i]>td.failColumn {
    background-color: #fcd6ce !important;
    background-color: var(--color-fail) !important;
}

tr[data-task-type="na-pwf"i] {}

tr[data-task-type="na-pwf"i]>td.notaColumn {
    background-color: #cccccc !important;
    background-color: var(--color-nota) !important;
}

tr[data-task-type="na-pwf"i]>td.passColumn {
    background-color: #d5f3bb !important;
    background-color: var(--color-pass) !important;
}

tr[data-task-type="na-pwf"i]>td.warnColumn {
    background-color: #fff8cc !important;
    background-color: var(--color-warn) !important;
}

tr[data-task-type="na-pwf"i]>td.failColumn {
    background-color: #fcd6ce !important;
    background-color: var(--color-fail) !important;
}


tr[data-task-type="ck"i] {}

tr[data-task-type="ck"i]>td.notaColumn>div,
tr[data-task-type="ck"i]>td.warnColumn>div,
tr[data-task-type="ck"i]>td.failColumn>div {
    display: none;
}

tr[data-task-type="ck"i]>td.passColumn {
    background-color: #999 !important;
    background-color: var(--color-chek) !important;
}

tr[data-task-type="na-ck"i] {}

tr[data-task-type="na-ck"i]>td.warnColumn>div,
tr[data-task-type="na-ck"i]>td.failColumn>div {
    display: none;
}

tr[data-task-type="na-ck"i]>td.notaColumn {
    background-color: #cccccc !important;
    background-color: var(--color-nota) !important;
}

tr[data-task-type="na-ck"i]>td.passColumn {
    background-color: #999 !important;
    background-color: var(--color-chek) !important;
}

/* -- */

tr[data-item-result=none]>td {
    background-color: #eeeeee;
    background-color: var(--color-none);
}

tr[data-item-result=none]>td.detailsColumn>div>div.conclusionFilter {
    display: none;
}

tr[data-item-result=none]>td.detailsColumn>div>div.itemFinding {
    /*visibility: hidden; - we need to save the space, so we can't do a nice fade-in anymore */
    display: none;
}

tr[data-item-result=none]>td.detailsColumn *:not(.itemValidationMessages):not(.itemDetails) {}

tr[data-item-result=none]>td.detailsColumn>div>div.newItemFinding {}

tr[data-item-result=none] input[type=text],
tr[data-item-result=none] input[type=number],
tr[data-item-result=none] textarea,
tr[data-item-result=none] select {
    border-color: #999;
    border-color: var(--color-none-border);
}

tr[data-item-result=none]>td.notaColumn>div>label::after,
tr[data-item-result=none]>td.passColumn>div>label::after,
tr[data-item-result=none]>td.warnColumn>div>label::after,
tr[data-item-result=none]>td.failColumn>div>label::after {
    opacity: 0;
}

tr[data-item-result=nota]>td {
    background-color: #eeeeee;
    background-color: var(--color-nota);
}

tr[data-item-result=nota]>td.detailsColumn>div>div.conclusionFilter {
    display: none;
}

tr[data-item-result=nota]>td.detailsColumn>div>div.itemFinding {
    /*visibility: hidden; - we need to save the space, so we can't do a nice fade-in anymore */
    display: none;
}

tr[data-item-result=nota]>td.detailsColumn *:not(.itemValidationMessages):not(.itemDetails) {}

tr[data-item-result=nota]>td.detailsColumn>div>div.newItemFinding {}

tr[data-item-result=nota]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_NA.svg");
    background-image: var(--image-nota);
}

tr[data-item-result=nota] input[type=text],
tr[data-item-result=nota] input[type=number],
tr[data-item-result=nota] textarea,
tr[data-item-result=nota] select {
    border-color: #999;
    border-color: var(--color-nota-border);
}

tr:not([data-item-result=nota])>td.notaColumn>div>label.uncheckItemLabel,
tr[data-item-result=nota]>td.notaColumn>div>label.checkItemLabel {
    display: none;
}

tr[data-item-result=pass]>td {
    background-color: #d5f3bb;
    background-color: var(--color-pass);
}

tr[data-item-result=pass]>td.detailsColumn>div>div.conclusionFilter {
    display: none;
}

tr[data-item-result=pass]>td.detailsColumn>div>div.itemFinding {
    /*visibility: hidden; - we need to save the space, so we can't do a nice fade-in anymore */
    display: none;
}

tr[data-item-result=pass]>td.detailsColumn *:not(.itemValidationMessages):not(.itemDetails) {}

tr[data-item-result=pass]>td.detailsColumn>div>div.newItemFinding {}

tr[data-item-result=pass]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_Pass.svg");
    background-image: var(--image-pass);
}

tr[data-item-result=pass] input[type=text],
tr[data-item-result=pass] input[type=number],
tr[data-item-result=pass] textarea,
tr[data-item-result=pass] select {
    border-color: green;
    border-color: var(--color-pass-border);
}

tr:not([data-item-result=pass])>td.passColumn>div>label.uncheckItemLabel,
tr[data-item-result=pass]>td.passColumn>div>label.checkItemLabel {
    display: none;
}

tr[data-item-result=warn]>td {
    background-color: #fff8cc;
    background-color: var(--color-warn);
}

tr[data-item-result=warn]>td.detailsColumn>div>div.conclusionFilter {}

tr[data-item-result=warn]>td.detailsColumn>div>div.itemFinding {}

tr[data-item-result=warn]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_Warning.svg");
    background-image: var(--image-warn);
}

tr[data-item-result=warn] input[type=text],
tr[data-item-result=warn] input[type=number],
tr[data-item-result=warn] textarea,
tr[data-item-result=warn] select {
    border-color: #e8bf38;
    border-color: var(--color-warn-border);
}

tr:not([data-item-result=warn])>td.warnColumn>div>label.uncheckItemLabel,
tr[data-item-result=warn]>td.warnColumn>div>label.checkItemLabel {
    display: none;
}

tr[data-item-result=fail]>td {
    background-color: #fcd6ce;
    background-color: var(--color-fail);
}

tr[data-item-result=fail]>td.detailsColumn>div>div.conclusionFilter,
tr[data-item-result=fail]>td.detailsColumn>div>div.itemFinding {}

tr[data-item-result=fail]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_Fail.svg");
    background-image: var(--image-fail);
}

tr[data-item-result=fail] input[type=text],
tr[data-item-result=fail] input[type=number],
tr[data-item-result=fail] textarea,
tr[data-item-result=fail] select {
    border-color: #af7171;
    border-color: var(--color-fail-border);
}

tr:not([data-item-result=fail])>td.failColumn>div>label.uncheckItemLabel,
tr[data-item-result=fail]>td.failColumn>div>label.checkItemLabel {
    display: none;
}

tr[data-task-type=yn]>td.detailsColumn>div textarea {}

/* -- */

tr[data-task-type=yn][data-item-result=none][data-item-notes=false]>td {
    background-color: #eeeeee;
    background-color: var(--color-none);
}

tr[data-task-type=yn][data-item-result=none] input[type=text],
tr[data-task-type=yn][data-item-result=none] input[type=number],
tr[data-task-type=yn][data-item-result=none] textarea,
tr[data-task-type=yn][data-item-result=none] select {
    border-color: #999;
}

tr[data-item-result=none][data-item-notes=true]>td {
    background-color: #cee7fc;
    background-color: var(--color-note);
}

tr[data-item-result=none][data-item-notes=true]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_Notes.svg");
    background-image: var(--image-notes);
}

tr[data-item-result=none] input[type=text],
tr[data-item-result=none] input[type=number],
tr[data-item-result=none] textarea,
tr[data-item-result=none] select {
    border-color: #0761ab;
}

/* -- */

tr[data-task-type="ck"][data-item-result="pass"]>td,
tr[data-task-type="na-ck"][data-item-result="pass"]>td {
    /*  TODO: What color should represent "Checked" besides grey? (used for N/A), hmmm. */
    background-color: #aaa;
    background-color: var(--color-none);
}

tr[data-task-type="ck"][data-item-result="pass"] input[type=text],
tr[data-task-type="ck"][data-item-result="pass"] input[type=number],
tr[data-task-type="ck"][data-item-result="pass"] textarea,
tr[data-task-type="ck"][data-item-result="pass"] select,

tr[data-task-type="na-ck"][data-item-result="pass"] input[type=text],
tr[data-task-type="na-ck"][data-item-result="pass"] input[type=number],
tr[data-task-type="na-ck"][data-item-result="pass"] textarea,
tr[data-task-type="na-ck"][data-item-result="pass"] select {
    border-color: #999;
}

tr[data-task-type="ck"][data-item-result="pass"]>td.statusColumn>div>.itemResultIcon,
tr[data-task-type="na-ck"][data-item-result="pass"]>td.statusColumn>div>.itemResultIcon {
    background-image: url("/images/Results/Result_Checked.svg");
    background-image: var(--image-check);
}


/* ----------------- */

/*
tr[data-task-type=notes] {
}
	tr[data-task-type=notes] > td.passColumn {
		display: none;
	}
	tr[data-task-type=notes] > td.warnColumn {
		display: none;
	}
	tr[data-task-type=notes] > td.failColumn {
		display: none;
	}

	tr[data-task-type=notes] > td.detailsColumn > div textarea {
	}

		tr[data-task-type=notes] > td.detailsColumn > div > div.itemDetails {
			padding-left: 120px; / * To take up the space of the 3 checkbox columns * /
		}

	tr[data-task-type=notes] input[type=text],
	tr[data-task-type=notes] input[type=number],
	tr[data-task-type=notes] textarea,
	tr[data-task-type=notes] select {
		border-color: #999;
	}

/ * -- * /

tr[data-task-type=notes][data-item-notes=false] > td {
	background-color: #eeeeee;
	background-color: var(--color-none);
}
tr[data-task-type=notes][data-item-notes=true] > td {
	background-color: #cee7fc;
	background-color: var(--color-note) !important;
}
	tr[data-task-type=notes][data-item-notes=true] > td.statusColumn > div > .itemResultIcon {
		background-image: url("/images/Results/Result_Notes.svg");
		background-image: var(--image-notes);
	}

	tr[data-task-type=notes][data-item-notes=true] input[type=text],
	tr[data-task-type=notes][data-item-notes=true] input[type=number],
	tr[data-task-type=notes][data-item-notes=true] textarea,
	tr[data-task-type=notes][data-item-notes=true] select {
		border-color: #0761ab;
	}
*/

/* Revenge of the Notes: */

tr[data-item-notes="true"]>td.detailsColumn>div>div.itemNotes {
    /* Always show div.itemNotes when an item has Notes, regardless of anything else. */
    display: contents !important;
}

tr[data-task-notes="none"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,
tr[data-task-notes="wf-required-only"][data-item-result="none"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,
tr[data-task-notes="wf-required-only"][data-item-result="nota"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,
tr[data-task-notes="wf-required-only"][data-item-result="pass"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,

tr[data-task-notes="wf-optional"][data-item-result="none"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,
tr[data-task-notes="wf-optional"][data-item-result="nota"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes,
tr[data-task-notes="wf-optional"][data-item-result="pass"]:not([data-item-notes="true"])>td.detailsColumn>div>div.itemNotes {
    /* When `wf-required-only`, then hide the Notes textarea for all ItemResults except Warn and Fail - *or* if an Item already has Notes */
    /* When `wf-optional`, ditto: */
    display: none;
}

tr[data-task-notes="required"][data-item-notes="false"]>td.detailsColumn>div>div.itemNotes textarea:placeholder-shown,
tr[data-task-notes="wf-required"][data-item-notes="false"][data-item-result="warn"]>td.detailsColumn>div>div.itemNotes textarea:placeholder-shown,
tr[data-task-notes="wf-required"][data-item-notes="false"][data-item-result="fail"]>td.detailsColumn>div>div.itemNotes textarea:placeholder-shown,
tr[data-task-notes="wf-required-only"][data-item-notes="false"][data-item-result="warn"]>td.detailsColumn>div>div.itemNotes textarea:placeholder-shown,
tr[data-task-notes="wf-required-only"][data-item-notes="false"][data-item-result="fail"]>td.detailsColumn>div>div.itemNotes textarea:placeholder-shown {
    /*tr[data-task-notes="wf-required-only"][data-item-notes="false"]:not([data-item-result="warn"]):not([data-item-result="fail"]) > td.detailsColumn > div > div.itemNotes textarea:placeholder-shown {*/
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown */

    border-color: red;
}

tr[data-task-notes="required"][data-item-notes="false"]>td.detailsColumn>div>div.itemNotes textarea::placeholder,
tr[data-task-notes="wf-required"][data-item-notes="false"][data-item-result="warn"]>td.detailsColumn>div>div.itemNotes textarea::placeholder,
tr[data-task-notes="wf-required"][data-item-notes="false"][data-item-result="fail"]>td.detailsColumn>div>div.itemNotes textarea::placeholder,
tr[data-task-notes="wf-required-only"][data-item-notes="false"]:not([data-item-result="warn"]):not([data-item-result="fail"])>td.detailsColumn>div>div.itemNotes textarea::placeholder {
    /* Can only use CSS properties compatible with `:first-line` for `::placeholder` */
}

/* ----------------- */
/* Settings-triggered area visiblity: */

#itemDetailsToggle:not(:checked)~* td.detailsColumn>div>div.itemDetails {
    display: none;
}

#itemDetailsToggle:checked~* td.detailsColumn>div>div.itemDetails {}

/* *Never* show `div.itemDetails` for empty rows, even when the toggle checkbox is checked: */
tr[data-item-result=none][data-item-notes=false]>td.detailsColumn>div>div.itemDetails {
    display: none !important;
}

tr[data-item-result=pass]>td.detailsColumn>div>div.itemDetails {
    display: none !important;
}

#calmModeToggle:checked~* tr[data-item-result=none]>td,
#calmModeToggle:checked~* tr[data-item-result=pass]>td:not(.statusColumn),
#calmModeToggle:checked~* tr[data-item-result=warn]>td:not(.statusColumn),
#calmModeToggle:checked~* tr[data-item-result=fail]>td:not(.statusColumn),

#calmModeToggle:checked~* tr[data-item-result=none][data-item-notes=false]>td,
#calmModeToggle:checked~* tr[data-item-result=none][data-item-notes=true]>td:not(.statusColumn),
#calmModeToggle:checked~* tr[data-item-result=pass]>td:not(.statusColumn),
#calmModeToggle:checked~* tr[data-item-result=fail]>td:not(.statusColumn),

#calmModeToggle:checked~* tr[data-item-notes=false]>td,
#calmModeToggle:checked~* tr[data-item-notes=true]>td:not(.statusColumn) {
    background-color: transparent;
}

#calmModeToggle:not(:checked)~* tr[data-item-result=warn]>td.detailsColumn,
#calmModeToggle:not(:checked)~* tr[data-item-result=fail]>td.detailsColumn {
    /* Right-edge inner shadow */
    /* Top-edge inner shadow */
    /*
	box-shadow:
		inset 9px 1px 7px -8px rgba(0, 0, 0, 0.12),
		inset 0px 20px 9px -20px rgba(0, 0, 0, 0);

	box-shadow: inset 9px 1px 7px -8px rgba(0, 0, 0, 0.12); / * Actually, a single left-edge looks fine. * /
	*/
}

/* ----------------- */
/* When saving, the `itemResultIcon` is replaced with a spinner. */

tr.saving>td.statusColumn>div>.itemResultIcon {
    background-image: none !important;
}

tr.saving>td.statusColumn>div>.itemResultIcon::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4) transparent rgb(128, 128, 128) transparent;
    animation: rotate360 1.2s linear infinite;
}

tr.updated {
    animation: updatedPulse 5s 3 ease-in-out;
}

@keyframes updatedPulse {
    from {
        box-shadow: 0px 0px 5px 3px rgba(20, 98, 206, 0.8);
    }

    to {
        box-shadow: 0px 0px 5px 3px rgba(20, 98, 206, 0.0);
        /* Hmm, what if the box-shadow size changed too? */
    }
}

/* ----------------- */
/* Styles for Checklist Preview in InspectionType Editor: */

table.checklistTable>tbody>tr.hiddenNonSelectedTask {
    display: none;
}


@media only screen and (max-width: 1023px) {

    .taskColumn {
        width: 33%;
    }

    /*
	#checklistSection h3 .itemCountSpan {
		margin-right: 20%;
	}
	*/

    label.itemPriority>span {
        display: none;
    }

    label.itemIsPerformed>span {
        /*display: none;*/
    }

    label.ic-item-finding-name>span,
    label.ic-item-finding-reco>span {
        display: none;
    }
}

/* Tablet mode: */
@media only screen and (max-width: 767px) {

    section.pageHeader .actions {
        flex-wrap: wrap;
    }

    #checklistSection h3 .itemCountSpan {
        margin-right: 5%;
    }

    .inspectionFields {
        flex-wrap: wrap;
    }

    span.itemResultsSpan {
        display: none !important;
    }

    table.checklistTable {
        table-layout: auto;
        table-layout: fixed;
        display: block;
    }

    table.checklistTable>tbody {
        display: block;
    }

    table.checklistTable>tbody>tr {
        display: grid;
        grid-template-columns: 30px auto 1fr auto auto auto auto;
        grid-template-columns: auto auto 1fr auto auto auto auto;

        /* The first row needs to be `1fr`, not `auto` otherwise content shorter than the tallest item in the row won't stretch-to-fill, which leaves the white-gaps under Task Names that I saw. */
        /* Row 1: status (30px) | previousStatus (auto) | taskName (1fr) | pass | warn | fail */
        /* Row 2: assets */
        /* Row 3: measurements */
        /* Row 4: findings + details + notes */
        grid-template-rows: 1fr auto auto auto;
        grid-column-gap: 0;

        height: auto;
        /* Undo the `height: 1px` on desktop. */
        width: 100%;

        border-bottom: 1px solid #ccc;
        border-bottom: 3px solid #ccc;
    }

    table.checklistTable>tbody>tr:last-child {
        border-bottom: none;
    }

    table.checklistTable>tbody>tr>td {
        display: block;
        box-sizing: border-box;
        border: none !important;
    }

    td.statusColumn {
        width: 30px;
        /* Curiously, the `30px` width on the gird-template column doesn't work as-expected unless we set `width: 30px` on the <td> directly here. */
        height: 100%;
        align-self: stretch;

        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        /* <-- Occupies both rows. */
    }

    td.statusColumn>div {
        flex-direction: column;
        justify-content: flex-start;
    }

    td.statusColumn>div>.itemResultIcon {
        width: 16px;
        height: 16px;
    }

    tr[data-item-status="saving"]>td.statusColumn>div>.itemResultIcon::after {}

    td.previousStatusColumn {
        width: 30px;
        height: 100%;
        align-self: stretch;

        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        /* <-- Only occupies top rows. */
    }

    td.previousStatusColumn>div {
        justify-content: flex-start;
        flex-direction: column;
    }

    td.taskColumn {
        width: auto;
        background-color: unset;
        height: auto;
        align-self: stretch !important;
        align-self: center;
        /* Why doesn't `stretch` work? */

        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    td.previousStatusColumn+td.taskColumn {
        grid-column-start: 3;
    }

    div.taskAndUnit {
        padding: 0.25em;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    td.notaColumn {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 1;

        min-height: 1.3em;
    }

    td.passColumn {
        grid-column-start: 5;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 1;

        min-height: 1.3em;
    }

    td.warnColumn {
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 1;

        min-height: 1.3em;
    }

    td.failColumn {
        grid-column-start: 7;
        grid-column-end: 8;
        grid-row-start: 1;
        grid-row-end: 1;

        min-height: 1.3em;
    }

    td.detailsColumn {
        grid-column-start: 2;
        /* Columns are indexed from 1, not 0. */
        grid-column-end: 8;
        /* this is an exclusive upper-bound value, so it spans columns [1,2,3,4] */
    }

    td.previousStatusColumn~td.detailsColumn {}

    td.detailsColumn>div>div.itemDetails {}

    /*
	tr[data-task-type=notes] > td.taskColumn {
		grid-column-end: 6;
	}
	*/

    /*
	td.detailsColumn > div > div.itemFinding > label {
		display: flex;
		flex-basis: 100%;
	}
	*/

    /* Hide info row for Unchecked and Passing items: */
    tr[data-task-type=yn][data-item-result=none]>td.detailsColumn>div>div.itemFinding,
    tr[data-task-type=pwf][data-item-result=none]>td.detailsColumn>div>div.itemFinding,
    tr[data-task-type=pwf][data-item-result=pass]>td.detailsColumn>div>div.itemFinding {
        display: none;
    }

    .checklist-table tr.ic-row-notes.pwf-none:not(.has-notes)>td.checklist-column-finding {
        display: none;
    }

    tr[data-task-type=notes]>td.detailsColumn>div>div.itemDetails {
        padding-left: 0;
    }

    /* ------- */

    tr.pwf-nota>td.taskColumn {
        background-color: #eeeeee !important;
    }

    tr.pwf-pass>td.taskColumn {
        background-color: #d5f3bb !important;
    }

    tr.pwf-warn>td.taskColumn {
        background-color: #fff8cc !important;
    }

    tr.pwf-fail>td.taskColumn {
        background-color: #fcd6ce !important;
    }

    tr.ic-row-notes.has-notes>td.taskColumn {
        background-color: #cee7fc !important;
    }
}

@media only screen and (max-width: 600px) {
    /* Hide the accordion header item-count spans  */

    #checklistSection h3 span.itemResultsSpan,
    #checklistSection h3 span.invalidItemCountSpan.zero,
    #checklistSection h3 span.requiredItemCountSpan {
        display: none;
    }

    #checklistSection h3 span.invalidItemCountSpan {
        font-size: 0;
        width: 16px;
    }

    /* TODO: Should this show only `.requiredItemCountSpan`? */
    #checklistSection h3 span.itemCountSpan {}

    .taskAndUnit>.assetsListOuter>ul.assetsList {
        height: auto;
        margin: 0;
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    /* Ultra-compact view for phones (not phablets): */

    html:not(.isPopup) section.pageHeader>ul.actions>li {
        margin: 0.15em;
        /* Instead of 0.25em */
    }

    html:not(.isPopup) section.pageHeader>ul.actions>li>.button,
    html:not(.isPopup) section.pageHeader>ul.actions>li>button,
    html:not(.isPopup) section.pageHeader>ul.actions>li>label[for].trigger {
        padding: 1px 5px 1px 5px;
        padding: 0px 4px 0px 4px;
    }

    #checklistSection .accordionPane {
        padding: 0;
    }

    table.checklistTable>tbody>tr:hover {
        outline-offset: 0;
    }

    table.checklistTable>tbody>tr {
        display: grid;
        /* status (30px) | previousStatus (auto) | taskName (1fr) | nota + pass + warn + fail (auto) */
        grid-template-columns: 30px auto 1fr auto;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: 1fr auto;
        /* The first row needs to be `1fr`, not `auto` otherwise content shorter than the tallest item in the row won't stretch-to-fill, which leaves the white-gaps under Task Names that I saw. */
        grid-column-gap: 0;

        height: auto;
        /* Undo the `height: 1px` on desktop. */
        width: 100%;

        border-bottom: 1px solid #ccc;
        border-bottom: 3px solid #ccc;
    }

    table.checklistTable>tbody>tr>td.notaColumn {
        grid-column-start: 4;
        grid-column-end: 5;
    }

    table.checklistTable>tbody>tr>td.passColumn {
        grid-column-start: 4;
        grid-column-end: 5;
    }

    table.checklistTable>tbody>tr>td.warnColumn {
        grid-column-start: 4;
        grid-column-end: 5;
    }

    table.checklistTable>tbody>tr>td.failColumn {
        grid-column-start: 4;
        grid-column-end: 5;
    }

    /* See InspectionChecklistRowsMobile.SingleColumn.css */

    td.detailsColumn {
        grid-column-start: 1;
        /* Instead of `2`. */
    }

    td.detailsColumn>div>div.itemFinding>label {
        display: flex;
        /* Instead of `contents` */
        align-items: center;
    }

    td.detailsColumn>div>div.itemFinding>a.button {
        align-self: center;
        margin: 0.25em;
    }

    td.detailsColumn>div>div.itemFinding {
        /*flex-direction: column; <-- This isn't needed anymore as the controls are compact enough. */
    }

    .taskAndUnit {
        flex-direction: column;
        /* So if the unit <label> is present, it will be rendered on its own row. */
        overflow: hidden;
        font-size: 80%;
    }

    .taskAndUnit>label.itemUnit {
        margin-left: 0.25em;
    }

    .taskAndUnit>.taskName {
        word-break: break-all;
        /* Prevent long task-names with no whitespace causing horizontal scrolling. */
    }

    /* TODO: Move this to User.master.css */
    ul.mainNav {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .taskAndUnit>.assetsListOuter>ul.assetsList {
        height: auto;
        margin: 0;
        width: 100%;
    }
}

@media only screen and (max-width: 480px) {

    /* PWF */

    /*	PWF with ItemResult.None: */
    tr[data-task-type="pwf"i][data-item-result="none"]>td.passColumn {
        /* The N/A (nota) column will have `display: none` or similar in this context, btw. */
        z-index: 101;
        background-color: transparent !important;
    }

    tr[data-task-type="pwf"i][data-item-result="none"]>td.warnColumn {
        visibility: hidden;
    }

    tr[data-task-type="pwf"i][data-item-result="none"]>td.failColumn {
        visibility: hidden;
    }

    /*	PWF with ItemResult.Pass: */
    tr[data-task-type="pwf"i][data-item-result="pass"]>td.passColumn {
        /* Show the passColumn on-top of the other resultColumns, but below the Warn Column (which has 0.1% opacity so it receives touch events without blocking the view of the current Pass status) */
        z-index: 100;
    }

    tr[data-task-type="pwf"i][data-item-result="pass"]>td.warnColumn {
        opacity: 0;
        /* `opacity: 0;` still participates in clicks/events, whereas `visibility: hidden;` does not (let alone `display: none;`). */
        z-index: 101;
    }

    tr[data-task-type="pwf"i][data-item-result="pass"]>td.failColumn {
        visibility: hidden;
    }

    /*	PWF with ItemResult.Warn: */
    tr[data-task-type="pwf"i][data-item-result="warn"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="pwf"i][data-item-result="warn"]>td.warnColumn {
        z-index: 100;
    }

    tr[data-task-type="pwf"i][data-item-result="warn"]>td.failColumn {
        opacity: 0;
        z-index: 101;
    }

    /*	PWF with ItemResult.Fail: */
    tr[data-task-type="pwf"i][data-item-result="fail"]>td.passColumn {
        /* When row is Fail, keep .failColumn on-top so tapping it again reverts to None: */
        visibility: hidden;
    }

    tr[data-task-type="pwf"i][data-item-result="fail"]>td.warnColumn {
        visibility: hidden;
    }

    tr[data-task-type="pwf"i][data-item-result="fail"]>td.failColumn {
        z-index: 101;
    }

    /* NA+PWF */

    tr[data-task-type="na-pwf"i][data-item-result="none"]>td.notaColumn {
        z-index: 101;
        background-color: transparent !important;
    }

    tr[data-task-type="na-pwf"i][data-item-result="none"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="none"]>td.warnColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="none"]>td.failColumn {

        visibility: hidden;
    }



    tr[data-task-type="na-pwf"i][data-item-result="nota"]>td.notaColumn {
        z-index: 100;
    }

    tr[data-task-type="na-pwf"i][data-item-result="nota"]>td.passColumn {
        opacity: 0;
        z-index: 101;
    }

    tr[data-task-type="na-pwf"i][data-item-result="nota"]>td.passColumn:hover {
        opacity: 1;
    }

    tr[data-task-type="na-pwf"i][data-item-result="nota"]>td.warnColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="nota"]>td.failColumn {
        visibility: hidden;
    }



    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.notaColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.passColumn {
        z-index: 100;
    }

    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.warnColumn {
        opacity: 0;
        z-index: 101;
    }

    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.warnColumn:hover {
        opacity: 1;
    }

    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.failColumn {
        visibility: hidden;
    }



    tr[data-task-type="na-pwf"i][data-item-result="warn"]>td.notaColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="warn"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="warn"]>td.warnColumn {
        z-index: 100;
    }

    tr[data-task-type="na-pwf"i][data-item-result="warn"]>td.failColumn {
        opacity: 0;
        z-index: 101;
    }

    tr[data-task-type="na-pwf"i][data-item-result="pass"]>td.failColumn:hover {
        opacity: 1;
    }


    tr[data-task-type="na-pwf"i][data-item-result="fail"]>td.notaColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="fail"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="fail"]>td.warnColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-pwf"i][data-item-result="fail"]>td.failColumn {
        z-index: 101;
    }

    /* YN: */
    tr[data-task-type="yn"i]>td.warnColumn {
        display: none;
    }

    tr[data-task-type="yn"i][data-item-result="none"]>td.passColumn {
        z-index: 100;
        background-color: transparent !important;
    }

    tr[data-task-type="yn"i][data-item-result="none"]>td.failColumn {
        visibility: hidden;
    }

    tr[data-task-type="yn"i][data-item-result="pass"]>td.passColumn {
        z-index: 100;
    }

    tr[data-task-type="yn"i][data-item-result="pass"]>td.failColumn {
        z-index: 101;
        opacity: 0;
    }

    tr[data-task-type="yn"i][data-item-result="fail"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="yn"i][data-item-result="fail"]>td.failColumn {
        z-index: 100;
    }

    /* NA-YN: */


    tr[data-task-type="na-yn"i][data-item-result="none"]>td.notaColumn {
        z-index: 100;
        background-color: transparent !important;
    }

    tr[data-task-type="na-yn"i][data-item-result="none"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-yn"i][data-item-result="none"]>td.failColumn {
        visibility: hidden;
    }



    tr[data-task-type="na-yn"i][data-item-result="nota"]>td.notaColumn {
        z-index: 100;
    }

    tr[data-task-type="na-yn"i][data-item-result="nota"]>td.passColumn {
        opacity: 0;
        z-index: 101;
    }

    tr[data-task-type="na-yn"i][data-item-result="nota"]>td.failColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-yn"i][data-item-result="pass"]>td.notaColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-yn"i][data-item-result="pass"]>td.passColumn {
        z-index: 100;
    }

    tr[data-task-type="na-yn"i][data-item-result="pass"]>td.failColumn {
        opacity: 0;
        z-index: 101;
    }



    tr[data-task-type="na-yn"i][data-item-result="fail"]>td.notaColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-yn"i][data-item-result="fail"]>td.passColumn {
        visibility: hidden;
    }

    tr[data-task-type="na-yn"i][data-item-result="fail"]>td.failColumn {
        visibility: hidden;
    }

    /* NA-None: */
    /* No special rules needed as only a single column is rendered anyway. */

}

/* ------------------------------------ */
/* Finger-friendly mode: */
/* ------------------------------------ */

@media (pointer: coarse),
(pointer: none) {

    #touchFriendlyModeLabel {
        display: none;
    }

    #checklistSection>h3>label {
        padding: 0.5em;
        transition: padding 0.1s;
    }

    #checklistSection li.newAssetUpload {
        opacity: 1;
    }

    /* Style rules that affect the width of columns need to match both `<thead>` and `<tbody>` because we're using `table-layout: fixed`!, even when used with `tr { display: grid; }` */
    #checklistSection td.notaColumn,
    #checklistSection td.passColumn,
    #checklistSection td.warnColumn,
    #checklistSection td.failColumn {
        width: 64px !important;
    }

    #checklistSection td.notaColumn,
    #checklistSection td.passColumn,
    #checklistSection td.warnColumn,
    #checklistSection td.failColumn {
        /* This rule doesn't use `#touchFriendlyMode:checked ~ * tbody > tr > td.passColumn label span` because it also needs to apply to <th> because we're using `table-layout: fixed` */
        width: 64px !important;
        /*height: 64px !important;*/
    }

    #checklistSection tbody td.notaColumn label,
    /* `tbody > tr > td` to avoid selecting <thead> rows which have `visibility: hidden;` instead of `display: none;` because we're using `table-layout: fixed;` */
    #checklistSection tbody td.passColumn label,
    #checklistSection tbody td.warnColumn label,
    #checklistSection tbody td.failColumn label {
        height: 64px;
        /* Only set height, don't set width! */
        padding: 2px;
    }

    #checklistSection tbody select,
    #checklistSection tbody textarea,
    #checklistSection tbody input {
        font-size: larger;
    }

    #checklistSection tbody td.notaColumn label::before,
    #checklistSection tbody td.passColumn label::before,
    #checklistSection tbody td.warnColumn label::before,
    #checklistSection tbody td.failColumn label::before {
        /* 40px is better than 48px, imo. */
        width: 40px;
        height: 40px;
    }

    #checklistSection tbody td.notaColumn label::after,
    #checklistSection tbody td.passColumn label::after,
    #checklistSection tbody td.warnColumn label::after,
    #checklistSection tbody td.failColumn label::after {
        background-size: 36px 36px;
    }

}


#touchFriendlyMode:checked~#checklistSection>h3>label {
    padding: 0.5em;
    transition: padding 0.1s;
}

#touchFriendlyMode:checked~#checklistSection li.newAssetUpload {
    opacity: 1;
}

/* Style rules that affect the width of columns need to match both `<thead>` and `<tbody>` because we're using `table-layout: fixed`!, even when used with `tr { display: grid; }` */
#touchFriendlyMode:checked~#checklistSection td.notaColumn,
#touchFriendlyMode:checked~#checklistSection td.passColumn,
#touchFriendlyMode:checked~#checklistSection td.warnColumn,
#touchFriendlyMode:checked~#checklistSection td.failColumn {
    width: 64px !important;
}

#touchFriendlyMode:checked~#checklistSection td.notaColumn,
#touchFriendlyMode:checked~#checklistSection td.passColumn,
#touchFriendlyMode:checked~#checklistSection td.warnColumn,
#touchFriendlyMode:checked~#checklistSection td.failColumn {
    /* This rule doesn't use `#touchFriendlyMode:checked ~ * tbody > tr > td.passColumn label span` because it also needs to apply to <th> because we're using `table-layout: fixed` */
    width: 64px !important;
    /*height: 64px !important;*/
}

#touchFriendlyMode:checked~#checklistSection tbody td.notaColumn label,
/* `tbody > tr > td` to avoid selecting <thead> rows which have `visibility: hidden;` instead of `display: none;` because we're using `table-layout: fixed;` */
#touchFriendlyMode:checked~#checklistSection tbody td.passColumn label,
#touchFriendlyMode:checked~#checklistSection tbody td.warnColumn label,
#touchFriendlyMode:checked~#checklistSection tbody td.failColumn label {
    height: 64px;
    /* Only set height, don't set width! */
    padding: 2px;
}

#touchFriendlyMode:checked~#checklistSection tbody select,
#touchFriendlyMode:checked~#checklistSection tbody textarea,
#touchFriendlyMode:checked~#checklistSection tbody input {
    font-size: larger;
}

#touchFriendlyMode:checked~#checklistSection tbody td.notaColumn label::before,
#touchFriendlyMode:checked~#checklistSection tbody td.passColumn label::before,
#touchFriendlyMode:checked~#checklistSection tbody td.warnColumn label::before,
#touchFriendlyMode:checked~#checklistSection tbody td.failColumn label::before {
    /* 40px is better than 48px, imo. */
    width: 40px;
    height: 40px;
}

#touchFriendlyMode:checked~#checklistSection tbody td.notaColumn label::after,
#touchFriendlyMode:checked~#checklistSection tbody td.passColumn label::after,
#touchFriendlyMode:checked~#checklistSection tbody td.warnColumn label::after,
#touchFriendlyMode:checked~#checklistSection tbody td.failColumn label::after {
    background-size: 36px 36px;
}


td.passColumn,
td.warnColumn,
td.failColumn,
td.passColumn label,
td.warnColumn label,
td.failColumn label,
td.passColumn label span,
td.warnColumn label span,
td.failColumn label span {
    transition: width 0.1s, height 0.1s;
}