/*
    Name: Thames;
    Description: Aaaaah;
    Riverlea version: 0.9.55;

    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;
/* --crm-font-bold:Lato; */
--crm-bold-weight: bold;
/* --crm-font-italic:; */
--crm-italic-style: italic;
/* --crm-font-bold-italic:; */
}
:root {
/* COLOUR */
color-scheme: light dark; /* check to use simpler syntax late-2024 (Edge+iOS Safari)

/* 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 */
/* non-WCAG-AA --crm-c-blue-dark:     #2c98ed ; /* thames */
--crm-c-blue-dark:     #127ACA ; /* thames */
--crm-c-blue-darker:   #02477d; /* 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: #000000dd; /* thames */
--crm-c-light-text: #fff;
--crm-c-dark-text: var(--crm-c-text);
--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-page-background: #f3f2ed; /* background to page body */ /* thames */
--crm-c-background: #f8f8f8 ; /* background to page header, often form block & dialog bg */ /* thames */
--crm-c-background2: var(--crm-c-gray-050); /* 2-5 = progressively darker backgrounds*/
--crm-c-background3: var(--crm-c-gray-100);
--crm-c-background4: var(--crm-c-gray-200);
--crm-c-background5: var(--crm-c-gray-700);
--crm-c-drag-background: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
--crm-c-code-background: var(--crm-c-blue-overlay2); /* background for code regions */
--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-light-text);
--crm-c-primary-hover-text: white; /* 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-light-text); /* thames todo */
--crm-c-success: var(--crm-c-green-dark);
--crm-c-success-text: var(--crm-c-light-text);
--crm-c-alert: var(--crm-c-red-dark); /* thames */
--crm-c-alert-text: var(--crm-c-light-text);
--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);
--crm-c-info: var(--crm-c-blue-dark);
--crm-c-info-text: var(--crm-c-light-text);
--crm-c-focus: var(--crm-c-blue-dark);
--crm-c-inactive: #696969;
}
: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:;
--crm-popup-shadow: 3px 3px 18px 0 rgba(0, 0, 0,.25); /* thames */
--crm-bottom-shadow: ;  /* thames */
--crm-body-inset:;

/* 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: 100%; /* thames */
--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: ; /*var(--crm-c-blue-light);*/ /* thames */
--crm-heading-col: var(--crm-c-text);
--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-alert-bg: var(--crm-c-red);
--crm-btn-alert-text: var(--crm-c-red-dark);
--crm-btn-icon-bg: ;
--crm-btn-icon-border: ;
--crm-btn-margin: var(--crm-m) 0;
}
:root {
/* Tables */
--crm-table-outside-border: 1px solid var(--crm-c-background3);
--crm-table-background: var(--crm-c-page-background);
--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-background);
--crm-table-header-txt: inherit;
--crm-table-even-row: var(--crm-c-background2);
--crm-table-even-hover: var(--crm-c-blue-overlay);
--crm-table-odd-row: var(--crm-c-gray-025);
--crm-table-odd-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-background3);
}
:root {

/* Panels */
--crm-panel-shadow: var(--crm-block-shadow);
--crm-panel-background: white;
--crm-panel-border: var(--crm-c-divider);
--crm-panel-head-margin: 0px;

}
:root {
/* Accordions */
--crm-expand-icon: "\f0da"; /* unicode value for FontAwesome icon */
--crm-expand-icon-color: var(--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: var(--crm-bold-weight);
--crm-expand-header-font: var(--crm-font-bold);
--crm-expand-header-border: ;/*var(--crm-c-divider);*/ /* thames */
--crm-expand-header-border-width: /*0 0 1px 0*/; /* thames */
--crm-expand-border:; /* thames */
--crm-expand-border-width:; /* thames */
--crm-expand-body-bg:var(--crm-c-blue-overlay); /* thames  todo check*/
--crm-expand-body-box-shadow:;
--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-background-2);
--crm-expand2-header-weight: normal;
--crm-expand2-header-font:;
--crm-expand2-header-color: var(--crm-c-text);
--crm-expand2-header-border:;
--crm-expand2-header-border-width: ;
--crm-expand2-header-padding: .6rem 1.6rem 0.6rem 2.8rem; /*var(--crm-s) var(--crm-m); */ /* thames */
--crm-expand2-border:;
--crm-expand2-border-width:;
--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-background-help: var(--crm-c-blue-light); /* thames */
--crm-alert-border-help: ; /* thames */

--crm-alert-text-help: ; /* thames */
--crm-alert-background-warning: var(--crm-c-yellow-light);
--crm-alert-border-warning: var(--crm-c-yellow);
--crm-alert-text-warning: var(--crm-c-text);
--crm-alert-background-info: var(--crm-c-blue-light);
--crm-alert-border-info: var(--crm-c-blue);
--crm-alert-text-info: var(--crm-c-blue-darker);
--crm-alert-background-danger: var(--crm-c-red-light);
--crm-alert-border-danger: var(--crm-c-red);
--crm-alert-text-danger: var(--crm-c-red-dark);
}
:root {

/* Form */
--crm-form-block-box-shadow: var(--crm-block-shadow);
--crm-form-block-background: var(--crm-c-background);
--crm-form-block-padding: var(--crm-m);
--crm-form-block-border-radius: var(--crm-roundness);
--crm-input-background: white; /* thames */
--crm-input-background-image: linear-gradient(top, #eee 1%, #fff 15%);
--crm-input-color: var(--crm-c-text);
--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-form-select-bg: var(--crm-c-background2);
--crm-inline-edit-border: 0 solid transparent;
--crm-inline-edit-bg: var(--crm-c-background);
--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);
--crm-checkbox-list-col: var(--crm-c-text);

}
: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: var(--crm-c-background2);
--crm-tab-bg-hover: var(--crm-c-blue-overlay);
--crm-tab-bg-active: white;
--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-s3) var(--crm-m) var(--crm-s) var(--crm-m);
--crm-tab-padding: var(--crm-m2) var(--crm-r1) var(--crm-m); /* thames todo check */
--crm-tab-col: var(--crm-c-text);
--crm-tab-weight: normal;
--crm-tab-font:;
--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: ; /* 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: white; /* 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: ; /* thames */
--crm-dash-tab-count-bg: var(--crm-c-primary); /* thames */
--crm-dash-tab-count-col: var(--crm-c-light-text); /* 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-summary-row-bg: var(--crm-c-background);
--crm-dash-box-shadow: 0; /* thames */
--crm-dash-heading-inset: ;
--crm-dash-panel-padding: var(--crm-r2); /* thames */
--crm-dash-panel-bg: white; /* 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-background); /* thames */
--crm-dash-block-radius: var(--crm-roundness);
--crm-dash-label-bg: var(--crm-c-background); /* thames */
--crm-dash-header-bg: ; /* thames */
--crm-dash-header-bg2: ; /* thames */
--crm-dash-header-col: var(--crm-c-blue-darker); /* thames */
--crm-dash-header-size: var(--crm-r3);
--crm-dash-header-padding: ; /* thames */
--crm-dash-image-size: 100px;
--crm-dash-image-radius: 200px;
--crm-dash-image-justify: space-between; /* choose from start (left), end (right), center, and space-between (spread out) */
--crm-dash-image-direction: row; /* choose from row and row-reverse to get the image on the right, column stacks it */

}
:root {
/* Dialog */
--crm-dialog-bg: var(--crm-c-page-background);
--crm-dialog-padding: 0; /* thames */
--crm-dialog-radius: var(--crm-roundness);
--crm-dialog-line:;
--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-bg: var(--crm-c-background);
--crm-dialog-body-padding: var(--crm-m);
}
:root {

/* Dashlet */
--crm-dashlet-border:;
--crm-dashlet-bg: white;
--crm-dashlet-padding: var(--crm-s2);
--crm-dashlet-box-shadow: none;
--crm-dashlet-dashlets-bg: var(--crm-c-background);
--crm-dashlet-header-bg: white;
--crm-dashlet-header-col: var(--crm-expand-header-color);
--crm-dashlet-header-border:;
--crm-dashlet-header-border-width:;
--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:;
--crm-dashlet-tab-color:;
--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: white; /* 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-alert-bg: transparent; /* thames */
--crm-dropdown-2-bg: var(--crm-c-secondary);
--crm-dropdown-2-col: var(--crm-c-text);
--crm-dropdown-2-padding: var(--crm-padding-small);

}
:root {
/* Notifications */
--crm-notify-background: white; /* 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 */

}
:root {
/* Icons */
--crm-icon-alert: "\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-alert-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-light-text);
--crm-wizard-active-bg: var(--crm-c-link);
--crm-wizard-border: var(--crm-c-divider);
--crm-wizard-bg: var(--crm-c-page-background);

}
: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-background);
--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: ;
--crm-f-label-align: left;
--crm-f-label-width: 200px;
--crm-f-label-weight: bold;
--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 */
}