@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');

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

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

/* Deliberately no !important, unlike the block above - icons without
   their own colour (e.g. the thumbs-up/down/hourglass/download icons in
   the middle tile, which have no per-status colour at all) fall back to
   this orange, while icons that DO carry a genuine inline colour (e.g.
   the status tile's clock icon, coloured per-status via
   $statusDetails['colour']) keep that instead of being forced to one
   orange regardless of status - inline styles already win over a plain
   rule like this one. */
.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;
}

/* The "Submitting data..." loading bar (js/modal.js showBootstrapLoading())
   is a plain Bootstrap .progress-bar with no background-color set anywhere,
   so it fell back to Bootstrap's default blue. The other .progress-bar in
   the codebase (js/assets/animations/progress-bar.js's showOverlay()) sets
   its own inline background-color already, which wins over this regardless. */
.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;
}

/* Muted taupe tint (matching the "concluded" status/locked-field colour
   used on the complaints side) instead of the vibrant purple - split from
   .pp-expandable above so this doesn't also change that unrelated class. */
.priority-highlight {
    background-color: rgba(150, 130, 110, 0.14) !important;
}

/* Reserves the icon's gutter on every row's first column of a table that
   declares highlightCriteria (see table.blade.php), whether that specific
   row is a priority row or not - keeps the actual column content (e.g. the
   status icon + text) lined up instead of shifting right only on priority
   rows. */
.priority-highlight-gutter {
    position: relative;
    padding-left: 1.75rem !important;
}

/* Colour-independent priority signal alongside the tint above (see
   views/components/table.blade.php) - the muted taupe tint alone is much
   less noticeable than the old vibrant purple, particularly on displays
   with different colour settings. Absolutely positioned within the
   reserved gutter above rather than sitting inline. */
.priority-highlight-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color-1, #da773e);
}

/* Matches the white/border/shadow card language established on the
   complaints list (functionally the same recipe as .ui-surface in
   styles/styleGuide/style-guide.css, which isn't loaded on this admin
   stylesheet stack) - the validations table and Filters panel used the
   older plain .grid-tile look instead. */
.validations-panel-card {
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 0.55rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Same idea as .cases-layout/.cases-layout-list on the complaints side
   (styles/styleGuide/style-guide.css) - a measured height reaching down to
   just above the footer, rather than the tiles just growing however tall
   their content happens to be. padding-bottom keeps the card's bottom
   edge/border visible before the footer, same reasoning as the complaints
   version. */
.validations-layout {
    /* This page's header/title stack is taller than the complaints side's
       (150px there wasn't enough here), which combined with flex-grow-1 on
       the row pushed pagination past the bottom of the viewport with no
       visible gap. Larger offset + more bottom padding for real breathing
       room above the footer. */
    --validations-header-offset: 280px;
    min-height: calc(100vh - var(--validations-header-offset));
    min-height: calc(100svh - var(--validations-header-offset));
    padding-bottom: 2rem;
}

/* The table's own scroll area, not the whole card - a taller explicit
   height with its own scrollbar so more rows scroll internally instead of
   growing the card (and the page) indefinitely. */
.validations-table-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

/* Same thin/muted scrollbar recipe as .case-thread-window on the complaints
   side (styles/styleGuide/style-guide.css), pulled out as a reusable class
   so any scroll area on this stylesheet stack can opt in, not just the
   table scroll areas below. */
.themed-scrollbar,
.validations-table-scroll,
.module-table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #ebedf0 transparent;
}

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

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

.themed-scrollbar::-webkit-scrollbar-thumb,
.validations-table-scroll::-webkit-scrollbar-thumb,
.module-table-scroll::-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 {
    background-color: #e2e5e9;
}

/* Same fixed-height-to-footer card recipe as .validations-panel-card/
   .validations-layout/.validations-table-scroll above, applied to the
   module table page (pages/modules/table.php) - kept as its own
   page-scoped class names since the two pages are otherwise unrelated. */
.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;
}

/* pages/modules/table.php and pages/dynamicForms/table.php share the
   .module-table-layout recipe above but don't have the same amount of
   header/title/stats content above it, so one fixed offset can't fit both
   - a shared value meant one page's tile always ended up a different
   height than the other's despite similar row counts. Each page adds its
   own modifier class alongside .module-table-layout to tune this offset
   independently. */
.module-table-layout--dynamic-forms {
    /* This page's title block carries mt-4 + a wrapping .row.mb-3 that
       pages/modules/table.php's leaner title block doesn't have (~40px
       taller before the tile even starts) - reusing modules' 280px here
       pushes pagination below the viewport. */
    --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;
}

/* globalPaginationDisplay()/apiPaginationDisplay() (functions/functions.php)
   wrap their <ul> in .grid-tile, giving it its own border/shadow/background
   - redundant now that pagination sits inside these already-boxed cards
   (moved there earlier so it wouldn't float below the tile). Not editing
   .grid-tile or the shared pagination functions themselves, since they're
   used by ~15 other pages where pagination isn't nested in a card and
   still needs that box to look intentional - scoped to just these cards. */
.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,
#cookie-banner a,
.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 --------------------------------------------------------------------- */

.modalCover {
    background: rgba(0, 0, 0, 0.88);
}

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

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

#footer {
    overflow: visible;
}

#footer .footerContent {
    font-size: var(--theme-font-1);
    text-transform: none;
    text-align: left;
    float: none;
    margin: 0;
    padding: 45px 0;
    min-height: 285px;
    background: var(--theme-color-1) !important;
}

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

#footer a:hover {
    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;
}

h2.expandable {
    font-size: var(--theme-font-3);
    color: var(--theme-color-7) !important;
    background-position: 15px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: var(--theme-color-9);
    border-left: 6px var(--theme-color-1) solid;
    border-radius: 6px 6px 0 0;
    font-family: 'Signika', sans-serif;
    font-weight: 500;
}

h2.expandable.selected {
    background-image: url('/resources/white_up.png');
}

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

/* Modernised "Print Page" button on pages/appeal/index.php - the
   .expandAll.print combo is only used there, so this is scoped to that
   pairing rather than the bare div.print/a.print rules above (used more
   broadly elsewhere). Flex layout centres the icon against the text and
   gives them a real gap, instead of the icon's default baseline alignment
   + a small margin-right utility. Background/icon colour unchanged -
   still the same orange button with the same white icon image. */
.expandAll.print {
    /* div.print (core-structure.css) sets a fixed width:120px, sized for
       the old icon+text layout - this button is icon-only now, so that
       fixed width leaves a lot of empty space. */
    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;
}

/* AWS SFTP Import check-ins - pages/operators/operator.php. Card-style entries
   so a run of check-ins reads as a log rather than a wall of plain text. */
.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);
}

/* theme-color-9/10 are both near-white, so a solid theme background barely
   shows against the card - a light tint of theme-color-7 gives it enough
   contrast to read as a pill without turning it into a loud badge. */
.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);
}

/* Kept visually lighter than the notes above it, so the two don't read as the same line of importance */
.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 {
    color: var(--theme-color-white);
    background-color: var(--theme-color-black);
}

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

/* Matches renderBackLink()'s .back-link styling on the complaints side
   (styles/styleGuide/style-guide.css) - available here directly so pages
   on this admin stack can use renderBackLink() without needing to load
   styles/modules.css just for this one class. */
.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;
}

/* .backSpace's own a:hover rule (above) bumps border-bottom from 1px to
   2px on hover (both transparent, but the width change still shifts
   layout by a pixel) - pinned to a constant 1px here instead of touching
   that shared rule, which is used across many other pages too. */
.back-link,
.back-link:hover {
    border-bottom: solid 1px transparent !important;
}

/* .backLink (above) has its own "a"/"a:hover" colour rules with
   !important that would otherwise override .back-link's own muted-grey/
   hover-orange scheme. */
.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);
}

.banner-strip {
    text-align: center;
    font-size: var(--theme-font-2);
}

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

/* Plain white/border look matching the complaints list's filter
   .form-select/.form-control, instead of the tinted flat .light-filter
   pill style used elsewhere - scoped to this page's Filters panel since
   .light-filter/.light-input/.SumoSelect are shared classes used
   throughout the site. */
.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;
}

/* Same plain white/border filter restyle, applied to the module table
   page's Filters panel (pages/modules/table.php). */
.module-table-panel-card .light-filter,
.module-table-panel-card .light-input,
.module-table-panel-card .SumoSelect {
    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;
}

/* pages/pcn/newlist.php builds its filter selects/inputs directly (no
   filterInput()/.light-filter helper), wrapped in .fieldRow instead - same
   white/border look as the other filter panels, scoped to this page's
   cards rather than the shared .fieldRow select rule used broadly
   elsewhere. */
.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);
}

/* Reskin the select2-enhanced "Filter by Site" box (appeals-admin) to match
   the plain .table-filter selects beside it - style-guide.css already has a
   similar select2 reskin, but it isn't loaded on this route, so this is a
   scoped equivalent rather than a duplicate.
   box-sizing/display: without these, the padding/border below stack on top
   of height instead of being contained by it, making the box visibly taller
   than its sibling .table-filter selects.
   height: 33px is the actual measured rendered height of the sibling
   .table-filter native selects (DevTools computed tab, 2026-08-24) - this
   page's .table-filter selects have no explicit height rule of their own,
   so they render at native browser sizing rather than a Bootstrap formula;
   matching that formula (e.g. calc(1.5em + 0.75rem + 2px)) landed close but
   not exact (35px vs 33px). Hardcoding the real value avoids relying on a
   formula this page doesn't actually follow. */
/* Width: select2's own JS init sets width:100% as an inline style on this
   container, but core-structure.css's ".fieldRow select" rule renders the
   sibling native selects at 95% width - !important here beats the inline
   style so this box matches its siblings instead of running wider. */
.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;
    /* Small left inset to match the sibling selects' tight native text
       padding; right side reserves room for the arrow so text can't run
       under it. */
    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;
}

/* Select2's own arrow is a CSS-triangle <b> element, and the sibling
   .table-filter selects use no appearance/background-image override of
   their own - they show the browser's native OS-drawn arrow, which can't be
   reproduced exactly on a <span>. This SVG chevron (Bootstrap's own default
   form-select arrow) is the closest practical approximation, not a pixel
   match. */
.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;
    /* Stroke hardcoded to --theme-color-6's value (#333333) - var() isn't
       usable inside a data-URI SVG, which is resolved as its own resource
       rather than inheriting the page's custom properties. */
    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;
}

/* Open results dropdown: theme-ipc.css has a site-wide "ul li { list-style-
   type: disc; }" rule (line ~1033) that sets list-style-type directly on
   every <li>, including select2's own generated result rows - select2's own
   reset only targets the parent <ul>, and a directly-specified value on the
   <li> itself always wins over one inherited from a parent, regardless of
   specificity. Overriding it here for select2's results list specifically,
   rather than touching the site-wide rule other things may rely on. */
/* Scoped by #select2-siteId-results rather than an ancestor class: select2
   appends its open dropdown near document.body, not inside
   .module-table-panel-card, so an ancestor-based selector would never match
   it. select2 names the results <ul> "select2-{selectId}-results"
   automatically, which lets these rules target only the appeals-admin site
   filter's dropdown without affecting other select2Class instances
   site-wide (e.g. manage_members.php, the shared panel components). */
#select2-siteId-results {
    margin: 0 !important;
    padding: 0 !important;
}

#select2-siteId-results .select2-results__option {
    list-style: none !important;
    /* core-structure.css has a site-wide "ul li { margin: 0 0 15px 20px; }"
       rule (line 45) - same issue as the disc-bullet override above, just
       for margin instead of list-style, and in a different file. That 20px
       left margin (stacked on top of the padding below) was the real cause
       of the left-alignment complaint, and the 15px bottom margin was the
       real cause of the excess vertical gap - the padding/line-height
       tweaks alone were never going to fix either, since this margin was
       untouched by them. */
    margin: 0 !important;
    /* select2's own default row padding/line-height renders noticeably
       looser than the native dropdown's tightly-packed rows - tightened to
       match, and font-size pinned explicitly rather than left to inherit. */
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    color: var(--theme-color-6);
}

/* select2's default highlighted-row colour is a vivid blue; the native
   dropdown highlights its current selection with a muted gray bar and white
   text instead - matching that here. */
#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: bold;
}

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

.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;
    /* !important on background/border (matching the :hover rule below,
       which already had it) - without it, a page that also loads a raw
       Bootstrap .btn stylesheet after this one (e.g. pages/modules/table.php's
       inline CDN link) has its transparent background/border win at equal
       specificity, leaving the button invisible until :hover. */
    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;
}

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

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