/* tenant registration */
#formTenantRegister #siteName-error, #formTenantRegister #siteName-warning, #formTenantRegister #siteName-inUse-error {
    font-weight: 500 !important;
}
div.registration-admin-names {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

div.registration-spinner-container {
    padding-top: 32px;
    padding-bottom: 32px;
}
/* datatable grid action buttons */
button.dropdown-toggle.btn:not(.keep-arrow):after {
    content: none;
}

button.dropdown-toggle i {
    margin-right: 0px;
}

button.btn > i,
span.btn > i {
    padding-right: 0px !important;
}

button.btn-sm,
span.btn-sm {
    padding-left: 6px;
    padding-right: 6px;
}

.grid-icon {
    min-width: 36px;
}

button.sv-filter-btn {
    width: 42px;
}

div.input-group span.input-group-btn button.sv-filter-btn {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

#filter-div {
    text-align: right;
    margin-left: 5px;
}

#filter-div .sv-grid-filter-btn i {
    color: inherit;
}

div.dataTables_wrapper table.dataTable.collapsed > tbody > tr[role="row"] > td:first-child {
    padding-left: 0px !important;
}

.sv-filter-btn {
    border-bottom-left-radius: 4px;
}

div.dt-buttons button,
div.dt-buttons button:hover:not(.disabled) {
    border: 1px solid;
    border-radius: 4px;
    background: none;
    color: var(--primary);
    /*!important #C9F7F5*/
    background-color: rgba(54, 153, 255, 0.08);
    border-color: var(--primary);
}

    div.dt-buttons button:hover:not(.disabled) {
        background-color: var(--primary);
        color: #fff;
    }

div.dt-buttons div.dt-button-collection button.dt-button.active:not(.disabled) {
    background: none;
    box-shadow: none;
    background-color: var(--primary);
    color: #fff;
}

div.dt-buttons button.dt-button span.dt-down-arrow {
    color: var(--primary);
}

div.dt-buttons button.dt-button:hover span.dt-down-arrow {
    color: #fff !important;
}

div.dt-buttons button i {
    color: var(--primary);
    vertical-align: middle;
}

div.dt-buttons button:hover i {
    color: #fff;
}

div.dt-buttons .buttons-copy,
div.dt-buttons .buttons-excel,
div.dt-buttons .buttons-csv,
div.dt-buttons .buttons-print,
div.dt-buttons .buttons-pdf {
    width: 80px;
}
/* datatable grid rows */
.dataTable > tbody > tr.odd {
    background-color: #fcfcfc;
}

.dataTable > tbody > tr:hover {
    background-color: #fff5e8;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link {
    background-color: #fff !important;
}

.dataTable td {
    font-family: Poppins, Helvetica;
}

.dataTables_info,
.dataTables_length label {
    font-family: Poppins, Helvetica, sans-serif;
}

.dataTable .btn-group a {
    background-color: #fff;
}

    .dataTable .btn-group a:hover {
        background-color: var(--info);
        color: #fff;
    }

        .dataTable .btn-group a:hover i:not(:hover),
        .dataTable .btn-group .dropdown-item i:hover {
            color: #fff;
        }

.dataTable .btn-group .dropdown-item i {
    width: 30px;
}

img.list-image {
    height: 60px;
}

input.sv-file-title {
    font-family: Poppins, Helvetica, sans-serif !important;
    background-color: transparent;
    width: 100%;
}

input.sv-grid-file-title {
    font-family: Poppins, Helvetica, sans-serif;
    text-align: left;
    display: inline-block;
    width: 150px;
    border: 1px solid blue !important;
    border-radius: 4px;
    background-color: white;
}

    input.sv-grid-file-title:focus-visible {
        font-family: Poppins, Helvetica, sans-serif;
        color: black;
        outline-style: none;
        border: 1px solid blue !important;
        border-radius: 4px;
        background-color: white;
    }

button.sv-grid-btn-cancel,
button.sv-grid-btn-update {
    font-family: Poppins, Helvetica, sans-serif;
    background-color: transparent;
    border: 0;
    font-weight: 700;
    color: var(--info);
}

div.dataTables_wrapper .dataTable tbody tr.selected,
div.dataTables_wrapper .dataTable tbody tr.selected td {
    background-color: var(--warning) !important;
    color: #fff !important;
}

#contact-buttons,
#edit-contact-buttons {
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

#addContact,
#addRelationship,
#editContact,
#editRelationship {
    width: 150px;
}

div.long-text-wrap {
    white-space: normal;
    width: 400px;
}

.sv-dtr-item > * {
    border-bottom: none !important;
}

/* expand/collapse row button positioning fixup */
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
    left: initial !important;
    right: 20px !important;
}

/* aside menu and topbar button cleanup */
.aside-menu .menu-nav > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > a.menu-link {
    background-color: transparent;
}

.topbar div.btn.btn-icon:hover,
.topbar button.btn.btn-icon:hover {
    background-color: transparent !important;
}

.active > .page-link {
    border: 1px solid #5d21b8 !important;
    color: #5d21b8 !important;
}

.topbar div.btn.btn-icon:hover > span.text-dark-50 > span {
    color: #fff;
}

.sv-org-name {
    color: #fff;
    margin-left: 10px;
    margin-bottom: 0;
    overflow-wrap: break-word;
    font-family: Poppins, Roboto, Arial;
    font-weight: 400;
}

a.brand-logo {
    align-items: center;
    flex: 1;
}

.aside-minimize:not(.aside-minimize-hover) .brand .brand-logo h5 {
    display: none;
}

#breadcrumb-bar i {
    font-size: 1.1em;
    margin-left: 3px;
    margin-right: 3px;
}

div#kt_header_menu_wrapper {
    display: flex;
    align-items: center;
}

.sv-bc-bar-active,
.sv-bc-bar-link {
    color: #fff;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 1.2em;
}

    .sv-bc-bar-link:hover {
        color: var(--warning);
    }

div#kt_quick_user_toggle:hover .text-dark-50 {
    color: #fff !important;
    font-weight: 400 !important;
}
/* modals */
div.modal-header {
    background-color: #5d21b8 !important;
}

.modal-title,
.ki-close {
    color: #fff !important;
}

button.close {
    background-color: transparent !important;
}
/* admin page */
span.sv-admin-icon {
    min-height: 50px;
    min-width: 50px;
    padding: 0;
    vertical-align: unset;
    display: inline-block;
}

    span.sv-admin-icon > .fa-2x:before {
        line-height: 50px;
        vertical-align: middle;
    }
/* razor form */
form.sv-form {
    width: 100%;
    flex-basis: 100%;
    flex-wrap: wrap;
}
/* split */
.split {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
    flex-direction: row;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

    .gutter.gutter-horizontal {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        cursor: col-resize;
    }
/* Portal UI in Admin */
#kt_content.sv-portal-settings {
    flex: 1 1 0;
    min-height: 0;
    padding-bottom: 16px;
}

.sv-portal-settings > .container-fluid {
    flex: 1 1 0;
    min-height: 0;
}

    .sv-portal-settings > .container-fluid > .row,
    .sv-portal-settings > .container-fluid > .row > .split {
        height: 100%;
    }

.sv-portal-settings-card {
    overflow-y: auto;
}

.sv-navicon-div {
    background: transparent;
}

    .sv-navicon-div:last-of-type {
        margin-right: auto;
    }

#quick-start-sidebar-recycle {
    margin-top: 10px;
}

.sv-sidebar-icon {
    float: left;
    width: 33%;
    position: relative;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
}

.sv-icon-text {
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
    font-size: xx-small;
    color: #000000;
}

.sv-navicon-div > span > i {
    color: #3B0093;
    text-align: center;
}

.sv-navicon-div:hover > span > i {
    color: #f89f00 !important;
}

.sv-active-portal {
    color: #f89f00 !important;
}

.sv-navicon-div a:focus {
    color: #3B0093 !important;
}

.sv-navicon-div > span > i.fa-inverse {
    color: #FFF !important;
    font-size: 26px !important;
}

div.sv-portals-card {
    width: 100%;
    margin: 8px auto;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
}

.sv-portals-outer-container {
    width: 100%;
    scrollbar-gutter: stable both-edges;
    overflow-y: auto;
}

.sv-portals-container {
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.sv-portals-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sv-portals-icon,
.sv-portals-icon-placeholder {
    flex: 0 1 33.333%;
    position: relative;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 10px;
    text-align: center;
    max-width: 33.333%;
    overflow-x: hidden;
}

.sv-portals-icon-placeholder {
    background-color: var(--secondary);
    /*border: 1px solid #3B0093;*/
}

.sv-portals-expand-container {
    width: 100%;
    align-self: flex-end;
}

    .sv-portals-expand-container button {
        width: 100%;
        padding: 0;
    }

div.sv-elements-card {
    flex: 2 1 100%;
    /*min-height: 80px;*/
}

.listing-filter-field-hint {
    padding: 15px;
    margin-bottom: 15px;
}

.listing-filter-field-hint.inactive-hint {
    color: #8A6417;
    background-color: #fcf8e3;
    border-color: #fbeed5;
}

.listing-filter-field-hint.active-hint {
    color: #0B5FA8;
    background-color: #e1f0ff;
    border-color: #d7e9fb;
}

.listing-filter-field-hint .filter-status-prelude {
    font-weight: bold;
}

#ouMembersCard .kt-portlet__foot {
    padding-bottom: 2rem;
}

.jstree-anchor > i.jstree-icon {
    color: var(--sv-colour-title-font);
}

    .jstree-anchor > i.jstree-icon.icon-heading {
        color: var(--green);
    }

    .jstree-anchor > i.jstree-icon.icon-page {
        color: var(--primary);
    }

    .jstree-anchor > i.jstree-icon.icon-pagepart {
        color: var(--success);
    }

.jstree-open > i.jstree-ocl,
.jstree-closed > i.jstree-ocl {
    background-image: none;
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    color: var(--purple);
    font-size: 0.8rem;
    font-weight: 600;
}

    .jstree-open > i.jstree-ocl:before {
        content: "\f078";
    }

    .jstree-closed > i.jstree-ocl:before {
        content: "\f054";
    }

.jstree-container-ul {
    width: calc(100% - 2em);
}

.jstree-anchor.dnd-anchor {
    width: calc(100% - 2em);
    overflow-x: hidden;
}

.dnd-lock,
.dnd-handle {
    position: absolute;
    top: 0;
    right: 1em;
}

.dnd-lock {
    cursor: not-allowed;
}

.dnd-handle {
    cursor: move;
}

.breadcrumb-item.hidden:after {
    display: none;
}

.breadcrumb-item.sv-page-bc.hidden:after {
    display: none;
}

li.breadcrumb-item {
    font-size: 14px;
    align-items: center;
}

.breadcrumb li a {
    padding-left: 0px;
}

/*.page-display-filters {
    min-height: 180px;
}*/

.page-display-filters-group {
    margin-bottom: 1em;
}

    .page-display-filters-group.last-group {
        margin-bottom: 2.5em;
    }

    .page-display-filters-group.show-entities .select2-selection__choice {
        background-color: rgba(27, 197, 189, 0.16) !important;
    }

    .page-display-filters-group.not-show-entities .select2-selection__choice {
        background-color: rgba(246, 78, 96, 0.16) !important;
    }

.page-display-filters-select {
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px;
    margin-bottom: 1.5em;
}

.page-display-filters-select span.select2-selection--multiple {
    min-height: 3em;
}
/* text color classes */
.text-green {
    color: var(--green) !important;
}

.text-red {
    color: var(--red) !important;
}
/* green buttons */
.btn.btn-icon-green i {
    color: var(--green);
}

.btn.btn-hover-green:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-green:focus:not(.btn-text),
.btn.btn-hover-green.focus:not(.btn-text) {
    color: #ffffff !important;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

    .btn.btn-hover-green:hover:not(.btn-text):not(:disabled):not(.disabled) i,
    .btn.btn-hover-green:focus:not(.btn-text) i,
    .btn.btn-hover-green.focus:not(.btn-text) i {
        color: #ffffff !important;
    }

    .btn.btn-hover-green:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg g [fill],
    .btn.btn-hover-green:focus:not(.btn-text) .svg-icon svg g [fill],
    .btn.btn-hover-green.focus:not(.btn-text) .svg-icon svg g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
        fill: #ffffff !important;
    }

    .btn.btn-hover-green:hover:not(.btn-text):not(:disabled):not(.disabled) .svg-icon svg:hover g [fill],
    .btn.btn-hover-green:focus:not(.btn-text) .svg-icon svg:hover g [fill],
    .btn.btn-hover-green.focus:not(.btn-text) .svg-icon svg:hover g [fill] {
        -webkit-transition: fill 0.3s ease;
        transition: fill 0.3s ease;
    }

.btn.btn-hover-warning:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after,
.btn.btn-hover-warning:focus:not(.btn-text).dropdown-toggle:after,
.btn.btn-hover-warning.focus:not(.btn-text).dropdown-toggle:after {
    color: #ffffff !important;
}
/* subheader */
.sv-header-actionbar {
    margin-left: auto;
}

.subheader a,
.sv-breadcrumb,
.sv-pagepart-name.text-muted,
.subheader span {
    color: #7434eb !important;
}

/* Form mode badge (New/Edit/View) keeps its own label colour instead of the forced subheader purple.
   Colours are pinned to the default theme so the badges look the same on every theme. */
.subheader span.label.label-light-info {
    color: #8950FC !important;
    background-color: #EEE5FF !important;
}

.subheader span.label.label-light-success {
    color: #1BC5BD !important;
    background-color: #C9F7F5 !important;
}

.subheader span.label.label-light-primary {
    color: #3699FF !important;
    background-color: #E1F0FF !important;
}

.subheader .btn:hover {
    text-shadow: none !important;
}

.subheader a:hover {
    text-shadow: 2px 2px 3px #9f83d4;
}
/* form fields */
.formbuilder-dateTime > input {
    cursor: text;
}

.formbuilder-boolean > input {
    display: block;
}

.sv-display-form {
    margin: 10px;
}

.form-control-url {
    padding: 8px;
    border-radius: 4px;
}

    .form-control-url > input {
        margin-bottom: 8px;
    }
/* disable auto red highlight; we do our own validation */
.formbuilder-number > input:not(.is-invalid):invalid {
    border-color: #E4E6EF;
}

.formbuilder-number > input:not(.is-invalid):focus:invalid {
    border-color: #E4E6EF;
}
/* hide step buttons when no step */
.formbuilder-number > input.no-step {
    -moz-appearance: textfield;
}

    .formbuilder-number > input.no-step::-webkit-outer-spin-button,
    .formbuilder-number > input.no-step::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.formbuilder-currency-container {
    position: relative;
}

    .formbuilder-currency-container > input.form-control {
        padding-left: 1.5em;
    }

.formbuilder-currency-symbol {
    position: absolute;
    pointer-events: none;
    font-size: 14px;
    left: 0.5em;
    top: 0;
    height: 34px;
}

    .formbuilder-currency-symbol > div {
        line-height: 34px;
    }

.form-wrap.form-builder .frmb .form-elements div.available-roles {
    background-color: #fff;
    box-shadow: none;
}

@media (min-width: 768px) {
    .formbuilder-number input.form-control,
    .formbuilder-svDate input.form-control,
    .formbuilder-dateTime input.form-control {
        width: 30%;
    }
}

.form-wrap.form-builder .frmb .prev-holder .formbuilder-number input.form-control[type='number'],
.prev-holder .formbuilder-svDate input.form-control,
.prev-holder .formbuilder-dateTime input.form-control {
    width: 42%;
}

.svLookupDisabled > .select2 {
    cursor: not-allowed;
}

    .svLookupDisabled > .select2 > .selection {
        pointer-events: none !important;
    }

        .svLookupDisabled > .select2 > .selection > .select2-selection {
            background-color: #F3F6F9;
            opacity: 1;
        }
.svLookupDisabled .select2-selection__choice__remove,
.svLookupDisabled .select2-selection__arrow {
    display: none !important;
}

input[disabled],
textarea[disabled],
select[disabled] {
    cursor: not-allowed !important;
}

input.svFieldDisabled[readonly],
textarea.svFieldDisabled[readonly],
select.svFieldDisabled[readonly] {
    cursor: not-allowed !important;
    background-color: #F3F6F9;
    opacity: 1;
}

/* Read-only / field-security choice fields (radio groups, checkbox groups, single
   checkboxes and choice/checkbox grids) — e.g. a field a guest user, or a role-locked
   user, cannot edit. These input types don't honour [readonly], so make the control
   non-interactive via CSS (and grey it) instead of rendering a disabled duplicate. The
   real inputs stay enabled so their values are still submitted on save. */
.formbuilder-radio.svFieldDisabled,
.formbuilder-radio-inline.svFieldDisabled,
.formbuilder-checkbox.svFieldDisabled,
.formbuilder-checkbox-inline.svFieldDisabled,
.formbuilder-boolean.svFieldDisabled,
.formbuilder-choiceGrid.svFieldDisabled,
.formbuilder-checkboxGrid.svFieldDisabled,
input[type="radio"].svFieldDisabled,
input[type="checkbox"].svFieldDisabled {
    pointer-events: none;
}

.formbuilder-radio.svFieldDisabled,
.formbuilder-radio-inline.svFieldDisabled,
.formbuilder-checkbox.svFieldDisabled,
.formbuilder-checkbox-inline.svFieldDisabled,
.formbuilder-boolean.svFieldDisabled,
.formbuilder-choiceGrid.svFieldDisabled,
.formbuilder-checkboxGrid.svFieldDisabled {
    opacity: 0.55;
}

/* Form Security: grey lock icon shown on the far right of a field that is locked
   by field/section security. Anchored to the field group, vertically aligned to
   the single-line control that sits at the bottom of the group. */
.sv-field-lock-host {
    position: relative;
}

.sv-field-lock {
    position: absolute;
    right: 14px;
    bottom: 11px;
    color: #B5B5C3;
    font-size: 1rem;
    line-height: 1;
    /* Must beat the date/date-time inputs, which set z-index:10 on the control and
       would otherwise paint over (hide) the lock. */
    z-index: 20;
    cursor: not-allowed;
    /* The icon must stay hoverable even when it sits inside a disabled control
       (e.g. select2's .selection sets pointer-events:none), otherwise its tooltip
       never fires. A descendant with auto is still a pointer target under a none
       ancestor. */
    pointer-events: auto;
}

/* keep the control's text/value from running under the lock icon */
.sv-field-lock-host > input.svFieldDisabled,
.sv-field-lock-host > textarea.svFieldDisabled,
.sv-field-lock-host > select.svFieldDisabled,
.sv-field-lock-host .select2-selection__rendered {
    padding-right: 34px;
}

/* A locked native dropdown can't be opened, so drop its chevron and let the lock
   own the far right (otherwise the icon would clash with the dropdown arrow). */
.sv-field-lock-host > select.svFieldDisabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
}

/* Number and date/date-time fields render the control at 30% width (desktop only —
   full width below 768px), so anchor the lock to the control's right edge rather
   than the full-width group. Mirrors the width media query above. */
@media (min-width: 768px) {
    .sv-field-lock-host.formbuilder-number > .sv-field-lock,
    .sv-field-lock-host.formbuilder-svDate > .sv-field-lock,
    .sv-field-lock-host.formbuilder-dateTime > .sv-field-lock {
        right: auto;
        left: calc(30% - 22px);
    }
}

div.concurrency-error-modal-container {
    width: 40em;
}
.client-id-field-help {
    margin-bottom: 0;
    margin-top: 0.5rem;
}
/* File Uploader */
#delete-existing-file,
#az-download-file {
    margin-top: 10px;
    width: 110px;
    font-family: Poppins, Arial, Helvetica, sans-serif !important;
}

    #delete-existing-file > i,
    #az-download-file > i {
        font-size: 13px;
    }
/* modals */
.modal-footer > .close-button {
    font-size: 13px;
    width: 100px;
    margin-right: auto;
}

.modal-footer > .save-button,
.modal-footer > .delete-button {
    font-size: 13px;
    width: 100px;
}
/* Connected Accounts */
.master-calendar-warning {
    word-break: normal;
    white-space: normal;
}
/* Calendar */
h2.fc-toolbar-title {
    font-family: Poppins, Helvetica;
    font-weight: 400;
    color: var(--sv-colour-title-font);
}

div.fc-event-title,
a.fc-list-day-text,
a.fc-list-day-side-text,
td.fc-list-event-title a,
td.fc-list-event-time,
.fc span.fc-timegrid-axis-cushion,
div.fc-timegrid-slot-label-cushion {
    font-family: Poppins, Helvetica;
    color: var(--sv-colour-title-font);
}

a.fc-daygrid-more-link {
    color: var(--sv-colour-title-font) !important;
}

div.fc-event-title.fc-sticky,
.fc-event-main div.fc-event-time {
    font-family: Poppins, Helvetica;
    color: var(--sv-colour-background);
}

.fc-daygrid-block-event div.fc-event-title {
    padding-left: 2px;
    padding-right: 2px;
}

a.fc-daygrid-event,
a.fc-daygrid-dot-event {
    background-color: #fff;
}

div.fc-toolbar-chunk > div.btn-group > button,
button.fc-today-button {
    background-color: var(--info) !important;
}

    div.fc-toolbar-chunk > div.btn-group > button.active {
        background-color: var(--warning) !important;
    }

.fc th.fc-col-header-cell,
.fc th.fc-timegrid-axis {
    font-family: Poppins, Helvetica;
    background-color: var(--sv-colour-btn-edit);
    color: var(--sv-colour-navbar-font);
    border: none;
}

tr.fc-list-event {
    background-color: var(--sv-colour-background);
}

a.fc-v-event {
    border: none;
    padding: 3px;
}

a.fc-h-event {
    border: none;
}

.fc-scroller::-webkit-scrollbar {
    width: 10px;
    height: 20px;
    background: #fff;
}

.fc-scroller::-webkit-scrollbar-thumb {
    background: #b3b3b3;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(166, 166, 166, 0.75);
}

.fc thead .fc-scroller::-webkit-scrollbar {
    display: none !important;
}

.fc thead .fc-scroller {
    background: var(--sv-colour-btn-edit) !important;
}

.tooltip {
    pointer-events: none;
}

div.fc-popover-header {
    background-color: var(--info);
    color: var(--sv-colour-background);
}

.calendar-pp-error-msg,
.calendar-pp-warning-msg,
.system-portal-msg,
.pp-warning-msg {
    border-radius: 4px;
    margin-bottom: 5px;
    padding: 10px;
    width: 100%;
}

.calendar-pp-error-msg,
.calendar-pp-warning-msg,
.system-portal-msg {
    display: none;
    color: var(--red);
}

.calendar-pp-error-msg i {
    color: var(--red);
}

.calendar-pp-warning-msg i {
    color: var(--warning);
}

.pp-error-text {
    color: #3b0093;
}

.system-portal-msg i {
    color: var(--info);
}

.add-form-text {
    color: #7434eb;
    margin-bottom: 10px;
    display: block;
}

.pop-up-help,
.dataTables_wrapper td i.pop-up-help {
    color: var(--info);
    cursor: help;
}

div.restore-icon {
    width: 30px;
    padding-left: 8px;
    padding-right: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
}

    div.restore-icon i {
        font-size: 1.1rem !important;
    }

.calendar-readonly-disabled {
    cursor: not-allowed;
}

    .calendar-readonly-disabled > * {
        pointer-events: none;
        user-select: none;
    }
/* Calendar Events*/
#recurrence {
    background-color: rgba(54, 153, 255, 0.08);
    border-radius: 4px;
    padding: 10px;
}

button.btn.btn-light-primary.day-btn.active {
    background-color: var(--info) !important;
}

    button.btn.btn-light-primary.day-btn.active:focus {
        color: #fff !important;
    }

.btn.btn-light-primary:focus:not(.btn-text) {
    background-color: #e1f0ff !important;
    color: #3699ff !important;
}

.calendar-readonly-warning {
    width: calc(100% - 120px);
    text-align: left;
    color: var(--info);
}

#recurrencePrompt {
    text-align: left;
}
/* Grid */
.sv-grid-wrapper {
    margin: 0px 10px;
}

table.table.table-separate td.sv-row-group {
    padding-left: 20px !important;
    background-color: #8950FC;
    color: #fff;
}
/* Portal Settings */
#portalSettingsPerms,
#pageSettingPerms {
    padding-top: 5px;
    padding-bottom: 10px;
    border-radius: 4px;
}

#preview-portal-icon-div {
    cursor: pointer;
}

.bs-glyphicons-list {
    padding-left: 0;
    list-style: none;
}

.bs-glyphicons li {
    float: left;
    width: 20% !important;
    height: 80px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    background-color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
}

.quick-menu-icon > i {
    color: var(--purple);
}

span.label-warning {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

span.info + button {
    padding: 3px 12px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray);
    border-radius: 5px;
    color: #000 !important;
}

.btn-group.buttons {
    height: 25px;
    background-color: transparent;
}

button.btn.moveall,
button.btn.move,
button.btn.remove,
button.btn.removeall {
    background-color: #fff;
    height: 25px;
    padding: 0;
    width: 50%;
}

.btn.moveall:hover,
.btn.move:hover,
.btn.remove:hover,
.btn.removeall:hover {
    background-color: var(--warning) !important;
}

button.moveall > i,
button.move > i,
button.remove > i,
button.removeall > i {
    font-size: 1rem;
}

#bootstrap-duallistbox-selected-list_permissions\5b \5d > option {
    /*background-color: #bfd9bf;*/
    margin: 3px;
}

#bootstrap-duallistbox-nonselected-list_permissions\5b \5d > option {
    /*background-color: #e8a2a2;*/
    margin: 3px;
}

.bootstrap-duallistbox-container {
    padding-left: 15px;
    padding-right: 15px;
}

    .bootstrap-duallistbox-container span.info,
    .bootstrap-duallistbox-container label {
        margin-left: 15px;
    }

div.field-hint {
    color: #9c9c9c;
}

div.accordion.accordion-toggle-plus > .card > .card-header > .card-title.collapsed,
div.accordion.accordion-toggle-plus > .card > .card-header > .card-title,
div.accordion.accordion-toggle-plus > .card > .card-header > .card-title > i,
div.accordion.accordion-toggle-plus > .card > .card-header > .card-title:after,
div.accordion.accordion-toggle-plus > .card > .card-header > .card-title.collapsed:after,
div.form-help-icon > i {
    color: #fff;
}

#edit-fields-table td.colFieldsButtons {
    position: relative;
    padding-left: 0.1rem !important;
    /*width: 0;
    padding: 0 !important; */
}

#edit-fields-table .colFieldsButtons {
    width: 48px;
}

#edit-fields-table {
    table-layout: fixed;
}

    #edit-fields-table td,
    #edit-fields-table th {
        border: none;
    }

    #edit-fields-table tr.ui-sortable-helper {
        color: #3F4254;
        background-color: #E4E6EF;
    }

    #edit-fields-table tr > :nth-child(1) {
        width: 22%;
    }

    #edit-fields-table tr > :nth-child(3),
    #edit-fields-table tr > :nth-child(4),
    #edit-fields-table tr > :nth-child(5) {
        width: 14%;
    }

    #edit-fields-table tr > :nth-child(2),
    #edit-fields-table tr > :nth-child(6),
    #edit-fields-table tr > :nth-child(7) {
        width: 12%;
    }

    #edit-fields-table th {
        vertical-align: top;
        padding-bottom: 0.5rem;
    }

    #edit-fields-table tr#fieldfooter:hover {
        background-color: initial;
    }

.edit-fields-buttons {
    white-space: nowrap;
}

    .edit-fields-buttons > i.sort-handle {
        vertical-align: middle;
        margin-left: 4px;
        cursor: move;
    }

.sv-add-filter {
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
    background-color: #428bca4d;
    color: #000;
    border: 1px solid #428bca;
    padding: 0.1em 0.3em 0.1em;
}

span.sv-add-filter {
    border-radius: 3.5px;
}

span.label.sv-add-filter {
    width: auto;
}

table.filters-table {
    width: 100% !important;
}

table.filters-table th,
table.filters-table td {
    border: none;
}

table.filters-table .additional-filter-row > td {
    position: relative;
}

table.filters-table .additional-filter-row > td:first-of-type,
table.filters-table .additional-filter-header-row > th:first-of-type {
    display: none;
}

table.filters-table .additional-filter-row > td:nth-of-type(2),
table.filters-table .additional-filter-header-row > th:nth-of-type(2) {
    width: 30%;
}

table.filters-table .additional-filter-row > td:nth-of-type(4),
table.filters-table .additional-filter-header-row > th:nth-of-type(4) {
    width: 30%;
}

.filter_logical {
    min-width: 90px;
}

table.filters-table .last-textbox {
    border-color: #f89f00 !important;
}

table.filters-table .bootstrap-datetimepicker-widget tr:hover {
    background-color: initial;
    color: initial;
}

table.filters-table .hide-value > * {
    visibility: hidden;
}

.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 1.5em !important;
    height: 1.5em !important;
}
/*
.bootstrap-datetimepicker-widget.dropdown-menu {
    z-index: 100 !important;
}*/
.bootstrap-datetimepicker-widget td > div.sv-add-filter {
    display: block;
    width: 100%;
    height: 1.5em;
    line-height: 1.5em;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 0.25rem;
    position: relative;
}

    .bootstrap-datetimepicker-widget td > div.sv-add-filter:hover {
        color: #FFFFFF;
        background-color: #187DE4;
        border-color: #187DE4;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    }

    .bootstrap-datetimepicker-widget td > div.sv-add-filter .pop-up-help {
        position: absolute;
        right: 0.25rem;
        top: 0;
        font-size: 1rem;
        line-height: 1.25rem;
    }

        .bootstrap-datetimepicker-widget td > div.sv-add-filter .pop-up-help::after {
            opacity: 1;
            color: #cfb8fd;
        }

div.bottom-border {
    border-bottom: 1px dotted gray;
    margin-bottom: 20px;
}

.form-inline label.control-label,
.form-inline label.checkbox {
    justify-content: left;
}

a.sv-new-link,
a.sv-toolbar-link {
    color: var(--info);
    padding-right: 10px;
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: auto;
}

a.sv-new-link:hover,
a.sv-toolbar-link:hover {
    color: var(--info);
    font-weight: 600;
    background-color: transparent;
    text-shadow: none;
    margin: auto;
}

a.sv-new-link:disabled, a.sv-new-link.disabled,
a.sv-toolbar-link:disabled, a.sv-new-link.disabled {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    opacity: 0.6;
    -webkit-box-shadow: none;
    box-shadow: none;
    pointer-events: none; /*not 100% sure about this; it may break tooltips in other places*/
}

a.btn-sm {
    min-width: 31px;
}

span.sv-add-icon {
    font-size: 1rem;
}
/* generic */
div.sv-align-left {
    text-align: left !important;
}
/* page rendering */
div.announcement-row {
    background-color: #fff;
    border: 1px dotted #f2f2f2;
    border-radius: 5px;
    padding: 10px;
}

div.announcement-response {
    margin-top: 10px;
    border-radius: 4px;
}

div.announcement-attachments {
    padding-left: 10px;
    margin-top: 10px;
}

div.html-pp {
    background-color: #fff;
    border-radius: 5px;
}

div.sv-pp-toolbar {
    margin-bottom: 0;
    display: inline;
}

div.item {
    background-color: #fdfdfd;
    border-radius: 5px;
    border: none;
    padding: 0;
}

    div.item .panel-body {
        background-color: #fff;
    }

div.sv-pp-content {
    padding: 8px;
}

div.page-part-title {
    margin: 0 !important;
    padding: 5px 20px !important;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color: #fff !important;
}

div.content {
    margin: 0;
}

div.sv-backend-content {
    padding-left: 20px;
    padding-right: 20px;
}

div#body-wrapper {
    margin-top: -80px;
    padding-bottom: 0px;
}

div#main-content {
    padding-bottom: 0px;
}

div.pp-type-1611 {
    display: none;
}

a.sv-new-icon,
a.sv-toolbar-icon {
    height: 31px;
    width: 31px;
    line-height: 31px;
    padding: 0;
}

i.sv-add-icon,
i.sv-tb-icon {
    padding: 0 !important;
    font-size: 1.1rem !important;
    vertical-align: middle;
    text-align: center;
}

a.sv-response-icon {
    height: 31px;
    width: 20px;
    min-width: 20px;
    line-height: 31px;
    padding: 0;
    margin-left: 10px;
    background-color: transparent;
}

i.sv-response-icon {
    padding: 0 !important;
    font-size: 1.1rem !important;
    vertical-align: middle;
    text-align: center;
    background-color: transparent;
}

.announcement-response .sv-add-icon {
    color: var(--info);
}

.announcement-response .add-comment i,
.announcement-response .mark-read i {
    color: var(--success);
}

.announcement-response .sv-new-link {
    padding-right: 0px;
    padding-left: 2px;
}

.announcement-response .sv-add-group-flex {
    margin-right: 0px;
}

.sv-comment-icon {
    color: var(--info);
    font-size: 0.8em;
}

.sv-creator-info {
    color: var(--gray);
    font-size: 0.7em;
}

.read-div {
    text-align: left;
    padding: 5px;
}

.sv-comment {
    text-align: left;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 4px;
}

button.swal2-confirm,
button.swal2-cancel {
    padding-left: 12px;
    padding-right: 12px;
    width: 120px;
}

div.swal2-icon {
    justify-self: center;
}

div.swal2-container {
    min-height: 100%;
    display: block;
}

span.sv-text-left {
    text-align: left;
    display: block;
}

div.sv-swal-html {
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    overflow: visible;
}

button.sv-swal-button-expand {
    width: auto;
}

@media (min-width: 992px) {
    div .sv-swal-massNotification {
        width: 800px;
    }
}

.sv-add-group-flex.view-comments {
    margin-right: 10px;
}

.sv-add-group {
    height: 31px;
    display: inline-flex;
    flex-direction: row;
    border-radius: 5px;
    line-height: 30px;
    margin-right: 10px;
    width: 90px;
}

.sv-add-group-flex {
    height: 31px;
    display: inline-flex;
    flex-direction: row;
    flex-basis: auto;
    border-radius: 5px;
    line-height: 30px;
    margin-right: 10px;
}

a.sv-left-rounded {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
a.sv-right-rounded {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
strong.announcement-title.sv-add-source:hover {
    background-color: transparent;
    font-weight: 900;
    color: var(--sv-colour-purple-mid);
}

.announcement-title-no-link {
    color: var(--sv-colour-purple-mid);
    font-weight: 400;
}

div#sidebar-wrapper div.accordion-group div.accordion-heading a.accordion-toggle {
    background-color: var(--sv-colour-btn-edit);
    color: var(--sv-colour-navbar-font);
    border-bottom: 1px solid var(--sv-colour-pp-headers);
}

    div#sidebar-wrapper div.accordion-group div.accordion-heading a.accordion-toggle:hover {
        color: var(--sv-colour-navbar-font);
        background-color: var(--sv-colour-title-font);
    }

span#pinQuickStart > i {
    color: var(--sv-colour-navbar-font);
}

div#menu_qs {
    padding-top: 5px;
}

div.dataTables_wrapper .dataTable td,
div.dataTables_wrapper .dataTable th {
    padding-top: 8px;
    padding-bottom: 8px;
}

img.file-image {
    max-width: 250px;
}

p.limitChar {
    display: block;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 60px;
    line-height: 20px;
    margin-bottom: 0;
}

/* collapse deep-nested lists in rich text columns */
div.dataTables_wrapper .dataTable td ul ul ul ul,
div.dataTables_wrapper .dataTable td ol ol ol ol {
    padding-inline-start: 0;
    margin-inline-start: 0;
}

a.open-multiline-modal {
    padding: 0 0.5em;
}

    a.open-multiline-modal i {
        padding-right: 0 !important;
    }

.multiline-text-modal .modal-dialog {
    height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .multiline-text-modal .modal-dialog {
        height: calc(100% - 3.5rem);
    }
}

.multiline-text-modal .modal-content {
    height: 100%;
}

.multiline-text-modal .modal-body {
    overflow-y: auto;
    /* Shows rich text as authored, so deeply indented content scrolls here rather than overflowing. */
    overflow-x: auto;
}

div.sv-pp-toolbar.sv-flex-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    div.sv-pp-toolbar.sv-flex-toolbar > hr {
        flex: 0 0 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    div.sv-pp-toolbar.sv-flex-toolbar > .sv-add-group-flex,
    div.sv-pp-toolbar.sv-flex-toolbar > .sv-add-group {
        margin-right: 0;
    }

/*
.sv-master-val {
    display: inline-block;
    background-color: #fadaa0;
    border: #f89f00 2px solid;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 30px;
}
*/

.linked-pp-icon, .linked-pp-icon > i {
    color: var(--white);
}

.sv-master-val {
    display: inline-block;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    vertical-align: middle;
    background-color: var(--warning);
    line-height: 24px;
}
.sv-master-val > i, .sv-master-val > span {
    color: var(--white);
    vertical-align: middle;
}

/* Form rendering */
div.card {
    background-color: #fff;
}

div.container-fluid.form-content {
    padding: 0;
    margin-top: 20px;
}

.disp-form-text {
    margin-left: 10px;
    font-size: 1.2em;
    margin-bottom: 20px;
    font-family: Poppins, Helvetica, sans-serif;
}

.disp-form-html {
    margin-left: 10px;
    margin-bottom: 0; /* was 20px; */
    font-size: 1.2em;
}

.form-limit-char {
    display: block;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 60px;
    line-height: 20px;
    margin-bottom: 0 !important;
}

.item-title {
    font-size: 16.25px;
}

div.rendered-form label {
    color: #0000ab;
    font-weight: 500;
    font-family: Poppins, Helvetica, sans-serif;
}

div.rendered-form .form-group:not(.additional-field) > label {
    font-size: 1.1rem;
}

div.formbuilder-checkbox label {
    color: #444;
}

span.tooltip-element,
span[tooltip]:hover::after {
    background: #0000ab;
}

.sv-field-error {
    color: var(--danger);
    margin-top: 5px;
    display: inline-block;
}

p.form-builder-message {
    margin-bottom: 0;
}

.tox.tox-tinymce-aux .tox-dialog i.fad {
    position: relative;
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    margin-left: 0.25em;
}

.tooltip.tinymce-dialog-tooltip {
    z-index: 10000;
}

.photo-uploader-image-container {
    display: inline-block;
    position: relative;
}

.photo-uploader-image {
    max-height: 400px;
    max-width: 400px;
}

.photo-uploader-image.has-preview {
    cursor: pointer;
}

.rendered-form div.additional-field.form-group {
    margin-left: 10px;
    /*font-size: 11px*/
}
.rendered-form div.additional-field.form-group .disp-form-text {
    font-size: 1em;
    margin-left: 0;
    margin-bottom: 10px;
}

/*may or may not need all of this style*/
.image-upload-field-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
}

    .image-upload-field-buttons i {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        padding: 8px;
        border-radius: 4px;
    }

.photo-uploader-image:hover ~ .image-upload-field-buttons .image-zoom-button,
.image-zoom-button:hover {
    opacity: 1;
}

.image-zoom-button {
    opacity: 0;
    transition: 0.3s;
    right: 0;
    pointer-events: none;
}

.image-open-button {
    transition: 0.3s;
    left: 0;
}

    .image-open-button:hover {
        color: var(--light);
        background-color: var(--info);
    }
/* image preview modal */
.ss-modal {
    display: none;
    position: fixed;
    z-index: 1100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.ss-modal-container {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 100px;
    bottom: 16px;
}

.ss-modal-content {
    margin: auto;
    display: block;
    max-height: 100%;
    width: auto;
}

.ss-modal-content {
    animation-name: ss-modal-zoom;
    animation-duration: 0.6s;
}

@keyframes ss-modal-zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.ss-modal-close,
.ss-modal-download {
    position: absolute;
    right: 35px;
    color: #f1f1f1;
    transition: 0.3s;
    font-size: 40px;
    width: 40px;
}

.ss-modal-close {
    top: 15px;
}

.ss-modal-download {
    top: 65px;
}
    /*needed in v5 because of global styles*/
    .ss-modal-close .fa,
    .ss-modal-download .fa {
        font-size: 40px;
        font-weight: bold;
        width: 40px;
        text-align: center;
        color: #f1f1f1;
    }

        .ss-modal-close .fa:hover,
        .ss-modal-close .fa:focus,
        .ss-modal-download .fa:hover,
        .ss-modal-download .fa:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

@media only screen and (max-width: 414.98px) {
    .ss-modal-content {
        width: 100%;
    }
}

.table-report-params {
    border-collapse: collapse;
    border: 1px solid #e4e6ef;
    margin: auto;
}

.cell-report-params {
    height: 30px;
    text-align: center;
    border: 1px solid #e4e6ef;
}

.cell-border {
    border: 1px solid #e4e6ef;
}

input.report-param {
    height: 30px;
    margin: 2px auto 2px auto;
    width: 95%;
}

#divBlockUI {
    position: fixed;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 350px;
    top: 40%;
    right: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
}
/* Form Editor */
i.settings-icon {
    color: var(--indigo);
}

#AdvancedSettings, #AdminSettings {
    background-color: aliceblue;
    margin: 0px;
    padding-top: 15px;
}

#addToSite {
    width: 160px;
}

.field-settings-wrap {
    background-color: rgba(54, 153, 255, 0.08);
    border-radius: 4px;
}

.form-wrap.form-builder div.field-advanced-link-wrap {
    margin-bottom: 0.5rem;
}

/* Collapsible settings cards — form-level and per-field */
.sv-settings-card {
    border: 1px solid #e2e5ec;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}

.sv-settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo);
    gap: 8px;
}

.sv-settings-card-head:hover {
    background: rgba(54, 153, 255, 0.05);
}

.sv-settings-card-head .settings-icon {
    flex-shrink: 0;
    transition: transform 0.15s;
    margin-left: auto;
}

.sv-settings-card-body {
    border-top: 1px solid #e2e5ec;
}

/* Per-field card body: field-settings-wrap provides the background */
.sv-settings-card .field-settings-wrap {
    border-radius: 0;
}

/* ── Content Display Field — Rows toggle ──────────────────────── */

.sv-rows-mode-options {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
}

.sv-rows-mode-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal !important;
    cursor: pointer;
    margin-bottom: 0;
}

.sv-rows-mode-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.sv-rows-specify-label .fld-rows {
    width: 60px !important;
    display: inline-block !important;
    margin-left: 4px;
}

/* ── Pop-up Help card ──────────────────────────────────────────── */

.sv-popup-help-enable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 12px;
}

.sv-popup-help-enabled {
    background-color: #eef4ff;
}

.sv-popup-help-enable-text strong {
    display: block;
    font-size: 13px;
}

.sv-popup-help-enable-desc {
    font-size: 12px;
    color: #7b809a;
    margin-top: 2px;
}

/* Toggle switch */
.sv-toggle-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.sv-toggle-label input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.sv-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.2s;
}

.sv-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.sv-toggle-label input:checked + .sv-toggle-slider {
    background-color: #3699ff;
}

.sv-toggle-label input:checked + .sv-toggle-slider::before {
    transform: translateX(20px);
}

/* Card body padding */
.sv-popup-help-body {
    padding: 0 14px 14px;
}

.sv-popup-help-section {
    margin-top: 14px;
}

.sv-popup-help-section-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #3f4254;
}

.sv-popup-help-section-desc {
    font-size: 12px;
    color: #7b809a;
    margin-bottom: 8px;
}

.sv-popup-help-hr {
    margin: 14px 0 8px;
}

.sv-popup-help-url-wrapper {
    display: flex !important;
    align-items: center;
    border: 1px solid #e2e5ec;
    border-radius: 4px;
    padding: 0 10px;
    background: #fff;
    gap: 8px;
}

.sv-popup-help-url-wrapper i {
    color: #7b809a;
    flex-shrink: 0;
}

.sv-popup-help-url-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    flex: 1;
    width: 100% !important;
    font-size: 13px;
}

/* Trigger style — two-column option cards
   Use !important to override form-builder's label float/width rules */
.sv-popup-help-trigger-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    float: none !important;
    width: 100% !important;
}

.sv-popup-help-trigger-option {
    display: flex !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 8px;
    border: 2px solid #e2e5ec;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    text-align: left !important;
    transition: border-color 0.15s, background-color 0.15s;
}

.sv-popup-help-trigger-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.sv-popup-help-trigger-option > div {
    flex: 1;
    min-width: 0;
}

.sv-popup-help-trigger-option strong {
    font-size: 13px;
    display: block;
    white-space: normal;
}

.sv-popup-help-trigger-desc {
    font-size: 12px;
    color: #7b809a;
    font-weight: normal;
    margin-top: 2px;
    white-space: normal;
}

.sv-popup-help-trigger-option.active {
    border-color: #3699ff;
    background-color: #ffffff;
}

/* ── end Pop-up Help card ──────────────────────────────────────── */

/* ── Pop-up Help — rendered form ──────────────────────────────── */

/* Text link style: label becomes a link */
.rendered-form label a {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.rendered-form label a:hover {
    color: #3699ff;
    text-decoration-color: #3699ff;
}

.sv-help-link-icon {
    font-size: 0.8em;
    opacity: 0.7;
    vertical-align: middle;
}

/* Button style: help trigger button */
.sv-help-btn {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    vertical-align: middle;
    line-height: 1.4 !important;
}

.sv-help-btn i {
    font-size: 12px !important;
    margin-right: 3px;
}

/* Side panel header */
.sv-help-panel-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e8f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3699ff;
    font-size: 13px;
    flex-shrink: 0;
}

.sv-help-panel-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b809a;
}


.sv-help-panel-close {
    font-size: 22px;
    line-height: 1;
    color: #7b809a;
    text-decoration: none !important;
}

.sv-help-panel-close:hover {
    color: #3f4254;
}

/* Flex column so the content area fills remaining height and scrolls */
#sv_help_panel {
    display: flex;
    flex-direction: column;
}

#sv_help_panel .offcanvas-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Side panel body: ensure rich content renders cleanly */
.sv-help-panel-body {
    font-size: 14px;
    line-height: 1.6;
    color: #3f4254;
}

.sv-help-panel-body img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

/* ── end Pop-up Help rendered form ────────────────────────────── */

.form-field.no-copy .field-actions a.btn.copy-button {
    display: none;
}

.form-field.no-delete .field-actions a.btn.del-button {
    display: none;
}

.form-field.no-edit .field-actions a.btn.icon-pencil {
    display: none;
}

.form-field.locked .field-actions a.btn.copy-button,
.form-field.locked .field-actions a.btn.del-button {
    display: none;
}

.form-field .field-actions a.btn.field-action-disabled {
    background-color: lightgray !important;
    cursor: not-allowed !important;
    color: #c5c5c5 !important;
}

.frmb-control .input-control.disabled,
.frmb-control .input-set-control.disabled {
    /*pointer-events: none;*/
    background-color: lightgray !important;
    cursor: not-allowed !important;
}

    .frmb-control .input-control.disabled > span,
    .frmb-control .input-set-control.disabled > span {
        pointer-events: none;
    }

.frmb-control .input-set-control .delete-input-set {
    float: right;
    line-height: 23px;
    width: 24px;
    text-align: center;
    cursor: pointer;
}
.frmb-control .input-set-control .removeditem-information {
    float: right;
    line-height: 23px;
    width: 24px;
    text-align: center;
    cursor: pointer;
}

.frmb-control .input-set-control .delete-input-set.delete-allowed {
    cursor: pointer;
    color: var(--dark);
}

.frmb-control .input-set-control .delete-input-set.delete-disallowed {
    cursor: not-allowed;
    color: lightgray;
}

.frmb-control .input-set-control.disabled .delete-input-set.delete-disallowed {
    color: darkgray;
}

div.announcement-form-convert-modal-container {
    width: 40em;
}

.announcement-form-convert-modal .field-lists {
    text-align: left;
}

.announcement-form-convert-modal ul {
    padding-inline-start: 2em;
}

.announcement-form-convert-modal li {
    margin: 0.2em;
}

.form-wrap.form-builder .frmb .field-actions .switch-button:hover {
    background-color: var(--info);
    color: #fff;
}

.icon-switch:before {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    content: '\f0ec';
}

.form-wrap.form-builder .frmb .form-elements input.form-control[type='color'] {
    max-width: 64px;
    padding: 3px 4px;
}

.form-wrap.form-builder .frmb .form-field .fakeHeader {
    padding: 5px 20px;
    border-radius: 5px;
    margin-bottom: 8px; /* builder-only spacing between fields */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* h1 is the default header size in the builder preview; h2-h6 keep their relative sizing */
.form-wrap.form-builder .frmb .form-field h1.fakeHeader {
    font-size: 22px;
    font-weight: 600;
}

.form-wrap.form-builder .frmb li.paragraph-field input.fld-label {
    min-height: initial;
}

.form-wrap.form-builder .frmb .form-elements input.fld-rows[type='number'] {
    width: 75px;
}

label.field-advanced-link {
    text-align: left !important;
    width: 300px !important;
}

a.field-advanced-link {
    display: block;
}

label.fs-description {
    text-transform: none !important;
    font-weight: normal !important;
    width: 90% !important;
    text-align: left !important;
    white-space: normal !important;
}

select.fld-newFormShowHide,
select.fld-editFormShowHide {
    width: 200px !important;
}

#builder .select2-search__field:placeholder-shown {
    width: 100% !important;
    /*makes the placeholder to be 100% of the width while there are no options selected*/
}

#builder .select2-search--inline {
    width: 100% !important;
    /*makes the placeholder to be 100% of the width while there are no options selected*/
}

#builder .cbAdditionalFields {
    margin-top: 10px;
}

#builder .cbAdditionalFields > span {
    margin-top: 5px;
} 

#builder .cbAdditionalFields > select {
    width: 100%;
}

#builder .cbAdditionalFields li {
    clear: initial;
}

#builder .cbAdditionalFields li .cb-option-span {
    clear: initial;
    background-color: transparent !important;
}

#builder .cbAdditionalFields .select2-search--inline {
    width: initial !important;
    padding: 0;
}

#builder .sv-select2-inline li {
    clear: initial;
}

#builder .sv-select2-inline .select2-search--inline {
    /*width: initial !important;*/
    padding: 0;
}

#builder .cbAdditionalFields span.cbAdditionalFieldsHeader {
    font-weight: 700;
}

.additionalFieldsSelect2 .select2-results__options--nested > .select2-results__option {
    padding-left: 2em;
}

.calculatedDiv {
    cursor: auto;
    height: 30px !important;
    width: 100% !important;
    padding-top: 5px;
    background-color: #fafafa;
    border-radius: 3px;
}
.sv-calc-field-help {
    float: right;
    padding-right: 10px;
    padding-top: 2px;
    color: cornflowerblue;
}
.btn-builder {
    margin-top: 5px;
    width: 150px;
    float: right;
}
#hidehelp {
    float: right;
    text-decoration: underline;
    font-size: x-small;
    color: blueviolet;
    cursor: pointer;
    margin-top: -20px;
}
#functionShowHelp i {
    color: blue;
}
.show-help {
    text-decoration: underline;
    font-size: x-small;
    color: blue;
    cursor: pointer;
    margin-bottom: 15px;
    float: right;
}
/* Document PP */
div.qq-gallery.qq-uploader {
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 0px;
}

    div.qq-gallery.qq-uploader:before {
        font-size: 150%;
        top: 20%;
    }

#uploader {
    margin-top: 20px;
}

.doc-search {
    margin-bottom: 20px;
}

button.btn-doc-search {
    height: 32px;
}

#docBreadcrumbs {
    display: flex;
    align-items: stretch;
    color: var(--sv-colour-title-font);
    margin-right: 3px;
    margin-left: 3px;
}

    #docBreadcrumbs h4 {
        margin-bottom: 0;
    }

.doc-breadcrumbs {
    margin-right: auto;
}

#docBreadcrumbText span:hover {
    color: var(--warning);
    cursor: pointer;
}

i.sv-add-folder {
    font-size: 1.5em !important;
    padding: 0;
    margin: auto;
    text-align: center;
}

.jstree-anchor {
    font-family: Poppins, Helvetica, sans-serif;
}

.jstree-default div.jstree-wholerow-clicked {
    background-color: var(--warning);
}

.jstree-default a.jstree-clicked,
.jstree-default a.jstree-clicked > i.jstree-icon,
div.jstree-wholerow-clicked + i.jstree-ocl {
    color: #fff;
}

div.permission-tree a.jstree-clicked,
div.feature-tree a.jstree-clicked {
    color: #3f4254;
}
div.feature-permission-tree a.jstree-clicked,
div.feature-tree a.jstree-clicked {
    color: #3f4254;
}

div.qq-gallery .qq-upload-button {
    background-color: #C9F7F5;
    width: 35px;
    border-bottom: none;
    border-radius: 4px;
    border: none;
    box-shadow: none;
}

    div.qq-gallery .qq-upload-button i {
        color: var(--success);
        font-size: 1.5em;
    }

.dataTables_wrapper td i {
    color: var(--sv-colour-title-font);
}

#docFolderPane {
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 10px;
    overflow-x: hidden;
}

#docGridPane {
    margin-right: 10px;
    padding-right: 5px;
    padding-left: 10px;
}
/* abp message */
.swal-modal {
    box-shadow: 0 0 2px 2px rgba(4, 1, 150, 0.8);
}

.swal-title {
    font-weight: 400;
    color: #141414;
    backface-visibility: hidden;
}

.swal-text {
    font-weight: 300;
    color: #1e1e1e;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.swal-icon--warning__body {
    height: 22px;
}

.swal-icon--warning {
    height: 50px;
    width: 50px;
}

.swal-button--cancel {
    background-color: #ffffff;
    border: 1px solid var(--secondary);
    width: 100px;
    font-weight: 400;
    color: #000000;
    backface-visibility: hidden;
}

.swal-button--confirm {
    background-color: rgba(4, 1, 150, 0.8);
    width: 100px;
    font-weight: 400;
    color: #ffffff;
    backface-visibility: hidden;
}

button.swal-button--cancel:hover {
    background-color: rgba(255, 168, 0, 0.7) !important;
}

button.swal-button--confirm:hover {
    background-color: #040196 !important;
}

button.swal-button--confirm:focus {
    box-shadow: none !important;
}

button.sv-tall-button {
    height: 60px;
}
/* details page part */
table.details-table th {
    font-family: Poppins, Helvetica, sans-serif;
    color: var(--sv-colour-title-font);
}

table.details-table td {
    font-family: Poppins, Helvetica, sans-serif;
}

.sv-service-link {
    font-weight: 500;
    color: var(--blue);
    text-decoration: underline;
}

/* linear scale in details pp */
.details-linear-scale {
    position: relative;
    display: flex;
    justify-content: flex-start;
}
.details-linear-scale > label {
    display: block;
}

.details-linear-scale > label:not(.linear-scale-label) {
    flex: 0 1 40px;
    text-align: center;
    pointer-events: none;
}
.details-linear-scale > label input {
    margin-top: 10px;
}
.details-linear-scale > label.linear-scale-start-label {
    flex: 1 0 auto;
    text-align: right;
    font-weight: bold;
}
.details-linear-scale > label.linear-scale-end-label {
    flex: 1 0 auto;
    text-align: left;
    font-weight: bold;
}    
/* special handling for 1/3 layout */
@media (min-width: 1200px) {
    .page-item-wd.page-item-wd-compact .details-linear-scale > label {
        margin-top: 2em;
    }
    .page-item-wd.page-item-wd-compact .details-linear-scale > label.linear-scale-start-label {
        position: absolute;
        top: 0;
        left: 0;
        text-align: left; /*not a typo: inverted from default!*/
        margin-top: 0;
    }
    .page-item-wd.page-item-wd-compact .details-linear-scale > label.linear-scale-end-label {
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
        margin-top: 0;
    }
}


/* form builder */
.form-builder-dialog.positioned {
    overflow-y: hidden;
}

    .form-builder-dialog.positioned .yes,
    .form-builder-dialog.positioned .no {
        width: 35px;
    }

div.form-group.field-options .option-value {
    width: 0px !important;
    padding: 0 !important;
    border-color: #fff !important;
}

div.form-group.field-options .option-label {
    width: calc(89% - 17px) !important;
}

div .sv-form-header {
    padding: 5px 20px;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* On the edit/display forms, pull the header out to the left so the fields below read as indented from it.
   Scoped to .rendered-form so it does NOT apply on the details page part, where the header sits in a table
   and the negative margin clipped its left rounded corner against the card edge. */
.rendered-form .sv-form-header {
    margin-left: -15px;
}

/* h1 is the default header size; h2-h6 keep their relative sizing */
div h1.sv-form-header {
    font-size: 22px;
    font-weight: 600;
}

/* Read-only display of radio / checkbox groups on the view form: a marker list instead of
   editable-looking inputs. Check + bold for selected, hollow circle / dash + grey for the rest. */
.sv-choices {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 2px;
}
.sv-choices.sv-choices-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 22px;
}
.sv-choices .sv-choice {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.sv-choices .sv-choice-mark {
    flex: none;
    width: 13px;
    font-size: 12px;
    text-align: center;
}
.sv-choices .sv-choice-label {
    line-height: 1.5;
}
.sv-choices .sv-choice-on .sv-choice-mark {
    color: var(--primary, #3a3f99);
}
.sv-choices .sv-choice-on .sv-choice-label {
    font-weight: 600;
    color: #201f1f;
}
.sv-choices .sv-choice-off .sv-choice-mark {
    color: #c4c4d4;
}
.sv-choices .sv-choice-off .sv-choice-label {
    color: #a3a3b7;
}

/* Shown above the options when a radio/checkbox group has nothing selected. */
.sv-choices-none {
    padding-top: 2px;
    margin-bottom: 5px;
}
.sv-choice-none {
    display: inline-block;
    padding: 1px 12px;
    border-radius: 999px;
    background: #f4f5f8;
    color: #7e8299;
    border: 1px solid #e9ebf2;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    white-space: nowrap;
}

/* Linear scale (type 'scale') read-only display: endpoints (value over label) + a single value pill. */
.sv-scale {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 2px;
    flex-wrap: wrap;
}
.sv-scale-end {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.sv-scale-end-num {
    color: #53555b;
    color: oklch(0.45 0.01 270);
    font-weight: 600;
}
.sv-scale-end-label {
    color: #53555b;
    color: oklch(0.45 0.01 270);
    font-size: 12px;
    font-weight: 600;
}
.sv-scale-pill {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--primary, #3a3f99);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

/* Checkbox / multiple-choice grid read-only display: alternating row shading + tick / empty markers. */
.sv-grid .sv-grid-row {
    padding-top: 6px;
    padding-bottom: 6px;
}
.sv-grid .sv-grid-row-odd {
    background: #f4f5f8;
    border-radius: 8px;
}
.sv-grid .sv-grid-mark {
    font-size: 15px;
}
.sv-grid .sv-grid-mark-on {
    color: var(--primary, #3a3f99);
}
.sv-grid .sv-grid-mark-off {
    color: #c4c4d4;
}
.sv-grid .sv-grid-none-col {
    display: flex;
    align-items: center;
}

/* ── New/Edit (interactive) form: survey fields ────────────────────────────────
   sv-overrides is loaded on the edit form. The read-only view form hides .linear-scale (shows a
   single pill) and marks its grids with .sv-grid, so these rules only affect the editable versions.
   All CSS-only — no change to the separately-built formBuilder controls. */

/* Linear scale as selectable pills. The scale control emits a malformed <lable> wrapper around the
   points; display:contents flattens it so the endpoints + point pills lay out in one flex row. Each
   point is already a <label for> wrapping its radio, so a native click on the pill selects it. */
.linear-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.linear-scale > lable {
    display: contents;
}
/* Endpoint text (Bad / Excellent) — the misspelled <lable> tags, which carry inline font-weight:bold. */
.linear-scale lable {
    font-size: 12px;
    font-weight: 600 !important;
    color: #53555b;
    color: oklch(0.45 0.01 270);
}
.linear-scale label {
    margin: 0;
    padding: 6px 8px;
    min-width: 32px;
    text-align: center;
    border-radius: 8px;
    background: #eceef3;
    color: #464e5f;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s;
}
.linear-scale label br {
    display: none;
}
.linear-scale label input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.linear-scale label:hover {
    background: #e4e6f0;
}
.linear-scale label:has(input[type="radio"]:checked) {
    background: var(--primary, #3a3f99);
    color: #fff !important;
    font-weight: 700 !important;
}

/* Bootstrap's .row carries negative side margins, which made the shaded rows bleed past the field's
   edges. Zero them on EVERY grid row (the header row included, so the columns stay aligned) — the
   shaded band then matches the field width and the cells keep their normal .col padding inside it.
   Applies to both the editable grid and the read-only .sv-grid transform. */
.checkbox-grid .row,
.multiple-choice-grid .row {
    margin-left: 0;
    margin-right: 0;
}

/* Grids keep their interactive inputs but get alternating (offset) row shading with rounded corners
   and navy inputs. Scoped :not(.sv-grid) so the read-only view-form transform is unaffected. */
.checkbox-grid:not(.sv-grid) .row.align-items-center,
.multiple-choice-grid:not(.sv-grid) .row.align-items-center {
    padding-top: 6px;
    padding-bottom: 6px;
}
.checkbox-grid:not(.sv-grid) .row.align-items-center:nth-of-type(even),
.multiple-choice-grid:not(.sv-grid) .row.align-items-center:nth-of-type(even) {
    background: #f4f5f8;
    border-radius: 8px;
}
/* Custom-drawn checkboxes/radios across the whole (edit) form — larger than default, white check, and a
   radio dot that sits inside the ring. Scoped to .rendered-form; the read-only view form hides these
   inputs (markers/pills shown instead) so it's unaffected, and the linear-scale radios keep their own
   more-specific hide rule above. */
.rendered-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #b5b5c3;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.rendered-form input[type="checkbox"]:checked {
    background: var(--primary, #3a3f99);
    border-color: var(--primary, #3a3f99);
}
.rendered-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rendered-form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #464e5f;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.rendered-form input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, #3a3f99);
}

/* ── Toggle-mode checkboxes/radios ────────────────────────────────────────────
   The builder's "toggle" setting puts .kc-toggle on the label and draws the switch in CSS: the span
   is the track and its ::after is the knob, with the real input hidden at width/height 0.

   The control's own rules are nested (form-render.scss imports _kc-toggle inside .rendered-form,
   form-builder.scss inside .form-wrap.form-builder), so they compile to .rendered-form .kc-toggle span
   and .form-wrap.form-builder .kc-toggle span. Every selector below therefore repeats that ancestor
   and adds `label` to out-specify it — a bare .kc-toggle rule silently loses no matter where it sits
   in the file. The two scopes are the submission form and the form designer's preview stage. */

/* Keep the real input hidden — the custom checkbox/radio styling above would otherwise give it an
   18px box inside the label and push the switch out of alignment. */
.rendered-form label.kc-toggle input[type="checkbox"],
.rendered-form label.kc-toggle input[type="radio"],
.form-wrap.form-builder label.kc-toggle input[type="checkbox"],
.form-wrap.form-builder label.kc-toggle input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.rendered-form label.kc-toggle input[type="checkbox"]::after,
.rendered-form label.kc-toggle input[type="radio"]::after,
.form-wrap.form-builder label.kc-toggle input[type="checkbox"]::after,
.form-wrap.form-builder label.kc-toggle input[type="radio"]::after {
    content: none;
}

/* Softer switch: pill track, no border, circular knob with a subtle shadow for depth. */
.rendered-form label.kc-toggle span,
.form-wrap.form-builder label.kc-toggle span {
    width: 44px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e4e6ef;
    transition: background 0.15s ease;
    cursor: pointer;
}

/* Hand cursor over the whole switch (track, knob and the option text all toggle it). */
.rendered-form label.kc-toggle,
.form-wrap.form-builder label.kc-toggle {
    cursor: pointer;
}

/* The control's ::before is an inset-shadow inner fill that also carries the "on" colour; the pill
   track handles both now, so drop it. */
.rendered-form label.kc-toggle span::before,
.form-wrap.form-builder label.kc-toggle span::before {
    content: none;
}
.rendered-form label.kc-toggle span::after,
.form-wrap.form-builder label.kc-toggle span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
    transform: translateX(0);
}
.rendered-form label.kc-toggle input:checked + span,
.form-wrap.form-builder label.kc-toggle input:checked + span {
    background: var(--primary, #3a3f99);
}
.rendered-form label.kc-toggle input:checked + span::after,
.form-wrap.form-builder label.kc-toggle input:checked + span::after {
    transform: translateX(20px);
}

/* The "Other" option is a switch too, which puts its free-text box inside .kc-toggle — where the
   control hides every input, since that is how it hides the real checkbox. Put the text box back. */
.rendered-form label.kc-toggle .other-val,
.form-wrap.form-builder label.kc-toggle .other-val {
    width: auto;
    height: auto;
    margin-left: 5px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
}

/* The control reveals that box with `.other-option:checked + label`, which needs the input and the
   label to be siblings. In toggle mode the input sits inside the label, so match on that instead. */
.rendered-form label.kc-toggle .other-option:checked ~ .other-val,
.form-wrap.form-builder label.kc-toggle .other-option:checked ~ .other-val {
    display: inline-block;
}

/* Yes/No (single checkbox) field rendered as a coloured pill on the view form.
   Named sv-yesno-pill to avoid the unrelated .sv-disp-pill component defined later in this file. */
.sv-yesno-pill {
    display: inline-block;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
.sv-yesno-pill-yes {
    background: #e1f5ee;
    color: #0f6e56;
    border: 1px solid #bfe6d6;
}
.sv-yesno-pill-no {
    background: #fbeaf0;
    color: #993556;
    border: 1px solid #f1cbda;
}

div .sv-form-info {
    margin-bottom: 0;
    white-space: pre-line;
}

#formVersionActions.dropdown-menu {
    padding: 0;
}

#formVersionActions ul.navi {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

#formVersionActions i {
    width: 20px;
}

#addVersion,
#copyVersion,
#renameVersion,
#deleteVersion {
    cursor: pointer;
}

.field-dependency-modal .field-dependents {
    text-align: left;
}

.field-dependency-modal .field-dependents p {
    margin-right: 1em;
}

.field-dependency-modal .field-dependents ul {
    list-style-type: none;
    padding-inline-start: 1em;
}

.field-dependency-modal .field-dependents li {
    margin: 0.2em;
}

.field-dependency-modal .field-dependents li > i {    
    width: 1em;
}

.field-dependency-modal .field-dependents i.dependency-icon {
    margin-right: 0.3em;
}

.field-dependency-modal .field-dependents li > i.icon-page {
    color: var(--primary);
}

.field-dependency-modal .field-dependents li > i.icon-pagepart {
    color: var(--success);
}

.input-wrap.forced-required > p {
    margin-bottom: 0;
    color: var(--info);
}
/* Delete Portal/Page/PagePart confirm modals*/
.delete-element-modal .element-dependents {
    text-align: left;
    font-size: smaller;
}
/* dependent elements list shared between delete confirm and portal recycle bin */
.element-dependents ul {
    list-style-type: none;
    padding-inline-start: 1em;
}

.element-dependents li {
    margin: 0.2em;
}

    .element-dependents li > i {
        margin-right: 0.5em;
        width: 1em;
    }

        .element-dependents li > i.icon-page {
            color: var(--primary);
        }

        .element-dependents li > i.icon-pagepart {
            color: var(--success);
        }
/* Report Pagepart*/
#btnReportPrint {
    float: right;
    margin-bottom: 10px;
    border: none;
    border-radius: 3px;
    color: var(--black);
    font-family: 'POPPINS' !important;
}

    #btnReportPrint:hover {
        color: var(--white);
    }
/* Portal Recycle Bin */
#deletedElementsModal > .modal-dialog {
    height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    #deletedElementsModal > .modal-dialog {
        height: calc(100% - 3.5rem);
    }
}

@media (min-width: 768px) {
    #deletedElementsModal .accordionColumn {
        height: 100%;
        overflow-y: scroll;
    }

    #deletedElementsModal .detailsColumn {
        height: 100%;
    }
}

@media (max-width: 767.98px) {
    #deletedElementsModal .modal-body > .container {
        overflow-y: scroll;
    }
}

@media (max-width: 991.98px) and (min-width: 576px) {
    #deletedElementsModal > .modal-dialog {
        max-width: 90%;
    }
}

#deletedElementsModal .modal-content {
    height: 100%;
}

#deletedElementsModal .modal-body {
    min-height: 0;
}

    #deletedElementsModal .modal-body > .container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

#deletedElementsModal .row.topRow {
    flex: 0 1 auto;
}

#deletedElementsModal .row.mainRow {
    flex: 1 1 100%;
    min-height: 0;
}

#deletedElementsModal .detailsColumn {
    display: flex;
    flex-direction: column;
}

#deletedElementsModal .detailsContainer {
    height: 100%;
    width: 100%;
    padding: 1em;
    overflow-y: auto;
}

#deletedElementsModal .restoreButtonContainer {
    padding-top: 1rem;
    display: flex;
}

    #deletedElementsModal .restoreButtonContainer > .lowerMessage {
        flex: 1 1 auto;
    }

        #deletedElementsModal .restoreButtonContainer > .lowerMessage > p {
            margin-bottom: 0;
            margin-top: 1rem;
            float: right;
        }

#deletedElementsModal #cleanButton {
    margin-bottom: 1rem;
}

#deletedElementsAccordion .ui-accordion-header {
    padding: 1em 0.7em;
}

#deletedElementsAccordion .list-group.ui-accordion-content {
    padding: 0;
    border-radius: 0;
}
/* List column filter picker*/
.column-filters th {
    position: relative;
}

.column-filters select.form-control {
    padding-left: 1.2em;
}

.column-filters .dt-clear-filter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 0.5em;
}

.column-filters .dt-clear-filter > i {
    vertical-align: middle;
}

.dt-multi-filter-spillover .spilled-over-filter {
    display: inline-block;
}
.dt-multi-filter-spillover .spilled-over-filter > span {
    display: inline-block;
    margin-right: 1em;
}
.dt-multi-filter-spillover .spilled-over-filter > span.filter-container {
    max-width: 200px;
}

/* Form Chain */
#formChainHeader {
    padding-top: 8px;
}

.form-chain-icon {
    text-align: center;
}

.form-chain-step {
    width: 130px;
    text-align: center;
    margin-bottom: 5px;
}

.form-chain-steps {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
}

span.form-chain-order {
    line-height: 1.9em;
}

span.form-chain-step-name {
    color: var(--gray);
}

.form-chain-step.active .form-chain-step-name {
    color: var(--indigo);
    font-weight: 500;
}

.form-chain-step.active i {
    color: var(--success);
}

.form-chain-step.completed i {
    color: rgba(27, 197, 189, 0.2);
}

.form-chain-step:not(completed) i {
    color: var(--secondary);
}

.form-chain-step.completed .form-chain-order {
    color: var(--success);
}

.form-chain-step.active .form-chain-order {
    color: var(--white);
}

.form-chain-step:not(completed) .form-chain-order {
    color: var(--white);
}

.form-chain-dots {
    padding-top: 18px;
}

    .form-chain-dots i {
        color: var(--secondary);
    }

    .form-chain-dots.completed i {
        color: rgba(27, 197, 189, 0.5);
    }

div.form-chain-instructions {
    border-color: var(--primary);
    border-radius: 5px;
    border-width: 1px;
    border-style: dotted;
    padding: 5px 10px;
    margin-bottom: 20px;
}

.form-chain-instructions-icon {
    float: left;
    margin-right: 8px;
    color: var(--primary);
    padding-top: 2px;
}

p.sv-form-chain-info {
    margin-bottom: 0;
}

.bottom-button-bar .btn-next {
    margin-right: 0;
}

.radio-row-selector {
    margin-left: 10px;
    vertical-align: middle;
    margin-right: 5px;
}

.div-row-selector {
    display: inline-block;
    float: right;
    margin-right: 10px;
}

tr.group td.sv-row-group.sv-list-grid {
    padding-bottom: 3px;
    padding-left: 10px !important;
}

tr.group td.sv-row-group i {
    color: var(--white);
    font-size: 1em;
}

.contact-list {
    list-style: none;
    font-family: Poppins, Helvetica, sans-serif;
    color: var(--white);
    padding-left: 0;
}

.contact-type {
    background-color: var(--success);
    padding-left: 8px;
    margin-bottom: 1px;
}

.contact-list i {
    width: 1.2em;
    color: var(--white);
    padding-top: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    vertical-align: middle;
}

#divChooseContact {
    margin-top: 10px;
}

.bottom-button-bar {
    margin-left: auto;
}

div.sv-no-access {
    background-position: right bottom;
    background-size: auto 100%;
    background-image: url(/images/AccessDenied.png);
}

h4.permission-title {
    color: var(--sv-colour-title-font);
}

.add-client, .add-client-to-person {
    width: 150px;
}

.exit-client {
    width: 150px;
    float: right;
    margin-right: 0;
}

.active-service {
    font-size: 0.7em;
    color: var(--info);
}

img.wizard-image {
    margin: auto;
    max-width: 200px;
    max-height: 250px;
}

#grant_offline {
    display: block;
    padding: 0px;
    width: 200px;
    text-align: left;
    font-family: Roboto;
    background-color: #4285F4;
    color: #fff;
    font-size: 14px;
}

.searchClientsHideTable > :not(.dataTables_processing, .table-responsive) {
    display: none;
}

.searchClientsHideTable {
    min-height: 120px;
}

.searchClientsHideTable table {
    min-height: 100px;
}

.searchClientsHideTable table > thead, .searchClientsHideTable table > tbody {
    display: none;
}

/* Notifications */
div.topbar .btn.btn-icon:active,
div.topbar .btn.btn-icon.active,
div.topbar .btn.btn-icon:hover,
div.topbar .btn.btn-icon:focus,
div.topbar .show button.btn.btn-icon.btn-dropdown {
    background-color: var(--info) !important;
}

#openNotificationSettingsModalLink:hover {
    background-color: var(--success) !important;
}

#openNotificationSettingsModalLink i {
    color: var(--info);
}

#header_notification_bar .dropdown-menu {
    width: 400px;
}

#header_notification_bar .navi-icon i:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: normal;
}

#setAllNotificationsAsReadLink,
#setAllNotificationsAsReadLink + a {
    padding-top: 8.45px;
    padding-bottom: 8.45px;
}

form[name=NotificationInformationsForm] label {
    color: #0000ab;
    font-weight: 500;
}

:root {
    --sv-colour-header: #3B0093;
    --sv-font-main: Roboto;
}

.notification-subject {
    padding-left: 43px;
    color: var(--sv-colour-header);
    font-weight: 500;
    font-size: 1.1rem;
    flex-basis: 100%;
    font-family: var(--sv-font-main);
}

.notification-text {
    font-family: var(--sv-font-main);
}

#header_notification_bar .navi-link {
    flex-wrap: wrap;
}
#FieldsSectionContainer {
    padding: 1em 1em 0.1em 1em;
    margin-bottom: 1em;
    border-radius: 4px;
}
.form-alerts-col-comment {
    width: 30%;
}
div .sv-notification-header {
    padding: 5px 10px;
    margin-bottom: 20px;
    border-radius: 3px;
}
div.notification-instructions {
    border-color: var(--primary);
    border-radius: 5px;
    border-width: 1px;
    border-style: dotted;
    padding: 5px 10px;
    margin-bottom: 20px;
}

.notification-instructions-icon {
    float: left;
    margin-right: 8px;
    color: var(--primary);
    padding-top: 2px;
}

p.sv-notification-info {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Notification builder — Areas/App/Views/Notifications/CreateOrEdit.cshtml

   The page is a stack of cards, each with a title + subtitle, visible hint
   text under most controls (replacing the old tooltip-only help), and two
   collapsed disclosures for the advanced groups. Checkbox and radio rows
   share one shape whether they are rendered by Razor or generated by
   CreateOrEdit.js, so the classes below are used from both.

   Do not hide a recipient checkbox with display:none — the save-time
   "does this notification have a recipient?" guard tests row visibility and
   an invisible input would read as unchecked.
   ───────────────────────────────────────────────────────────────────────── */

.sv-notification-form .card-body {
    padding: 1.75rem 2rem;
}

.sv-notification-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sv-colour-header);
    margin: 0 0 0.15rem;
}

.sv-notification-card-subtitle {
    font-size: 0.925rem;
    color: #6b6963;
    margin: 0 0 1.25rem;
}


.sv-notification-divider {
    margin: 1.25rem 0;
    border-top: 1px solid #ebedf3;
}

/* Matches div.notification-instructions on specificity so the amber border actually wins —
   the shared rule above sets border-color to var(--primary). */
div.notification-instructions.sv-notification-banner {
    border-color: var(--warning);
}

.sv-notification-banner .notification-instructions-icon {
    color: var(--warning);
}

/* Live readiness warnings. The icon floats, so the list is indented clear of it. */
.sv-notification-warninglist {
    margin: 0.25rem 0 0;
    padding-left: 2.35rem;
}

.sv-notification-warninglist li {
    font-size: 0.9rem;
}

/* Second rule is opt-in: a dashed "add" affordance, and a quiet "remove" inside the section. */
.sv-notification-rulehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.sv-notification-addrule {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: 1px dashed #cfcdc3;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.sv-notification-addrule:hover {
    border-style: solid;
}

.sv-notification-removerule {
    font-size: 0.85rem;
    color: #6b6963;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.sv-notification-removerule:hover {
    color: var(--danger);
}

/* Subject-line placeholders: click-to-insert, styled as links rather than pills.
   They keep the .sv-add-filter class because the insert-at-cursor handler binds to it, but that
   class carries the shared chip treatment (background, border, padding) used by the page-part
   filter tags and the datetimepicker — which must stay as it is. So unset it here instead, scoped
   to this form and specific enough to beat span.sv-add-filter's border-radius. */
.sv-notification-form .sv-subject-placeholder {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

.sv-notification-form .sv-subject-placeholder:hover {
    color: var(--primary);
    text-decoration: none;
}

/* form[name=NotificationInformationsForm] label is coloured/bolded globally; the
   hint lines must stay quiet next to it. */
.sv-notification-form .field-hint {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-top: 0.25rem;
}

/* Form + Form version share one hint, so the pair drops Metronic's 1.75rem .form-group margin and
   the hint sits directly beneath them. When the columns stack below md the gap is restored between
   them instead. */
.sv-notification-pair > .form-group {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .sv-notification-pair > .form-group + .form-group {
        margin-top: 1.75rem;
    }
}

.sv-notification-pairhint {
    margin-bottom: 1.75rem;
}

/* Runs of related checkboxes are lists, not separate form fields — Metronic's 1.75rem between
   each one leaves them looking unrelated. The stack keeps a normal field margin below itself. */
.sv-notification-checkstack {
    margin-bottom: 1.75rem;
}

.sv-notification-checkstack > .form-group,
#permissionFiltersPanel > .form-group {
    margin-bottom: 0.5rem;
}

/* Slightly more room here because each checkbox carries a hint line underneath it. */
#whenOpenedPanel > .form-group {
    margin-bottom: 1rem;
}

.sv-notification-form #AdditionalEmailRecipientsAlertSection {
    margin-bottom: 1.75em;
}

/* ── Checkbox / radio rows ─────────────────────────────────────────────── */
.sv-notification-checkitem {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sv-notification-checkitem input[type="checkbox"],
.sv-notification-checkitem input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
    top: 1px;
    cursor: pointer;
}

/* The wrapper is a <div> in Razor markup and a <label> in JS-generated markup (the checkbox is
   nested there, because field names are not unique enough for a for= to be safe). */
.sv-notification-form .sv-notification-checkitem label,
.sv-notification-form label.sv-notification-checkitem {
    margin-bottom: 0;
    cursor: pointer;
}

/* Hint belonging to a checkbox sits under it, aligned past the box. */
.sv-notification-checkhint {
    padding-left: 1.4rem;
}

.sv-notification-subcheck {
    padding-left: 1.4rem;
}

/* Delivery methods and severity read as one horizontal row. */
.sv-notification-checkrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
}

.sv-notification-radiolist {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sv-notification-radioitem {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.sv-notification-radioitem input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
    top: 4px;
    cursor: pointer;
}

.sv-notification-form .sv-notification-radioitem label {
    margin-bottom: 0;
    cursor: pointer;
}

.sv-notification-optionlabel {
    display: block;
}

.sv-notification-optionhelp {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: #9c9c9c;
}

/* ── Nested panels (date settings, rule builder) ───────────────────────── */

.sv-notification-subpanel {
    background-color: #f7f6f2;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* Plain-terms restatement of the configured rule. */
.sv-notification-summary {
    border-radius: 6px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    color: var(--info);
}

.sv-notification-summary i {
    margin-right: 0.4rem;
}

/* ── Recipient lists ───────────────────────────────────────────────────── */

.sv-notification-grouplabel {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sv-colour-header);
}

.sv-recipient-list {
    border: 1px solid #ebedf3;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.sv-recipient-list:empty {
    display: none;
}

.recipient-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #ebedf3;
}

.recipient-row:last-child {
    border-bottom: none;
}

.sv-notification-form label.recipient-row-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0;
    cursor: pointer;
}

.recipient-row-main input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
    top: 1px;
    cursor: pointer;
}

.sv-notification-form .recipient-row label {
    margin-bottom: 0;
    cursor: pointer;
}

/* "Let them edit the form" — secondary, and revealed only once the row is ticked. */
.recipient-row-edit {
    flex-basis: 100%;
    padding-left: 1.4rem;
}

.sv-notification-form .recipient-row-edit label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: #6b6963;
    cursor: pointer;
}

.recipient-row-edit input[type="checkbox"] {
    margin: 0;
    position: relative;
    top: 1px;
    cursor: pointer;
}

/* ── Body-field picker ─────────────────────────────────────────────────── */

.sv-notification-checkall {
    margin-top: 0.75rem;
    font-weight: 600;
}

.sv-notification-groupheading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9c9c9c;
    margin-bottom: 0.5rem;
}

/* Mobile-first on the Bootstrap 4 breakpoints: one column, two from sm, three from lg.
   The page is far wider than the mockup it came from, so two columns of short field names
   left a lot of dead space. */
.sv-notification-checkgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem 1.5rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
    .sv-notification-checkgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .sv-notification-checkgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The audit block is a fixed four items reading as Created By/On + Modified By/On, so it stays two
   across to keep those pairs on their own rows. It keeps the same three-column track as the form
   fields above it — so the columns line up — and simply places its items into the first two,
   leaving the third empty rather than stretching to fill the row. */
@media (min-width: 992px) {
    #bodyFieldsAuditGroup {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #bodyFieldsAuditGroup > *:nth-child(odd) {
        grid-column: 1;
    }

    #bodyFieldsAuditGroup > *:nth-child(even) {
        grid-column: 2;
    }
}

/* "Include every field" ticks and locks the individual boxes. */
.sv-checklist-locked {
    opacity: 0.6;
}

.sv-checklist-locked .sv-notification-checkitem,
.sv-checklist-locked .sv-notification-checkitem label,
.sv-checklist-locked input[type="checkbox"] {
    cursor: default;
}

/* ── Collapsed disclosures (permission filters, when-someone-opens-it) ─── */

.sv-notification-disclosure,
.sv-notification-disclosure:hover,
.sv-notification-disclosure:focus {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
}

.sv-notification-disclosure-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sv-colour-header);
}

.sv-notification-disclosure-toggle {
    color: #9c9c9c;
    transition: transform 0.2s ease;
}

.sv-notification-disclosure:not(.collapsed) .sv-notification-disclosure-toggle {
    transform: rotate(180deg);
}

/* The advanced card is deliberately quieter than the rest of the stack. */
.sv-notification-advanced-card {
    box-shadow: none !important;
    background-color: #fbfaf7;
    border: 1px dashed #d6d6d6;
}

/* scrollbar */
div::-webkit-scrollbar {
    width: 8px;
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
    background-color: gainsboro;
    max-height: 80px;
}
/* create and edit pageparts*/
.pp-btn-perms {
    margin-left: 30px;
}

.pp-btn-perms ul.chosen-choices {
    min-height: calc(1.5em + 1.3em + 2px) !important;
    border-radius: 0.42rem;
    border-color: #e4e6ef;
    background-image: none;
}

.pp-btn-perms .chosen-container-multi .chosen-choices li.search-choice {
    background-color: rgba(27, 197, 189, 0.16);
    background-image: none;
    border-color: var(--success);
}

.pp-btn-perms .select2-container .select2-selection--multiple li.select2-selection__choice {
    background-color: rgba(27, 197, 189, 0.16);
    background-image: none;
    border-color: var(--success);
}

.disableSignature > canvas {
    background-color: rgb(243 246 249) !important;
}

.disableSignature > .textInputDiv > .clearInput {
    background-color: rgb(243 246 249) !important;
    color: #7c7c7c !important;
}
/* workaround for table-striped affecting child tables and breaking datetimepicker */
.pp-stripe-table-row { 
    background-color: #EBEDF3;
}
/* sign up and login screens */
div.login-aside-sv-floaty {
    position: sticky;
    height: 50vh;
    top: 0
}
button.tenant-change-save {
    width: 200px !important;
}

div.sv-login-img {
    background-image: url('/metronic/common/images/bg/bg6.png');
    background-size: contain !important;
    margin-left: 20px;
    margin-right: 20px;
    min-height: auto !important;
}

span.pricing-item-icon.text-primary i {
    color: var(--indigo) !important;
}

div.subscription-warning span {
    color: var(--sv-colour-navbar-font);
}

div.subscription-warning i {
    color: var(--warning);
}

img.header-brand-logo-default {
    max-width: 100px;
    max-height: 38px;
    height: auto !important;
}

img.account-logo {
    height: 200px;
    max-width: 200px;
    object-fit: contain;
}
#divInactiveUser {
    background-color: var(--danger);
    color: #fff;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}
.checkbox.checkbox-outline > input:disabled:checked ~ span:after {
    border-color: darkgray !important;
    cursor: not-allowed;
}

.checkbox.checkbox-outline > input:disabled ~ span {
    border-color: darkgray !important;
    cursor: not-allowed;
}
@media (max-width: 991.98px) {
    img.account-logo {
        height: 100px;
        max-width: 100px;
    }
}
@media (max-width: 575.98px) {
    .login.login-1 .login-aside-sv-floaty .aside-img {
        /*background-size: auto !important;*/
        min-height: auto !important;
    }
}
@media (min-width: 992px) {
    div.login-aside-sv-floaty {
        height: 100vh;
    }
}
/* add form to portal */
#select2-ddFormFields-results .select2-results__option[aria-selected=true] {
    display: none;
}

#select2-Case_Worker_1588027871927-results .select2-results__option[aria-selected=true] {
    display: none;
}
/*Create Lisiting Portal*/
#select2-ddLandingPPFormFields-results .select2-results__option[aria-selected=true] {
    display: none;
}
/* modal containers, varies by height */
div.swal2-html-container {
    max-height: 50vh !important;
}
@media (max-height: 650px) {
    div.swal2-html-container {
        max-height: 40vh !important;
    }
}
@media (min-height: 800px) {
    div.swal2-html-container {
        max-height: 500px !important;
    }
}
/* fix for subheader */
div.subheader .container-fluid {
    padding-left: 35px;
}

div.progress {
    background-color: var(--secondary);
}

div.progress-bar {
    padding-left: 10px;
}

.service-add-client {
    margin-bottom: 15px;
    margin-left: 10px;
    width: 120px;
}

.service-exit-client {
    width: 31px;
    margin-right: 0px;
}

.text-dk-blue {
    color: #3B0093;
    font-family: Poppins, Helvetica, sans-serif;
}

div.sv-topbar-help-icon,
div.sv-topbar-support-icon {
    display: flex;
    align-items: stretch;
}

#kt_subheader .actions a:hover:not(.addFormVersion) {
    color: var(--white) !important;
}
/* Edit Image */
#newImgWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-input,
.img-input:focus-visible {
    width: 60px;
    box-sizing: unset;
    border-color: lightgray;
    border-radius: 3px;
    border-top-style: solid;
    border-left-style: solid;
}

.btn-img-edit {
    margin-bottom: 5px;
    width: 94px;
    margin-left: 10px;
}

#resizeDetails {
    margin-left: 8px;
    display: none;
    background-color: aliceblue;
    border-radius: 3px;
    padding-left: 3px;
    /*padding-right: 3px;*/
    padding-top: 5px;
}
/* Copy Content Tool */
.ccMainRow {
    height: 400px;
}

    .ccMainRow > div {
        height: 100%;
    }

.ccActionsRow {
    margin-top: 16px;
}

.ccTool #TreeviewContainer {
    border: 1px solid black;
    padding: 8px;
    height: 100%;
    overflow-y: scroll;
}

.ccTool #ButtonsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: 40px;
    gap: 10px;
}

    .ccTool #ButtonsContainer > button {
        margin-left: 0 !important;
    }

.ccTool #SelectedContainer {
    border: 1px solid black;
    padding: 8px;
    height: 100%;
    overflow-y: scroll;
}

.ccTool #SelectedList .list-group-item {
    padding: 4px 8px;
}

    .ccTool #SelectedList .list-group-item:first-child {
        border-top-left-radius: initial;
        border-top-right-radius: initial;
    }

    .ccTool #SelectedList .list-group-item:last-child {
        border-bottom-right-radius: initial;
        border-bottom-left-radius: initial;
    }

.ccTool #SelectedList .type-icon {
    width: 24px;
}

.ccTool #dependencyList .type-icon {
    width: 20px;
}

.ccTool #carryOverList .type-icon {
    width: 20px;
}

.ccTool #InspectorContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ccTool #InspectorContainerInner {
    overflow-y: scroll;
}

.ccTool #InspectorTitle {
    position: relative;
}

.ccTool .inspector-title-icon {
    right: 0;
    top: 4px;
    position: absolute;
}

.ccTenantSelection {
    border: 1px solid purple;
    padding: 8px 8px 0 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.cc-already-selected-row > div.jstree-wholerow,
.cc-already-selected-row > a.jstree-anchor {
    /*cursor: not-allowed;*/
    /*color: lightgrey;*/
    color: var(--success);
}

.ccSourceDataModal {
    text-align: left;
}

    .ccSourceDataModal h5 {
        /* TODO spacing! */
    }

.ccSourceDataModal-container {
    width: 50em !important;
}

.cc-chooser-select {
    width: 75% !important;
}
/* Misc */
div#kt_content {
    padding-bottom: 0px;
}

    div#kt_content div.card {
        margin-bottom: 10px;
    }

.sv-host-header {
    min-width: 400px;
}

    .sv-host-header > div {
        margin-right: 8px;
        margin: auto;
        font-size: 24pt;
        text-transform: uppercase;
    }

    .sv-host-header.local-host {
        color: darkmagenta;
        background-color: #e7dcfe;
        border-color: #decefe;
    }

    .sv-host-header.dev-host {
        color: darkblue;
        background-color: #d7ebff;
        border-color: #c7e2ff;
    }

    .sv-host-header.staging-host {
        color: darkgreen;
        background-color: #d1f3f2;
        border-color: #bfefed;
    }

    .sv-host-header.production-host {
        color: darkred;
        background-color: #fddcdf;
        border-color: #fccdd2;
    }

    .sv-host-header.unknown-host {
        color: darkslategray;
        background-color: #fdfdfe;
        border-color: #fcfcfd;
    }

.sv-card-title i,
.sv-card-title h3 {
    color: var(--indigo) !important;
}

.sv-services-diag.bg-diagonal:after {
    left: 85%;
}

.sv-upgrades-diag.bg-diagonal:after {
    left: 70%;
}

.sv-flex-align-right {
    margin-left: auto;
}

.sv-flex-expand {
    flex: 0 0 100%;
}

#PERequestsTable span.label-warning,
#RequestsTable span.label-warning,
div.service-child2 span.label-warning {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 10.4px;
}

#ServiceTabPanel .nav-link.active {
    background-color: #EEF0F8;
    border-bottom-color: #EEF0F8;
    color: var(--indigo);
    font-weight: 600;
}

#ServiceTabPanel .nav-link {
    background-color: #fff;
    border-bottom-color: #E4E6EF;
    color: var(--gray-dark);
}

span.service-issue {
    width: 100%;
    text-align: left;
    float: left;
}

div.service-issue {
    width: 100%;
    text-align: left;
    float: left;
}

hr.service-issue {
    float: left;
    width: 90%;
    margin-top: 0;
    margin-bottom: 20px;
}

label.service-issue {
    color: var(--indigo);
    float: left;
}

.service-issue .image-wrap > img {
    max-width: 500px;
    height: auto;
}

.service-parent {
    display: flex;
    flex-direction: row;
}

.service-child1 {
    width: 75%;
}

.child2 {
    width: 25%;
}

.service-footer {
    margin-left: 1.7em;
    margin-right: 1.7em;
}

.service-dialog > .swal2-html-container {
    max-height: 300px !important;
}

a.request-community-form-link {
    color: red;
    font-weight: bold;
}

td.view-details {
    text-decoration: underline;
    color: var(--indigo) !important;
}

#ManageUsersTable .btn-sm,
#CreditHistoryTable .btn-sm,
#PERequestsTable .btn-sm,
#RequestsTable .btn-sm {
    padding-top: 3px;
    padding-bottom: 3px;
}

.sv-fs {
    color: var(--warning);
}

.sv-anon-hidden {
    color: var(--warning);
}

.sv-ph {
    color: var(--warning);
}

.massNotificationTenantButtons {
    margin-top: 1em;
}

.massNotificationTenantButtons > a, .massNotificationTenantButtons > div {
    margin-right: 1em;
}

/* iPad Pro / small screens*/
@media (max-width: 1319.98px) {
    div.sizer {
        width: 32.5%;
    }

    div.full-item-wd {
        width: 96.5%;
    }

    div.page-item-wd {
        width: 32.5%;
        padding: 8px;
    }

    div.page-item-wd2 {
        width: 65.5%;
        padding: 8px;
    }

    .col-md-12[role="main"] {
        padding-right: 0px;
        padding-left: 5px;
    }

    #docGridPane {
        padding-right: 20px;
    }

    div.menu-tab {
        display: inline-block;
        line-height: 1.2;
        height: 25px;
        margin-top: 155px;
        padding: 4px 4px 4px 4px;
        position: fixed;
        width: 90px;
    }

    .menu-tab i {
        color: var(--white);
        font-size: 0.9em;
    }

    .menu-tab span {
        font-size: 0.9em;
    }
}

@media (max-width: 1199.98px) {
    div.page-item-wd.page-item-wd-compact {
        width: 99%;
    }

    div.page-item-wd2.page-item-wd-compact {
        width: 99%;
    }

    .col-md-12[role="main"] {
        padding-right: 5px;
        padding-left: 10px;
    }
}
/* Tablet-iPad */
@media (max-width: 1080.98px) {
    div #sidebar-bg,
    div#sidebar-wrapper {
        left: 265px;
    }

    img#mobile-sidebar-bg {
        width: 265px;
    }

    div#body-wrapper {
        margin-top: -73px;
        margin-left: 19px;
        margin-right: -5px;
    }

    div.container-fluid.form-content {
        margin-top: 30px;
    }

    .subheader {
        margin-top: -18px;
        margin-left: -8px;
    }

        .subheader .form-group {
            padding-left: 0;
        }

        .subheader .d-flex:not(.flex-wrap) {
            margin-left: auto;
        }

    div.form-content {
        margin-right: 48px;
        width: 97%;
    }

    div.page-item-wd.page-item-wd-compact {
        width: 97%;
    }

    div.page-item-wd2.page-item-wd-compact {
        width: 97%;
    }

    .col-md-12[role="main"] {
        padding-right: 12px;
        padding-left: 12px;
    }
}

#kt_brand {
    padding-right: 0px;
}

#kt_aside_toggle .svg-icon {
    margin-right: 0px;
}

    #kt_aside_toggle .svg-icon svg g [fill] {
        fill: var(--primary);
    }
/* Tablet */
@media (max-width: 991.98px) {
    div.header-mobile,
    div.topbar {
        background-color: #5d21b8 !important;
    }

    #kt_header_mobile_topbar_toggle,
    #kt_aside_mobile_toggle {
        background-color: transparent;
    }

    .header-mobile .btn .svg-icon svg g [fill] {
        fill: #fff !important;
    }

    .header-mobile .burger-icon span,
    .header-mobile .burger-icon span:before,
    .header-mobile .burger-icon span:after {
        background-color: #fff !important;
    }

    div#body-wrapper {
        margin-top: -10px;
        margin-left: 25px;
        margin-right: 6px; /* right-edge whitespace for the toolbar, form card & notices */
    }

    div#sidebar-bg,
    div#sidebar-wrapper {
        left: 0px;
    }

    div#kt_aside.aside-on {
        width: 265px;
    }

        div#kt_aside.aside-on div#sidebar-bg,
        div#kt_aside.aside-on div#sidebar-wrapper {
            left: 265px;
        }

    a.sv-toolbar-link {
        display: block;
    }
}

@media (max-width: 991.98px) {
    div.form-content {
        margin-right: 20px;
    }

    #footer label.col-form-label {
        text-align: left !important;
        width: 90%;
        margin-left: 25px;
    }

    #footer .col-lg-3 {
        padding-left: 22px;
        padding-top: 0;
        color: #808080;
    }

    div.container-fluid.form-content {
        margin-top: 0px;
    }
}

@media (max-width: 767.98px) {
    .dataTables_wrapper table.dataTable.collapsed > tbody > tr[role="row"] > td:first-child {
        padding-left: 0px !important;
    }

    .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
        padding-left: 5px;
    }

    div.dropdown-menu {
        width: 40vw;
    }

    div.menu-tab {
        display: none;
    }
}
/* Phone */
@media (max-width: 414.98px) {
    div#body-wrapper {
        margin-top: 0;
        margin-left: 25px;
        margin-right: -13px;
    }

    div.form-content {
        margin-right: 12px;
    }

    div #body-wrapper {
        margin-top: 0;
        margin-left: 25px;
        margin-right: -1px;
    }

    .mark-text,
    .contact-text {
        visibility: hidden;
        position: relative;
    }

        .mark-text:after {
            visibility: visible;
            position: absolute;
            top: -7px;
            left: 0px;
            content: "Mark";
            color: var(--info);
        }

        .contact-text:after {
            visibility: visible;
            position: absolute;
            top: -7px;
            left: 0px;
            content: "Add";
            color: var(--info);
        }

    .select2-search--dropdown .select2-search__field {
        width: 90%;
    }

    .subheader div.subheader-separator {
        display: none;
    }

    input[type="search"] {
        margin-left: 15px;
    }

    button[data-original-title="Search Grid"] {
        height: calc(1.5em + 1.3rem - 1px);
        padding-bottom: 0px;
        padding-top: 0px;
    }

    button.btn-doc-search {
        height: 32px;
    }

    input.doclib-search-box {
        margin-left: 0;
    }

    div.doc-search {
        padding-left: 0;
    }

    .dataTables_wrapper div.dataTables_info,
    button.sv-filter-btn {
        display: none;
    }

    div.dataTables_wrapper div.dataTables_length select {
        width: 40px;
    }

    h2.fc-toolbar-title {
        font-size: 1.1em;
    }

    div.modal-content {
        width: 90%;
    }

    div.modal-footer > .sv-add-group {
        width: 90px;
    }
}

#goalsStatus_radio_box {
    margin: 10px 0px;
}

    #goalsStatus_radio_box > input {
        margin: 0px 2px 0px 10px;
    }

    #goalsStatus_radio_box > label {
        margin: 0px 2px;
    }

label.error {
    color: #ff0000 !important;
    background-color: rgba(255, 168, 0, 0.08) !important;
    padding: 5px;
    font-weight: bold !important;
}

    label.error::before {
        content: "⚠ ";
    }

.navi.navi-hover .navi-item .navi-link.noclick:hover {
    background-color: #fff;
    cursor: default;
    color: black;
}

.image-preview-container {
    display: inline-block;
    margin-right: 1em;
}

.image-preview-container > canvas {
    display: block;
}

.brand-logo-preview-area .image-preview-container {
    display: block;
    cursor: pointer;
}

.brand-logo-preview-area .image-preview-container > canvas {
    max-height: 38px;
    max-width: 100px;
}

.qq-gallery .qq-upload-list li.new-file-info {
    height: 205px;
}
.qq-gallery .qq-upload-list li.sv-image-upload {
    height: 235px;
}

.formbuilder-select select option {
    color: #3F4254 !important;
}

.formbuilder-select-default {
    color: #B5B5C3 !important;
}

.formbuilder-select-change {
    color: #3F4254 !important;
}

/* Anon Forms*/
#body-wrapper-anon {
    padding-top: 0px;
}
#AnonFormSubHead div.subheader {
    left: 0;
}
#AnonFormSubHead .btn-toolbar {
    padding-top: 20px;
}
#AnonFormLabel {
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--indigo);
}
#body-wrapper-anon {
    margin-top: 90px;
}
.sv-anon-brand {
    position: fixed;
    top: 0;
    z-index: 90;
    width: 100%;
    background-color: #3B0093;
}
#anonFormPreview, #anonFormLink {
    margin-left: 20px;
    margin-top: auto;
    margin-right: 0;
    width: 120px;
}
#anonFormLink {
    margin-left: auto;
}
#anonFormPreview {
    margin-left: auto;
}
#anonFormWarn {
    margin-bottom: 0;
    display: none;
    width: 100%
}
.anon-form-btns {
    display: inline-flex;
}
.chosen-container-multi .chosen-choices li.search-field input[type=text] {
    opacity: 0.6;
    padding: 18px 0px 18px 18px !important;
}

/* Tab Pages */
.full-item-wd.pp-tab-item {
    width: 100%;
}

.full-item-wd.pp-tab-item .page-part-title {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
/* Upgrade Page and addons tab */
.sv-upgrades-row, .sv-addons-row {
    flex-shrink: 0;
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted gray;
}

.sv-upgrade-title {
    font-weight: bold;
    width: 15%;
    margin-top: auto;
    margin-bottom: auto;
}

.sv-upgrade-desc {
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
}

.sv-upgrade-price {
    font-weight: bold;
    width: 10%;
    margin-top: auto;
    margin-bottom: auto;
    text-align: right;
}

.sv-upgrade-buy {
    width: 15%;
    margin-top: auto;
    margin-bottom: auto;
    text-align: right;
}

.sv-buy-disabled {
    cursor: not-allowed;
}

.sv-addons-title {
    font-weight: bold;
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
}

.sv-addons-desc {
    width: 65%;
    margin-top: auto;
    margin-bottom: auto;
}

.sv-addons-buttons {
    width: 15%;
    margin-top: auto;
    margin-bottom: auto;
    text-align: right;
}

.pending-payment-text > a {
    color: white;
    text-decoration: underline !important;
}

.pending-payment-text > a:hover {
    color: #9addff;
    text-decoration: underline !important;
    /*font-weight: bold;*/
}

/* Admin Home */
#divAdminHome .card-body {
    padding-bottom: 0;
}

#divAdminHome .card-header {
    padding-bottom: .3rem !important;
    padding-top: .3rem !important;
    min-height: 60px;
}

#divAdminHome .card-body .mb-10 {
    margin-bottom: 1.25rem !important;
}
/* Portal landing page config */
ul.portal-landing-page-list {
    padding-inline-start: 0;
    /*max-width: 90%;*/
    list-style-type: none;
    border: 1px solid #EBEDF3;
    position: relative;
    min-height: 80px;
}

ul.portal-landing-page-list > li {
    /*background-color: rgba(54, 153, 255, 0.08);*/
    background-color: rgb(237 246 255);
    margin: 8px;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

ul.portal-landing-page-list > li:not(.ui-sortable-helper):not(.ui-sortable-placeholder):hover {
    color: #3F4254;
    background-color: #E4E6EF !important;
}

ul.portal-landing-page-list > li.is-overridden {
    background-color: rgb(186 197 209);
}

ul.portal-landing-page-list > li.is-overridden .text-container {
    text-decoration: line-through;
}

ul.portal-landing-page-list > li .checkbox-container {
    padding: 0 10px;
}

ul.portal-landing-page-list > li .text-container {
    flex: 1 1 auto;
    padding-top: 6px;
}

ul.portal-landing-page-list > li .text-container p {
    margin-bottom: 6px;
}

ul.portal-landing-page-list > li .sort-handle-container {
    padding: 0 10px;
    cursor: pointer;
}

ul.portal-landing-page-list .ui-sortable-helper {
    color: #3F4254;
    background-color: #f4f6ff !important;
    opacity: 0.8;
}

ul.portal-landing-page-list .ui-sortable-placeholder {
    opacity: 0.5;
}

#btn-delete-global-landing:disabled {
    cursor: not-allowed;
}

/* select2 overrides */

.select2-breadcrumb .select2-selection {
    background: transparent;
    border: none !important; 
}

.select2-breadcrumb .select2-selection__rendered {
    color: #fff !important;
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 1.2em;
    padding: 0.4rem 0.5rem 0.65rem 0rem !important;
}

.sv-select2-button-bar {
    display: block;
    padding: 0.65rem 1rem 0;
    display: flex;
    gap: 10px;
    margin-right: 20px;
}

.sv-select2-button-bar > button {
    flex: 1 1 50%;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    margin-top: 0px !important;
}


table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    margin-top: -3px !important;
}

table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody th.select-checkbox:before {
    margin-top: 0px !important;
}

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    margin-top: -3px !important;
}

table.dataTable tbody td.select-checkbox,
table.dataTable tbody th.select-checkbox {
    position: relative;
}

    table.dataTable tbody td.select-checkbox:before,
    table.dataTable tbody td.select-checkbox:after,
    table.dataTable tbody th.select-checkbox:before,
    table.dataTable tbody th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 1.2em;
        left: 50%;
        width: 12px;
        height: 12px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    table.dataTable tbody td.select-checkbox:before,
    table.dataTable tbody th.select-checkbox:before {
        content: ' ';
        margin-top: -6px;
        margin-left: -6px;
        border: 1px solid black;
        border-radius: 3px;
    }

table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}

table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
    position: relative;
}

    table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 1.2em;
        left: 50%;
        width: 12px;
        height: 12px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
        content: ' ';
        margin-top: -6px;
        margin-left: -6px;
        border: 1px solid black;
        border-radius: 3px;
    }

table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
}
.admin-info-group {
    background-color: aliceblue;
    border: 1px solid #632bb8;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: -12.5px;
    margin-right: -12.5px;
    border-radius: 4px;
}
.card-body .text-dark-50 {
    color: #000 !important;
}
#chatIcon i {
    margin-top: 0 !important
}
/* Date Chooser for date filters */
#DateChooserContainer .dropdown-menu.chooser-menu {
    padding: 16px;
}
#DateChooserContainer .radio-row {
    width: max-content;
    display: flex;
    gap: 12px;
    /*align-items: center;*/
    flex-wrap: nowrap;
}
#DateChooserContainer .radio-row > * {
    /*unneeded*/
    /*flex: 1 0 auto;*/
}
#DateChooserContainer .radio-row label {
    display: block;
    margin-bottom: 6px;
}
#DateChooserContainer .radio-row label.inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#DateChooserContainer > .btn-group > .btn {
    border: 1px solid #3F4254;
}
#DateChooserContainer .wrap-specify > * {
    height: 100%;
}
.pp-select {
    margin-left: 15px;
    margin-right: 15px;
}
div .notification-btn {
    height: 25px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 4px;
}
div.guest-user-badge {
    background-color: blueviolet;
    border-radius: 4px;
    color: #fff;
    width: 100px;
    text-align: center;
}

.info-paragraph {
    border-color: var(--primary);
    border-radius: 5px;
    border-width: 1px;
    border-style: dotted;
    padding: 5px 10px;
    margin-bottom: 0; /* was 20px */
}

.contentDisplayLikeInfoParagraph {
    border-color: var(--primary);
    border-radius: 5px;
    border-width: 1px;
    border-style: dotted;
    padding: 5px 10px;
    margin-bottom: 0;
}

/* Pop + fade highlight */
.effect-pop {
    animation: popUpdate 900ms ease-out 1;
}

@keyframes popUpdate {
    0% {
        transform: scale(1);
        background: rgba(0, 196, 255, 0.35);
    }

    30% {
        transform: scale(1.04);
        background: rgba(0, 196, 255, 0.55);
    }

    100% {
        transform: scale(1);
        background: rgba(0, 196, 255, 0);
    }
}

.effect-pop-value {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    will-change: transform;
}

.interactable-section-title {
    font-weight: bold;
    font-size: 120%; /* 20% larger than the inherited size */
}

.ec-top-additional-padding {
    padding-top: 15px;
    border-radius: 8px 8px 0 0; /* top left and right corners*/
}

.field-in-expand-collapse-Section {
    background-color: rgb(249, 249, 249);
    display: block;
    width: 100%; /* Ensures full container width */
    box-sizing: border-box; /* Prevents padding from overflowing */
    padding-left: 40px;
    margin-left: 0 !important;
}

.field-in-expand-collapse-Section.form-group {
    margin-bottom: 0 !important;    
    padding-bottom: 15px;
    padding-right: 15px;
}

.ectooltip {    
    float: right;
}

.clickable-item {
    cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   Per-row status-icon cluster (read-by-me icon + comment / reader badges)
   used on the Documents and List page parts when the page part has
   CanComment and/or CanMarkRead enabled. Markup is produced by
   SVResponseIcons.renderStatusCluster() in /Scripts/SVResponses.js — keep
   the two in sync if either is touched.
   ───────────────────────────────────────────────────────────────────────── */
.sv-status-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}

/* When the leftmost cell has both the action button (.btn-group) and the status cluster,
   keep them side-by-side. Some Metronic / Bootstrap overrides can leave .btn-group as a
   block / floated element which pushes the cluster to a new line; this rule forces both
   children back to inline-flex centered vertically and prevents wrapping at narrow widths. */
.sv-actions-with-status {
    white-space: nowrap;
}
.sv-actions-with-status > .btn-group {
    display: inline-flex !important;
    vertical-align: middle;
    float: none !important;
}
.sv-actions-with-status > .sv-status-cluster {
    display: inline-flex;
    vertical-align: middle;
}

/* DataTables Responsive renders the expand chevron via :before on the first
   cell of the row; the existing override around line 218 of this file pins it
   to `right: 20px` of the cell. The chevron is roughly 16px wide, so it occupies
   the right ~36px of the cell. When the same cell also holds the action button
   plus our status cluster, the cluster's rightmost badge extends into that area
   and overlaps the chevron. Reserve right-padding on cells that carry our
   .sv-actions-with-status class so the cluster always ends before the chevron's
   reserved area. Scoped to that class only — other List grids without the
   response feature are unaffected. */
.sv-actions-with-status {
    padding-right: 44px !important;
}

.sv-status-cluster .sv-read-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex: none;
}
.sv-status-cluster .sv-read-icon:hover {
    opacity: 0.85;
}

.sv-sbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px 3px 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    height: 22px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.sv-sbadge svg { flex: none; }

.sv-sbadge.sv-cmt {
    color: #3c57b0;
    background: #edf0fc;
    border-color: #cdd5ef;
}
.sv-sbadge.sv-cmt:hover { background: #dce3f8; }

.sv-sbadge.sv-readers {
    color: #5a6278;
    background: #f0f2f7;
    border-color: #d2d6e0;
}
.sv-sbadge.sv-readers:hover { background: #e5e8f0; }

/* Row-level report badge. Same colours as the comment pill, but it carries no count
   beside the icon — so the base badge's 22px height and count-friendly asymmetric
   padding are replaced with a compact, evenly padded pill that sits level with the
   18px read icon (and close to the 16px share/flag chips) instead of towering over them. */
.sv-sbadge.sv-report {
    color: #3c57b0;
    background: #edf0fc;
    border-color: #cdd5ef;
    height: 18px;
    padding: 0 5px;
}
.sv-sbadge.sv-report:hover { background: #dce3f8; }

/* ─────────────────────────────────────────────────────────────────────────
   Legend bar above the table on Documents and List page parts.
   Markup is rendered server-side by _StatusLegendPartial.cshtml. Lives in a
   <div> above the table (NOT inside <thead>) because SVListGrid dynamically
   appends column <th>s to the first <tr> in <thead> at runtime, which would
   otherwise leak the dynamic columns into the legend row.
   ───────────────────────────────────────────────────────────────────────── */
.sv-status-legend-bar {
    background: #fafbfd;
    padding: 8px 12px;
    /* V5: top margin keeps the legend from sitting flush against the
       breadcrumb row above it on document page parts (which has no
       bottom margin of its own). The bottom margin holds the table
       below it off. */
    margin-top: 12px;
    margin-bottom: 8px;
    /*visually match the search bar above it*/
    border: 1px solid #e8eaf0;
    border-radius: 0.42rem;
}

.sv-status-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #5a6278;
}
.sv-status-legend strong {
    color: #1e2230;
    margin-right: 4px;
}
.sv-status-legend .sv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Inside the legend, the badges are illustrative — disable hover/cursor. */
.sv-status-legend .sv-sbadge {
    cursor: default;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Right-edge slide-out sheet that replaces the four SweetAlert2 modals
   (mark-as-read confirm / add comment / view comments / view readers) used
   by SVResponses. Mounted lazily by SVResponseSheet.js — see Case Notes
   prototype for the source design.
   ───────────────────────────────────────────────────────────────────────── */
.sv-response-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 30, 0.28);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.sv-response-sheet-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.sv-response-sheet {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 400px;
    max-width: 100vw;
    background: #fff;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(.25,.8,.4,1);
    box-shadow: -8px 0 32px rgba(10, 14, 30, 0.16);
    font-size: 13px;
    color: #1e2230;
}
.sv-response-sheet.open {
    transform: translateX(0);
}

.sv-response-sheet-hd {
    padding: 16px 18px;
    border-bottom: 1px solid #e8eaf0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: none;
    gap: 10px;
}
.sv-response-sheet-hd h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e2230;
    margin: 0;
}
.sv-response-sheet-hd small {
    font-size: 12px;
    color: #8b93a8;
    display: block;
    margin-top: 2px;
}
.sv-response-sheet-close {
    background: none;
    border: 0;
    cursor: pointer;
    color: #8b93a8;
    padding: 4px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sv-response-sheet-close:hover {
    background: #eef0f4;
    color: #1e2230;
}

.sv-response-sheet-tabs {
    display: flex;
    border-bottom: 1px solid #e8eaf0;
    flex: none;
}
.sv-response-sheet-tab {
    padding: 11px 18px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7590;
    border: 0;
    background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.sv-response-sheet-tab.cur {
    color: #3c57b0;
    border-bottom-color: #3c57b0;
    font-weight: 600;
}
.sv-response-sheet-tab .pill {
    background: #edf0fc;
    color: #3c57b0;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10.5px;
    margin-left: 6px;
}

.sv-response-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sv-response-sheet-empty {
    text-align: center;
    padding: 40px 0;
    color: #b0b7c8;
    font-size: 13px;
}
.sv-response-sheet-empty .sub {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* Comments tab */
.sv-comment-item {
    display: flex;
    gap: 10px;
}
.sv-comment-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex: none;
}
.sv-comment-body { flex: 1; min-width: 0; }
.sv-comment-meta {
    font-size: 12px;
    color: #8b93a8;
    margin-top: 2px;
}
.sv-comment-meta strong {
    color: #2c3150;
    font-weight: 600;
}
.sv-comment-text {
    margin-top: 5px;
    font-size: 13px;
    color: #2c3150;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}
/* Hover-reveal action row. Becomes interactive only when the row is hovered
   or actively in edit mode, so the comment text isn't crowded by buttons
   that aren't being used. */
.sv-comment-actions {
    margin-top: 6px;
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.sv-comment-item:hover .sv-comment-actions,
.sv-comment-item.editing .sv-comment-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Borderless icon+label buttons. Default: muted gray, transparent bg.
   Hover: subtle filled tint — green for Edit, red for Delete. Matches the
   updated Case Notes View design's CommentAction component. */
.sv-comment-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #79839a;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.sv-comment-action i {
    font-size: 13px;
    line-height: 1;
}
.sv-comment-action--edit:hover,
.sv-comment-action--save:hover {
    color: #1f7a3a;
    background: #e6f3ea;
}
.sv-comment-action--delete:hover {
    color: #c0473e;
    background: #fdecea;
}
.sv-comment-action--cancel:hover {
    color: #a06900;
    background: #fff4d8;
}

/* Compose-footer "Cancel" button on the slide-out: hover state matches the
   in-line comment-edit Cancel button so all "back out of this action" cues
   look the same (light amber warning). Default state stays as the Bootstrap
   btn-light pill (subtle, low-emphasis). */
#sv-response-sheet-cancel:hover {
    color: #a06900;
    background: #fff4d8;
    border-color: #f5dc8a;
}

/* Compose-footer buttons (Cancel / Post Comment) — add inline-flex layout
   so the icons added next to each label render with proper alignment and
   a consistent gap. The base Bootstrap .btn doesn't include this layout. */
#sv-response-sheet-cancel,
#sv-response-sheet-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#sv-response-sheet-cancel i,
#sv-response-sheet-submit i {
    font-size: 13px;
    line-height: 1;
}

/* Readers tab */
.sv-reader-banner {
    margin-bottom: 6px;
}
.sv-mark-read-btn {
    background: #2a7a4e;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sv-mark-read-btn:hover { background: #226840; }
.sv-already-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #2a7a4e;
}
.sv-reader-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eff0f4;
}
.sv-reader-item:last-child { border-bottom: 0; }
.sv-reader-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}
.sv-reader-name {
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.sv-reader-name .sv-you-tag {
    font-size: 10px;
    font-weight: 600;
    color: #2a7a4e;
    background: #eaf4ee;
    border-radius: 999px;
    padding: 1px 7px;
    /* The name row is a flex line shared with a nowrap timestamp. Without
       these the tag is treated as a shrinkable flex item and a long name or
       date breaks it mid-word ("Yo u"). Let the name wrap instead. */
    white-space: nowrap;
    flex: none;
}
.sv-reader-time {
    color: #8b93a8;
    font-size: 11px;
    white-space: nowrap;
}

/* Compose footer (Comments tab only) */
.sv-response-sheet-compose {
    border-top: 1px solid #e8eaf0;
    padding: 14px 18px;
    flex: none;
    background: #fafbfd;
}
.sv-response-sheet-compose textarea {
    width: 100%;
    border: 1px solid #ccd0db;
    border-radius: 5px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 64px;
    outline: none;
    color: #1e2230;
}
.sv-response-sheet-compose textarea:focus {
    border-color: #3c57b0;
}
.sv-response-sheet-compose-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 8px;
}
.sv-response-sheet-compose .btn {
    padding: 7px 16px;
    font-size: 12.5px;
}

.sv-response-sheet-spinner {
    text-align: center;
    padding: 20px 0;
    color: #8b93a8;
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Flag slide-out (SVFlagSheet) — reuses the .sv-response-sheet* / .sv-comment*
   base styles above; only the flag-specific accents live here. (V5-1207)
   ───────────────────────────────────────────────────────────────────────── */
.sv-flag-sheet-icon {
    color: #EB4034;
    font-size: 18px;
    margin-right: 8px;
    margin-top: 1px;
}
.sv-flag-prompt {
    color: #6b7590;
    font-size: 13px;
}
/* Compose-footer buttons — match the inline-flex icon+label layout used by the
   response sheet (the base .btn doesn't include it). */
#sv-flag-sheet-cancel,
#sv-flag-sheet-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#sv-flag-sheet-cancel i,
#sv-flag-sheet-submit i {
    font-size: 13px;
    line-height: 1;
}
#sv-flag-sheet-cancel:hover {
    color: #a06900;
    background: #fff4d8;
    border-color: #f5dc8a;
}

/* ─────────────────────────────────────────────────────────────────────────
   Linked Page Parts slide-out (SVLinkedPagePartsSheet) — reuses the
   .sv-response-sheet* base styles above; only the list-specific layout lives
   here. Lists every Page Part that uses a given Form as its data source.
   ───────────────────────────────────────────────────────────────────────── */
.sv-linked-pp-icon {
    color: #5867dd;
    font-size: 18px;
    margin-right: 8px;
    margin-top: 1px;
}
.sv-linked-pp-empty {
    color: #8b93a8;
    font-size: 13px;
    padding: 8px 0;
}
.sv-linked-pp-count {
    color: #6b7590;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}
.sv-linked-pp-table {
    display: flex;
    flex-direction: column;
}
/* Each row splits into two independently-interactive zones: the info zone
   (portal / page / page part) that navigates to the live page, and the edit
   column (settings cog), separated by a divider — each with its own hover. */
.sv-linked-pp-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #eef0f4;
}
.sv-linked-pp-head {
    border-bottom: 1px solid #e8eaf0;
}

/* INFO zone */
.sv-linked-pp-info {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 16px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
}
.sv-linked-pp-info[data-page-url] {
    cursor: pointer;
    transition: background 0.12s;
}
.sv-linked-pp-info[data-page-url]:hover {
    background: #eef1fb;
}
.sv-linked-pp-cell {
    font-size: 13px;
    color: #2c3150;
    word-break: break-word;
}
.sv-linked-pp-cell[data-col="portal"] {
    font-weight: 600;
}
.sv-linked-pp-head .sv-linked-pp-cell {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8b93a8;
}
/* Right chevron at the end of the info zone, revealed on hover. */
.sv-linked-pp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5867dd;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.12s;
}
.sv-linked-pp-info[data-page-url]:hover .sv-linked-pp-arrow {
    opacity: 1;
}

/* EDIT column — separated from the info zone, with its own hover highlight.
   The divider is an inset pseudo-element so it has breathing room top and bottom
   (rather than a full-height border). */
.sv-linked-pp-editcol {
    position: relative;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}
.sv-linked-pp-editcol::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #eef0f4;
}
.sv-linked-pp-editcol-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8b93a8;
}
.sv-linked-pp-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #5867dd;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.sv-linked-pp-edit:hover {
    background: #eef1fb;
    color: #3b49b0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Display-form status bar — replaces the four-button SweetAlert toolbar on
   UnifiedDispFormSubmission.cshtml. Three atomic affordances:
     1. Mark As Read CTA (or quiet "Read by me" label when already read)
     2. Comments count pill + "Add comment" outline button (variant B)
     3. "Read by others" eye+count pill
   Variant: "Right" — single row, right-aligned. Labels on. No legend.
   ───────────────────────────────────────────────────────────────────────── */
.sv-disp-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e3e6ee;
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: 0 1px 0 rgba(31, 35, 48, 0.02);
    /* clear the toolbar above (which sits under a -10px pull) and align the pill's
       left/right edges with the form card, whose .container-fluid insets it 12.5px */
    margin-top: 20px !important;
    margin-left: 6px;
    margin-right: 12.5px;
}

/* Tablet only: a bit narrower than full card width (phone keeps the full width). */
@media (min-width: 415px) and (max-width: 991.98px) {
    .sv-disp-status-bar {
        margin-right: 28px;
    }
}
.sv-disp-status-bar > .sv-disp-status-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Mark As Read CTA — shown when current user has NOT read yet. */
.sv-disp-mark-read-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2c9b4d;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    box-shadow: 0 1px 0 rgba(31, 35, 48, 0.04);
    transition: background 0.15s;
}
.sv-disp-mark-read-cta:hover { background: #1f7a3a; }
.sv-disp-mark-read-cta:disabled { opacity: 0.6; cursor: default; }

/* Quiet "Read by me" indicator — shown when current user HAS read. */
.sv-disp-read-by-me {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: #1f7a3a;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

/* Vertical divider between the mark-read group and the count-pill group. */
.sv-disp-status-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #e3e6ee;
    margin: 0 6px;
}

/* Outline count pill — used for "Comments" and "Read by others". */
.sv-disp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c9cfdb;
    border-radius: 999px;
    background: #fff;
    padding: 4px 10px 4px 8px;
    cursor: pointer;
    font-family: inherit;
    color: #475066;
    transition: border-color 0.15s;
}
.sv-disp-pill:hover { border-color: #9aa2b5; }
.sv-disp-pill-count {
    font-size: 12px;
    font-weight: 700;
    color: #475066;
    min-width: 14px;
    text-align: center;
}
.sv-disp-pill-label {
    font-size: 13px;
    font-weight: 500;
    color: #475066;
}

/* Announcement card variant: when the status bar lives INSIDE an announcement
   card (.announcement-response), the card already provides the surrounding
   background / spacing — drop the white inset, border, shadow so the
   controls float over the card. The existing div.announcement-response rule
   above provides margin-top / radius. */
.announcement-response.sv-disp-status-bar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 4px;
}

/* Icon-only mode for narrow contexts: hide the text labels on the status-bar
   controls when the surrounding page part is 1/3 width (.page-item-wd), or
   the viewport is mobile-sized (media query below). The icons + tooltips
   still convey what each button does. The split-pill's "+" half stays
   visible because it has no text label to hide. The count pills' numbers
   stay visible — only the .sv-disp-pill-label spans are hidden.

   NOTE: the .page-item-wd-compact class added dynamically by layout.js when
   the side panel is open is applied to BOTH 1/3 AND 2/3 page parts, so we
   can't key off it directly — we'd hide labels on 2/3-width page parts too.
   Sticking to .page-item-wd alone correctly limits the icon-only mode to
   1/3-width page parts. */
.page-item-wd .sv-disp-mark-read-cta > span,
.page-item-wd .sv-disp-read-by-me > span,
.page-item-wd .sv-disp-pill-label {
    display: none;
}

/* Tighten paddings around the now-icon-only controls so they don't carry the
   wide horizontal padding that was sized for the text label. */
.page-item-wd .sv-disp-mark-read-cta {
    padding: 7px 9px;
    gap: 0;
}
.page-item-wd .sv-disp-read-by-me {
    padding: 6px 4px;
    gap: 0;
}

@media (max-width: 768px) {
    .sv-disp-mark-read-cta > span,
    .sv-disp-read-by-me > span,
    .sv-disp-pill-label {
        display: none;
    }
    .sv-disp-mark-read-cta { padding: 7px 9px; gap: 0; }
    .sv-disp-read-by-me { padding: 6px 4px; gap: 0; }
}

/* Split pill — variant C of the Comments affordance.
   One rounded outline container with two halves separated by a vertical
   divider. Left half (count + icon + label) opens the slide-out on Comments
   tab. Right half (just a "+") opens the slide-out on Comments tab with the
   composer focused. */
.sv-disp-split-pill {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c9cfdb;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s;
}
.sv-disp-split-pill:hover { border-color: #9aa2b5; }
.sv-disp-split-pill-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    color: #475066;
}
.sv-disp-split-pill-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid #e3e6ee;
    background: transparent;
    padding: 0 10px;
    cursor: pointer;
    font-family: inherit;
    color: #1f7a3a;
    transition: background 0.15s;
}
.sv-disp-split-pill-right:hover { background: #e6f3ea; }

/* ────────────────────────────────────────────────────────────────────────
   List page-part aggregate values — overall totals + per-group footer.
   Scoped under .sv-list-grid (the existing wrapper class used on totals
   <th> cells) so styles cannot leak into other tables.
   ──────────────────────────────────────────────────────────────────────── */

:root {
    --sv-chip-accent: #6d4ce0;
    --sv-chip-accent-ink: #14143b;
    --sv-chip-ink: #1a1d29;
    --sv-chip-ink-3: #7a829c;
    --sv-chip-line: #e7e9f0;
    --sv-chip-neg: #c2410c;
}

/* Pill — used in overall total rows AND group footer rows. */
.sum-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--sv-chip-accent) 24%, white);
    box-shadow: 0 1px 0 rgba(15, 20, 50, 0.02);
    font-size: 12.5px;
    line-height: 1.2;
    transition: border-color .12s, box-shadow .12s;
}

.sum-chip:hover {
    border-color: color-mix(in oklab, var(--sv-chip-accent) 45%, white);
    box-shadow: 0 1px 0 rgba(15, 20, 50, 0.04), 0 0 0 3px color-mix(in oklab, var(--sv-chip-accent) 10%, transparent);
}

.sum-chip-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sv-chip-ink-3);
}

.sum-chip-val {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
    color: var(--sv-chip-ink);
}

.sum-chip-neg .sum-chip-val { color: var(--sv-chip-neg); }

/* Group-row chip — slightly stronger border so it reads as the headline of the group block. */
.chip-row-group .sum-chip {
    border-color: color-mix(in oklab, var(--sv-chip-accent) 32%, white);
}

/* Spinner inside the loading chip — keeps chip size stable while async fetch runs. */
.sum-chip-loading .sum-chip-val .fa-spinner { font-size: 10.5px; }

/* Suppress the table-separate vertical cell borders on the aggregate chip rows
   (top/bottom totals + group footer) so they read as continuous bands. */
tr.chip-row > th,
tr.chip-row > td {
    border-left: 0;
    border-right: 0;
}

/* Overall totals row — tinted background for both top and bottom.
   The top copy lives in <thead> (<th> cells); the bottom copy is rendered into the
   tbody with <td> cells (see SVListGrid.js) so it column-aligns with the data rows. */
tr.chip-row.chip-row-overall {
    background: #fbfbfd;
}
tr.chip-row.chip-row-overall > th.chip-cell,
tr.chip-row.chip-row-overall > td.chip-cell {
    border-bottom: 1px solid #eef0f5;
    color: var(--sv-chip-ink);
    font-weight: normal;
    text-align: left;
}
tr.chip-row.chip-row-overall-bottom > th.chip-cell,
tr.chip-row.chip-row-overall-bottom > td.chip-cell {
    border-bottom: 0;
    border-top: 1px solid var(--sv-chip-line);
}
/* The bottom totals row sits in the tbody with <td> cells, which pick up the
   metronic ".table td" 12px padding. DataTables gives the top row's thead <th>
   cells 18px left/right (table.dataTable thead > tr > th). Match that here so
   the bottom totals row aligns column-for-column with the top totals row.
   (table-separate's first/last-child padding:0 !important still zeroes the
   outer edges, exactly as it does for the thead row.) */
table.dataTable tbody > tr.chip-row-overall-bottom > td {
    padding-left: 0px;
    padding-right: 18px;
}

/* Group footer row — accent-tinted background + borders so the per-group totals visually
   close out the group block. */
tr.chip-row.chip-row-group {
    background: color-mix(in oklab, var(--sv-chip-accent) 5%, white);
    border-top: 1px solid color-mix(in oklab, var(--sv-chip-accent) 18%, white);
    border-bottom: 1px solid color-mix(in oklab, var(--sv-chip-accent) 18%, white);
}
tr.chip-row.chip-row-group > td.chip-cell {
    padding: 8px 6px 8px 0;
}

/* Leading "GROUP TOTALS" caption — uppercase, accent-tinted, sits in the action-column slot. */
.chip-row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sv-chip-accent-ink);
    white-space: nowrap;
    padding-left: 12px;
}

/* ─── group header — restyled label + count chip ────────────────────── */

tr.group.list-group-header.gh-tonal > td.group-header {
    background: color-mix(in oklab, var(--sv-chip-accent) 14%, white);
    color: var(--sv-chip-accent-ink);
    border-top: 1px solid color-mix(in oklab, var(--sv-chip-accent) 22%, white);
    border-bottom: 1px solid color-mix(in oklab, var(--sv-chip-accent) 22%, white);
    padding: 11px 20px !important;
}

tr.group.list-group-header > td.group-header .group-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-chev {
    /* Accent square that *is* the +/- control's outline — the icon itself is a
       plain fa-minus / fa-plus glyph (no fa-*-square), so there's no doubled
       border. Fixed 18x18 box keeps the square stable across the +/- swap and
       lets flex centring sit the glyph dead-centre. */
    background: var(--sv-chip-accent);
    border: 2px solid color-mix(in oklab, var(--sv-chip-accent) 60%, white);
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.group-chev:hover { background: color-mix(in oklab, var(--sv-chip-accent) 72%, white); }
.group-chev i {
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.group-grouped-by {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.group-name {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-left: -4px;
}

.group-count-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    font-size: 11.5px;
    color: inherit;
}
.gh-tonal .group-count-chip {
    background: rgba(255,255,255,0.55);
}
.group-count-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.group-count-unit {
    font-weight: 500;
    opacity: 0.85;
}

/* ============================================================================
   Form action toolbar — mobile & tablet redesign (Option B "Icon + Label").
   Each desktop pill (.sv-add-group: a btn-light-* icon tile + a side label)
   becomes a vertical chip — the same coloured tile with the label beneath.
   Scoped to .sv-mobile-chips so no other toolbar is affected; desktop
   (>= 992px) keeps the existing pill treatment untouched. Reuses the existing
   per-action icons, colours and click handlers — layout/sizing only.
   ============================================================================ */
@media (max-width: 991.98px) {
    /* the chip row */
    .sv-mobile-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin: 0;
    }

    /* pill -> vertical chip: drop the tinted pill background, stack tile + label */
    .sv-mobile-chips .sv-add-group {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: transparent !important; /* removes the bg-primary-o-20 pill */
        width: auto;
        height: auto;
        line-height: 1;
        margin: 0;
        padding: 0;
        gap: 6px;
    }

    /* the coloured tile (the existing btn-light-* square keeps its fill + icon colour) */
    .sv-mobile-chips .sv-add-group .sv-toolbar-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        line-height: 44px;
        padding: 0;
        border-radius: 11px !important; /* ~26% of tile; overrides sv-left/right-rounded */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sv-mobile-chips .sv-add-group .sv-tb-icon {
        font-size: 22px !important; /* ~50% of tile */
    }

    /* the caption beneath the tile */
    .sv-mobile-chips .sv-add-group .sv-toolbar-link {
        display: block;
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        padding: 0;
        margin: 0;
        white-space: nowrap;
    }

    /* Save split-button: keep one visible tile + label; the chevron becomes an
       invisible full-chip overlay so tapping anywhere opens the dropdown (which
       carries Save / Save and add new / Save and edit on mobile). The dropdown
       menu is already position:absolute so it stays out of the chip's flow. */
    .sv-mobile-chips #formSubSaveUpper {
        position: relative;
    }
    .sv-mobile-chips #formSubSaveUpper .sv-right-rounded {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        border-radius: 11px !important;
        opacity: 0;
        z-index: 3;
    }

    /* band cosmetics: white surface, hairline divider, soft elevation (no sticky) */
    #kt_subheader:has(.sv-mobile-chips) {
        background: #fff;
        border-bottom: 1px solid #ECECF3;
        box-shadow: 0 7px 14px -10px rgba(48, 24, 92, 0.30);
    }

    /* Form card: give it a top gap from the toolbar/notice/status bar above (the band
       carries a -10px pull). Covers both the View (.printForm) and Edit forms. */
    .form-content {
        margin-top: 20px !important;
    }
}

/* Phone (< 768px): title on its own line, chips full-width and evenly spaced. */
@media (max-width: 767.98px) {
    #kt_subheader:has(.sv-mobile-chips) > .container,
    #kt_subheader:has(.sv-mobile-chips) > .container-fluid {
        flex-wrap: wrap !important; /* let the toolbar drop below the title */
        padding-right: 24px; /* keep the right-most chip off the edge */
        padding-left: 24px; /* balance with the right so the chips aren't left-heavy */
    }

    /* trim ~10px of the gap below the chip row (pulls the following content up
       without touching its own — out-of-scope — spacing) */
    #kt_subheader:has(.sv-mobile-chips) {
        margin-bottom: -10px;
    }

    /* the toolbar column takes its own full-width row under the title */
    #kt_subheader:has(.sv-mobile-chips) > .container > .d-flex.align-items-center:last-child,
    #kt_subheader:has(.sv-mobile-chips) > .container-fluid > .d-flex.align-items-center:last-child {
        flex: 1 0 100%;
        width: 100%;
        margin-top: 0;
    }

    /* breathing room around the stacked title + mode badge */
    #kt_subheader:has(.sv-mobile-chips) > .container > div:first-child,
    #kt_subheader:has(.sv-mobile-chips) > .container-fluid > div:first-child {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* the vertical separator between title and toolbar is redundant when stacked */
    #kt_subheader:has(.sv-mobile-chips) .subheader-separator-ver {
        display: none;
    }

    /* the view toolbar nests the row inside a form-group — let it fill the row */
    #kt_subheader:has(.sv-mobile-chips) .form-group {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }

    .sv-mobile-chips {
        width: 100%;
        justify-content: space-between;
        gap: 10px 8px;
    }
}

/* Tablet (>= 768px): title left, chips right-aligned, larger tiles. */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* breathing room above/below the inline title + chip row (the band is pulled up
       by a -18px margin at this width, leaving the chips cramped to the top) */
    #kt_subheader:has(.sv-mobile-chips) {
        padding-top: 28px !important;
        padding-bottom: 16px !important;
    }

    /* keep the right-aligned chips off the band's right edge */
    #kt_subheader:has(.sv-mobile-chips) > .container,
    #kt_subheader:has(.sv-mobile-chips) > .container-fluid {
        padding-right: 6px;
    }

    .sv-mobile-chips {
        justify-content: flex-end;
        gap: 14px;
    }

    .sv-mobile-chips .sv-add-group .sv-toolbar-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        line-height: 48px;
        border-radius: 12px !important;
    }

    .sv-mobile-chips .sv-add-group .sv-tb-icon {
        font-size: 24px !important;
    }

    .sv-mobile-chips .sv-add-group .sv-toolbar-link {
        font-size: 14px;
    }
}

/* Save chip "disabled" state (form not yet changed). Driven by the .sv-save-disabled
   class (toggled off by enableFormSubmissionSaveButton) instead of inline styles, so
   it can present differently per viewport. */

/* Desktop: keep the existing grey, inert pill exactly as before. */
@media (min-width: 992px) {
    #formSubSaveUpper.sv-save-disabled {
        pointer-events: none;
        background-color: lightgray !important;
    }

    #formSubSaveUpper.sv-save-disabled .sv-toolbar-icon {
        background-color: darkgray !important;
    }
}

/* Mobile/tablet: show the real (blue) Save chip faded rather than greyed, and keep it
   tappable so a tap can explain there's nothing to save yet. */
@media (max-width: 991.98px) {
    .sv-mobile-chips #formSubSaveUpper.sv-save-disabled {
        opacity: 0.45;
        pointer-events: auto;
    }
}

/* "Marked as read" edit-warning note ships with a negative bottom margin for the
   desktop layout; on phone & tablet give it some breathing room below instead. */
@media (max-width: 991.98px) {
    .sv-marked-as-read-note {
        margin-bottom: 10px !important;
    }
}

/* Tablet/phone: keep the left aside off-canvas so it doesn't reserve a left column.
   When the aside is configured "static" it otherwise stays in flow at these widths
   (a static rule out-specifies Metronic's mobile off-canvas rule). This forces the
   intended off-canvas behaviour; the hamburger still slides it in. */
@media (max-width: 991.98px) {
    #kt_aside.aside {
        position: fixed !important;
        left: -295px;
    }

    #kt_aside.aside.aside-on {
        left: 0 !important;
    }

    /* The aside-fixed layout JS sets an inline padding-left on the wrapper to make
       room for the fixed aside; it isn't cleared at mobile/tablet widths where the
       aside is off-canvas, leaving an empty left column. Reclaim that space. */
    #kt_wrapper {
        padding-left: 0 !important;
    }
}

/* Mobile/tablet top header branding: the tenant name (<h5 class="sv-org-name">) is
   block-level, so it dropped below the logo and squished. Lay the logo + name out
   on one inline row instead. (#kt_header_mobile only renders below the desktop
   breakpoint, so this never affects the desktop aside brand.) */
#kt_header_mobile > a {
    display: flex;
    align-items: center;
    /* grow to fill the space up to the right-side menu icons, so the title can be
       as long as possible; the icons keep their own size and never get pushed */
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 12px;
}

#kt_header_mobile .sv-org-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Generic static status badge — colored circle with a white icon centered,
   no hover interaction. Background color is set per-use via inline style. */
.sv-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    vertical-align: middle;
}

/* .dataTables_wrapper td i sets a global icon color for all DataTables cells;
   !important is required to win against that higher-specificity rule. */
.sv-icon-badge i {
    font-size: 12px;
    line-height: 1;
    color: #fff !important;
}

/* Anonymous-link copy pill/badge — collapses to just an icon, expands on hover
   (or briefly after a click, via .sv-anon-force-expand) to reveal the label.
   Used on the Forms list; not tied to that page, so it lives here for reuse.
   width:auto + min/max-width (rather than a fixed px width) lets the expanded
   state size itself to whatever the localized label actually needs, instead
   of clipping longer translations at a hardcoded English-sized width — both
   states define max-width (not width) so the transition can still animate
   smoothly between two plain lengths. */
.sv-anon-pill {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: auto;
    min-width: 22px;
    max-width: 22px;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 11px;
    background: #7c5cbf;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: max-width 0.16s ease, background 0.16s ease, padding 0.16s ease;
    vertical-align: middle;
}

.sv-anon-pill:hover,
.sv-anon-pill.sv-anon-force-expand {
    max-width: 320px;
    padding: 0 10px;
    background: #5f3fa0;
    justify-content: flex-start;
}

/* .dataTables_wrapper td i sets a global icon color for all DataTables cells;
   !important is required to win against that higher-specificity rule. */
.sv-anon-pill i {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    color: #fff !important;
}

/* max-width/margin-left collapse to 0 so this invisible text has no layout
   footprint while hidden — otherwise justify-content:center on the 22px
   collapsed pill centers the icon+text as a group, pushing the icon itself
   outside the visible circle (and overflow:hidden then clips it entirely). */
.sv-anon-pill .sv-anon-pill-text {
    font-size: 12px;
    font-weight: 600;
    margin-left: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.1s ease, max-width 0.16s ease, margin-left 0.16s ease;
}

.sv-anon-pill:hover .sv-anon-pill-text,
.sv-anon-pill.sv-anon-force-expand .sv-anon-pill-text {
    opacity: 1;
    max-width: 280px;
    margin-left: 6px;
}

/* Multi-version variant: badge stays a static circle; hovering reveals a
   dropdown-style panel listing one link per anonymous form version. */
.sv-anon-multi-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.sv-anon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #7c5cbf;
    color: #fff;
    cursor: pointer;
}

.sv-anon-badge i {
    font-size: 12px;
    line-height: 1;
    color: #fff !important;
}

/* Overlaps the bottom ~1/4 of the badge circle (rather than sitting flush
   against it) so there's some forgiveness for a diagonal mouse path down
   into the panel, not just a perfectly straight one. */
.sv-anon-panel {
    display: none;
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e6e6e2;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    padding: 4px 0;
}

.sv-anon-multi-wrap:hover .sv-anon-panel {
    display: block;
}

.sv-anon-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: #4a4a45;
}

.sv-anon-panel-item:hover {
    background: #f5f0fa;
}

.sv-anon-panel-item i {
    font-size: 12px;
    color: #7c5cbf;
}

.sv-badge {
    display: inline-block;
    padding: 0.5em 0.75em;
    font-size: 85%;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.42rem;
}

/*fixed does not mean "not broken", it means "fixed font size and colour"*/
.sv-badge.sv-badge-fixed {
    font-size: 11px;
    color: #3699FF;
}