/* 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;
}

.dataTable .svListGrid-dropdown {
    margin-right: 10px;
}

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: 8px !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;*/
}

#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;
}

.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;
}

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#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,
#advSettingsLink {
    color: var(--indigo);
}

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

#addToSite {
    width: 160px;
}

.field-advanced-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;
}

.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 10px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.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 10px;
    margin-bottom: 0; /* was 20px; */
    border-radius: 3px;
}

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;
}
div .sv-notification-header {
    padding: 5px 10px;
    margin-bottom: 20px;
    border-radius: 3px;
}
/* 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;
}
/* Only colour the checkmark on a disabled checkbox when it's actually checked. Without the
   :checked scope this painted a grey check on every disabled checkbox-outline, which Metronic's
   hover state then revealed — making a disabled *unchecked* box (e.g. the guest-role checkbox on
   a protected role) look ticked on mouseover. */
.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);
}

.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: -8px;
    }

    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%;
    }

    #btnPrint,
    .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 */
}

/* 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; }

/* ─────────────────────────────────────────────────────────────────────────
   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;
    border-top: 1px solid #e8eaf0;
    border-bottom: 1px solid #e8eaf0;
    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;
}

.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;
}
.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;
}

/* ─────────────────────────────────────────────────────────────────────────
   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);
}
.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; }