/*
    Visual refresh of the administration area (project list, setup, quota, questionnaire editor,
    monadic report, delete respondents).

    This file is only linked from the admin pages and every rule is scoped to "body.admin", so the
    respondent questionnaire (index.aspx) is not affected. It is loaded after all other stylesheets
    and only restyles existing markup - no element is shown or hidden here, because the page scripts
    toggle visibility with show()/hide().
*/

/* ------------------------------------------------------------------ design tokens */
:root {
    /* brand colours (taken from general.css) */
    --sy-red: #c51718;
    --sy-red-dark: #a31213;
    --sy-navy: #003a81;
    --sy-navy-dark: #002b61;
    --sy-navy-tint: #e8eef6;
    --sy-aubergine: #5d0855;
    --sy-aubergine-dark: #470641;
    --sy-green: #4e8a14;

    /* neutrals (warm "off" tones of the existing tables) */
    --sy-ink: #2e383f;
    --sy-ink-muted: #5c6770;
    --sy-canvas: #f6f4f2;
    --sy-surface: #ffffff;
    --sy-surface-sunken: #f1eee9;
    --sy-line: #e2ded6;
    --sy-control-border: #8f887a;
    --sy-highlight: #fff3bf;

    /* type */
    --sy-font: 'Noto Sans', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sy-text: 14px;
    --sy-text-small: 12.5px;
    --sy-text-title: 26px;

    /* spacing scale */
    --sy-space-1: 4px;
    --sy-space-2: 8px;
    --sy-space-3: 12px;
    --sy-space-4: 16px;
    --sy-space-5: 24px;
    --sy-space-6: 32px;

    /* shape */
    --sy-radius: 6px;
    --sy-radius-card: 10px;
    --sy-shadow-card: 0 1px 2px rgba(46, 56, 63, .06), 0 4px 16px rgba(46, 56, 63, .06);
    --sy-shadow-popup: 0 2px 6px rgba(46, 56, 63, .10), 0 12px 32px rgba(46, 56, 63, .16);
    --sy-focus-ring: 0 0 0 3px rgba(0, 58, 129, .28);

    /* masthead */
    --sy-mast-height: 76px;
    --sy-gutter: 24px;
    --sy-content-width: 1280px;
    --sy-logo-block: 156px;
}

/* ------------------------------------------------------------------ page */
body.admin {
    height: auto;
    min-height: 100vh;
    font-family: var(--sy-font);
    font-size: var(--sy-text);
    line-height: 1.5;
    color: var(--sy-ink);
    background-color: var(--sy-canvas);
}

    body.admin .main-wrapper {
        width: auto;
        max-width: var(--sy-content-width);
        padding-left: var(--sy-gutter);
        padding-right: var(--sy-gutter);
    }

/* the project list is a wide table: let it use more of a large screen before titles have to wrap */
body.admin.page-projectlist {
    --sy-content-width: 1440px;
}

/* ------------------------------------------------------------------ masthead
   The coloured band keeps the section colour (red, blue, brown). Its right end is white and
   carries the logo; page title and navigation sit on the coloured part. */
body.admin #header {
    height: var(--sy-mast-height);
    margin-bottom: 0;
    --sy-logo-edge: calc(100% - max(var(--sy-gutter), (100% - var(--sy-content-width)) / 2 + var(--sy-gutter)) - 110px);
    background-image: linear-gradient(to right, transparent var(--sy-logo-edge), var(--sy-surface) var(--sy-logo-edge));
    box-shadow: 0 1px 0 var(--sy-line);
}

body.admin .admin-titlebar {
    margin-top: calc(-1 * var(--sy-mast-height)) !important;
    height: var(--sy-mast-height);
    padding: 0 540px 0 0;
    display: flex;
    align-items: center;
}

    body.admin .admin-titlebar > .row {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    body.admin .admin-titlebar .col-12 {
        padding: 0;
    }

body.admin #title {
    display: block;
    font-size: var(--sy-text-title);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.admin .admin-brand,
body.admin #IconContainer {
    position: relative;
    height: 0;
    margin-top: 0 !important;
    padding: 0;
}

    body.admin .admin-brand > .row,
    body.admin #IconContainer > .row {
        margin: 0;
    }

    body.admin .admin-brand .col-12,
    body.admin #IconContainer .col-12 {
        position: static;
        padding: 0;
    }

    body.admin .admin-brand img {
        position: absolute;
        top: calc(-1 * var(--sy-mast-height));
        right: 0;
        float: none;
        width: var(--sy-logo-block);
        height: var(--sy-mast-height);
        padding: 8px 0 8px 24px;
        object-fit: contain;
        object-position: right center;
        background-color: var(--sy-surface);
    }

    body.admin #IconContainer ul {
        position: absolute;
        top: calc(-1 * var(--sy-mast-height));
        right: calc(var(--sy-logo-block) + var(--sy-space-4));
        height: var(--sy-mast-height);
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--sy-space-1);
    }

    body.admin #IconContainer li {
        float: none;
        padding: 0;
    }

    body.admin #IconContainer a.icon,
    body.admin #IconContainer a.icon:hover,
    body.admin #IconContainer a.icon:visited {
        display: flex;
        align-items: center;
        gap: var(--sy-space-2);
        margin-top: 0 !important;
        padding: 9px 12px;
        border-radius: var(--sy-radius);
        color: #ffffff !important;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .15s ease;
    }

        body.admin #IconContainer a.icon:hover {
            background-color: rgba(255, 255, 255, .16);
        }

        body.admin #IconContainer a.icon:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: 1px;
        }

        body.admin #IconContainer a.icon .fa {
            font-size: 17px;
        }

        body.admin #IconContainer a.icon p {
            margin: 0;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .05em;
            line-height: 1.5;
        }

/* ------------------------------------------------------------------ cards */
body.admin .borderContainer {
    margin-top: var(--sy-space-5);
    margin-bottom: var(--sy-space-6);
    padding: var(--sy-space-5) 9px;
    background-color: var(--sy-surface);
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius-card);
    -webkit-box-shadow: var(--sy-shadow-card);
    box-shadow: var(--sy-shadow-card);
}

    body.admin .borderContainer.row {
        margin-left: 0;
        margin-right: 0;
    }

body.admin h3 {
    margin: 0 0 var(--sy-space-4);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sy-ink);
}

body.admin #newProject {
    margin-top: 0;
}

    body.admin #newProject #btn-addProject {
        margin-bottom: var(--sy-space-4);
    }

/* ------------------------------------------------------------------ buttons */
body.admin .btn {
    border-radius: var(--sy-radius) !important;
    font-size: 13px;
    letter-spacing: .03em;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.admin .btn-primary,
body.admin .btn-secondary {
    padding: 9px 18px;
    font-weight: 600;
}

    body.admin .btn-primary:hover,
    body.admin .btn-primary:active,
    body.admin .btn-primary.active {
        background-color: var(--sy-red-dark) !important;
        border-color: var(--sy-red-dark) !important;
    }

    body.admin .btn-secondary:hover,
    body.admin .btn-secondary:active,
    body.admin .btn-secondary.active,
    body.admin .btn-secondary.dropdown-toggle[aria-expanded="true"] {
        background-color: var(--sy-aubergine-dark) !important;
        border-color: var(--sy-aubergine-dark) !important;
    }

    body.admin .btn:focus,
    body.admin .btn.focus {
        box-shadow: none;
    }

    body.admin .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--sy-surface), 0 0 0 4px var(--sy-navy) !important;
    }

/* ------------------------------------------------------------------ form controls */
body.admin label {
    margin-bottom: 6px;
}

body.admin .form-group label {
    font-size: 13px;
    font-weight: 600;
}

/* the fake brand checkbox of the questionnaire editor also carries .form-control - it is left untouched */
body.admin .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.admin #panelistsInput {
    font-size: var(--sy-text);
    color: var(--sy-ink);
    background-color: var(--sy-surface);
    border: 1px solid var(--sy-control-border);
    border-radius: var(--sy-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.admin input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.form-control-sm) {
    height: 38px;
}

body.admin .form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
body.admin #panelistsInput:focus {
    font-size: var(--sy-text);
    border-color: var(--sy-navy);
    outline: none;
    box-shadow: var(--sy-focus-ring);
}

body.admin input.form-control[readonly]:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    color: var(--sy-ink-muted);
    background-color: var(--sy-surface-sunken);
    border-color: var(--sy-line);
}

/* bootstrap-select copies .form-control to its wrapper: the border belongs to the button inside */
body.admin div.bootstrap-select.form-control {
    height: auto;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.admin ::placeholder {
    color: #6f7880 !important;
}

/* jQuery form-validator */
body.admin .form-error {
    display: block;
    margin-top: var(--sy-space-1);
    font-size: var(--sy-text-small);
    font-weight: 400;
    color: var(--sy-red-dark);
}

body.admin .form-control.error,
body.admin .has-error .bootstrap-select > .dropdown-toggle {
    border-color: var(--sy-red);
}

/* bootstrap-select: same look as a text input */
body.admin .bootstrap-select > .dropdown-toggle,
body.admin .bootstrap-select > .dropdown-toggle:hover,
body.admin .bootstrap-select > .dropdown-toggle:active,
body.admin .bootstrap-select > .dropdown-toggle:focus,
body.admin .bootstrap-select.show > .dropdown-toggle {
    height: 38px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: var(--sy-text);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--sy-ink);
    background-color: var(--sy-surface) !important;
    border: 1px solid var(--sy-control-border);
    -webkit-box-shadow: none;
    box-shadow: none;
}

    body.admin .bootstrap-select > .dropdown-toggle:focus,
    body.admin .bootstrap-select.show > .dropdown-toggle {
        border-color: var(--sy-navy);
        outline: none !important;
        -webkit-box-shadow: var(--sy-focus-ring) !important;
        box-shadow: var(--sy-focus-ring) !important;
    }

    body.admin .bootstrap-select > .dropdown-toggle.bs-placeholder,
    body.admin .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
    body.admin .bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
        color: var(--sy-ink-muted);
    }

/* ------------------------------------------------------------------ dropdown menus (row actions and selects) */
body.admin .dropdown-menu {
    padding: 6px;
    font-size: var(--sy-text);
    color: var(--sy-ink);
    border: 1px solid var(--sy-line);
    border-radius: 8px;
    -webkit-box-shadow: var(--sy-shadow-popup);
    box-shadow: var(--sy-shadow-popup);
}

    body.admin .bootstrap-select .dropdown-menu .inner {
        padding: 0;
    }

body.admin .dropdown-item,
body.admin .dropdown-item:hover,
body.admin .dropdown-item:focus,
body.admin .dropdown-item:active,
body.admin .dropdown-item.active,
body.admin .bootstrap-select .dropdown-menu li a.dropdown-item {
    padding: 7px 12px;
    font-weight: 400;
    color: var(--sy-ink);
    text-decoration: none;
    border-radius: 5px !important;
}

    body.admin .dropdown-item:hover,
    body.admin .dropdown-item:focus {
        color: var(--sy-ink);
        background-color: var(--sy-surface-sunken) !important;
    }

    body.admin .dropdown-item:focus-visible {
        outline: 2px solid var(--sy-navy);
        outline-offset: -2px;
    }

    body.admin .dropdown-item.active,
    body.admin .dropdown-item:active {
        font-weight: 600;
        color: var(--sy-navy);
        background-color: var(--sy-navy-tint) !important;
    }

/* the questionnaire editor colours every link red (#QuestionContainer a) - not meant for select options */
body.admin .bootstrap-select .dropdown-menu li a.dropdown-item {
    color: var(--sy-ink) !important;
    text-decoration: none !important;
}

    body.admin .bootstrap-select .dropdown-menu li a.dropdown-item.active {
        color: var(--sy-navy) !important;
    }

    body.admin .dropdown-item .fa {
        margin-right: var(--sy-space-2);
        color: var(--sy-ink-muted);
    }

/* row actions: destructive entries are red, groups are separated */
body.admin #link-delete,
body.admin #link-deletedata,
body.admin #link-deleterespondents,
body.admin #link-delete .fa,
body.admin #link-deletedata .fa,
body.admin #link-deleterespondents .fa {
    color: var(--sy-red-dark);
}

body.admin #link-cloneproject,
body.admin #link-copylinkfield {
    position: relative;
    margin-top: 13px;
}

    body.admin #link-cloneproject::before,
    body.admin #link-copylinkfield::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -7px;
        border-top: 1px solid var(--sy-line);
    }

/* ------------------------------------------------------------------ tables (project list, monadic report) */
body.admin #projectList-table {
    border-collapse: collapse !important;
    border-bottom: 1px solid var(--sy-line);
}

    body.admin #projectList-table th {
        height: auto;
        padding: 11px 24px 11px 10px;
        font-size: var(--sy-text-small);
        font-weight: 600;
        line-height: 1.4;
        color: var(--sy-ink) !important;
        background-color: var(--sy-surface-sunken) !important;
        border: none;
        border-bottom: 1px solid var(--sy-line);
        vertical-align: middle;
    }

        body.admin #projectList-table th:first-child {
            border-top-left-radius: var(--sy-radius);
        }

        body.admin #projectList-table th:last-child {
            border-top-right-radius: var(--sy-radius);
        }

        body.admin #projectList-table th:focus-visible {
            outline: 2px solid var(--sy-navy);
            outline-offset: -2px;
        }

    body.admin #projectList-table td {
        padding: 9px 10px;
        border: none;
        border-top: 1px solid var(--sy-line);
        vertical-align: middle;
    }

        /* the title column may wrap, so that the table fits on a laptop screen;
           on wider screens the page grows instead (see body.admin.page-projectlist) */
        body.admin #projectList-table td:nth-child(2) {
            min-width: 180px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        body.admin #projectList-table td:nth-child(1) {
            font-weight: 600;
        }

        body.admin #projectList-table td:nth-child(4),
        body.admin #projectList-table td:nth-child(5) {
            font-variant-numeric: tabular-nums;
        }

        body.admin #projectList-table td.dataTables_empty {
            padding: var(--sy-space-5) 10px;
            font-weight: 400;
            color: var(--sy-ink-muted);
        }

    body.admin #projectList-table .odd,
    body.admin #projectList-table .even {
        background-color: var(--sy-surface) !important;
    }

    body.admin #projectList-table tbody tr:hover {
        background-color: #faf8f5 !important;
    }

    body.admin #projectList-table tbody tr.highlight {
        background-color: var(--sy-highlight) !important;
    }

    body.admin #projectList-table .btn-secondary.dropdown-toggle {
        padding: 6px 10px;
    }

    body.admin #projectList-table input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--sy-navy);
    }

/* DataTables controls */
body.admin .dataTables_wrapper .dataTables_length,
body.admin .dataTables_wrapper .dataTables_filter,
body.admin .dataTables_wrapper .dataTables_info {
    color: var(--sy-ink-muted);
}

    body.admin .dataTables_wrapper .dataTables_length label,
    body.admin .dataTables_wrapper .dataTables_filter label {
        margin-bottom: var(--sy-space-2);
        font-weight: 400;
    }

    body.admin .dataTables_wrapper .dataTables_filter input {
        width: 240px;
        height: 34px;
        margin-left: var(--sy-space-2);
    }

    body.admin .dataTables_wrapper .dataTables_length select {
        height: 34px;
        margin: 0 var(--sy-space-1);
    }

    body.admin .dataTables_wrapper .dataTables_info {
        padding-top: var(--sy-space-3);
    }

    body.admin .dataTables_wrapper .dataTables_paginate {
        padding-top: var(--sy-space-2);
    }

body.admin .pagination .page-link,
body.admin .pagination .page-link:hover,
body.admin .pagination .page-link:visited {
    min-width: 34px;
    margin-left: 4px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: var(--sy-navy);
    background-color: var(--sy-surface);
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
}

    body.admin .pagination .page-link:hover {
        background-color: var(--sy-surface-sunken);
    }

    body.admin .pagination .page-link:focus {
        box-shadow: none;
    }

    body.admin .pagination .page-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--sy-surface), 0 0 0 4px var(--sy-navy);
    }

body.admin .pagination .page-item.active .page-link {
    font-weight: 600;
    color: #ffffff;
    background-color: var(--sy-navy);
    border-color: var(--sy-navy);
}

body.admin .pagination .page-item.disabled .page-link {
    color: #6f7880;
    background-color: var(--sy-surface);
    border-color: var(--sy-line);
}

/* ------------------------------------------------------------------ Kendo alert / confirm dialogs */
body.admin .k-dialog {
    min-width: 380px;
    max-width: min(560px, calc(100vw - 32px));
    font-family: var(--sy-font);
    border: none;
    border-radius: var(--sy-radius-card);
    box-shadow: var(--sy-shadow-popup);
    overflow: hidden;
}

    /* Kendo uses content-box sizing inside its widgets */
    body.admin .k-dialog .k-window-titlebar,
    body.admin .k-dialog .k-content,
    body.admin .k-dialog .k-dialog-buttongroup,
    body.admin .k-dialog .k-dialog-buttongroup .k-button {
        box-sizing: border-box;
    }

    body.admin .k-dialog .k-window-titlebar {
        height: auto;
        min-height: 0;
        padding: 20px 24px 4px;
        font-size: 17px;
        font-weight: 600;
        color: var(--sy-ink);
        background-color: var(--sy-surface);
        border: none;
    }

        body.admin .k-dialog .k-window-titlebar .k-window-title {
            position: static;
            line-height: 1.35;
            white-space: normal;
        }

    body.admin .k-dialog .k-content {
        padding: 12px 24px 20px;
        font-size: var(--sy-text);
        line-height: 1.5;
        color: var(--sy-ink);
        text-align: left;
    }

    body.admin .k-dialog .k-dialog-buttongroup {
        display: flex;
        width: 100%;
        padding: 12px 24px 16px;
        gap: var(--sy-space-2);
        justify-content: flex-end;
        background-color: var(--sy-surface);
        border-top: 1px solid var(--sy-line);
    }

        body.admin .k-dialog .k-dialog-buttongroup .k-button {
            flex: 0 0 auto;
            width: auto !important;
            min-width: 96px;
            margin: 0;
            padding: 8px 18px;
            font-family: var(--sy-font);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
            color: var(--sy-ink);
            background: var(--sy-surface);
            border: 1px solid var(--sy-control-border) !important;
            border-radius: var(--sy-radius) !important;
            box-shadow: none;
        }

            body.admin .k-dialog .k-dialog-buttongroup .k-button:hover {
                background: var(--sy-surface-sunken);
            }

            body.admin .k-dialog .k-dialog-buttongroup .k-button.k-primary {
                color: #ffffff;
                background: var(--sy-red);
                border-color: var(--sy-red) !important;
            }

                body.admin .k-dialog .k-dialog-buttongroup .k-button.k-primary:hover {
                    background: var(--sy-red-dark);
                    border-color: var(--sy-red-dark) !important;
                }

            body.admin .k-dialog .k-dialog-buttongroup .k-button:focus {
                box-shadow: 0 0 0 2px var(--sy-surface), 0 0 0 4px var(--sy-navy);
            }

/* ------------------------------------------------------------------ project setup, step 1 */
body.admin.page-setup1 .borderContainer {
    max-width: 640px;
}

body.admin.page-setup1 .form-group {
    margin-bottom: 18px;
}

    body.admin.page-setup1 .form-group > label {
        display: block;
    }

    body.admin.page-setup1 .form-group > br {
        display: none;
    }

    body.admin.page-setup1 .form-group input.form-control:not([readonly]),
    body.admin.page-setup1 .form-group .bootstrap-select {
        width: 100% !important;
    }

body.admin.page-setup1 #btn-save-setupPage1 {
    margin-top: var(--sy-space-2);
}

/* ------------------------------------------------------------------ project setup, step 2 (question thumbnails) */
body.admin #thumbnailContainer {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px var(--sy-space-5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sy-space-4);
}

body.admin .qThumbnail {
    width: auto;
    float: none;
    margin: 0;
    padding: var(--sy-space-2) var(--sy-space-2) var(--sy-space-3);
    font-weight: 600;
    line-height: 1.4;
    background-color: var(--sy-surface);
    border: 1px solid var(--sy-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    body.admin .qThumbnail:hover {
        border-color: var(--sy-control-border);
        box-shadow: var(--sy-shadow-card);
    }

    body.admin .qThumbnail .ImgContainer {
        margin-bottom: var(--sy-space-2);
        border-radius: 4px;
    }

    body.admin .qThumbnail[data-choosed="false"] {
        color: var(--sy-ink-muted);
        background-color: var(--sy-canvas);
    }

        body.admin .qThumbnail[data-choosed="false"] .ImgContainer:not(:hover) {
            opacity: .6;
        }

    body.admin .qThumbnail .choosed,
    body.admin .qThumbnail .unchoosed {
        padding-right: var(--sy-space-3);
        padding-bottom: 34px;
        font-size: 36px;
        line-height: 1;
        pointer-events: none;
    }

    body.admin .qThumbnail .choosed {
        color: var(--sy-green);
    }

    /* keep a two-line label clear of the check / cross badge in the bottom right corner */
    body.admin .qThumbnail > div:last-child {
        padding-right: 48px;
    }

        body.admin .qThumbnail .choosed .fa,
        body.admin .qThumbnail .unchoosed .fa {
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 58%, transparent 60%);
        }

/* ------------------------------------------------------------------ quota */
body.admin #QuotaFormTable th {
    padding: 0 var(--sy-space-4) var(--sy-space-2) 0;
    font-size: var(--sy-text-small);
    font-weight: 600;
    color: var(--sy-ink-muted);
}

body.admin #QuotaFormTable td {
    padding: 3px var(--sy-space-4) 3px 0;
    font-variant-numeric: tabular-nums;
}

body.admin #QuotaFormTable .InputDescription {
    min-width: 280px;
}

body.admin #btn-SaveQuota {
    margin-top: var(--sy-space-4) !important;
}

/* ------------------------------------------------------------------ questionnaire editor */
body.admin #LeftContainer {
    padding-right: var(--sy-space-1);
    border-right: 1px solid var(--sy-line);
}

body.admin #QuestionContainer,
body.admin #ConceptContainer {
    margin-left: var(--sy-space-5);
}

body.admin #QuestionListHeader,
body.admin #ConceptListHeader {
    display: block;
    margin-bottom: 6px;
    font-size: var(--sy-text-small);
    font-weight: 600;
    color: var(--sy-ink-muted);
}

body.admin #ConceptListHeader {
    margin-top: var(--sy-space-5);
}

body.admin #QuestionListContainer .ListItem,
body.admin #ConceptListContainer .ConceptListItem {
    margin: 0 0 2px;
    padding: 8px 10px;
    line-height: 1.4;
    color: var(--sy-ink);
    background-color: transparent !important;
    border-radius: var(--sy-radius);
    overflow-wrap: anywhere;
    transition: background-color .15s ease, color .15s ease;
}

    body.admin #QuestionListContainer .ListItem:hover,
    body.admin #ConceptListContainer .ConceptListItem:hover {
        background-color: var(--sy-navy-tint) !important;
    }

    body.admin #QuestionListContainer .ListItem.Active,
    body.admin #ConceptListContainer .ConceptListItem.Active {
        font-weight: 600;
        color: #ffffff;
        background-color: var(--sy-navy) !important;
    }

body.admin #BtnFinishContainer {
    margin-top: var(--sy-space-5);
    overflow: visible;
}

    body.admin #BtnFinishContainer .btn {
        width: 100%;
        padding-left: var(--sy-space-2);
        padding-right: var(--sy-space-2);
    }

body.admin #Explanation {
    padding: var(--sy-space-6) 0;
    font-weight: 400 !important;
    color: var(--sy-ink-muted);
}

body.admin #QuestionContainer .HeaderText {
    font-weight: 600;
    line-height: 1.4;
}

body.admin #QuestionContainer .ScaleLegend {
    font-size: 13px;
    color: var(--sy-ink-muted);
}

body.admin #QuestionFormTable th {
    padding-bottom: 6px;
    font-size: var(--sy-text-small);
    font-weight: 600;
    color: var(--sy-ink-muted);
}

body.admin #QuestionFormBody td {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Q7b: the stacked inputs of a concept have no row spacing of their own */
body.admin .concepttemplatechild {
    margin-bottom: 6px;
    align-items: center;
}

body.admin #QuestionContainer .fa-minus-circle,
body.admin #QuestionContainer .fa-plus-square {
    transition: opacity .15s ease;
}

    body.admin #QuestionContainer .fa-minus-circle:hover,
    body.admin #QuestionContainer .fa-plus-square:hover {
        opacity: .75;
    }

body.admin #QuestionContainer .fa-plus-square {
    color: var(--sy-green);
}

body.admin #ImageContainer img {
    border: 1px solid var(--sy-line);
    border-radius: var(--sy-radius);
}

/* ------------------------------------------------------------------ delete respondents */
body.admin #panelistsInput {
    max-width: 100%;
    padding: 10px 12px;
    line-height: 1.5;
}

body.admin #btn-DeletePanelists {
    margin-top: var(--sy-space-4) !important;
}

/* ------------------------------------------------------------------ misc */
body.admin .uil-ring-css > div {
    box-shadow: 0 6px 0 0 var(--sy-navy);
}

@media (prefers-reduced-motion: reduce) {
    body.admin *,
    body.admin *::before,
    body.admin *::after {
        transition: none !important;
    }
}

@media (max-width: 1100px) {
    body.admin .admin-titlebar {
        padding-right: 420px;
    }

    body.admin #IconContainer a.icon {
        padding-left: 8px;
        padding-right: 8px;
    }
}