/* Thames file: _main.css */
/*
    Name: Thames;
    Description: Aaaaah;
    Riverlea version: 1.3.8;

    I have added 'thames' to lines I changed.
    This means I can track changes to the core variables with diff.
    (One day all this css could be nicely optimised but for now
    during heavy development it's more helpful to track changes than
    worry about duplicate definitions etc.)

*/

:root {
  --crm-version: 'Thames, v' var(--crm-release);
/* FONTS */
/* --crm-system-fonts:; */
  --crm-font: Lato, sans-serif;
}
:root {
/* COLOUR NAMES */
  --crm-c-darkest: #0a0a0a;
  --crm-c-gray-900: #2f2f2e;
  --crm-c-gray-800: #3e3e3e;
  --crm-c-gray-700: #696969;
  --crm-c-gray-600: #828388;
  --crm-c-gray-500: #919297;
  --crm-c-gray-400: #adaeb3;
  --crm-c-gray-300: #c2c0c0;
  --crm-c-gray-200: #d5d5d5;
  --crm-c-gray-100: #e2e1e1;
  --crm-c-gray-050: #f8f8f8;
  --crm-c-gray-025: #fcfbfb;
  --crm-c-blue-overlay2: #edf4f7; /* thames only */
  --crm-c-blue-overlay: #dce9ef; /* thames only */
  --crm-c-blue-light: #d8edfe; /* thames */
  --crm-c-blue: #c5e4fc; /* thames */
  --crm-c-blue-dark: #0d5790; /* thames. nb #127aca not AAA on #f8f8f8  */
  --crm-c-blue-darker: #033b67; /* thames */
  --crm-c-purple: #4d4d69;
  --crm-c-purple-dark: #3e3e54;
  --crm-c-green: #d6e9c6;
  --crm-c-green-light: #dff0d8;
  --crm-c-green-dark: #468847;
  --crm-c-red: #eed3d7;
  --crm-c-red-light: #f2dede;
  --crm-c-red-dark: #740f0f; /* thames */
  --crm-c-red-bright: #bd0404; /* thames only */
  --crm-c-amber: #eeb153;
  --crm-c-amber-light: #ffebc5;
  --crm-c-yellow: #fcfc5a; /* thames todo change this horrible yellow! */
  --crm-c-yellow-light: #f2deb9;
  --crm-c-yellow-less-light: #fffdb2;
  --crm-c-teal: #63c4b9;
  --crm-c-dark-teal: #3e8079;
/* PRACTICAL COLOURS */
  --crm-c-text-light: #fff;
  --crm-c-text-dark: #000000dd; /* thames */
  --crm-c-link: var(--crm-c-blue-dark);
  --crm-c-link-hover: var(--crm-c-blue-darker);
  --crm-c-divider: 1px solid var(--crm-c-blue-overlay); /* thames */
  --crm-c-layer0-bg: #fff;
  --crm-c-inverse-bg: var(--crm-c-gray-700);
  --crm-c-page-bg: #f3f2ed;
  --crm-c-container-bg: #f8f8f8;
  --crm-c-layer1-bg: var(--crm-c-gray-050);
  --crm-c-layer2-bg: color-mix(in srgb,var(--crm-c-layer1-bg) 90%,#000 10%);
  --crm-c-drag-bg: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
  --crm-c-code-bg: var(--crm-c-blue-overlay2); /* background for code regions */
  --crm-c-focus: var(--crm-c-blue-dark);
  /* Emphasis colours */
  --crm-c-primary: var(--crm-c-blue-dark); /* primary button bgs */ /* thames */
  --crm-c-primary-hover: var(--crm-c-blue-darker); /* thames */
  --crm-c-primary-text: var(--crm-c-text-light);
  --crm-c-primary-hover-text: var(--crm-c-text-light); /* thames */
  --crm-c-secondary: #c9e1f1; /* buttons */ /* thames */
  --crm-c-secondary-hover: #a1cef3; /* thames */
  --crm-c-secondary-text: var(--crm-c-blue-darker); /* thames */
  --crm-c-secondary-hover-text: var(--crm-c-text-light); /* thames todo */
  --crm-c-secondary-on-page-bg: var(--crm-c-blue-darker);
  --crm-c-success: var(--crm-c-green-dark);
  --crm-c-success-text: var(--crm-c-text-light);
  --crm-c-danger: var(--crm-c-red-dark); /* thames */
  --crm-c-danger-text: var(--crm-c-text-light);
  --crm-c-warning: var(--crm-c-amber); /* bg on .btn-warning, .label-warming but border on notification .alert */
  --crm-c-warning-text: var(--crm-c-text-dark);
  --crm-c-info: var(--crm-c-blue-dark);
  --crm-c-info-text: var(--crm-c-text-light);
}
:root {
/* thames only radii */
  --crm-r-5: 0.8rem;
  --crm-r-3: 0.4rem;
  --crm-r-2: 0.25em;
  --crm-r-1: 3px;
/* SHADOWS */
  --crm-block-shadow: unset;
  --crm-popup-shadow: 3px 3px 18px 0 rgba(0, 0, 0,.25); /* thames */
  --crm-bottom-shadow: unset;  /* thames */
  --crm-body-inset: unset;
/* SIZES - temporary */
  --crm-roundness: 0; /* thames - this gets applied in too many places; so setting to 0 and positively re-applying, rather than using this and negatively unapplying. */
  --crm-xs: 0.1rem;
  --crm-xs1: 0.125rem;
  --crm-xs2: 0.15rem;
  --crm-s: 0.25rem;
  --crm-s1: 0.275rem;
  --crm-s2: 0.325rem;
  --crm-s3: 0.375rem;
  --crm-m: 0.5rem;
  --crm-m1: 0.625rem;
  --crm-m2: 0.75rem;
  --crm-m3: 0.875rem;
  --crm-r: 1rem;
  --crm-r1: 1.125rem;
  --crm-r2: 1.25rem;
  --crm-r3: 1.375rem;
  --crm-r4: 1.5rem;
  --crm-l: 2rem;
  --crm-xl: 3rem;
  --crm-xxl: 4rem;
  --crm-big-input: 15em;
  --crm-huge-input: 25em;
  --crm-padding-reg: var(--crm-r);
  --crm-padding-small: var(--crm-s);
  --crm-padding-inset: var(--crm-m);
/* thames: on standalone the following is overridden in cms.css */
  --crm-page-padding: clamp(0.5rem 2vw 4rem); /* Margin left/right */ /* thames */
  --crm-page-width: 100%; /* Default that CMS can overwrite */
/* Type */
  --crm-font-size: var(--crm-r);
  --crm-small-font-size: var(--crm-m2);
  --crm-type-line-height: 1.5;
  --crm-link-decoration: none;
  --crm-link-decoration-hover: underline;
  --crm-heading-bg: unset; /*var(--crm-c-blue-light);*/ /* thames */
  --crm-heading-col: var(--crm-c-text-dark);
  --crm-heading-padding: var(--crm-s1) var(--crm-m1); /* thames unset this? todo */
  --crm-heading-margin: var(--crm-m) 0;
  --crm-heading-radius: var(--crm-roundness);
/* Mouse events */
  --crm-hover-clickable: pointer;
}
:root {
/* Buttons */
  --crm-btn-box-shadow: none;
  --crm-btn-border: 0 solid transparent;
  --crm-btn-txt-transform: inherit;
  --crm-btn-radius: 3px;
  --crm-btn-padding-block: var(--crm-s); /* padding for top and bottom, one value */ /* thames */
  --crm-btn-padding-inline: var(--crm-m2); /* padding for left and right, one value */ /* thames */
  --crm-btn-small-padding: var(--crm-xs) var(--crm-s);
  --crm-btn-large-padding: var(--crm-m) var(--crm-r);
  --crm-btn-align: center;
  --crm-btn-height: 1.825rem; /* thames */
  --crm-btn-icon-spacing: var(--crm-xs2); /* thames */
  --crm-btn-icon-size: auto;
  --crm-btn-cancel-bg: var(--crm-c-red-light);
  --crm-btn-cancel-text: var(--crm-c-red-dark);
  --crm-btn-info-bg: var(--crm-c-secondary); /* thames */
  --crm-btn-info-text: var(--crm-c-secondary-text); /* thames */
  --crm-btn-warning-bg: var(--crm-c-warning);
  --crm-btn-warning-text: var(--crm-c-warning-text);
  --crm-btn-success-bg: var(--crm-c-info); /* thames */
  --crm-btn-success-text: #fff; /* thames */
  --crm-btn-danger-bg: var(--crm-c-red);
  --crm-btn-danger-text: var(--crm-c-red-dark);
  --crm-btn-icon-bg: unset;
  --crm-btn-icon-border: unset;
  --crm-btn-margin: var(--crm-m) 0;
}
:root {
/* Tables */
  --crm-table-outside-border: 1px solid var(--crm-c-layer2-bg);
  --crm-table-bg: var(--crm-c-page-bg);
  --crm-table-row-border: var(--crm-c-divider);
  --crm-table-column-border: 0 solid transparent;
  --crm-table-font-size: var(--crm-font-size);
  --crm-table-padding: var(--crm-m);
  --crm-table-header-border: 1px solid transparent;
  --crm-table-header-bottom: 2px solid var(--crm-c-gray-300);
  --crm-table-header-bg: var(--crm-c-page-bg);
  --crm-table-header-txt: inherit;
  --crm-table-row-bg: var(--crm-c-gray-025);
  --crm-table-row-hover: var(--crm-c-blue-overlay);
  --crm-table-sort-col: var(--crm-c-gray-300);
  --crm-table-sort-float: left; /* 'left', 'right' or 'none' */
  --crm-table-sort-active-col: var(--crm-c-link);
  --crm-table-compressed-width: auto;
  --crm-table-nested-padding: var(--crm-r) var(--crm-m);
  --crm-table-nested-head-border: 0 solid transparent;
  --crm-table-nested-border: var(--crm-c-divider);
  --crm-table-inset-bg: var(--crm-c-layer2-bg);
}
:root {
/* Panels */
  --crm-panel-shadow: var(--crm-block-shadow);
  --crm-panel-border: var(--crm-c-divider);
  --crm-panel-head-margin: 0px;
  --crm-panel-head-height: 42px;
}
:root {
/* Accordions */
  --crm-expand-icon: "\f0da"; /* unicode value for FontAwesome icon */
  --crm-expand-icon-color: var(--crm-c-text);
  --crm-expand-icon-spacing: var(--crm-m);
  --crm-expand-transform: rotate(90deg);
  --crm-expand-transition: transform .3s;
  --crm-expand-radius: 4px; /* thames */
  --crm-expand-gap: var(--crm-xs2) 0 0; /* space between multiple accordions */
/* .crm-accordion-bold */
  --crm-expand-header-bg: var(--crm-c-blue-overlay); /* thames */
  --crm-expand-header-bg-active: var(--crm-c-blue-overlay); /* thames */
  --crm-expand-header-color: var(--crm-c-blue-darker); /* thames */
  --crm-expand-header-padding: 0.6rem 1.6rem 0.6rem 2.8rem; /* thames */
  --crm-expand-header-weight: bold;
  --crm-expand-header-border: unset;/*var(--crm-c-divider);*/ /* thames */
  --crm-expand-header-border-width: unset; /*0 0 1px 0*/; /* thames */
  --crm-expand-border: unset; /* thames */
  --crm-expand-border-width: unset; /* thames */
  --crm-expand-body-bg: var(--crm-c-blue-overlay); /* thames  todo check*/
  --crm-expand-body-box-shadow: unset;
  --crm-expand-body-padding: 0.25rem 2.8rem; /* thames */
/* .crm-accordion-light */
  --crm-expand2-header-bg: transparent;
  --crm-expand2-header-bg-active: var(--crm-c-layer2-bg);
  --crm-expand2-header-weight: normal;
  --crm-expand2-header-border: unset;
  --crm-expand2-header-border-width: unset;
  --crm-expand2-header-padding: .6rem 1.6rem 0.6rem 2.8rem; /*var(--crm-s) var(--crm-m); */ /* thames */
  --crm-expand2-border: unset;
  --crm-expand2-border-width: unset;
  --crm-expand2-body-bg: transparent;
  --crm-expand2-body-padding: 0.25rem 2.8rem; /* thames */
}
:root {
/* Alerts */
  --crm-alert-padding: var(--crm-r); /* thames */
  --crm-alert-margin: 0 0 var(--crm-m);
  --crm-alert-border-width: 0; /* thames */
/* Note 'help' suffix here is for the 'success' boxes. */
  --crm-alert-success-bg: var(--crm-c-blue-light); /* thames */
  --crm-alert-success-border: unset; /* thames */
  --crm-alert-success-text: unset; /* thames */
  --crm-alert-warning-border: var(--crm-c-yellow);
  --crm-alert-info-bg: var(--crm-c-blue-light);
  --crm-alert-info-border: var(--crm-c-blue);
  --crm-alert-info-text: var(--crm-c-blue-darker);
  --crm-alert-danger-bg: var(--crm-c-red-light);
  --crm-alert-danger-border: var(--crm-c-red);
  --crm-alert-danger-text: var(--crm-c-red-dark);
}
:root {
/* Form */
  --crm-form-block-box-shadow: var(--crm-block-shadow);
  --crm-form-block-padding: var(--crm-m);
  --crm-form-block-border-radius: var(--crm-roundness);
  --crm-input-bg-image: linear-gradient(top, #eee 1%, #fff 15%);
  --crm-input-border-color: #0000001a; /* thames */
  --crm-input-border-radius: 3px;
  --crm-input-active-ani: border-color .15s ease-in-out 0s;
  --crm-input-box-shadow: none; /* thames */
  --crm-input-padding: var(--crm-xs1) var(--crm-s2);
  --crm-input-padding-large: var(--crm-s) var(--crm-m1);
  --crm-input-height: var(--crm-l);
  --crm-input-font-size: var(--crm-m3);
  --crm-input-label-weight: bold;
  --crm-input-label-font: var(--crm-font);
  --crm-input-label-size: var(--crm-font-size);
  --crm-input-label-width: 16ch; /* thames todo - where is this used? */
  --crm-input-label-align: right;
  --crm-input-description: #000000e8; /* darker for legibility */ /* thames */
  --crm-input-dropdown-icon: "\f107";
  --crm-input-radio-color: var(--crm-c-focus);
  --crm-inline-edit-border: 0 solid transparent;
  --crm-fieldset-border-color: var(--crm-c-gray-400);
  --crm-fieldset-border: 1px 0 0 0;
  --crm-fieldset-padding: var(--crm-padding-reg) var(--crm-padding-small);
}
:root {
/* Tabs */
  --crm-tabs-bg: var(--crm-c-blue-overlay2);
  --crm-tabs-padding: 0;
  --crm-tabs-border: 4px solid var(--crm-c-blue-overlay2);
  --crm-tabs-gap: var(--crm-s);
  --crm-tab-bg-hover: var(--crm-c-blue-overlay);
  --crm-tab-bg-active: var(--crm-c-layer0-bg);
  --crm-tab-hang: 0 0 calc(-1 * var(--crm-s)) 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames todo check */
  --crm-tab-padding: var(--crm-m2) var(--crm-r1) var(--crm-m); /* thames todo check */
  --crm-tab-weight: normal;
  --crm-tab-count-bg: var(--crm-c-info-text);
  --crm-tab-count-col: var(--crm-c-info);
  --crm-tab-roundness: var(--crm-r-3) var(--crm-r-3) 0 0;
  --crm-tab-border: none;
  --crm-tab-border-width: 0;
  --crm-tab-border-active: 0 solid transparent;
  --crm-tabs-2-border: var(--crm-tabs-border);
}
:root {
/* Contact dashboard/summary */
  --crm-dash-border: 0 solid transparent; /* thames */
  --crm-dash-roundness: var(--crm-r-5); /* thames */
  --crm-dash-direction: grid; /* choose 'flex' for tabs at top, or 'grid' for tabs at side */ /* thames */
  --crm-side-tabs-width: 220px; /* thames */
  --crm-dash-tabs-flow: column; /* choose 'row' for tabs at top, or 'column' for tabs at side */ /* thames */
  --crm-dash-tabs-gap: 0; /* thames */
  --crm-dash-tabs-bg: var(--crm-c-blue-overlay); /* thames */
  --crm-dash-tabs-padding: unset; /* thames */
  --crm-dash-tab-bg: transparent;
  --crm-dash-tabs-roundness: var(--crm-dash-roundness) 0 0 var(--crm-dash-roundness);
  --crm-dash-tab-bg-hover: var(--crm-c-layer0-bg); /* thames */
  --crm-dash-tab-padding: var(--crm-m2) var(--crm-r1); /* thames */
  --crm-dash-tab-border: var(--crm-dash-border); /* thames */
  --crm-dash-tab-border-hover: 0 solid transparent;
  --crm-dash-tab-border-width: 0; /* to remove border on one side for hanging tabs */
  --crm-dash-tab-col: unset; /* thames */
  --crm-dash-tab-count-bg: var(--crm-c-primary); /* thames */
  --crm-dash-tab-count-col: var(--crm-c-text-light); /* thames */
  --crm-dash-tab-width: 100%;
  --crm-dash-tab-align: none;
  --crm-dash-tab-hang: 0 0 -1px 0; /* lip to extend tab flush with active region - set to 0 for no lip */ /* thames */
  --crm-dash-tab-radius: 0; /* thames */
  --crm-dash-icon-size: var(--crm-r); /* thames */
  --crm-dash-box-shadow: 0; /* thames */
  --crm-dash-heading-inset: unset;
  --crm-dash-panel-padding: var(--crm-r2); /* thames */
  --crm-dash-panel-bg: var(--crm-c-layer0-bg); /* thames */
  --crm-dash-panel-border: 0;
  --crm-dash-panel-radius: 0 var(--crm-dash-roundness) var(--crm-dash-roundness) 0;
  --crm-dash-edit-border: 1px solid var(--crm-c-blue-dark); /* thames */
  --crm-dash-block-padding: var(--crm-m2); /* thames */
  --crm-dash-block-bg: var(--crm-c-container-bg); /* thames */
  --crm-dash-block-radius: var(--crm-roundness);
  --crm-dash-label-bg: var(--crm-c-container-bg); /* thames */
  --crm-dash-header-bg: unset; /* thames */
  --crm-dash-header-bg2: unset; /* thames */
  --crm-dash-header-col: var(--crm-c-blue-darker); /* thames */
  --crm-dash-header-size: var(--crm-r3);
  --crm-dash-header-padding: unset; /* thames */
  --crm-dash-image-right: 20px; /* distance from right of dashboard */
}
:root {
/* Dialog */
  --crm-dialog-bg: var(--crm-c-page-bg);
  --crm-dialog-padding: 0; /* thames */
  --crm-dialog-radius: var(--crm-roundness);
  --crm-dialog-line: unset;
  --crm-dialog-inner-shadow: var(--crm-bottom-shadow);
  --crm-dialog-header-bg: var(--crm-c-blue-overlay); /* thames */
  --crm-dialog-header-col: var(--crm-c-blue-darker); /* thames */
  --crm-dialog-header-size: var(--crm-r1);
  --crm-dialog-header-padding: var(--crm-m1) var(--crm-r);
  --crm-dialog-header-radius: var(--crm-dialog-radius);
  --crm-dialog-header-border-col: transparent; /* thames */
  --crm-dialog-body-padding: var(--crm-m);
}
:root {
/* Dashlet */
  --crm-dashlet-border: unset;
  --crm-dashlet-padding: var(--crm-s2);
  --crm-dashlet-box-shadow: none;
  --crm-dashlet-header-bg: var(--crm-c-layer0-bg); /* Thames */
  --crm-dashlet-header-col: var(--crm-expand-header-color);
  --crm-dashlet-header-border: unset;
  --crm-dashlet-header-border-width: unset;
  --crm-dashlet-header-font-size: var(--crm-font-size);
  --crm-dashlet-header-padding: var(--crm-s);
  --crm-dashlet-content-padding: var(--crm-dashlet-padding) 0;
  --crm-dashlet-tabs-bg: var(--crm-tabs-bg);
  --crm-dashlet-tabs-border: 0;
  --crm-dashlet-tab-bg: transparent;
  --crm-dashlet-tab-border: unset;
  --crm-dashlet-tab-color: unset;
  --crm-dashlet-tab-active: var(--crm-tab-bg-active);
  --crm-dashlet-tab-border-active: var(--crm-tab-border-active);
  --crm-dashlet-tab-body-border: 0;
  --crm-dashlet-tab-body-padding: var(--crm-m);
  --crm-dashlet-radius: var(--crm-r-3);
}
:root {
/* Button dropdowns */
  --crm-dropdown-padding: var(--crm-s);
  --crm-dropdown-radius: var(--crm-roundness);
  --crm-dropdown-bg: var(--crm-c-layer0-bg); /* thames */
  --crm-dropdown-col: var(--crm-c-blue-darker); /* thames */
  --crm-dropdown-hover: var(--crm-c-blue-dark); /* thames */
  --crm-dropdown-hover-bg: var(--crm-c-blue-light); /* thames */
  --crm-dropdown-border: 0;
  --crm-dropdown-width: 23ch; /* thames */
  --crm-dropdown-danger-bg: var(--crm-c-danger); /* for delete links in dropdowns */
  --crm-dropdown-2-bg: var(--crm-c-secondary);
  --crm-dropdown-2-padding: var(--crm-padding-small);
}
:root {
/* Notifications */
  --crm-notify-bg: var(--crm-c-layer0-bg); /* thames */
  --crm-notify-padding: var(--crm-m2);
  --crm-notify-col: var(--crm-c-text); /* thames */
  --crm-notify-accent-border: 0.875rem 0 0 0; /* adds a border to one/several sides of the notification - set to 0 for none */ /* thames */
  --crm-notify-radius: 4px; /* thames */
  --crm-notify-danger: var(--crm-c-danger);
  --crm-notify-warning: var(--crm-c-warning);
  --crm-notify-success: var(--crm-c-success);
  --crm-notify-info: var(--crm-c-info);
}
:root {
/* Icons */
  --crm-icon-danger: "\f06a";
  --crm-icon-success: "\f058";
  --crm-icon-info: "\f05a";
  --crm-icon-close: "\f00d";
  --crm-icon-sort: "\f0dc";
  --crm-icon-sort-desc: "\f0dd";
  --crm-icon-sort-asc: "\f0de";
  --crm-icon-danger-color: inherit;
  --crm-icon-success-color: inherit;
  --crm-icon-warning-color: inherit;
  --crm-icon-info-color: inherit;
}
:root {
/* Wizard */
  --crm-wizard-width: fit-content;
  --crm-wizard-margin: 0.5rem auto;
  --crm-wizard-height: 30px;
  --crm-wizard-radius: var(--crm-l);
  --crm-wizard-angle: 0px;
  --crm-wizard-active-col: var(--crm-c-text-light);
  --crm-wizard-active-bg: var(--crm-c-link);
  --crm-wizard-border: var(--crm-c-divider);
  --crm-wizard-bg: var(--crm-c-page-bg);
}
:root {
/* Alpha filter */
  --crm-filter-bg: var(--crm-c-blue-overlay);
  --crm-filter-padding: var(--crm-m);
  --crm-filter-item-bg: transparent;
  --crm-filter-item-shadow: none;
  --crm-filter-spacing: space-between;
}
:root {
/* Frontend */
  --crm-f-form-width: 700px;
  --crm-f-box-shadow: var(--crm-block-shadow);
  --crm-f-fieldset-bg: var(--crm-c-container-bg);
  --crm-f-fieldset-padding: var(--crm-r);
  --crm-f-fieldset-margin: 0 0 var(--crm-padding-reg) 0;
  --crm-f-fieldset-border: 0;
  --crm-f-legend-align: center;
  --crm-f-legend-size: var(--crm-r3);
  --crm-f-form-padding: var(--crm-padding-reg);
  --crm-f-form-layout: block; /* 'grid' = inline, 'block' = stacked */
  --crm-f-label-position: unset;
  --crm-f-label-align: left;
  --crm-f-label-weight: bold;
  --crm-f-label-margin: var(--crm-s);
  --crm-f-label-width: unset;
  --crm-f-input-radius: var(--crm-roundness);
  --crm-f-input-padding: var(--crm-r2) var(--crm-m2);
  --crm-f-input-font-size: var(--crm-r1);
  --crm-f-input-width: 100%; /* thames */
  --crm-f-form-focus-bg: var(--crm-c-green);
  --crm-f-form-error-bg: var(--crm-c-red);
  --crm-f-logo-height: 40px;
  --crm-f-logo-align: center; /* left, right or center */
}

/* Only affect body colour in standalone */
html.cms-standalone body {
  background-color: var(--crm-c-page-bg);
}

#crm-container {
  min-height: 100vh;
  background-color: var(--crm-c-page-bg);
}

.crm-container details {
  /* background-color: var(--crm-expand-body-bg); Removed for FormBuilder clashes */
  border: var(--crm-c-divider);
}

.crm-container summary {
  color: var(--crm-c-blue-darker); /* novar */
  cursor: pointer; /* show it's clickable */
  position: relative; /* so our animated triangle doesn't go walkies */
}
.crm-container summary:hover,
.crm-container summary:focus {
  background-color: var(--crm-c-blue-overlay2);
}

/* Replace Riverlea's FontAwesome icon with our own shape. */
/* This rule is really sensitive to specificity. */
/* .crm-container :where(details, .crm-accordion-wrapper)>:is(summary,.crm-accordion-header)::before {  */

.crm-container details>summary::before /* accordion8 (recommended) */,
.crm-container .crm-accordion-header::before, /* accordion1, accordion2, accordion6 */
.crm-container .crm-collapsible .collapsible-title::before /* accordion3 */ {
  --crm-expand-icon: '';
  border: .4rem solid transparent;
  border-left-color: var(--crm-expand-icon-color);
  position: absolute;
  margin-left: -1.5rem;
  margin-top: 0.2rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: transform .25s ease;
}
/* fight the fixes.css */
.crm-container .civicrm-community-messages .collapsible-title::before {
  transform-origin: .2rem 50% !important;
}
/* advanced search */
.crm-container details.crm-accordion-settings summary::before {
  content: '';
}
/* extensions */
.crm-container #extensions-main table.dataTable summary,
.crm-container #extensions-addnew table.dataTable summary {
  padding: 0 0 0 2rem !important;
}
.crm-container #extensions-main  details {
  border: none;
}

/* we have to sort of re-state these rules because the specificity of the above overrules the 'open' state
 * note that a lot of non-recommended patterns use .collapsed, whereas details uses [open] - reverse logic.
 * This covers accordion1, accordion2, accordion6.
 */
.crm-container .crm-accordion-wrapper.collapsed>.crm-accordion-header::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-accordion-wrapper:not(.collapsed)>.crm-accordion-header::before {
  transform: rotate(90deg);
}
/* the following 2 rules are for accordion3 and accordion4(still bit weird) */
.crm-container .crm-collapsible.collapsed>.collapsible-title::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-collapsible:not(.collapsed)>.collapsible-title::before {
  transform: rotate(90deg);
}

/* Apply subtle animation */
@keyframes crm-details-show {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
}
  50% {
    transform: translateY(-0.1rem);
}
}
.crm-container :is(details,
.crm-accordion-wrapper)>.crm-accordion-body {
  padding: var(--crm-expand-body-padding);
  animation: crm-details-show 240ms ease-in-out;
}
/* We don't want a different colour header bg on 'active' (open) but we do on hover
 * This doesn't work yet.*/
.crm-container .crm-accordion-bold>summary:is(:hover,
:focus) {
  background-color: var(--crm-c-blue-overlay2);
}


/* Alternate backgrounds */
/* .crm-container details:not(.crm-accordion-light) details:not(.crm-accordion-light) { */
/*   --crm-expand-header-bg: var(--crm-c-blue-overlay2); */
/* } */


/* ALERTS (these are in-page-flow boxes with info, not the (normally) popup notifications) */

/* help boxes: put stripe down left with icon in it. */
.crm-container #help,
.crm-container .help {
  border: none;
  border-left: 2rem solid #7cb5e1;
  border-radius: 0;
}
.crm-container #help::before,
.crm-container .help::before {
  color: #fff;
  content: "\f0eb";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  margin-left: -2.3rem;
  position: absolute;
  text-rendering: auto;
}

.crm-container .alert-success {
  background-color: var(--crm-c-green);
}
.crm-container :is(.status,
.alert-warning,
.messages.warning) {
  --crm-roundness: 0.25rem;
}

/* BUTTONS */

/*.crm-container .btn,
.crm-container button,
.crm-container .crm-button,
.crm-container [type="button"],
.crm-container [type="reset"],
.crm-container [type="submit"] {
  Sometimes we have lots of buttons and they wrap to a 2nd line. This puts some vertical space betwixt.
  margin: var(--crm-m) 0;
}

/* Make it clear when you're hovering delete. */
.crm-container .btn.btn-danger:hover,
.crm-container .btn.btn-danger:focus,
.crm-container a.button.delete-button:hover,
.crm-container a.button.delete-button:focus,
.crm-container a.button.delete:hover {
  color: var(--crm-c-red-bright);
}
.crm-icon-picker-button {
  float: none;
}
.crm-container .ui-button:not(.ui-button-icon-only).crm-icon-picker-button {
  display: inline-flex;
}

/* DIALOGS */

/* I feel title, resize, close is a better order for buttons bs modal dialogs */
/* .ui-dialog-title { flex: 1 1 auto; order: 1; } */
/* .crm-dialog-titlebar-resize { order: 2; } */
.crm-container.ui-dialog .ui-dialog-titlebar .ui-button.crm-dialog-titlebar-print {
  display: none;
}

/* .modal-header .close { order: 3; } */
/* .crm-container  .modal-header .ui-icon[class*=" fa-"] { font-size: 1rem; } */
/* I don't know what problem this solved, but it creates an undesired left padding */
/* #bootstrap-theme .modal-header::before, #bootstrap-theme .modal-header::after { */
/*   display: none !important; */
/* } */
/**/
/* #bootstrap-theme .modal-header { */
/*   border:none; */
/* } */
/**/
/* .crm-container button.close { */
/*   color: var(--crm-c-blue-darker) !important; */
/* } */

/* DROPDOWNS */
.crm-container .btn-group .dropdown-menu,
.crm-container .btn.dropdown-toggle+.dropdown-menu {
  border-radius: 4px;
}

/* FORMS */

.crm-container .replace-plain {
  background: #fff;
}


/* NOTIFICATIONS (the popup ones) */
/* This produces a nicer hanging-indent type thing aligning the title and message to the left. */
.crm-container .notify-content {
  padding-left: 1.6rem;
}

/* Thames theme does hanging indent for the little <i>con, but happy for the list bullets to be outside of main text block as is narrow column. */
#crm-notification-container div.ui-notify-message .notify-content ul,
#crm-notification-container div.ui-notify-message .alert.notify-content ul {
  margin: 1rem 0 0;
  padding: 0;
}

/* Only include the margin under the h1 (h1!) when it's not empty. When it's empty the h1 only contains the <i>con and adding a margin messes up vertical alignment of the message. */
#crm-notification-container div.ui-notify-message h1:not(:empty) {
  margin-bottom: 1rem;
}

/* OTHER */
/* 'alpha-filter' is the alphabetical pager you see, for example, on adv search results */
.crm-container #alpha-filter li {
  --crm-c-text: #0002; /* referenced in searchForm.css */
}

.crm-container .description:not(#help),
.crm-container td.description {
  font-size: 0.875rem;
}


/* Get rid of the ugly black overlay during loading */
@keyframes aahblockoverlay {
  0% {
    background-color: var(--crm-c-blue-overlay);
}
  50% {
    background-color: var(--crm-c-page-bg);
}
  100% {
    background-color: var(--crm-c-blue-overlay);
}
}
.crm-container .blockUI.blockOverlay {
  animation: aahblockoverlay 10s infinite;
}

/* CONTACT SUMMARY */
/* Ensure the Summary tab's top left corner matches the radius of the container */
.crm-contact-page #mainTabContainer .crm-contact-tabs-list>li:first-child a {
  border-radius: var(--crm-dash-roundness) 0 0 0;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor:has(.crm-i) {
  grid-template-columns: var(--crm-dash-icon-size) 1fr auto;
  gap: 1ch;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor .crm-i:first-child {
  justify-self: center;
}

.crm-summary-contactname-block:not(.crm-edit-ready) #crm-contactname-content {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

/* RL has no margin-bottom so the actions ribbon touches the main contact block */
div.crm-summary-contactname-block+.crm-actions-ribbon {
  margin-bottom: var(--crm-r1) !important;
}

/* Use subgrid? No. Not responsive enough. */
/* #contact-summary { grid-template-columns: 1fr 1fr; display: grid; } */
/* .crm-container div.contact_panel { display: grid; grid-template-columns: subgrid; grid-column: 1 / 3; } */
/* .contact_details { grid-template-columns: subgrid; grid-column: 1/ 3; } */

/* Decorations to indicate an editable chunk. */
#contact-summary .crm-edit-help {
  color: transparent;
  transition: 0.3s color;
  opacity: 1;
  font-size: 0.875rem;
}

#contact-summary .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important; /* important overrides contactSummary.css */
}

#contact-summary .crm-inline-edit:hover .crm-edit-help {
  color: var(--crm-c-blue-dark);
}

#contact-summary .crm-inline-edit:hover .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important;
}

.crm-container div.crm-summary-row {
  display: grid;
  grid-template-columns: var(--crm-input-label-width) 1fr;
}

/* unbold the labels */
.crm-container div.crm-summary-row div.crm-label {
  font-weight: normal !important; /* important overrides contactSummary.css that comes after this stylesheet */
}

/* instead bold the values */
.crm-container div.crm-summary-row div.crm-label+div {
  font-weight: bold;
}

/* drop the ugly mahusive roadsign-atop unreadable icon for things like do not email */
.fa-stack .crm-i.fa-stack-2x {
  font-size: 1rem;
}

.fa-stack .crm-i.fa-stack-1x:first-child {
  display: none;
}

#contact-summary div.crm-summary-row div.crm-label .fa-stack {
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  width: auto;
}

#contact-summary div.crm-summary-row div.crm-label :where(.fa-stack-1x,
.fa-stack-2x) {
  position: static;
  width: auto;
}

/* when space is tight, wrap labels onto next row */
.crm-container div.crm-summary-row {
  flex-wrap: wrap;
}

/* */
#contact-summary .crm-tag-item {
  border-radius: var(--crm-r-1);
}

.crm-container div.crm-summary-row div.crm-label {
  color: var(--crm-c-blue-darker);
}

/* INLINE EDIT */
.crm-editable.crm-editable-editing {
  background: white;
  padding: 0.5em;
  border-radius: 0.25em;
  border: solid 1px var(--crm-c-blue);
}

.crm-container .crm-editable-form [type="submit"] {
  color: var(--crm-c-green-dark) !important;
}

/* nice rounded tables. Pretty niche. */
.crm-container table:not(.crm-inline-edit-form) {
  border-radius: 0.4rem;
  /* Fails when pop-up menus inside table need to extend beyond the table */
  /* clip-path: inset(0 0 0 0 round 0.4rem); */
  border-collapse: separate;
  border-spacing: 0;
}

.crm-container table tr:first-child th:first-child {
  border-radius: 0.4rem 0 0 0;
}

.crm-container table tr:first-child th:last-child {
  border-radius: 0 0.4rem 0 0;
}

.crm-container table tr:last-child td:first-child {
  border-radius: 0 0 0 0.4rem;
}

.crm-container table tr:last-child td:last-child {
  border-radius: 0 0 0.4rem 0;
}

/* ensure thing that wrap tables allow scrolling in case the table overflows. */
div:has(> table) {
  overflow-x: auto;
  max-width: 100%;
}
/* When a menu is activated, allow it 20rem height to prevent it causing scroll
 * when the menu is opened on a row near the bottom of the table and
 * which the user might not notice / might make the menu hard to access.
 * https://lab.civicrm.org/extensions/riverlea/-/issues/90
 */
div:has(> table .btn-slide-active),
div:has(> table .dropdown-toggle[aria-expanded="true"]) {
  padding-bottom: 20rem;
}

/* Advanced search: override searchForm.css for slightly better aligned fields */
.advanced-search-fields {
  align-items: end;
}

/* tabs */
.crm-container .ui-tabs:not(#mainTabContainer) {
  background: white;
  border: var(--crm-tabs-border) !important;
  border-radius: var(--crm-r-3);
  /* overrides #civicrm-news-feed.ui-tabs and .crm-contact-page #secondaryTabContainer */
}
/* breadcrumbs - links not accessibile using the nromal blue. */
#civicrm-footer a,
nav.breadcrumb a {
  --crm-c-link: var(--crm-c-blue-darker);
  --crm-c-link-hover: var(--crm-c-blue-dark);
}
#crm-contactname-content .crm-edit-help {
  color: var(--crm-c-blue-dark) !important; /* override */
  padding: 0.25rem !important;
  opacity: 1 !important;
}
#crm-contactname-content > .crm-inline-block-content {
  border: solid 1px transparent !important;
}
#crm-contactname-content:hover > .crm-inline-block-content {
  border-color: var(--crm-c-blue-dark) !important;
}

/* Overrides for crmSearchAdmin.css */
.crm-search-nav-tabs > div.btn-group {
  top: 0 !important; /* the buttons already have padding, we don't need this. (crmSearchAdmin.css, L10 at time of writing) */
}


/* Make the tags list nicer. */
.crm-tag-item {
  padding: 0 1ch;
  border-radius: 1rem;
}

/* clickable items in select2 drop downs should be blue like links. */
.select2-drop.select2-drop-active.crm-container .select2-results > li {
  color: var(--crm-c-blue-dark);
}

/* Breadcrumbs */
html.crm-standalone  nav.breadcrumb>ol {
  display: flex;
  gap: var(--crm-m);
}
.breadcrumb ol li:not(:first-child)::before {
  content: " \BB ";
  margin-inline-end: var(--crm-m);
  color: var(--crm-c-blue-dark);
}

/* override _fixes.css */
.crm-container .font-red {
  color: var(--crm-c-red-bright) !important;
}
/* override _icons.css */
.crm-i.fa-ban.fa-stack-2x {
  opacity: 1;
}

/* PHP errors, warnings */
.standalone-errors {
  background: #ead2ce;
}

/* e.g. search buttons followed by count of matches on SK screen */
.crm-search-display .form-inline:not(th,td) {
  padding: var(--crm-padding-reg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crm-m);
}

/* Spinner. Replace the fa icon with something nicer. */
.fa-spinner::before {
  content: "";
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  border: dashed 1px white;
  border-radius: 1rem;
  animation: thames-spinner 1s infinite;
}

/* Spinner for notifications .status-start notifications e.g. loading/saving. */
.crm-status-box-outer.status-start .crm-status-box-inner {
  /* Allow space for spinner.*/
  padding-left: 2.5ch;
}

/* The spinner. */
.crm-status-box-outer.status-start .crm-status-box-inner::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2.5ch;
  display: block;
  content: '';
  line-height: 1;
  animation: thames-spinner 1s infinite;
  transform-origin: center;
  width: 1.5ch;
  height: 1.5ch;
  border: dashed 1px white;
  border-radius: 2ch;
}

@keyframes thames-spinner {
  0% {
    transform: none;
  }
  100% {
    transform: rotateZ(360deg);
  }
}


/* Searchkit preview table headers go weird because of the button margin for the select-all button. */
/* .crm-container .btn, .crm-container button, .crm-container .crm-button, .crm-container [type="button"], .crm-container [type="reset"], .crm-container [type="submit"]*/
.crm-container th.crm-search-result-select {
  --crm-btn-margin: 0;
}
/* Searchkit accordions */
.crm-search-admin-edit-columns details,
.crm-search .crm-search-admin-relative details {
  /*issue https://lab.civicrm.org/extensions/riverlea/-/issues/102 */
  margin-left: 1rem;
  /* crmSearchAdmin applies this var as the bg here and it does not suit us. */
  --crm-c-page-bg: transparent;
}

/* Override contactSummary.css */
#crm-contact-actions-list a.delete {
  --crm-c-danger-text: var(--crm-c-red-dark);
}
#crm-contact-actions-list a.delete:hover,
#crm-contact-actions-list a.delete:focus {
  /* the hover state gives crm-c-red-dark to the background */
  --crm-c-danger-text: var(--crm-c-red-light);
}

/* Fix Mosaico wizard */
.crm_wizard__tille {
  --crm-panel-bg: transparent;
}
.crmb-wizard-button-right {
  gap: 1rem;
}

/* Support contact dashboard image float */
.contactCardRight:has(#crm-contact-thumbnail) .float-left {
  width: calc(100% - var(--crm-flex-gap) - var(--crm-dash-image-size));
}

/* Quicksearch */
ul.crm-quickSearch-results a {
  padding: 0.25rem 1rem;
  text-decoration: none;
  color: var(--crm-c-link);
}
ul.crm-quickSearch-results .ui-state-active a /* mouse,keyboard nav */ {
  background: var(--crm-c-blue);
  color: var(--crm-c-link-hover);
}
ul.crm-quickSearch-results a:active {
  background: white;
}


/* ajax status/saving notifications */
.crm-status-box-msg {
  color: white;
}

.crm-status-box-outer {
  position: fixed;
  top: 2px;
  right: 2px;
  z-index: 100000;
  background-image: none;
  background-color: var(--crm-c-blue-dark);
  padding: 0 1rem;
  border-radius: 3px;
  min-width: 8rem;
  max-width: 13rem;
  text-align: left;
  --crm-c-layer1-bg: transparent;

  .crm-status-box-msg {
    color: white;
  }

  &.status-success {
    background-color: var(--crm-c-green-dark);
  }

  &.status-error {
    background-color: var(--crm-c-red-dark);
  }
}
.crm-status-box-outer.status-start .crm-status-box-inner {
  padding-left: 2.5ch;
}
.crm-status-box-outer.status-start .crm-status-box-inner::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2.5ch;
  display: block;
  content: '';
  line-height: 1;
  animation: loading-status-message 1s infinite;
  transform-origin: center;
  width: 1.5ch;
  height: 1.5ch;
  border: dashed 1px white;
  border-radius: 2ch;
}

@keyframes loading-status-message {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-50%) rotateZ(360deg);
  }
}

:root { color-scheme: light; }