/*
 _      _    ___  _____    _       ___   _____   _       _____   _____  
| |   / /  /   | |  _  \  | |     /   | |  _  \ | |     | ____| /  ___/ 
| |  / /  / /| | | |_| |  | |    / /| | | |_| | | |     | |__   | |___  
| | / /  / / | | |  _  /  | |   / / | | |  _  { | |     |  __|  \___  \ 
| |/ /  / /  | | | | \ \  | |  / /  | | | |_| | | |___  | |___   ___| | 
|___/  /_/   |_| |_|  \_\ |_| /_/   |_| |_____/ |_____| |_____| /_____/  v5.12

*/

/* Font imports - Here not @use. For business unit relative path doesn't work */

@import "fonts/font-montserrat.css";

.login {

/* Standard login - ALL CRM and some PORTALS */

--login-position: left; /* left/right/center (added as css class to .login) */
--login-width: 650px;
--login-color: #fff;
--login-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
--login-radius: 0rem; /* Mainly for center login. Disabled for left and right position */

--login-link-color: var(--primary-color); /* Links of form login. Important not footer */
--login-link-color-hover: var(--primary-color-hover); /* Links of form login. Important not footer */

--login-img: url('../images/login_img.jpg');
--login-img-repeat: no-repeat;
--login-img-position: top;
--login-img-attachment: fixed;
--login-img-size: cover;

--login-welcome-display: none; /* none/block */
--login-welcome-color: #000;
--login-welcome-font-size: 22.5px;
--login-welcome-margin-bottom: 0.5rem;
--login-welcome-subtext-display: none; /* none/block */
--login-welcome-subtext-color: #000;
--login-welcome-subtext-font-size: 13px;
--login-welcome-subtext-margin-bottom: 2rem;

--login-container-color: rgba(255,255,255,.85);
--login-container-contrast-text: #212529;

--login-form-color: transparent;
--login-form-contrast-text: #212529;
--login-form-border-color: #c8cfd5;
--login-form-border: bottom; /* default/bottom - in React it doesn't work - <LoginForm isBottom={true}/> */
--login-form-placeholder: #6c757d ; /* Only if login-form-border: default */
--login-form-border-radius: 0; /* Only if login-form-border: default */
--login-form-bottom-height: 1px; /* Only if login-form-border: bottom */
--login-form-bottom-floating-label: #6c757d; /* Only if login-form-border: bottom */
--login-form-mdi-color: var(--primary-color);

--login-btn-width: 100%;
--login-btn-color: #BF0B34;
--login-btn-color-rgb: 15,76,129;
--login-btn-img: none;
--login-btn-img-position: none;
--login-btn-img-attachment: none;
--login-btn-img-size: none;
--login-btn-img-hover: none;
--login-btn-img-hover-position: none;
--login-btn-img-hover-attachment: none;
--login-btn-img-hover-size: none;
--login-btn-text-transform: none; /* none/uppercase */
--login-btn-font-size: 20px;
--login-btn-font-weight: 500;
--login-btn-contrast-text: #fff;
--login-btn-shadow: none;
--login-btn-border: none;
--login-btn-border-radius: .25rem;
--login-btn-hover-color: #003b4a;
--login-btn-hover-color-rgb: 0,59,74;
--login-btn-hover-contrast-text: #fff;

--login-recover-mdi-color: var(--primary-color);

--login-footer-color: rgba(255,255,255,.85);
--login-footer-contrast-text: #000;
--login-footer-link-color: #BF0B34;
--login-footer-link-color-hover: #003b4a;
}

:root {  

/* Fonts */

--font-general: 'Montserrat';
--font-general-weight: 400;
--font-headings: 'Montserrat';
--font-headings-weight: 500;
--font-size: 14px;

/* General Color */ 

--general-link-color: var(--primary-color);
--general-link-color-hover: var(--primary-color-hover);
--general-bg-color: #EAECF0; /* Usually white for portals */
--general-text-color: #181818;

/* Color brand */

--brand-color: #1f4477;
--brand-color-contrast-text: #fff;
--brand-color-hover: color-mix(in srgb, var(--brand-color) 88%, black);
--brand-color-hue: 215;
--brand-color-saturation: 74%;
--brand-color-rgb: 31,68,119;
--brand-color-disabled: color-mix(in srgb, var(--brand-color) 8%, white);

/* Color MIX percentage color of primary, secondary, tertiary, may change depending on the main color. It will not always be the same. */

/* Color primary */

--primary-color-lighter: color-mix(in srgb, var(--primary-color) 8%, white);
--primary-color-lighter-hover: color-mix(in srgb, var(--primary-color) 12%, white);
--primary-color-lighter-contrast-text: color-mix(in srgb, var(--primary-color) 45%, black);
--primary-color-lighter-rgb: 250,235,239;

--primary-color-light: color-mix(in srgb, var(--primary-color) 18%, white);
--primary-color-light-hover: color-mix(in srgb, var(--primary-color) 24%, white);
--primary-color-light-contrast-text: color-mix(in srgb, var(--primary-color) 60%, black);
--primary-color-light-rgb: 243,211,218;

--primary-color: #BF0B34;
--primary-color-contrast-text: #fff;
--primary-color-hue: 346;
--primary-color-saturation: 94%;
--primary-color-rgb: 191,11,52;

--primary-color-hover: color-mix(in srgb, var(--primary-color) 88%, black);
--primary-color-hover-contrast-text: #fff;
--primary-color-hover-rgb: 168,10,46;

--primary-color-dark: color-mix(in srgb, var(--primary-color) 75%, black);
--primary-color-dark-hover: color-mix(in srgb, var(--primary-color) 65%, black);
--primary-color-dark-contrast-text: #fff;
--primary-color-dark-rgb: 143,8,39;

--primary-color-darker: color-mix(in srgb, var(--primary-color) 55%, black);
--primary-color-darker-hover: color-mix(in srgb, var(--primary-color) 45%, black);
--primary-color-darker-contrast-text: #fff;
--primary-color-darker-rgb: 105,6,29;

/* Color secondary */

--secondary-color-lighter: color-mix(in srgb, var(--secondary-color) 8%, white);
--secondary-color-lighter-hover: color-mix(in srgb, var(--secondary-color) 12%, white);
--secondary-color-lighter-contrast-text: color-mix(in srgb, var(--secondary-color) 45%, black);
--secondary-color-lighter-rgb: 235,239,241;

--secondary-color-light: color-mix(in srgb, var(--secondary-color) 18%, white);
--secondary-color-light-hover: color-mix(in srgb, var(--secondary-color) 24%, white);
--secondary-color-light-contrast-text: color-mix(in srgb, var(--secondary-color) 60%, black);
--secondary-color-light-rgb: 209,220,222;

--secondary-color: #003B4A;
--secondary-color-contrast-text: #fff;
--secondary-color-hue: 192;
--secondary-color-saturation: 100%;
--secondary-color-rgb: 0,59,74;

--secondary-color-hover: color-mix(in srgb, var(--secondary-color) 88%, black);
--secondary-color-hover-contrast-text: #fff;
--secondary-color-hover-rgb: 0,52,65;

--secondary-color-dark: color-mix(in srgb, var(--secondary-color) 75%, black);
--secondary-color-dark-hover: color-mix(in srgb, var(--secondary-color) 65%, black);
--secondary-color-dark-contrast-text: #fff;
--secondary-color-dark-rgb: 0,44,56;

--secondary-color-darker: color-mix(in srgb, var(--secondary-color) 55%, black);
--secondary-color-darker-hover: color-mix(in srgb, var(--secondary-color) 45%, black);
--secondary-color-darker-contrast-text: #fff;
--secondary-color-darker-rgb: 0,32,41;

/* Color tertiary */

--tertiary-color-lighter: color-mix(in srgb, var(--tertiary-color) 8%, white);
--tertiary-color-lighter-hover: color-mix(in srgb, var(--tertiary-color) 12%, white);
--tertiary-color-lighter-contrast-text: color-mix(in srgb, var(--tertiary-color) 45%, black);
--tertiary-color-lighter-rgb: 238,238,240;

--tertiary-color-light: color-mix(in srgb, var(--tertiary-color) 18%, white);
--tertiary-color-light-hover: color-mix(in srgb, var(--tertiary-color) 24%, white);
--tertiary-color-light-contrast-text: color-mix(in srgb, var(--tertiary-color) 60%, black);
--tertiary-color-light-rgb: 216,218,221;

--tertiary-color: #273044;
--tertiary-color-contrast-text: #fff;
--tertiary-color-hue: 221;
--tertiary-color-saturation: 43%;
--tertiary-color-rgb: 39,48,68;

--tertiary-color-hover: color-mix(in srgb, var(--tertiary-color) 88%, black);
--tertiary-color-hover-contrast-text: #fff;
--tertiary-color-hover-rgb: 34,42,60;

--tertiary-color-dark: color-mix(in srgb, var(--tertiary-color) 75%, black);
--tertiary-color-dark-hover: color-mix(in srgb, var(--tertiary-color) 65%, black);
--tertiary-color-dark-contrast-text: #fff;
--tertiary-color-dark-rgb: 29,36,51;

--tertiary-color-darker: color-mix(in srgb, var(--tertiary-color) 55%, black);
--tertiary-color-darker-hover: color-mix(in srgb, var(--tertiary-color) 45%, black);
--tertiary-color-darker-contrast-text: #fff;
--tertiary-color-darker-rgb: 21,26,37;

/* Buttons */

--button-radius: 10px;

--button-primary-color: var(--primary-color);
--button-primary-color-contrast-text: var(--primary-color-contrast-text);
--button-primary-color-hover: var(--primary-color-hover);
--button-primary-color-rgb: var(--primary-color-rgb);

--button-secondary-color: var(--secondary-color);
--button-secondary-color-contrast-text: var(--secondary-color-contrast-text);
--button-secondary-color-hover: var(--secondary-color-hover);
--button-secondary-color-rgb: var(--secondary-color-rgb);

--button-tertiary-color: var(--tertiary-color);
--button-tertiary-color-contrast-text: var(--tertiary-color-contrast-text);
--button-tertiary-color-hover: var(--tertiary-color-hover);
--button-tertiary-color-rgb: var(--tertiary-color-rgb);

/* Icons */

--link-ico-color: var(--primary-color);
--link-ico-color-hover: var(--primary-color-hover);

/* Widgets */

--widget-heading-contrast-text: #7a8899;

/* Header */

--header-color: #fff;
--header-contrast-text: #000;

/* CRM Header */

--header-ico-menu-color: #161616;
--header-ico-menu-color-hover: #161616;
--header-ico-color: #858483;
--header-ico-color-hover: #000;
--header-user-color: #fff;
--header-object-contrast-text: #003b4a;
--header-separator: 1px dotted #ccc; /* For White headers. Example: 1px dotted #ddd */

/* CRM Header object */

--header-object-color: #fff;
--header-object-contrast-text: #BF0B34;
--header-object-ico-color: #BF0B34;
--header-object-ico-color-hover: #003b4a;

/* CRM Menu */

--menu-color: #fff;
--menu-contrast-text: #666;
--menu-font-weight-links: 500;

--menu-hover-color: #f6f8fa;
--menu-hover-contrast-text: #666; 

--menu-active-color: #BF0B34;
--menu-active-contrast-text: #fff;

--menu-current-color: var(--primary-color-light);
--menu-current-contrast-text: var(--primary-color-light-contrast-text);

/* Background image */

--bg-img-source: none;
--bg-img-repeat: none;
--bg-img-position: none;
--bg-img-attachment: none;
--bg-img-size: none;

/* Main container */

--main-bg-color: #fff;
--main-text-color: #1D2939; /* includes: tables and general text */

/* CRM Highlight zone */

--highlight-zone-bg-color: color-mix(in srgb, var(--primary-color) 8%, white);

/* Form */

--form-text-color: #1D2939;
--form-label-color: #667085;
--form-label-weight: 500;
--form-placeholder-color: #999999;
--form-plaintext-border-color: #D0D5DD;
--form-plaintext-font-weight: 700;
--form-plaintext-text-color: #6c757d;
--form-sm-font-size: 0.85rem;
--form-md-font-size: 1rem;
--form-lg-font-size: 1.15rem;
--form-xl-font-size: 1.30rem;
--form-checked-label-weight: 500;

/* CRM Sidebar (with content / without content) */

--sidebar-header-bg-color: var(--primary-color-light);
--sidebar-header-text-color: var(--primary-color-light-contrast-text);
--sidebar-header-arrow-color: var(--primary-color-light-contrast-text);
--sidebar-header-badge-bg-color: var(--primary-color-lighter);
--sidebar-header-badge-text-color: var(--primary-color-lighter-contrast-text);
--sidebar-header-badge-border-color: var(--primary-color-lighter);
--sidebar-header-icon-color: var(--primary-color-light-contrast-text);
--sidebar-header-icon-color-hover: var(--primary-color-dark);

--sidebar-header-empty-bg-color: #f9fafb;
--sidebar-header-empty-text-color: #667085;
--sidebar-header-empty-arrow-color: #98a2b3;
--sidebar-header-empty-badge-bg-color: transparent;
--sidebar-header-empty-badge-text-color: #344054;
--sidebar-header-empty-badge-border-color: #eaecf0;
--sidebar-header-empty-icon-color: var(--primary-color);
--sidebar-header-empty-icon-color-hover: var(--primary-color-hover);

/* CRM Drag multiselect (It does not work if a business unit is configured) */

--drag-multiselect-scrollbar-track: rgba(0, 0, 0, 0.1);
--drag-multiselect-scrollbar-thumb: rgba(0, 0, 0, 0.3);
--drag-multiselect-border-color: #ccc;

--drag-multiselect-drop-list-wrapper-bg-color: #eee;
--drag-multiselect-drop-list-wrapper-dragging-over-bg-color: #eee;
--drag-multiselect-drop-list-wrapper-dragging-from-bg-color: #eee;

--drag-multiselect-header-select-bg-color: color-mix(in srgb, var(--primary-color) 8%, white);
--drag-multiselect-header-select-text-color: var(--primary-color);
--drag-multiselect-header-options-bg-color: color-mix(in srgb, var(--primary-color) 8%, white);
--drag-multiselect-header-options-text-color: var(--primary-color);
--drag-multiselect-header-input-icon-text-color: grey;

--drag-multiselect-draggable-item-bg-color: #fff;
--drag-multiselect-draggable-item-text-color: #333;
--drag-multiselect-draggable-item-icon-text-color: var(--primary-color);
--drag-multiselect-draggable-item-hover-bg-color: color-mix(in srgb, var(--primary-color) 12%, white);
--drag-multiselect-draggable-item-hover-text-color: var(--primary-color);
--drag-multiselect-draggable-item-hover-icon-text-color: var(--primary-color);
--drag-multiselect-draggable-item-focus-bg-color: color-mix(in srgb, var(--primary-color) 12%, white);
--drag-multiselect-draggable-item-grouped: #ddd;

--drag-multiselect-dragging-item-bg-color: #fff;
--drag-multiselect-dragging-item-text-color: #333;  

/* Tables - React table and Datatable (only onCustomer) It does not work if a business unit is configured. */

--table-spacing: 0.85rem; /* DT & RT */
--table-margin-bottom: 0.75rem; /* DT & RT */
--table-border-radius: 0;
--table-text-color: #000;
--table-link-color: var(--table-text-color);
--table-link-color-hover: var(--primary-color);
--table-link-decoration: underline;
--table-link-decoration-hover: underline;

--table-header-font-size: 1rem; /* DT & RT & BASE */
--table-header-font-weight: 600;  /* DT & RT & BASE */
--table-header-bg-color: color-mix(in srgb, var(--primary-color) 12%, white); /* DT & RT & BASE */
--table-header-text-color: rgba(var(--primary-color-rgb), 1); /* DT & RT & BASE */
--table-header-filter-bg: #fff;
--table-header-icon-color: var(--primary-color); /* DT & RT & BASE */
--table-header-icon-size: 20px;
--table-header-border-width: 1px;
--table-header-border-style: solid;
--table-header-border-color: #ddd;

--table-row-bg-color-selected: color-mix(in srgb, var(--primary-color) 8%, white); /* DT & RT */
--table-row-text-color-selected: #000; /* DT & RT */
--table-row-icon-color-selected: var(--primary-color); /* DT & RT */
--table-row-bg-color-even: #fff;
--table-row-bg-color-odd: #fff;
--table-row-bg-color-even-hover: #fff;
--table-row-bg-color-odd-hover: #fff;

--table-cell-font-size: 1rem; /* DT & RT & BASE */
--table-cell-grouped-bg: color-mix(in srgb, var(--primary-color) 12%, white);
--table-cell-aggregated-bg: color-mix(in srgb, var(--primary-color) 10%, white);
--table-cell-placeholder-bg: #fff;
--table-cell-border-width: 1px; /* DT & RT */
--table-cell-border-style: solid; /* DT & RT */
--table-cell-border-color: var(--bs-border-color); /* DT & RT */

--table-inner-border-width: 0px;
--table-inner-border-style: solid;
--table-inner-border-color: color-mix(in srgb, var(--primary-color) 10%, white);

--table-outer-border-width: 0px;
--table-outer-border-style: solid;
--table-outer-border-color: color-mix(in srgb, var(--primary-color) 10%, white);

--table-freeze-border-width: 0px;
--table-freeze-border-style: solid;
--table-freeze-border-color: color-mix(in srgb, var(--primary-color) 35%, white);

/* Footer */

--footer-color: var(--primary-color);
--footer-contrast-text: var(--primary-color-contrast-text);
--footer-link-color: var(--primary-color-contrast-text);
--footer-link-color-hover: var(--primary-color-contrast-text);

/* Error */

--danger-color: var(--bs-danger);
--danger-color-rgb: var(--bs-danger-rgb);
}