/* Stendlitz file: _main.css */
/*
    Name: Stendlitz;
    Description: Theme for the DSEE CiviCRM implementation. Based on Core/Minetta;
    Some pointers:
      - Use this stream to replace the variables in '/core/css/_variables.css'.
        That's the file to study to understand how RL variables work.
      - All variables are prefixed with '--crm' to avoid clashes with other CMS theme variables.
      - '--crm-c-' denotes a colour, and '--crm-f-' denotes a front-end variable
        that's only applied on '.crm-public'
      - Variables often exist in chains, pointing to each other so that you can both
        have one change applied in multiple areas *and* over-ride that in a specific area.
      - These can run three deep, eg a colour variable ('--crm-c-amber'), is applied to a
        functional colour variable ('--crm-warning-color') that's then used by '--crm-btn-bg-warning'
        and '--crm-notify-warning-color'
      - All of these are defined in Core Variables, so before replacing in a Stream, decide what your goal is.
      - E.g., if you wanted to change warning colours to pink. you could redefine '--crm-c-amber'
        to point to a pink colour property. But that loses the semantic meaning and maybe there's other
        places that point to amber. It's probably safer to add a variable in your stream '--crm-c-pink'
        that matches your colour, then set '--crm-warning-color: var(--crm-c-pink)'.
      - If you only want warning buttons to change, and not notifications, then you could
        just set '--crm-btn-bg-warning: var(--crm-c-pink)'
      - Good contrast between backgrounds (usually with 'bg' in the variable name) and foreground (usually with 'text') are
        needed for accessibility. So most functional colours exist in pairs: '--crm-warning-color' and '--crm-warning-text-color'.
      - These can be checked with a tool like https://webaim.org/resources/contrastchecker/ - with
        4.5:1 ratio needed for WCAG AA and 7:1 for WCAG AAA.
      - '--text' as a foreground colour is normally a black or a white shade, pointing to '--crm-text-dark-color' or '--crm-text-light-color'.
      - This terminology is key for the inversion with dark-mode, when '-crm-c-text' will change from dark to light
        but these two variables text-light/dark stay the same as default.
      - Some colours use 'hsl' processing generate automatically. E.g. 'crm-primary-color-hover' is darker version of any 'crm-primary-color' colour.
        The same with alert-borders. In other words, check core to ensure you need to over-write every colour, if there's an auto colour and it works.
      - 'crm-radius' for border-radius is used in dozens of places, most of which (inputs, buttons, fieldsets, accordions, notifications, etc)
        can be directly over-ridden with specific variables, e.g. '--crm-input-border-radius'
      - While you can add your own CSS here, it can prevent future updates of Civi and RiverLea updating for your theme.
      - Before adding your own CSS in a civicrm.css file a suggested workflow would be:
          1. use browser inspector to see if the change you want can be handled by a variable.
          2. if that variable is part of a chain, make a note so you decide later if you only want this one instance changed
             or all instances.
          3. if you need to write custom css in a civicrm.css - double check if this is a shortfall of the RiverLea theme - it might be.
             feel free to open an issue on https://lab.civicrm.org/dev/user-interface suggesting missing variables for your use-case.
*/

:root {
/* Colour names, e.g. green, red, blue '--crm-c-' */
/* Practical colours, e.g. text, link '--crm-c-' */
/* Backgrounds, '--crm-c-*-bg' */
/* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
/* Shadows */
/* Sizes */
/* Type - fonts, link, heading */
/* Mouse events */
/* Buttons '--crm-btn-' */
/* Tables '--crm-table-' */
/* Panels '--crm-panel-' */
/* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
/* Alerts '--crm-alert' */
/* Form '--crm-form-' '--crm-input-' '--crm-inline-' '--crm-fieldset-' '--crm-checkbox' */
/* Tabs '--crm-tabs'/
/* Contact layout '--crm-contact-' */
/* Dialog '--crm-dialog-' */
/* Dashlet for main dashboard '--crm-dashlet-' */
/* Button dropdowns '--crm-dropdown-' */
/* Notifications '--crm-notify-' */
/* Icons '--crm-icon-' */
/* Wizard '--crm-wizard-' */
/* Alpha filter '--crm-filter-' */
/* Frontend '--crm-f- */

/* Tables */
--crm-table-outside-border: 1px solid var(--crm-c-gray-200);
/* Alerts */
--crm-alert-warning-bg-color: var(--crm-c-yellow-light);
/* Tabs */
--crm-tab-hover-bg-color: var(--crm-container-bg-color);
/* Front */
--crm-f-legend-border: var(--crm-border);
--crm-f-logo-align: right;
}


/* Custom CSS */

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

/* Stendlitz vars */
:root {
--crm-btn-icon-bg: none;
}
:root { color-scheme: light dark; }
:root[data-civi-color-scheme=light] { color-scheme: light; }
:root[data-civi-color-scheme=dark] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
/* core dark vars */
:root:not([data-civi-color-scheme=light]) {
/* Colour names */
/* Practical colours, e.g. text, link '--crm-c-' */
  --crm-text-color: var(--crm-text-light-color);
  --crm-border-color: var(--crm-c-gray-500);
  --crm-paper: var(--crm-c-gray-900); /* The darkest bg in dark mode */
  --crm-ink: var(--crm-text-light-color); /* The lightest foreground in dark mode */
/* Backgrounds, '--crm-c-X-bg' */
  --crm-code-bg-color: var(--crm-layer1-bg-color);
  --crm-layer1-bg-color: var(--crm-c-gray-800);
  --crm-layer2-bg-color: var(--crm-c-gray-700);
/* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
  --crm-primary-ink-color: var(--crm-c-gray-300);
  --crm-secondary-ink-color: #cdcdcd;
  --crm-success-ink-color: var(--crm-success-light-color);
  --crm-warning-ink-color: var(--crm-warning-light-color);
  --crm-danger-ink-color: var(--crm-danger-light-color);
  --crm-info-ink-color: var(--crm-info-light-color);
/* Shadows */
  --crm-shadow-popup: 0 3px 18px 0 rgb(0,0,0);
/* Sizes */
/* Type */
  --crm-heading-color: var(--crm-text-light-color);
/* Mouse events */
/* Buttons '--crm-btn-' */
/* Tables '--crm-table-' */
  --crm-table-row-alternate-bg-color: #fff;
/* Panels '--crm-panel-' */
/* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
  --crm-accordion-body-bg-color: var(--crm-layer1-bg-color);
/* Alerts '--crm-alert' */
  --crm-alert-danger-bg-color: var(--crm-danger-color);
  --crm-alert-danger-text-color: var(--crm-danger-text-color);
  --crm-alert-danger-border-color: color-mix(in srgb, var(--crm-alert-danger-bg-color) 90%,#fff 10%);
  --crm-alert-info-bg-color: var(--crm-info-color);
  --crm-alert-info-border-color: color-mix(in srgb, var(--crm-alert-info-bg-color) 90%,#fff 10%);
  --crm-alert-info-text-color: var(--crm-success-text-color);
  --crm-alert-success-bg-color: var(--crm-success-color);
  --crm-alert-success-border-color: color-mix(in srgb, var(--crm-alert-success-bg-color) 90%,#fff 10%);
  --crm-alert-success-text-color: var(--crm-success-text-color);
  --crm-alert-warning-bg-color: var(--crm-warning-color);
  --crm-alert-warning-border-color: color-mix(in srgb, var(--crm-alert-warning-bg-color) 90%,#fff 10%);
/* Form '--crm-form-' '--crm-input-' */
  --crm-input-description: var(--crm-c-gray-300);
/* Tabs '--crm-tabs' */
  --crm-tabs-bg-color: var(--crm-layer2-bg-color);
/* Contact layout '--crm-contact-' */
  --crm-contact-label-bg-color: transparent;
/* Dialog '--crm-dialog-' */
  --crm-dialog-header-border-color: transparent;
/* Dashlet for main dashboard '--crm-dashlet-' */
/* Button dropdowns '--crm-dropdown-' */
/* Notifications '--crm-notify-' */
/* Icons '--crm-icon-' */
/* Wizard '--crm-wizard-' */
/* Alpha filter '--crm-filter-' */
/* Frontend '--crm-f- */
}

/* Stendlitz Dark Styles file: _dark.css */
/* Stendlitz dark mode settings. Based on Minetta
   - delete this file if you don't want dark-mode
   - it's generally easier to change practical colours (ie '--crm-page-bg-color')
     than to change the colours themesleves (ie '--crm-c-gray-900').
*/

:root:not([data-civi-color-scheme=light]) {
  /* Fonts '--crm-font-' */
  /* Colour names, e.g. green, red, blue '--crm-c-' */
  --crm-c-teal: #a3ebe6;
  --crm-c-gray-900: #363636;
  --crm-c-gray-800: #464646;
  --crm-c-gray-700: #535252;
  --crm-c-gray-600: #67676a;
  --crm-c-gray-300: #e1dfdf;
  --crm-c-gray-200: #bdbdbd;
  /* Practical colours, e.g. text, link '--crm-c-' */
  --crm-focus-color: #8cd4cb;
  --crm-link-color: var(--crm-c-teal);
  --crm-link-hover-color: var(--crm-c-yellow);
  /* Backgrounds, '--crm-c-*-bg' */
  --crm-container-bg-color: var(--crm-c-gray-800);
  --crm-inverse-bg-color: var(--crm-c-gray-300);
  /* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
  --crm-primary-color: var(--crm-c-gray-500);
  --crm-primary-hover-color: var(--crm-c-gray-600);
  --crm-primary-text-color: var(--crm-text-color);
  /* Shadows */
  --crm-shadow-block: 0;
  /* Sizes */
  /* Type */
  --crm-heading-bg-color: var(--crm-c-blue-dark);
  /* Mouse events */
  /* Buttons '--crm-btn-' */
  /* Tables '--crm-table-' */
  --crm-table-outside-border: var(--crm-border);
  --crm-table-row-border: 1px solid var(--crm-c-gray-200);
  --crm-table-row-hover-color: var(--crm-c-amber);
  /* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
  --crm-accordion-header-bg-color: var(--crm-layer2-bg-color);
  --crm-accordion-header-bg-active-color: var(--crm-c-gray-600);
  /* Alerts '--crm-alert' */
  /* Form '--crm-form-' '--crm-input-' */
  --crm-form-block-bg-color: var(--crm-layer1-bg-color);
  --crm-input-border-color: var(--crm-c-gray-200);
  --crm-input-radio-color: #38c4b4;
  /* Tabs '--crm-tabs'/
   /** Contact layout '--crm-contact-' */
   --crm-contact-header-bg-color: transparent;
   --crm-contact-block-bg-color: var(--crm-layer1-bg-color);
   --crm-contact-panel-bg-color: #414141;
   /* Dialog '--crm-dialog-' */
   --crm-dialog-header-bg-color: var(--crm-layer1-bg-color);
   --crm-dialog-body-bg-color: var(--crm-layer1-bg-color);
   /* Dashlet for main dashboard '--crm-dashlet-' */
   --crm-dashlet-bg-color: var(--crm-layer1-bg-color);
   --crm-dashlet-header-bg-color: var(--crm-layer2-bg-color);
   /* Button dropdowns '--crm-dropdown-' */
   --crm-dropdown-bg-color: var(--crm-layer1-bg-color);
   --crm-dropdown2-bg-color: var(--crm-layer1-bg-color);
   /* Notifications '--crm-notify-' */
   --crm-notify-bg-color: var(--crm-c-darkest);
   /* Icons '--crm-icon-' */
   /* Wizard '--crm-wizard-' */
   --crm-wizard-active-bg-color: var(--crm-c-teal-dark);
   /* Alpha filter '--crm-filter-' */
   --crm-filter-item-bg-color: var(--crm-layer1-bg-color);
   /* Frontend '--crm-f- */
}

/* Stendlitz Dark Styles vars */
:root:not([data-civi-color-scheme=light]) {
--crm-text-color: var(--crm-text-light-color);
}
}
/* core dark vars */
:root[data-civi-color-scheme=dark] {
/* Colour names */
/* Practical colours, e.g. text, link '--crm-c-' */
  --crm-text-color: var(--crm-text-light-color);
  --crm-border-color: var(--crm-c-gray-500);
  --crm-paper: var(--crm-c-gray-900); /* The darkest bg in dark mode */
  --crm-ink: var(--crm-text-light-color); /* The lightest foreground in dark mode */
/* Backgrounds, '--crm-c-X-bg' */
  --crm-code-bg-color: var(--crm-layer1-bg-color);
  --crm-layer1-bg-color: var(--crm-c-gray-800);
  --crm-layer2-bg-color: var(--crm-c-gray-700);
/* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
  --crm-primary-ink-color: var(--crm-c-gray-300);
  --crm-secondary-ink-color: #cdcdcd;
  --crm-success-ink-color: var(--crm-success-light-color);
  --crm-warning-ink-color: var(--crm-warning-light-color);
  --crm-danger-ink-color: var(--crm-danger-light-color);
  --crm-info-ink-color: var(--crm-info-light-color);
/* Shadows */
  --crm-shadow-popup: 0 3px 18px 0 rgb(0,0,0);
/* Sizes */
/* Type */
  --crm-heading-color: var(--crm-text-light-color);
/* Mouse events */
/* Buttons '--crm-btn-' */
/* Tables '--crm-table-' */
  --crm-table-row-alternate-bg-color: #fff;
/* Panels '--crm-panel-' */
/* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
  --crm-accordion-body-bg-color: var(--crm-layer1-bg-color);
/* Alerts '--crm-alert' */
  --crm-alert-danger-bg-color: var(--crm-danger-color);
  --crm-alert-danger-text-color: var(--crm-danger-text-color);
  --crm-alert-danger-border-color: color-mix(in srgb, var(--crm-alert-danger-bg-color) 90%,#fff 10%);
  --crm-alert-info-bg-color: var(--crm-info-color);
  --crm-alert-info-border-color: color-mix(in srgb, var(--crm-alert-info-bg-color) 90%,#fff 10%);
  --crm-alert-info-text-color: var(--crm-success-text-color);
  --crm-alert-success-bg-color: var(--crm-success-color);
  --crm-alert-success-border-color: color-mix(in srgb, var(--crm-alert-success-bg-color) 90%,#fff 10%);
  --crm-alert-success-text-color: var(--crm-success-text-color);
  --crm-alert-warning-bg-color: var(--crm-warning-color);
  --crm-alert-warning-border-color: color-mix(in srgb, var(--crm-alert-warning-bg-color) 90%,#fff 10%);
/* Form '--crm-form-' '--crm-input-' */
  --crm-input-description: var(--crm-c-gray-300);
/* Tabs '--crm-tabs' */
  --crm-tabs-bg-color: var(--crm-layer2-bg-color);
/* Contact layout '--crm-contact-' */
  --crm-contact-label-bg-color: transparent;
/* Dialog '--crm-dialog-' */
  --crm-dialog-header-border-color: transparent;
/* Dashlet for main dashboard '--crm-dashlet-' */
/* Button dropdowns '--crm-dropdown-' */
/* Notifications '--crm-notify-' */
/* Icons '--crm-icon-' */
/* Wizard '--crm-wizard-' */
/* Alpha filter '--crm-filter-' */
/* Frontend '--crm-f- */
}

/* Stendlitz Dark Styles file: _dark.css */
/* Stendlitz dark mode settings. Based on Minetta
   - delete this file if you don't want dark-mode
   - it's generally easier to change practical colours (ie '--crm-page-bg-color')
     than to change the colours themesleves (ie '--crm-c-gray-900').
*/

:root[data-civi-color-scheme=dark] {
  /* Fonts '--crm-font-' */
  /* Colour names, e.g. green, red, blue '--crm-c-' */
  --crm-c-teal: #a3ebe6;
  --crm-c-gray-900: #363636;
  --crm-c-gray-800: #464646;
  --crm-c-gray-700: #535252;
  --crm-c-gray-600: #67676a;
  --crm-c-gray-300: #e1dfdf;
  --crm-c-gray-200: #bdbdbd;
  /* Practical colours, e.g. text, link '--crm-c-' */
  --crm-focus-color: #8cd4cb;
  --crm-link-color: var(--crm-c-teal);
  --crm-link-hover-color: var(--crm-c-yellow);
  /* Backgrounds, '--crm-c-*-bg' */
  --crm-container-bg-color: var(--crm-c-gray-800);
  --crm-inverse-bg-color: var(--crm-c-gray-300);
  /* Emphasis colours, e.g. warning, danger, info '--crm-c-' */
  --crm-primary-color: var(--crm-c-gray-500);
  --crm-primary-hover-color: var(--crm-c-gray-600);
  --crm-primary-text-color: var(--crm-text-color);
  /* Shadows */
  --crm-shadow-block: 0;
  /* Sizes */
  /* Type */
  --crm-heading-bg-color: var(--crm-c-blue-dark);
  /* Mouse events */
  /* Buttons '--crm-btn-' */
  /* Tables '--crm-table-' */
  --crm-table-outside-border: var(--crm-border);
  --crm-table-row-border: 1px solid var(--crm-c-gray-200);
  --crm-table-row-hover-color: var(--crm-c-amber);
  /* Accordions '--crm-accordion-' and '--crm-accordion2-' for .crm-accrdion-light */
  --crm-accordion-header-bg-color: var(--crm-layer2-bg-color);
  --crm-accordion-header-bg-active-color: var(--crm-c-gray-600);
  /* Alerts '--crm-alert' */
  /* Form '--crm-form-' '--crm-input-' */
  --crm-form-block-bg-color: var(--crm-layer1-bg-color);
  --crm-input-border-color: var(--crm-c-gray-200);
  --crm-input-radio-color: #38c4b4;
  /* Tabs '--crm-tabs'/
   /** Contact layout '--crm-contact-' */
   --crm-contact-header-bg-color: transparent;
   --crm-contact-block-bg-color: var(--crm-layer1-bg-color);
   --crm-contact-panel-bg-color: #414141;
   /* Dialog '--crm-dialog-' */
   --crm-dialog-header-bg-color: var(--crm-layer1-bg-color);
   --crm-dialog-body-bg-color: var(--crm-layer1-bg-color);
   /* Dashlet for main dashboard '--crm-dashlet-' */
   --crm-dashlet-bg-color: var(--crm-layer1-bg-color);
   --crm-dashlet-header-bg-color: var(--crm-layer2-bg-color);
   /* Button dropdowns '--crm-dropdown-' */
   --crm-dropdown-bg-color: var(--crm-layer1-bg-color);
   --crm-dropdown2-bg-color: var(--crm-layer1-bg-color);
   /* Notifications '--crm-notify-' */
   --crm-notify-bg-color: var(--crm-c-darkest);
   /* Icons '--crm-icon-' */
   /* Wizard '--crm-wizard-' */
   --crm-wizard-active-bg-color: var(--crm-c-teal-dark);
   /* Alpha filter '--crm-filter-' */
   --crm-filter-item-bg-color: var(--crm-layer1-bg-color);
   /* Frontend '--crm-f- */
}

/* Stendlitz Dark Styles vars */
:root[data-civi-color-scheme=dark] {
--crm-text-color: var(--crm-text-light-color);
}