@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: #ea6d10;
    --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: #ebebeb;
    --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-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;
}

.error {
    background: #FFD2D2 !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,
.stripe-table,
#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) !important;
    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;
}

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

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

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