@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Signika:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css?family=Roboto:700');

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat-Regular'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat-Bold'), url(https://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcgFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}


:root {
    --theme-color-1: #da773e;
    --theme-color-2: #00CC00;
    --theme-color-3: #4D8AC3;
    --theme-color-4: #FF0000;
    --theme-color-5: #FFCA28;
    --theme-color-6: #333333;
    --theme-color-7: #979797;
    --theme-color-8: #f7f7f7;
    --theme-color-9: #f6f7fc;
    --theme-color-10: #f8f9fa;
    --theme-color-11: #e9e0ff;
    --theme-color-12: #7f92b0;
    --theme-color-black: #000000;
    --theme-color-white: #FFFFFF;

    --theme-font-1: 12px;
    --theme-font-2: 14px;
    --theme-font-3: 16px;
    --theme-font-4: 18px;
    --theme-font-5: 20px;
    --theme-font-6: 24px;
    --theme-font-7: 32px;
    --theme-font-8: 48px;
    --theme-font-9: 60px;
}

body {
    font-size: var(--theme-font-3);
    font-family: 'Open Sans', sans-serif, Arial, sans-serif;
    line-height: 1.5;
    color: var(--theme-color-6);
    background-color: var(--theme-color-white);
}

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
}

b {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #4f4f4f;
}

a {
    text-decoration: none;
    color: var(--theme-color-1);
    border-bottom: solid 1px transparent;
}

a:hover {
    color: var(--theme-color-1);
    border-bottom: solid 1px transparent;
    text-decoration: none !Important;
}

h1, h2, h3 {
    font-weight: normal;
    color: var(--theme-color-black);
    text-transform: capitalize;
}

h1 {
    font-weight: 700;
    font-family: 'Signika', sans-serif;
    font-size: var(--theme-font-8);
    text-align: center;
    margin: 25px 0 30px;
    color: var(--theme-color-6);
}

h2 {
    font-size: var(--theme-font-6);
    font-family: 'Patua One', cursive;
    color: var(--theme-color-6) !important;
    font-weight: 300;
}

h3 {
    font-size: var(--theme-font-3);
    font-family: 'Signika', sans-serif;
}

h4 {
    font-family: 'Signika', sans-serif;
}

label.upload {
    background-color: var(--theme-color-1) !important;
    color: var(--theme-color-white);
    border-radius: 3px;
}

div.expandable {
    background: var(--theme-color-8);
    border-radius: 0 0 6px 6px;
    padding: 25px 20px;
}

#wrapper,
.managementOverview {
    background: var(--theme-color-white);
}

.managementOverview .medium-icon {
    font-size: 1.2rem !Important;
    color: #96826e;
}

.small-text {
    font-size: 0.8rem !Important;
}

/* ----------- Color Rule Consolidation --------------------------------------------------------------------- */

.password-good i,
.dynamic-new-action i,
.contact h1,
#exportReport:hover,
.font-orange,
.selected-button,
.page-link,
.page-link:hover,
.require-action-total,
.backLink a,
.dashboard-report-table i,
i.fa-sort,
.self-report-dates i {
    color: var(--theme-color-1) !important;
}

.module-status i {
    color: var(--theme-color-1);
}

.nav_sublinks:hover,
.section_orange {
    background: var(--theme-color-1);
}

#accept-map-marker,
#accept-map-marker i,
.font-brown,
.password-strong i,
.green,
.fa-check-circle,
.progress-bar {
    color: var(--theme-color-2) !important;
}

.progress-bar {
    background-color: var(--theme-color-1) !important;
}

.file-man-box-1 .file-download-1:hover,
#pp-optin-div a {
    color: var(--theme-color-3) !important;
}

.pp-expandable {
    background-color: var(--theme-color-11) !important;
}

.priority-highlight {
    background-color: rgba(150, 130, 110, 0.14) !important;
}

.priority-highlight-gutter {
    position: relative;
    padding-left: 1.75rem !important;
}

.priority-highlight-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color-1, #da773e);
}

.validations-panel-card {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 0.55rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.validations-layout {
    --validations-header-offset: 280px;
    min-height: calc(100vh - var(--validations-header-offset));
    min-height: calc(100svh - var(--validations-header-offset));
    padding-bottom: 2rem;
}

.validations-table-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.themed-scrollbar,
.validations-table-scroll,
.module-table-scroll,
.modal {
    scrollbar-width: thin;
    scrollbar-color: #ebedf0 transparent;
}

.themed-scrollbar::-webkit-scrollbar,
.validations-table-scroll::-webkit-scrollbar,
.module-table-scroll::-webkit-scrollbar,
.modal::-webkit-scrollbar {
    width: 6px;
}

.themed-scrollbar::-webkit-scrollbar-track,
.validations-table-scroll::-webkit-scrollbar-track,
.module-table-scroll::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
    background: transparent;
}

.themed-scrollbar::-webkit-scrollbar-thumb,
.validations-table-scroll::-webkit-scrollbar-thumb,
.module-table-scroll::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
    background-color: #ebedf0;
    border-radius: 999px;
}

.themed-scrollbar::-webkit-scrollbar-thumb:hover,
.validations-table-scroll::-webkit-scrollbar-thumb:hover,
.module-table-scroll::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
    background-color: #e2e5e9;
}

.module-table-panel-card {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 0.55rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.module-table-layout {
    --module-table-header-offset: 280px;
    min-height: calc(100vh - var(--module-table-header-offset));
    min-height: calc(100svh - var(--module-table-header-offset));
    padding-bottom: 2rem;
}

.module-table-layout--dynamic-forms {
    --module-table-header-offset: 320px;
}

.module-table-layout--signs-v2 {
    --module-table-header-offset: 150px;
}

.module-table-layout--pcn-admin {
    --module-table-header-offset: 180px;
}

.module-table-layout--appeals-admin {
    --module-table-header-offset: 180px;
}

.module-table-layout--pcn-form {
    --module-table-header-offset: 180px;
}

.module-table-layout--self-ticketing {
    --module-table-header-offset: 150px;
}

.module-table-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.module-table-panel-card .pagination.grid-tile,
.validations-panel-card .pagination.grid-tile {
    border: none;
    box-shadow: none;
    background: transparent !important;
    border-radius: 0;
    padding-left: 0 !important;
}

.red,
.password-weak i,
#reject-map-marker,
#reject-map-marker i,
.text-red,
.font-red {
    color: var(--theme-color-4) !important;
}

#notificationNavCounter .nav-bar-notifications:hover,
.new-large-notification:hover {
    background: var(--theme-color-4) !important;
}

.ppAwardsLink,
.managementOverview .reportLine h3,
.font-grey,
.modal a.row.data.read {
    color: var(--theme-color-6) !important;
}

.modalClose i,
.setting.greyed h3,
.icon-grey {
    color: var(--theme-color-7) !important;
}

.table-div::-webkit-scrollbar-thumb,
.table-div::-webkit-scrollbar-thumb:hover {
    background: var(--theme-color-7) !important;
}

.system-pagination button:hover,
.row.pages a:hover,
#standards_table tr:nth-child(even),
.report-table .data-table tr:nth-child(even),
.statistic-tile-grey,
.setting:hover,
.greyBg,
.section .handle,
.section_grey,
.managementOverview .piechart-box,
.managementOverview .stat-boxes,
.grey-accent-box,
.table-div::-webkit-scrollbar-track,
.fieldRow .SumoSelect,
.side input[type="text"]:hover,
.greyOut:hover,
.settings-panel:hover,
.setting,
.quickViews > div,
.file-man-box-1 {
    background: #f8f8f8;
}

div.jHtmlArea iframe {
    background: var(--theme-color-9) !important;
}

.black,
.dateRow .removeDate:hover,
.font-black,
.threequarter .SumoSelect > .CaptionCont > span.placeholder,
.highlighted {
    color: var(--theme-color-black) !important;
}

.blackBg,
.blueBg:hover,
a.print:hover,
div.print:hover .icon {
    background: var(--theme-color-black) !important;
}

a.notify.dim:hover,
a.row.data:hover h3,
li.sortable-dragging a,
.mobile-report-wrapper a:hover .fa-envelope,
.button_link,
#searchButton i,
label i,
.font-white,
.menu .btn,
.system-pagination button a,
#nhs-parking-div h2 {
    color: var(--theme-color-white) !important;
}

.row.pages p,
.modal form,
.card-box-1 {
    background: var(--theme-color-white);
}

/* ----------- Font Size Rule Consolidation --------------------------------------------------------------------- */

.fieldRow label span,
.fieldRow div.charsleft, .fieldRow div.wordsleft,
.small,
.markermessage,
.smaller-icon,
.fa-download {
    font-size: var(--theme-font-1) !important;
}

.fieldRow label,
.lineLegend,
table,
.selfticketermessage,
.member_tiles a,
.member-awards,
.member-awards a,
#map-note-div,
#mapTip,
.small-text,
.small-icon-list,
table.dataTable,
table.dataTable th,
table.dataTable td,
form label.upload,
.table-div table,
.stripe-table td,
.btn,
.SumoSelect > .optWrapper.open {
    font-size: var(--theme-font-2);
}

html,
.modal h4,
.SlectBox,
.ppValidateText,
.report-list,
.menu-section h3,
.menu h3,
.settings-panel h2,
.nav-media-links i,
.small-icon {
    font-size: var(--theme-font-3);
}

#nhs-parking-div p,
.markermessage span,
.no-records h3 {
    font-size: var(--theme-font-4);
}

.contact h2,
.managementOverview .report-icon i,
.main_text,
.medium-icon.fas.fa-download {
    font-size: var(--theme-font-5) !important;
}

.post_heading,
.infowindow-heading,
.medium-icon,
.statistics i {
    font-size: var(--theme-font-6);
}

.siteForm .buttonRow i,
.op-stats-download-div i {
    font-size: var(--theme-font-7);
}

.large-icon,
.no-records i {
    font-size: var(--theme-font-8);
}

/*------------- Font Weight Bold Rule Consolidation --------------------------------------------------*/

.grid-tile .headings div,
.lineLegend span {
    font-weight: bold;
}

/* ----------- Text-Align Center Rule Consolidation --------------------------------------------------- */

.findFrame .searching,
#users .searching,
#pcns .searching,
#appeals .searching,
#sites .searching,
#searchList .searching,
#filenames.replace a,
.modalLoad,
.dashKey,
.txtCenter,
#aosmembers .searching,
#corporatemembers .searching,
#aosmembers .column.quarter,
#corporatemembers .column.quarter,
.none-available,
.sublinks,
.section_advert,
#delete-blog,
.center_text,
#auditOptions .button,
.ppValidateDescription,
.managementOverview .report-icon,
.op-stats-download-div,
.button-form-row,
.file-man-box-1 .file-img-box-1 {
    text-align: center;
}

/* ----------- Text-Align Justify Rule Consolidation --------------------------------------------------- */

.main_text,
.paragraph,
#auditOptions span {
    text-align: justify;
}

/* ----------- Text-Align Left Rule Consolidation ----------------------------------------------------------------- */

.side input[type="submit"].button.full,
.align_left,
.report-content .twothirds,
.report-content .tenth,
.review-stats h3,
#password-strength-res,
.contact h2,
#auditOptions h2,
#nhs-parking-div h2,
#reportList a,
.display-box th,
.display-box td,
.title-background h1,
.list-upload-item,
.modal {
    text-align: left;
}

/* ----------- Cursor Pointer Rule Consolidation ----------------------------------------------------------------- */

.dm-file-name,
.confirmDelete,
.modalClose,
.deletecompany,
#addcompany,
.fa-undo .fa-times,
#mailing-list .fa-plus,
#mailing-list .fa-minus-circle,
.cursor-pointer,
.interactive,
.pagination .page-link:hover {
    cursor: pointer !important;
}

/* ----------- Border None Rule Consolidation --------------------------------------------------------------------- */

#aosmembers .row.data:first-of-type,
#corporatemembers a.row.data:first-of-type,
.member_tiles,
.table thead th,
.table th,
.table td,
.border-none,
.dm-file-name a:hover,
div.jHtmlArea,
.SumoSelect.disabled > .CaptionCont {
    border: none !important;
}

/* ----------- Border Bottom None Rule Consolidation ------------------------------------------------------- */

.dynamic-info-btn:hover,
.report-content a,
.report-content a:hover,
.managementOverview a:hover,
#location-info-span a:hover,
.border-bottom-none,
.system-pagination button a,
#reportList a,
.display-box th,
.display-box td,
.optWrapper input[type=text]:hover,
.optWrapper input[type=text]:focus {
    border-bottom: none;
}

/* ----------- Border-Radius 3px Rule Consolidation ------------------------------------------------------------- */

#mapSide .filter,
#mapSide #timeframeselect,
#searchButton,
#clearButton,
.paginationBtn,
.card-box-1 {
    border-radius: 3px;
}

/* ----------- Border-Radius 5px Rule Consolidation ------------------------------------------------------------- */

.fieldRow input[type="number"],
.fieldRow input[type="number"],
.fieldRow textarea,
.SumoSelect > .CaptionCont,
#ipc-table,
.setting,
.quickViews > div,
.file-man-box-1 {
    border-radius: 5px;
}

/* ----------- Border-Top Rule Consolidation --------------------------------------------------------------------- */

.row.data,
.side .filenames > div, .operatorUser,
.dashSection,
.blog .post {
    border-top: 1px dotted var(--theme-color-8);
}

/* ----------- Background None Rule Consolidation ---------------------------------------------------------------- */

#childUpload form,
form,
.table th,
#ipc-table tr {
    background: none;
}

/* ----------- Text-Decoration Underline Rule Consolidation -------------------------------------------------- */

.dashKey a:hover,
#footer .footerContent a:hover,
#cookie-banner a {
    text-decoration: underline;
}

/* ----------- List Style None Rule Consolidation -------------------------------------------------- */

.pagination li,
#showReport .pagination li,
.system-pagination li {
    list-style: none !important;
}

/* ----------- HEADER --------------------------------------------------------------------- */

#userHeader {
    font-size: var(--theme-font-1);
    background: var(--theme-color-1);
    color: var(--theme-color-white);
}

#userHeader a {
    color: var(--theme-color-white);
    cursor: pointer;
    border: none;
}

.dropMenu {
    border-radius: 0 0 5px 5px;
    background: var(--theme-color-1);
}

#userHeader .right .activateMenu:hover,
#userHeader .right .dropMenu a:hover,
#userHeader .right a:hover {
    background: var(--theme-color-1);
    border-radius: 5px;
}

#header {
    text-align: center;
    background: var(--theme-color-white);
}

.headerImage {
    background: var(--theme-color-6) url('/resources/welcomeImage.jpg');
    color: var(--theme-color-white);
    font-weight: bold;
    font-size: var(--theme-font-3);
}

.headerImage h1 {
    font-size: var(--theme-font-8);
    line-height: 1em;
    color: var(--theme-color-white);
}

/* ----------- CONTENT LAYOUT --------------------------------------------------------------------- */

.side {
    background: var(--theme-color-white);
    border: 1px solid var(--theme-color-8);
    border-radius: 10px;
}

.side.action img, img.action {
    filter: contrast(75%);
}

.blurb {
    color: var(--theme-color-3);
    font-size: var(--theme-font-6);
    font-weight: bold;
}

/* ----------- TABLE --------------------------------------------------------------------- */

.row.header,
.row.headings {
    font-weight: bold;
    border-bottom: 1px dashed var(--theme-color-white);
}

a.row.data:hover {
    background: var(--theme-color-1);
    color: var(--theme-color-white);
    border-bottom: 1px solid transparent;
}

.row.pages a, .row.pages p, .search-page {
    color: var(--theme-color-6);
    background-color: var(--theme-color-white);
    border: 1px solid var(--theme-color-8);
    border-radius: 3px;
}

.bigNumber, .unreadNotifications {
    font-size: var(--theme-font-8);
    font-weight: bold;
}

/* ----------- FORMS --------------------------------------------------------------------- */

form {
    border-radius: 10px; /* unique rule */
}

.fieldRow input[type="text"], .fieldRow input[type="password"], .fieldRow select, textarea, select {
    font-family: inherit;
    font-size: var(--theme-font-2);
    background: var(--theme-color-9);
    border: none;
    border-radius: 5px;
    border-bottom: 3px solid var(--theme-color-white);
}

.fieldRow input[type="number"] {
    font-family: inherit;
    font-size: var(--theme-font-2);
    background: var(--theme-color-8);
    border: none;
    border-radius: 5px;
    border-bottom: 3px solid var(--theme-color-white);
}

.fieldRow textarea {
    font-family: inherit;
}

.fieldRow input[readonly="readonly"],
.fieldRow textarea[readonly="readonly"],
.fieldRow select[disabled="disabled"] {
    color: var(--theme-color-6);
    background: var(--theme-color-8);
}

.fieldRow .date + span,
.fieldRow .time + span {
    font-size: var(--theme-font-1);
    color: var(--theme-color-6);
}

.side b {
    color: var(--theme-color-6);
    font-family: 'Signika', sans-serif;
}

.side select {
    background: var(--theme-color-8) !important;
    border: none;
    border-radius: 5px;
    border-bottom: 3px solid var(--theme-color-white);
}

.side select:hover {
    background: var(--theme-color-8) !important;
    cursor: pointer;
}

.side input[type="text"] {
    background: var(--theme-color-8) !important;
    border: none;
    border-radius: 5px;
    border-bottom: 3px solid var(--theme-color-white);
}

/* File Upload Form / Button ------------------------------------------------------------------------------------ */

form label.upload {
    font-size: var(--theme-font-3);
    text-align: center;
    color: var(--theme-color-white);
    cursor: pointer;
}

.side form label.upload {
    font-weight: 300;
}

/* File Upload List --------------------------------------------------------------------------------------------- */
.filenames > div,
.operatorUser {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.upload-panel {
    background: var(--theme-color-9);
}

/* ----------- BUTTONS --------------------------------------------------------------------- */

.button.disabled {
    cursor: default;
}

.button.addemail,
.button.adduser,
.button.copy,
.button.email,
.button.history,
.button.print,
.button.delete {
    background-position: 98% 3px;
    background-repeat: no-repeat;
}

/* ----------- MODALS --------------------------------------------------------------------- */

/* A light grey veil, so the page fades back and the white pop-up stands out */
.modalCover {
    background: rgba(240, 240, 240, 0.7);
}

/* A soft shadow lifts the pop-up off the light backdrop */
.modalCover .modal {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}

/* Keeps the scrollbar's space while a pop-up locks scrolling, so the page doesn't shift; a thin bar on a clear track */
html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #dcdfe3 transparent;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background-color: #dcdfe3;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #c9ccd1;
}

/* Bootstrap pop-ups would add that space again as padding */
body.modal-open {
    padding-right: 0 !important;
}

/* The empty scrollbar strip takes the backdrop's colour while a pop-up is open */
html:has(> body[style*="overflow: hidden"]) {
    background-color: #f5f5f5;
}

html:has(> body.modal-open) {
    background-color: #808080;
}

/* Scrolling inside a pop-up stops at its edge rather than moving the page behind */
.modalCover,
.modalCover .modal {
    overscroll-behavior: contain;
}

/* A closing pop-up softens slightly as it fades out (closeModal() in js/modal.js) */
@media (prefers-reduced-motion: no-preference) {
    .modal.modal-closing {
        filter: blur(2px);
        transition: filter 0.2s ease-out;
    }
}

.modal span.error {
    color: var(--theme-color-4);
    font-weight: bold;
}

.modal .clear {
    border-top: 1px solid var(--theme-color-8);
}

.bootstrap-modal .modal-body p,
.modal.bootstrap-modal .modal-body p {
    font-size: 0.9rem;
}

/* ----------- SETTINGS PAGE -------------------------------------------------------------- */

.setting img {
    filter: invert(48%) saturate(99%) hue-rotate(691deg) brightness(100%);
}

.setting div {
    font-size: var(--theme-font-2);
    color: var(--theme-color-6);
}

.setting.greyed {
    background: var(--theme-color-8);
    color: var(--theme-color-8);
}

.setting.greyed img {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/* ----------- FAQS ----------------------------------------------------------------------- */

.faqs h3 {
    cursor: pointer;
    background-image: url('/resources/up.png');
    background-repeat: no-repeat;
}

/* ----------- FOOTER --------------------------------------------------------------------- */

/* Room between every page's last section and the footer line */
#footer {
    overflow: visible;
    margin-top: 40px;
}

/* Fallback look; the brand footer's own <style> (brand settings) sets the live colours */
#footer .footerContent {
    font-size: var(--theme-font-1);
    text-transform: none;
    text-align: left;
    float: none;
    margin: 0;
    padding: 64px 0 24px !important; /* beats the inline padding in index.php */
    min-height: 220px;
    background: var(--theme-color-9);
    border-top: 1px solid var(--theme-color-1);
}

#footer .footerContent a:first-of-type {
    border-left: 0;
}

#footer .footerContent a:last-of-type {
    padding: 0;
}

#footer h3, #footer a, #footer p {
    color: var(--theme-color-6);
}

#footer a:hover {
    color: var(--theme-color-1);
    text-decoration: none !important;
    border-bottom: none;
}

ul li:last-of-type {
    margin: 0;
}

#footer .footerContent a {
    padding: 0 !important;
}

.footer_links {
    padding: 0;
}

.footer_links li {
    margin: 0 0 10px;
    list-style-type: none;
}

.footer_links li:last-of-type {
    margin: 0 !important;
}

.footer_logos {
    width: 55%;
    display: block;
}

/* ----------- RANDOM --------------------------------------------------------------------- */

.blueBg {
    background: var(--theme-color-3);
    color: var(--theme-color-white);
}

.greyOut {
    background: var(--theme-color-8) !important;
    color: var(--theme-color-white) !important;
}

a.filelink.greyOut {
    background: none;
    color: var(--theme-color-3) !important;
    text-decoration: line-through;
}

ul li {
    list-style-type: disc;
}

/* Accordion header: grey with a chevron on the right that turns orange when open */
h2.expandable {
    position: relative;
    font-size: var(--theme-font-3);
    color: var(--theme-color-7) !important;
    cursor: pointer;
    background-color: var(--theme-color-9);
    border-radius: 6px;
    padding: 8px 40px 8px 15px;
    font-family: 'Signika', sans-serif;
    font-weight: 500;
}

h2.expandable::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--theme-color-7);
    border-bottom: 2px solid var(--theme-color-7);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

h2.expandable.selected {
    border-radius: 6px 6px 0 0;
}

h2.expandable.selected::after {
    border-color: var(--theme-color-1);
    transform: translateY(-30%) rotate(-135deg);
}

/* Sections that are always open (e.g. the motorist's own appeal) can't be closed, so no chevron */
h2.expandable:has(+ div.expandable.force-expanded) {
    border-radius: 6px 6px 0 0;
    cursor: default;
}

h2.expandable:has(+ div.expandable.force-expanded)::after {
    content: none;
}

/* --- Permissions list (user and group permissions pages) --- */

.permission-list div.expandable .row.data {
    background: none;
    border-radius: 0;
    border-top: 1px solid rgb(0 0 0 / 5%);
    margin: 0;
    padding: 0;
}

.permission-list div.expandable .row.data:first-child {
    border-top: none;
}

.permission-list .permission-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 6px;
    border-radius: 4px;
    cursor: pointer;
}

.permission-list .permission-option:hover {
    background: var(--theme-color-9);
}

.permission-list .permission-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--theme-color-1);
    cursor: pointer;
}

/* Key view (canViewPermissionKey): description column lines up with the clickable row */
.permission-list .row.data .column.twothirds {
    padding: 10px 6px;
}

a.print,
div.print .icon {
    background: var(--theme-color-8);
    border-radius: 4px;
}

div.print {
    background-color: var(--theme-color-1);
    color: var(--theme-color-white);
    cursor: pointer;
    border-radius: 5px;
    font-size:0.9rem;
}

.expandAll.print {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-family: 'Signika', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.checkin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    color: var(--theme-color-1);
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    font-size: var(--theme-font-2);
    text-decoration: none;
}

.checkin-toggle:hover {
    text-decoration: underline;
}

.checkin-list {
    margin-top: 15px;
}

.checkin-entry {
    background: var(--theme-color-10);
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
}

.checkin-entry-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.checkin-date {
    font-family: 'Signika', sans-serif;
    font-weight: 600;
    font-size: var(--theme-font-3);
    color: var(--theme-color-6);
}

.checkin-separator {
    color: var(--theme-color-7);
}

.checkin-logged-by {
    color: var(--theme-color-7);
    font-size: var(--theme-font-1);
}

.checkin-context-pill {
    display: inline-block;
    background: rgba(151, 151, 151, 0.16);
    color: var(--theme-color-7);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: var(--theme-font-1);
}

.checkin-notes {
    margin: 0 0 6px;
    font-size: var(--theme-font-2);
    color: var(--theme-color-6);
}

.checkin-next {
    margin: 0;
    font-size: var(--theme-font-1);
    color: var(--theme-color-7);
}

.checkin-entry > :last-child {
    margin-bottom: 0;
}

.checkin-empty {
    color: var(--theme-color-7);
}

.expandAll.print:hover {
    background-color: #d16110;
}

.expandAll.print img {
    display: block;
    margin: 0;
}

.statuscircle {
    margin: 3px 8px 0 0;
    border-radius: 10px;
}

.statuscircle.green {
    background: var(--theme-color-2) url('/resources/white_tick.png') no-repeat;
}

.statuscircle.amber {
    background: var(--theme-color-5) url('/resources/white_question.png') no-repeat;
}

.statuscircle.red {
    background: var(--theme-color-4) url('/resources/white_cross.png') no-repeat;
}

.statuscircle.download {
    background: var(--theme-color-3) url('/resources/white_download.png') no-repeat;
}

.statuscircle.awaiting.red {
    background: var(--theme-color-4) url('/resources/white_awaiting.png') no-repeat;
}

.statuscircle.awaiting {
    background: var(--theme-color-3) url('/resources/white_awaiting.png') no-repeat;
}

.statuscircle.info {
    background: var(--theme-color-3) url('/resources/white_info.png') no-repeat;
}

.nocut {
    white-space: normal !important;
}

.sortable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

span.handle {
    cursor: n-resize; /* Unique rule */
}

li.sortable-dragging {
    background: var(--theme-color-3);
    color: var(--theme-color-white);
}

.article pre {
    background: var(--theme-color-8);
    border: 1px solid var(--theme-color-8);
}

.section.editable,
.article img.full {
    border: 1px dotted var(--theme-color-8);
}

.alphabetFilter a {
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--theme-color-8);
    border-left: none;
    text-align: center;
    text-transform: uppercase;
}

.alphabetFilter a:first-of-type {
    border-left: 1px solid var(--theme-color-8); /* Unique rule */
}

.alphabetFilter a.selected {
    color: var(--theme-color-black);
    border: 1px solid var(--theme-color-black);
    border-bottom: none;
}

.dateRow .removeDate {
    cursor: pointer;
    color: var(--theme-color-3);
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
}

#complaint .row {
    border-bottom: 1px dotted var(--theme-color-8);
}

/*-----------------------Corporate Members------------------------------------------------------------------------------*/

#password-strength-res {
    line-height: 0;
    font-size: var(--theme-font-6);
}

.smallAdvertCarousel,
.advert-height {
    overflow: hidden;
}

.warningBox {
    background: var(--theme-color-4);
    text-align: center;
    color: var(--theme-color-white);
    border-radius: 5px;
}

.button.full.delete {
    background-repeat: no-repeat;
    background-position: 98% 3px;
}

.none-available h2 {
    opacity: 0.5;
}

#header .links a {
    color: var(--theme-color-white);
    font-family: 'Signika', sans-serif;
    font-weight: 400;
}

#header .links a:hover {
    text-decoration: none;
    border-bottom: solid 2px var(--theme-color-1);
}

button, .apply_btn {
    background: var(--theme-color-1);
    border: solid 2px var(--theme-color-1);
    border-radius: 5px;
    color: var(--theme-color-white);
    transition: transform 0.5s;
    font-size: inherit;
    font-family: 'Signika', sans-serif;
}

.errorMessage {
    text-align: center;
    border: 1px solid var(--theme-color-4);
    background: var(--theme-color-4);
    opacity: 0.7;
    color: var(--theme-color-white);
}

.successMessage {
    text-align: center;
    border: 1px solid var(--theme-color-2);
    padding: 8px;
    background: var(--theme-color-2);
    opacity: 0.7;
    color: var(--theme-color-white);
}

.button_link:hover {
    text-decoration: none;
    color: var(--theme-color-white);
}

.section_orange h1 {
    color: var(--theme-color-white);
    font-size: var(--theme-font-8);
}

.main_adverts {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 5px 5px rgba(0, 0, 0, 0.23);
}

.page_title {
    color: var(--theme-color-6);
    font-size: var(--theme-font-9);
    font-weight: 300;
}

.main_people_tiles {
    background: var(--theme-color-8);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.19), 0 1px 5px rgba(0, 0, 0, 0.23);
    text-align: center;
}

#standards_table {
    text-align: center;
    border: none;
    border-collapse: collapse;
    font-size: var(--theme-font-3);
}

#standards_table td {
    border-left: 1px solid var(--theme-color-6);
}

#standards_table td:first-child {
    border-left: none;
}

.reg_font {
    font-weight: 400;
}

.backSpace a:hover {
    border-bottom: solid 2px transparent;
}

/* ---- Sites ---------------------------------------------- */

#auditOptions h2 {
    font-size: var(--theme-font-6);
}

#auditOptions h4 {
    font-size: var(--theme-font-5);
    font-family: 'Signika', sans-serif;
}

#pp-optin-div {
    background: var(--theme-color-3) !important;
    border: 1px solid var(--theme-color-3);
}

.awardthumb {
    border: solid 1px var(--theme-color-8);
    border-radius: 5px;
}

.siteButtonRow {
    text-align: right;
}

.ppValidateTitle {
    text-align: center;
    font-size: var(--theme-font-5);
    font-weight: 600;
}

.ppValidateSection {
    font-weight: 600;
}

#nhs-parking-accordion {
    background-color: var(--theme-color-3);
    border-bottom: solid 2px var(--theme-color-3);
}

#nhs-parking-div {
    background: var(--theme-color-3);
    color: var(--theme-color-white);
    border: solid 1px var(--theme-color-3);
}

.all-day-open-text {
    font-size: var(--theme-font-3);
    border: 1px solid var(--theme-color-7);
    background: var(--theme-color-white);
}

.open-time-div input[type="time"] {
    font-size: var(--theme-font-3);
    font-family: 'Open Sans', sans-serif;
}

#nhs-parking-form .fieldRow input[type="number"] {
    font-family: inherit;
    font-size: var(--theme-font-3);
    border: 1px solid var(--theme-color-7);
    background: var(--theme-color-white);
}

/* ---- Home ---- */
.main_header {
    background-image: url('/brandings/2/resources/HeaderBG3.png');
    background-size: cover;
}

.main_header h1 {
    color: var(--theme-color-white);
    font-size: var(--theme-font-9);
    letter-spacing: 2px;
}

.main_header h3 {
    color: var(--theme-color-white);
    text-align: center;
    opacity: 0.7;
    font-size: var(--theme-font-7);
}

/* ---- Members page ---- */

.member-logo-div {
    background: var(--theme-color-white);
    border-bottom: solid 1px var(--theme-color-8);
}

.member-details-div {
    text-align: center;
    font-size: var(--theme-font-3);
}

.member-details-div h3 {
    line-height: 1.2;
}

/* --- Generate CSV Reports ---- */

.date-picker {
    border: solid 1px var(--theme-color-7);
    outline: none;
    border-radius: 3px;
}

.generate-box i {
    font-size: var(--theme-font-9);
}

.generate-box .generate-title {
    font-weight: 700;
}

.generate-box {
    border: 1px var(--theme-color-5) solid;
    text-align: center;
    background: var(--theme-color-8);
    border-radius: 10px;
}

/*------- Overview Management & Reports Section -------- */

#downloadReport #selectReport {
    font-size: var(--theme-font-8);
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23);
}

#downloadReport #selectReport h2 {
    opacity: 0.4;
}

.report-content a.row.data:hover {
    background: none;
    color: var(--theme-color-1);
}

#reportList .none-available h2 {
    opacity: 0.3;
}

.dynamic-report-row {
    border-bottom: dotted 1px var(--theme-color-8);
}

.all-reports-list {
    background: var(--theme-color-8);
    border-radius: 10px;
}

.all-reports-list p {
    border-bottom: dotted 1px var(--theme-color-8);
}

.managementOverview .selfReportStat h3:first-of-type {
    color: var(--theme-color-1);
    font-size: var(--theme-font-7);
}

.managementOverview .siteModStats {
    border-top: 2px solid var(--theme-color-1);
}

.managementOverview .siteModStats h3:first-of-type {
    color: var(--theme-color-1);
    font-size: var(--theme-font-7);
}

.managementOverview .operativeStats {
    border-top: 2px solid var(--theme-color-1);
}

.managementOverview .operativeStats h3:first-of-type {
    color: var(--theme-color-1);
    font-size: var(--theme-font-7);
}

.managementOverview .auditLine {
    border-top: 2px var(--theme-color-5) solid;
}

.managementOverview .caseLine {
    border-top: 2px var(--theme-color-1) solid;
}

.managementOverview .report-title:hover {
    color: var(--theme-color-1);
    cursor: pointer;
}

.managementOverview .stat-titles, #operator-dashboard .stat-titles {
    border-top: 2px var(--theme-color-4) solid;
    background: var(--theme-color-8);
}

#location-search, #filter-search, #reset-map {
    border-bottom: solid 1px var(--theme-color-7);
}

#location-info-span i {
    font-size: var(--theme-font-4);
    color: var(--theme-color-1);
}

/* ------------------------------------------------------- Actions Review page -------------------------------------------------------------- */

.high-priority-action {
    border-right: 3px solid var(--theme-color-4);
}

.completed-action {
    border-right: 3px solid var(--theme-color-2);
}

.medium-priority-action {
    border-right: 3px solid var(--theme-color-1);
}

.no-priority-action {
    border-right: none;
}

/*--- Cookie Policy ---*/

/* Cookie banner: floating card, bottom left; spans the screen on phones */
#cookie-banner {
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 420px;
    padding: 18px 20px;
    font-size: var(--theme-font-2);
    color: var(--theme-color-6);
    background-color: var(--theme-color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

#cookie-banner .cookie-banner-text {
    margin: 0 0 14px;
    font-size: var(--theme-font-2);
    font-weight: 400;
    line-height: 1.5;
    color: inherit;
}

#cookie-banner a {
    color: var(--theme-color-1);
}

#cookie-banner .cookie-banner-actions {
    display: flex;
    gap: 10px;
}

#cookie-banner .cookie-banner-actions .button {
    flex: 1 1 0;
    margin: 0;
}

#cookie-banner #cookie-reject {
    background-color: transparent !important;
    color: var(--theme-color-1) !important;
}

#cookie-banner #cookie-reject:hover {
    background-color: var(--theme-color-1) !important;
    color: var(--theme-color-white) !important;
}

/* ------------------------------------------------------- Reports -------------------------------------------------------------- */
#exportReport {
    font-size: var(--theme-font-6);
    cursor: pointer;
}

.report-table .data-table a:hover,
.report-list a:hover {
    border-bottom: none;
    color: var(--theme-color-1);
}

.report-list td, .report-list th {
    border-bottom: 1px solid var(--theme-color-8);
    text-align: center;
}

.report-list th {
    font-weight: 700;
    color: var(--theme-color-black);
    font-size: var(--theme-font-4);
    border-bottom: solid 1px var(--theme-color-1);
}

.data-table h4 {
    font-size: var(--theme-font-6);
    font-weight: 400;
}

/*
////////////////////////////
General Styles
///////////////////////////
*/

.card-body label {
    margin-bottom: 0.4rem;
}

.card-title {
    border-bottom: 1px solid var(--theme-color-7);
    color: var(--theme-color-6);
}

.disabled,
.inactive {
    opacity: 0.7;
    pointer-events: none;
}

.disabled {
    cursor: not-allowed;
}

.border-bottom-transparent {
    border-bottom: 3px solid transparent !important;
}

.editableInput:hover {
    border-bottom: 3px solid var(--theme-color-5) !important;
}

.no-pointer-events {
    pointer-events: none;
}

.form-control {
    border: none;
    transition: none;
    font-weight: 100;
    font-size: var(--theme-font-2);
}

.card-body .form-control, .menu select, .menu input[type=text], .menu input[type=number] {
    border-bottom: 3px solid var(--theme-color-white);
}

.grid-tile .card .grid-title {
    border-bottom: 1px solid rgb(0 0 0 / 8%);
}

.icon-opacity-background {
    border-radius: 6px;
}

.numeric-stat-figure {
    font-size: var(--theme-font-6);
    color: var(--theme-color-1);
    font-family: 'Signika', sans-serif;
}

.medium-stat-number {
    font-size: var(--theme-font-5);
    font-family: 'Signika', sans-serif;
    color: var(--theme-color-7);
}

.shadow {
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 3%) !important;
}

.grey-stat-title {
    color: var(--theme-color-7);
    font-size: var(--theme-font-3);
}

.unset-shadow {
    box-shadow: unset;
}

#notificationNavCounter:hover {
    background: none !Important;
}

.nav-bar-notifications {
    background: var(--theme-color-4);
    border-radius: 5px;
    font-family: 'Signika', sans-serif;
    font-size: var(--theme-font-2);
    font-weight: 700;
}

.new-large-notification {
    border-radius: 4px;
    background: var(--theme-color-4);
    color: var(--theme-color-white);
    cursor: pointer;
    font-size: var(--theme-font-5);
    text-align: center;
}

.grid-tile {
    border: 1px solid rgb(0 0 0 / 5%);
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 3%);
    background: var(--theme-color-white) !Important;
    border-radius: 7px;
    font-size: var(--theme-font-2);
}

.settings-panel {
    background: var(--theme-color-8);
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}

.settings-panel i {
    font-size: var(--theme-font-5);
    color: var(--theme-color-7);
}

.success-box {
    background: var(--theme-color-2);
    border-radius: 5px;
    font-family: 'Signika', sans-serif;
}

.report-option {
    background: var(--theme-color-white);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 8%) !important;
    border-radius: 5px;
}

.report-list .dynamic-list-item:hover {
    background: var(--theme-color-1);
    color: var(--theme-color-white);
    cursor: pointer;
}

.border-bottom-red {
    border-bottom: 2px solid var(--theme-color-4);
}

.border-bottom-light {
    border-bottom: 1px solid var(--theme-color-8);
}

.gold-accent-box {
    background: var(--theme-color-5)
}

.title-background h1 {
    color: var(--theme-color-7);
    font-weight: 600;
    font-size: 1.2rem;
}

.backLink a:hover {
    text-decoration: none !Important;
    color: #ff7400 !important;
}

.error {
    background: #ffeaea !important;
    border-bottom: 1px solid #ff000087 !important;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #6b7280;
    font-family: 'Signika', sans-serif;
    font-weight: 500;
    font-size: 0.89rem;
    transition: color 0.15s ease;
}

.back-link:hover {
    color: var(--theme-color-1);
}

.back-link i {
    font-size: 0.6rem;
}

.back-link,
.back-link:hover {
    border-bottom: solid 1px transparent !important;
}

.backLink .back-link {
    color: #6b7280 !important;
}

.backLink .back-link:hover {
    color: var(--theme-color-1) !important;
}

.shadow-sides {
    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 9%) !important;
}

.light-shadow {
    box-shadow: 0 3px 15px 0 rgb(0 0 0 / 10%);
}

.light-border {
    border: 1px solid var(--theme-color-8);
}

.light-border-right {
    border-right: 1px solid var(--theme-color-8);
}

/* Site banner from Pop-up Management: dark taupe with light text */
.banner-strip {
    display: block;
    padding: 8px 16px;
    text-align: center;
    font-size: var(--theme-font-2);
    line-height: 1.4;
    color: #f6efe7;
    background: #5c4a3d;
    border-bottom: 1px solid #4a3b30;
}

a.banner-strip,
a.banner-strip:hover {
    color: #f6efe7;
    text-decoration: none;
}

a.banner-strip:hover p {
    text-decoration: underline;
}

.no-list-type {
    list-style-type: none
}

/*
////////////////////////////
Form Styles
///////////////////////////
*/

#ipc-form .card-title {
    background: var(--theme-color-1);
    color: var(--theme-color-8);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    outline: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#ipc-form input[type="file"] {
    display: none;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

#ipc-form .required label:after {
    color: var(--theme-color-4);
    content: " *";
    display: inline;
    font-size: var(--theme-font-3);
}

#ipc-form .required .SumoSelect label:after {
    content: "";
}

.custom-file-upload:after {
    content: "" !Important;
}

.form-control:focus {
    box-shadow: none;
}

.light-filter, .light-input, .SumoSelect, .dataTables_wrapper .dataTables_filter input {
    background: var(--theme-color-9) !important;
    border: none;
    border-radius: 5px;
    color: var(--theme-color-6);
    border-bottom: 3px solid var(--theme-color-white);
}

.menu-content .light-filter:hover {
    background: var(--theme-color-8) !important;
    cursor: pointer;
}

.validations-panel-card .light-filter,
.validations-panel-card .light-input,
.validations-panel-card .SumoSelect {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
    color: var(--theme-color-6);
}

.validations-panel-card .menu-content .light-filter:hover {
    background: #fff !important;
}

.module-table-panel-card .light-filter,
.module-table-panel-card .light-input,
.module-table-panel-card .SumoSelect,
.list-filter {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
    color: var(--theme-color-6);
}

.module-table-panel-card .menu-content .light-filter:hover {
    background: #fff !important;
}

/* A slim list filter or search box with room before its text */
select.list-filter,
input.list-filter {
    height: 35px !important;
    padding: 0 0.75rem !important;
}

.module-table-panel-card .fieldRow select,
.module-table-panel-card .fieldRow input[type="text"],
.module-table-panel-card select.table-filter,
.module-table-panel-card select.table-search,
.module-table-panel-card input.search-input {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
    color: var(--theme-color-6);
}

.module-table-panel-card .select2Class + .select2-container {
    width: 95% !important;
}

.module-table-panel-card .select2Class + .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: 33px !important;
    padding: 0 1.25rem 0 0.4rem !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    color: var(--theme-color-6);
}

.module-table-panel-card .select2Class + .select2-container .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: inherit;
}

.module-table-panel-card .select2Class + .select2-container .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0.1rem !important;
    height: 100% !important;
    width: 16px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 11px !important;
}

.module-table-panel-card .select2Class + .select2-container .select2-selection__arrow b {
    display: none !important;
}

#select2-siteId-results {
    margin: 0 !important;
    padding: 0 !important;
}

#select2-siteId-results .select2-results__option {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    color: var(--theme-color-6);
}

#select2-siteId-results .select2-results__option--highlighted[aria-selected] {
    background-color: #808080 !important;
    color: #fff !important;
}

.custom-file-upload {
    padding: 7px 12px;
    cursor: pointer;
    background: var(--theme-color-1) !important;
    border: none !important;
    border-radius: 5px;
    color: var(--theme-color-white) !Important;
}

#ipc-form .card-body {
    padding: 0.2rem;
}

.list-upload-item {
    background: var(--theme-color-8) !important;
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--theme-color-1);
}

.list-upload-item-warning {
    background: var(--theme-color-1) !important;
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--theme-color-4);
}

.form-div {
    background: var(--theme-color-8);
    border: solid 1px var(--theme-color-8);
    border-radius: 7px;
    border-top: 1px var(--theme-color-1) solid;
}

/*
////////////////////////////
Table Styles
///////////////////////////
*/

.table tr:nth-child(odd) {
    background: unset;
}

.table-div a.btn, .table-div a.btn:hover {
    color: var(--theme-color-white) !important;
    font-size: var(--theme-font-2) !important;
}

#ipc-table td, .grid-tile .data {
    font-size: var(--theme-font-2);
    background: #f8f8f8;
}

.grid-tile .data {
    border-top: none;
    border-radius: 10px;
}

.form-card {
    background: var(--theme-color-9);
    border-radius: 5px;
}

.text-bubble {
    font-size: var(--theme-font-2);
    background: var(--theme-color-8);
    border-radius: 5px;
}

#ipc-table th, .grid-tile .headings div {
    font-size: var(--theme-font-2);
    background: none;
    color: var(--theme-color-7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    border: none;
}

.grid-tile h3, .grid-tile h2 {
    font-family: 'Signika', sans-serif;
    color: var(--theme-color-7) !Important;
    font-size: var(--theme-font-3) !Important;
    font-weight: 600;
}

/* Sub-titles inside an appeal status tile: lighter than the tile's own title */
.grid-tile h3.appeal-subtitle {
    font-weight: 500;
    text-transform: none;
}

#ipc-table tr:first-of-type {
    background: none !Important;
    border-bottom: 1px solid var(--theme-color-7);
}

#ipc-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
}

#ipc-table tr:hover td {
    color: var(--theme-color-1);
    cursor: pointer;
}

/* ----------- LIST TABLE (opt-in .list-table, the complaints v2 list look) -------------------------------------- */

/* One continuous table: a shaded header band and hairline rows instead of gapped grey pills */
#ipc-table table.list-table {
    margin-bottom: 0;
    font-size: 14px;
    border-collapse: collapse;
    border-spacing: 0;
    /* Columns size to their content (.table-div tables are fixed and equal), so one-line statuses get room */
    table-layout: auto;
}

#ipc-table table.list-table tr:first-of-type {
    border-bottom: 0;
}

#ipc-table table.list-table thead th {
    padding: 0.6rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #8a8f98;
    background: var(--theme-color-9);
    border-bottom: 1px solid rgb(0 0 0 / 8%) !important;
}

#ipc-table table.list-table tbody td {
    padding: 0.55rem 0.6rem;
    font-size: 0.8rem;
    vertical-align: middle;
    color: #414850;
    background: #fff;
    border-bottom: 1px solid rgb(0 0 0 / 5%) !important;
}

#ipc-table table.list-table tbody tr:nth-child(even) td {
    background: rgb(0 0 0 / 1.5%);
}

#ipc-table table.list-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

#ipc-table table.list-table tbody tr:hover td {
    color: var(--theme-color-1);
    background: var(--theme-color-9);
}

/* Priority rows keep their sparkle icon but not the taupe tint, so they read like the other rows */
#ipc-table table.list-table tbody td.priority-highlight {
    background-color: #fff !important;
}

#ipc-table table.list-table tbody tr:nth-child(even) td.priority-highlight {
    background-color: rgb(0 0 0 / 1.5%) !important;
}

#ipc-table table.list-table tbody tr:hover td.priority-highlight {
    background-color: var(--theme-color-9) !important;
}

/* Links read as row text and take the row's hover colour */
#ipc-table table.list-table td a {
    color: inherit;
}

/* Status cells (an addStatusIcon() icon and its label): a wrapped label continues under the text, not the icon */
#ipc-table table.list-table td:has(> .icon-opacity-background) {
    padding-left: calc(0.6rem + 1.55em);
    text-indent: -1.55em;
}

#ipc-table table.list-table td.priority-highlight-gutter:has(> .icon-opacity-background) {
    padding-left: calc(1.75rem + 1.55em) !important;
}

#ipc-table table.list-table td > .icon-opacity-background {
    width: 1.25em;
    padding: 0;
    text-align: center;
    text-indent: 0;
}

/* Wide screens have room for the whole status on one line */
@media (min-width: 1200px) {
    #ipc-table table.list-table td:has(> .icon-opacity-background) {
        white-space: nowrap;
    }
}

/* The card grows with its rows rather than scrolling inside itself */
.module-table-scroll:has(> table.list-table),
.validations-table-scroll:has(> table.list-table) {
    max-height: none;
}

/* A gap above the header band, so the table sits evenly inside its card (the cards use py-0) */
.table-div:has(table.list-table) {
    padding-top: 0.75rem !important;
}

/* Pagination under a list table: centred chips, as on the complaints v2 list */
:is(.grid-tile, .table-section):has(table.list-table) .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    float: none;
}

:is(.grid-tile, .table-section):has(table.list-table) .pagination .page-item {
    margin: 0 !important;
}

/* The admin lists wrap their pagination in an inline-block, which would stop it centring */
.grid-tile:has(table.list-table) .d-inline-block:has(> nav > .pagination) {
    display: block !important;
}

:is(.grid-tile, .table-section):has(table.list-table) .pagination .page-link {
    margin: 0;
    padding: 0.35rem 0.75rem;
    font-size: 13px;
    line-height: 1.4;
    color: var(--theme-color-7) !important;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

:is(.grid-tile, .table-section):has(table.list-table) .pagination .page-item:not(.disabled) .pagination-btn:hover {
    color: var(--theme-color-1) !important;
    background: var(--theme-color-9);
}

:is(.grid-tile, .table-section):has(table.list-table) .pagination .page-item.disabled .page-link {
    opacity: 0.4;
}

:is(.grid-tile, .table-section):has(table.list-table) .pagination .page-count .page-link {
    font-weight: 600;
    color: #979797 !important;
    background: none;
    border-color: transparent;
}

/* The email log's numbered page links in the same chips */
.grid-tile:has(table.list-table) .row.pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: auto;
    margin: 0;
    padding: 1rem 0 0.5rem;
    font-size: 13px;
    color: #979797;
}

.grid-tile:has(table.list-table) .row.pages a,
.grid-tile:has(table.list-table) .row.pages p {
    margin: 0;
    padding: 0.35rem 0.75rem;
    font-size: 13px;
    line-height: 1.4;
    color: var(--theme-color-7);
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.grid-tile:has(table.list-table) .row.pages a:hover {
    color: var(--theme-color-1);
    background: var(--theme-color-9);
}

/* The "Page" label and the current page read as text, not buttons */
.grid-tile:has(table.list-table) .row.pages p {
    font-weight: 600;
    color: #979797;
    background: none;
    border-color: transparent;
}

/* PCN page: form fields, and the sidebar's date field and buttons, run the full width of their cards */
.pcn-form .fieldRow input[type="text"],
.pcn-form .fieldRow select,
.pcn-form .fieldRow textarea,
.pcn-side .fieldRow input[type="text"],
.pcn-side .button {
    width: 100%;
    margin-right: 0;
}

/* ----------- LIST STATUS CHIPS (renderStatusChips()) ----------------------------------------------------------- */

/* One line of status counts above a list, wrapping when there are many */
.list-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 10px;
}

.list-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--theme-color-6);
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 999px;
}

.list-status-chip i {
    color: var(--theme-color-7);
}

.list-status-chip b {
    font-weight: 700;
    color: var(--theme-color-1);
}

button.list-status-chip {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.list-status-chip:hover {
    background: var(--theme-color-9);
    border-color: rgb(0 0 0 / 16%);
}

/* The status the list is filtered by */
.list-status-chip.is-active {
    color: var(--theme-color-1);
    background: rgb(218 119 62 / 8%);
    border-color: var(--theme-color-1);
}

/* ----------- EMAIL LOG VIEW (pop-up from the email log) -------------------------------------------------------- */

/* A grey details panel above the email */
.email-log-details {
    padding: 14px 18px;
    background: var(--theme-color-9);
    border-radius: 8px;
}

.email-log-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.modal h2.email-log-subject {
    flex: 1;
    margin: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    color: var(--theme-color-6);
}

.email-log-print {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--theme-color-7);
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 6px;
}

.email-log-print:hover {
    color: var(--theme-color-1);
}

/* To, status and queued as a small label / value list */
.email-log-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    gap: 6px 16px;
    font-size: 14px;
    color: var(--theme-color-6);
}

.email-log-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8a8f98;
}

.email-log-address {
    margin-left: 4px;
    color: var(--theme-color-7);
}

.email-log-meta .statuscircle {
    display: inline-block;
    float: none;
    margin: 0 4px 0 0;
    vertical-align: -2px;
}

/* Re-send and Delete are small forms, shown as bold links beside the status */
.email-log-action-form {
    display: inline;
    margin: 0;
}

.email-log-action {
    margin-left: 10px;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--theme-color-1);
    background: none;
    border: 0;
    cursor: pointer;
}

.email-log-action:hover {
    text-decoration: underline;
}

/* The email itself on white paper, set apart from the details */
.email-log-body {
    margin-top: 16px;
    padding: 20px 24px;
    color: #212529;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 8px;
}

/* ----------- POP-UP MANAGEMENT (banners and pop-ups admin) ---------------------------------------------------- */

.popup-admin .light-filter,
.popup-admin .SumoSelect,
.popup-admin textarea.form-control {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
    color: var(--theme-color-6);
}

/* A faint line between the select, banner and pop-up sections */
.popup-admin form + form {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgb(0 0 0 / 6%);
}

/* Save on the left, delete on the right */
.popup-admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.popup-admin-actions .button {
    margin: 0;
}

.popup-admin-delete {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color-7);
    background: none;
    border: 0;
    cursor: pointer;
}

.popup-admin-delete:hover {
    color: var(--theme-color-4);
    text-decoration: none;
}

/* The current pop-up image, centred on a grey strip */
.popup-admin-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 20px;
    background: var(--theme-color-9);
    border-radius: 8px;
}

.popup-admin-preview img {
    display: block;
    max-width: min(100%, 360px);
    max-height: 320px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.popup-admin-preview a {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-color-1);
}

/* ----------- SITE POP-UP (brandings/2/head.php and the admin preview) ----------------------------------------- */

/* The image fills the box, with no white frame */
.modal:has(.popup-frame-image) {
    width: auto !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
}

.popup-frame-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1200px, 90vw);
    max-height: 88vh;
    margin: 0 auto;
}

/* A round close button that reads on any image */
.modal:has(.popup-frame-image) .modalClose {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgb(0 0 0 / 55%);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    transition: background-color 0.15s ease;
}

.modal:has(.popup-frame-image) .modalClose:hover {
    background: rgb(0 0 0 / 75%);
}

.modal:has(.popup-frame-image) .modalClose i {
    font-size: 18px;
    color: #fff !important;
}

.no-records {
    opacity: 0.8;
    border-radius: 10px;
}

/*
////////////////////////////
Menu Styles
////////////////////////////
*/

.menu h5 {
    background: var(--theme-color-1);
    color: var(--theme-color-8);
}

.menu h4 {
    font-size: var(--theme-font-3);
    font-family: 'Signika', sans-serif;
}

.menu .list-group-item:hover {
    background: var(--theme-color-8) !Important;
    cursor: pointer;
    border-radius: 5px;
}

.menu .list-group-item {
    border-bottom: 1px solid var(--theme-color-8) !important;
    color: #212121;
}

.menu a {
    color: var(--theme-color-1) !important;
    border-bottom: none;
}

.menu input, .menu select {
    border-radius: 0.25rem;
}

.list-menu {
    background: var(--theme-color-8);
    border: solid 1px var(--theme-color-8);
    border-radius: 10px;
    font-size: var(--theme-font-3);
}

.filter-bar {
    border-radius: 5px;
    background: var(--theme-color-white) !Important;
    border: 1px solid rgb(0 0 0 / 7%);
    border-top: 4px solid var(--theme-color-8);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 8%) !important;
}

.filter-bar select, .filter-bar input[type=text] {
    background: var(--theme-color-8) !important;
    border: none !important;
    border-radius: 5px;
    font-size: var(--theme-font-2);
}

.stripe-table th {
    background: var(--theme-color-8);
    font-family: 'Signika', sans-serif;
}

.stripe-table .dynamic-list-item:hover {
    background-color: var(--theme-color-8);
    cursor: pointer;
}

.optWrapper input[type=text] {
    background: transparent !important;
}

/*
////////////////////////////
Button Styles
////////////////////////////
*/

.button, .btn-orange, .btn-orange:focus, .btn-orange:active {
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--theme-color-1) !important;
    color: var(--theme-color-white) !important;
    font-size: var(--theme-font-2);
    border: solid 2px var(--theme-color-1) !important;
    border-radius: 3px;
    border-bottom: solid 1px transparent;
    transition: transform 0.5s;
}

.button, .btn-orange:hover {
    background-color: var(--theme-color-1) !important;
    border-color: var(--theme-color-1) !important;
}

.btn-secondary,
.btn-brown,
.btn-brown:hover {
    color: var(--theme-color-white);
    background-color: var(--theme-color-12) !important;
    border-color: var(--theme-color-12) !important;
}

.btn-secondary:hover {
    color: var(--theme-color-white);
    background-color: var(--theme-color-12) !important;
    opacity: 0.9;
}

/*
////////////////////////////
Pagination Styles
////////////////////////////
*/

.pagination .page-count .page-link, .pagination .page-count .page-link:hover {
    color: var(--theme-color-6);
    background-color: var(--theme-color-white);
}

#pagination-overlay {
    background: var(--theme-color-white);
    transition: opacity .15s linear;
}

.system-pagination button {
    display: inline;
    line-height: 1.25;
    color: var(--theme-color-black);
    background-color: var(--theme-color-8);
    border: 1px solid var(--theme-color-8);
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: 13px;
}

/*
////////////////////////////
Modal Styles
////////////////////////////
*/

.modal {
    transform: translate(-50%, -50%);
    background: var(--theme-color-white);
    border-radius: 10px;
    font-size: var(--theme-font-3);
    padding: 25px 35px !important;
}

.modal h1 {
    font-size: var(--theme-font-5);
    font-weight: 700;
}

.modal h2 {
    text-align: center;
    font-family: 'Signika', sans-serif;
    font-weight: 700;
}

/* ----------- POP-UPS WITH A TITLE, MESSAGE AND BUTTONS ----------------------------------------------------------- */

.form-modal .modal-x {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 24px;
    line-height: 1;
    color: var(--theme-color-7);
    cursor: pointer;
}

.form-modal .modal-x:hover {
    color: var(--theme-color-6);
}

.form-modal h3 {
    margin: 0 0 8px;
    padding: 0 28px 0 0;
    font-size: var(--theme-font-4);
    color: var(--theme-color-6);
}

.form-modal p {
    margin: 0 0 18px;
}

.form-modal .button {
    margin: 0;
}

.form-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.globalLoader {
    border: 6px solid var(--theme-color-8);
    border-top: 6px solid var(--theme-color-1);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.global-spinner {
    border: 0.4em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
}

/*
////////////////////////////
Multiselect Styles
////////////////////////////
*/

.SumoSelect {
    font-size: var(--theme-font-3);
    font-weight: 400;
    line-height: 1.5;
    color: var(--theme-color-6);
    background-clip: padding-box;
    border: none !Important;
    border-radius: 0.25rem;
}

.SumoSelect > .CaptionCont {
    color: var(--theme-color-black);
    font-size: var(--theme-font-2);
    background-color: transparent !Important;
    border: none !Important;
}

.SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont {
    box-shadow: none !Important;
    border-color: var(--theme-color-3);
}

.SumoSelect > .CaptionCont > span.placeholder {
    padding-left: 4px;
}

/*
////////////////////////////
Download Manager
////////////////////////////
*/

.dm-file-name {
    font-size: var(--theme-font-3);
    text-align: center;
    color: var(--theme-color-1);
}

.file-man-box-1 .file-close-1 {
    color: var(--theme-color-4);
    line-height: 24px;
    font-size: var(--theme-font-6);
}

.file-man-box-1 .file-download-1 {
    font-size: var(--theme-font-7);
    color: var(--theme-color-9);
}

.file-man-box-1 .deletion-confirm-box i {
    font-size: var(--theme-font-6);
    cursor: pointer;
}

/* File tile size label: muted grey */
.file-man-box-1 .text-right > p > small {
    color: var(--theme-color-7);
}

/* File tile corner delete icon: ash grey so it blends into the tile */
.file-man-box-1 .confirmDelete i {
    color: #c4c4c4;
    transition: color 0.15s ease;
}

.file-man-box-1 .confirmDelete:hover i {
    color: var(--theme-color-7);
}

/* File tile delete confirm: orange tick, darker grey cross, softer text */
.file-man-box-1 .deletion-confirm-box p {
    color: #5f6368;
    margin-bottom: 0.35rem;
}

.file-man-box-1 .deletion-confirm-box .deleteUploadedFile {
    color: var(--theme-color-1) !important;
}

.file-man-box-1 .deletion-confirm-box .cancelDeleteFile {
    color: #8a8a8a;
    transition: color 0.15s ease;
}

.file-man-box-1 .deletion-confirm-box .cancelDeleteFile:hover {
    color: #5f6368;
}

/* Slim spinner shown while a file tile is being deleted, centred in the tile */
.file-tile-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #e6e6e6;
    border-top-color: var(--theme-color-1);
    border-radius: 50%;
    animation: file-tile-spin 0.7s linear infinite;
}

@keyframes file-tile-spin {
    to {
        transform: rotate(360deg);
    }
}

.dm-file-name a {
    font-size: var(--theme-font-2);
    color: var(--theme-color-1);
}

/* --- User Cases Stat Tiles (/user/{id} only) --- */

/* Same card look as the .grid-tile panels below them */
.user-case-stats .stat-tile {
    background: var(--theme-color-white);
    border: 1px solid rgb(0 0 0 / 5%);
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 3%);
    border-radius: 7px;
    padding: 12px 15px;
    text-align: left;
}

.user-case-stats .user-case-stat-toggle {
    color: var(--theme-color-7);
}

.user-case-stats .main-statistic-grey {
    color: #a2a2a2;
}

.user-case-stats .stat-tile h6 {
    font-family: 'Signika', sans-serif;
    color: var(--theme-color-7);
    font-weight: bold;
    font-size: 0.85rem;
}

.user-case-stats.row {
    margin-left: -5px;
    margin-right: -5px;
    padding: 0;
}

.user-case-stats .col-6 {
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

.user-case-list {
    max-height: 500px;
    overflow-y: auto;
}

.user-case-list-item {
    border-bottom: 1px solid #eeeeee;
}

.user-case-stats .text-orange {
    color: #ea6d10 !important;
}

/* ----------- OLD-STYLE LISTS (.mobile-report-wrapper: .headings + .row.data) ------------------------------------ */

/* Header bar, compact ruled rows and a soft hover, matching the IAS lists */
.mobile-report-wrapper .headings,
.appeals.grid-tile .headings {
    display: flow-root;
    margin: 0 0 2px;
    background: var(--theme-color-9);
    border-radius: 6px;
}

.mobile-report-wrapper .headings > div,
.appeals.grid-tile .headings > div {
    padding: 10px 12px !important;
    color: var(--theme-color-6);
    font-weight: 600;
}

/* Plain rows with a faint divider: off-black text that turns orange on hover */
.mobile-report-wrapper .row.data,
.appeals.grid-tile .row.data {
    margin: 0;
    line-height: 1.3;
    color: var(--theme-color-6);
    background: none;
    border-top: 0;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
}

.mobile-report-wrapper .row.data > .column,
.appeals.grid-tile .row.data > .column {
    padding: 6px 12px !important;
}

.mobile-report-wrapper a.row.data:hover,
.appeals.grid-tile a.row.data:hover {
    background: none;
    color: var(--theme-color-1);
    border-bottom: 1px solid #f0f0f0;
}

/* The second line under a row's main text (e.g. who raised it) */
.mobile-report-wrapper a.row.data .small,
.appeals.grid-tile a.row.data .small {
    color: var(--theme-color-7);
}

/* Unread messages: an orange dot before the reference and the subject in semi-bold */
.mobile-report-wrapper .row-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 6px 1px 0;
    vertical-align: middle;
    background: var(--theme-color-1);
    border-radius: 50%;
}

.mobile-report-wrapper a.row.data.is-unread .column.half {
    font-weight: 600;
}

/* Headings inside rows no longer turn white on hover */
.mobile-report-wrapper a.row.data:hover h3,
.appeals.grid-tile a.row.data:hover h3 {
    color: inherit !important;
}

/* Empty lists say so instead of showing a bare header */
.mobile-report-wrapper .headings + #defaultList:not(:has(.row.data))::after {
    content: "Nothing to show.";
    display: block;
    padding: 40px 12px;
    color: var(--theme-color-7);
    text-align: center;
}

.appeals #defaultList:has(> .row.headings:first-child):not(:has(.row.data))::after {
    content: "No appeals to show.";
    display: block;
    padding: 40px 12px;
    color: var(--theme-color-7);
    text-align: center;
}

/* A section of a list with no rows (e.g. the operator's two appeal lists) */
.list-empty {
    margin: 0;
    padding: 24px 12px;
    color: var(--theme-color-7);
    text-align: center;
}

/* The list card reaches down the window rather than stopping under the header */
.min-table-height > .mobile-report-wrapper {
    min-height: calc(100vh - 200px);
}

/* "Start a new ..." tile icons in a muted grey */
.grid-tile.case-new-tile > i {
    color: var(--theme-color-7);
}

.grid-tile.appeal-new-tile img {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Email reminder strip: styles/assets/email-reminder/email-reminder.css (loaded on every route) */

/* ----------- LOGIN PAGE (brandings/2/pages/login.php) ------------------------------------------------------------ */

/* Notices in the login card: no outline, icon centred against the text */
.login-card .alert-inline {
    align-items: center;
    border-color: transparent;
}

/* Permission toggle result (pages/user/permissions.php): no outline */
.updateBox .alert-inline {
    border-color: transparent;
}

.login-card .alert-inline__body {
    padding-top: 0;
}

/* "You're already signed in": warm taupe with a green tick, calmer than a success banner */
.login-card .alert-inline--signed-in {
    --inline-tint: #f3efe9;
    --inline-accent: #2e7d32;
}

/* Only the icon is green */
.login-card .alert-inline--signed-in .alert-inline__title {
    color: #232323;
}

/* ----------- CORPORATE PROFILE (pages/corporate/profile.php) ------------------------------------------------------ */

/* The main column reaches down the window, so the footer stays low */
.corp-profile-main {
    min-height: calc(100vh - 200px);
}

/* Profile forms: room between fields, labels above them */
.corp-profile-main div.expandable form .card-body {
    margin-bottom: 16px;
}

.corp-profile-main div.expandable form .card-body > label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--theme-color-6);
}

/* "250 words left" on the right of its label, in small grey */
.corp-profile-main div.expandable form .card-body > label:has(.wordsleft) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.corp-profile-main div.expandable form .card-body > label .wordsleft {
    font-size: var(--theme-font-1);
    font-weight: 400;
    color: var(--theme-color-7);
}

/* White fields with a light border, as on the account and case forms */
.corp-profile-main div.expandable .light-input,
.corp-profile-main div.expandable .SumoSelect {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px;
    color: var(--theme-color-6);
}

.corp-profile-main div.expandable .light-input {
    padding: 8px 12px;
}

.corp-profile-main div.expandable textarea.light-input {
    min-height: 110px;
}

.corp-profile-main div.expandable .light-input:focus {
    outline: none;
    border-color: var(--theme-color-1) !important;
    box-shadow: 0 0 0 3px rgba(218, 119, 62, 0.15);
}

/* Logo upload: a full-width dashed upload button with an icon */
form label.upload.corp-logo-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 12px;
    background: #fff !important;
    border: 1px dashed var(--theme-color-1);
    border-radius: 6px;
    color: var(--theme-color-1);
    font-size: var(--theme-font-2);
    font-weight: 500;
    transition: background-color 0.15s ease;
}

form label.upload.corp-logo-upload:hover {
    background: rgba(218, 119, 62, 0.08) !important;
}

/* ----------- LEGACY CASE PAGE (pages/cases/stage.php) ------------------------------------------------------------ */

/* The form card gets inner spacing, and its fields use the card's full width */
.grid-tile.complaint-lhs {
    padding: 20px 24px !important;
}

.complaint-lhs .fieldRow {
    padding: 6px 0;
}

.complaint-lhs .fieldRow > label,
#userForm .fieldRow > label {
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--theme-color-6);
}

/* White fields with a light border, as on the IPC register form (also the account form, brandings/2/pages/user/user.php) */
.complaint-lhs .fieldRow input[type="text"],
.complaint-lhs .fieldRow input[type="email"],
.complaint-lhs .fieldRow input[type="tel"],
.complaint-lhs .fieldRow input[type="date"],
.complaint-lhs .fieldRow input[type="number"],
.complaint-lhs .fieldRow input[type="password"],
.complaint-lhs .fieldRow select,
.complaint-lhs .fieldRow textarea,
#userForm .fieldRow input[type="text"],
#userForm .fieldRow input[type="email"],
#userForm .fieldRow input[type="tel"],
#userForm .fieldRow input[type="date"],
#userForm .fieldRow input[type="number"],
#userForm .fieldRow input[type="password"],
#userForm .fieldRow select,
#userForm .fieldRow textarea {
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.complaint-lhs .fieldRow textarea,
#userForm .fieldRow textarea {
    padding: 10px 12px;
}

.complaint-lhs .fieldRow input:focus,
.complaint-lhs .fieldRow select:focus,
.complaint-lhs .fieldRow textarea:focus,
#userForm .fieldRow input:focus,
#userForm .fieldRow select:focus,
#userForm .fieldRow textarea:focus {
    outline: none;
    border-color: var(--theme-color-1);
    box-shadow: 0 0 0 3px rgba(218, 119, 62, 0.15);
}

/* A field filled in for the user (e.g. the operator) still reads as locked */
.complaint-lhs .fieldRow select:disabled,
.complaint-lhs .fieldRow input[readonly],
#userForm .fieldRow select:disabled,
#userForm .fieldRow input[readonly] {
    background: #f6f6f8;
    color: var(--theme-color-7);
}

/* Password rows keep the show/hide eye beside the field */
#userForm .fieldRow:has(.show-password) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
}

#userForm .fieldRow:has(.show-password) > label {
    flex: 0 0 100%;
}

#userForm .fieldRow:has(.show-password) > input {
    flex: 1 1 auto;
    width: auto;
}

/* ----------- CASE VIEW (pages/cases/plugins/timeline.php and the stage's side tiles) ------------------------------ */

/* The case card reaches down the window, like the list page */
.grid-tile.complaint-lhs {
    min-height: calc(100vh - 200px);
}

/* "Messages" heading over the thread, and the note under it for the person who raised the case */
.complaint-lhs .timeline-heading {
    margin: 0;
    padding: 0 0 10px;
    font-size: var(--theme-font-3);
    font-weight: 600;
    color: var(--theme-color-6);
    border-bottom: 1px solid #f0f0f0;
}

.complaint-lhs .timeline-note {
    margin: 16px 0 0;
    font-size: var(--theme-font-1);
    color: var(--theme-color-7);
}

/* Message thread: faint dividers, the author stands out and the date steps back */
.complaint-lhs .timeline.row {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Names and values use the site's <b> look: Roboto, bold, dark grey */
.complaint-lhs .timeline.row > .col-3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #4f4f4f;
}

.complaint-lhs .timeline.row > .col-3 .small {
    font-weight: 400;
    color: var(--theme-color-7);
}

.complaint-lhs .timeline.row > .col-9 {
    line-height: 1.55;
}

/* The "My Complaints" tile only repeats "Back to ..." above it, so it is hidden (stored in case_sections) */
.grid-tile.complaint-rhs:has(img):has(a.button[href^="/cases/"]) {
    display: none;
}

/* Side tile icons small and muted, like the list page's tiles (not the small edit buttons beside each field) */
.grid-tile.complaint-rhs img:not(.smallbutton) {
    width: 48px !important;
    height: auto !important;
    margin-right: 16px;
    filter: grayscale(1);
    opacity: 0.6;
}