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

*/

/* Font imports - Here not @use */

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


.login {  

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

  --login-position: right; /* left/right/center (added as css class to .login) */
  --login-width: 550px;
  --login-color: #fff;
  --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-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-img: url('../images/login_img.jpg');
  --login-img-repeat: no-repeat;
  --login-img-position: top left;
  --login-img-attachment: fixed;
  --login-img-size: cover;
  --login-welcome-display: block; /* none/block */
  --login-welcome-color: var(--primary-color);
  --login-welcome-font-size: 18px;
  --login-welcome-margin-bottom: 0.5rem;
  --login-welcome-subtext-display: none; /* none/block */
  --login-welcome-subtext-color: var(--general-text-color);
  --login-welcome-subtext-font-size: 13px;
  --login-welcome-subtext-margin-bottom: 2rem;
  --login-container-color: #fff;
  --login-container-contrast-text: var(--general-text-color);
  --login-form-color: #fff;
  --login-form-contrast-text: var(--general-text-color);
  --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: var(--primary-color);
  --login-btn-color-rgb: var(--primary-color-rgb);
  --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-font-size: 16px;
  --login-btn-contrast-text: var(--primary-color-contrast-text);
  --login-btn-font-weight: 600;
  --login-btn-shadow: none;
  --login-btn-border: none;
  --login-btn-border-radius: 8px;
  --login-btn-hover-color: var(--primary-color-hover);
  --login-btn-hover-color-rgb: var(--primary-color-hover-rgb);
  --login-btn-hover-contrast-text: var(--primary-color-hover-contrast-text);

  --login-footer-color: #fff;
  --login-footer-contrast-text: var(--general-text-color);
  --login-footer-link-color: var(--primary-color);
  --login-footer-link-color-hover: var(--primary-color-hover);

}

:root {

/* Fonts */

--font-general: 'Poppins';
--font-general-weight: 400;
--font-headings: 'Poppins';
--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: #1D2939;

/* Color brand */

--brand-color: #2E3F4F;
--brand-color-contrast-text: #fff;
--brand-color-hover: hsl(from var(--brand-color) h s 90%);
--brand-color-hue: 209;
--brand-color-saturation: 42%;
--brand-color-rgb: 46,63,79;
--brand-color-disabled: hsl(from var(--brand-color) h s 95%);

/* Color primary */

--primary-color-lighter: hsl(from var(--primary-color) h s 95%);
--primary-color-lighter-hover: hsl(from var(--primary-color) h s 90%);
--primary-color-lighter-contrast-text: hsl(from var(--primary-color) h s 40%);
--primary-color-lighter-rgb: 239,242,246;

--primary-color-light: hsl(from var(--primary-color) h s 85%);
--primary-color-light-hover: hsl(from var(--primary-color) h s 80%);
--primary-color-light-contrast-text: hsl(from var(--primary-color) h s 30%);
--primary-color-light-rgb: 207,217,227;

--primary-color: #2E3F4F;
--primary-color-contrast-text: #fff;
--primary-color-hue: 209;
--primary-color-saturation: 42%;
--primary-color-rgb: 46,63,79;

--primary-color-hover: hsl(from var(--primary-color) h s 30%);
--primary-color-hover-contrast-text: #fff;
--primary-color-hover-rgb: 56,77,97;

--primary-color-dark: hsl(from var(--primary-color) h s 25%);
--primary-color-dark-hover: hsl(from var(--primary-color) h s 20%);
--primary-color-dark-contrast-text: #fff;
--primary-color-dark-rgb: 47,64,81;

--primary-color-darker: hsl(from var(--primary-color) h s 20%);
--primary-color-darker-hover: hsl(from var(--primary-color) h s 15%);
--primary-color-darker-contrast-text: #fff;
--primary-color-darker-rgb: 38,51,64;

/* Color secondary */

--secondary-color-lighter: hsl(from var(--secondary-color) h s 95%);
--secondary-color-lighter-hover: hsl(from var(--secondary-color) h s 90%);
--secondary-color-lighter-contrast-text: hsl(from var(--secondary-color) h s 40%);
--secondary-color-lighter-rgb: 240,242,244;

--secondary-color-light: hsl(from var(--secondary-color) h s 90%);
--secondary-color-light-hover: hsl(from var(--secondary-color) h s 85%);
--secondary-color-light-contrast-text: hsl(from var(--secondary-color) h s 35%);
--secondary-color-light-rgb: 226,230,233;

--secondary-color: #4C5965;
--secondary-color-contrast-text: #fff;
--secondary-color-hue: 209;
--secondary-color-saturation: 25%;
--secondary-color-rgb: 76,89,101;

--secondary-color-hover: hsl(from var(--secondary-color) h s 35%);
--secondary-color-hover-contrast-text: #fff;
--secondary-color-hover-rgb: 60,69,78;

--secondary-color-dark: hsl(from var(--secondary-color) h s 25%);
--secondary-color-dark-hover: hsl(from var(--secondary-color) h s 20%);
--secondary-color-dark-contrast-text: #fff;
--secondary-color-dark-rgb: 55,64,73;

--secondary-color-darker: hsl(from var(--secondary-color) h s 25%);
--secondary-color-darker-hover: hsl(from var(--secondary-color) h s 20%);
--secondary-color-darker-contrast-text: #fff;
--secondary-color-darker-rgb: 55,64,73;

/* Color tertiary */

--tertiary-color-lighter: hsl(from var(--tertiary-color) h s 95%);
--tertiary-color-lighter-hover: hsl(from var(--tertiary-color) h s 90%);
--tertiary-color-lighter-contrast-text: hsl(from var(--tertiary-color) h s 40%);
--tertiary-color-lighter-rgb: 246,255,230;

--tertiary-color-light: hsl(from var(--tertiary-color) h s 90%);
--tertiary-color-light-hover: hsl(from var(--tertiary-color) h s 85%);
--tertiary-color-light-contrast-text: hsl(from var(--tertiary-color) h s 35%);
--tertiary-color-light-rgb: 236,255,204;

--tertiary-color: #4E7C00;
--tertiary-color-contrast-text: #fff;
--tertiary-color-hue: 82;
--tertiary-color-saturation: 100%;
--tertiary-color-rgb: 78,124,0;

--tertiary-color-hover: hsl(from var(--tertiary-color) h s 40%);
--tertiary-color-hover-contrast-text: #fff;
--tertiary-color-hover-rgb: 128,204,0;

--tertiary-color-dark: hsl(from var(--tertiary-color) h s 40%);
--tertiary-color-dark-hover: hsl(from var(--tertiary-color) h s 35%);
--tertiary-color-dark-contrast-text: #fff;
--tertiary-color-dark-rgb: 128,204,0;

--tertiary-color-darker: hsl(from var(--tertiary-color) h s 25%);
--tertiary-color-darker-hover: hsl(from var(--tertiary-color) h s 20%);
--tertiary-color-darker-contrast-text: #fff;
--tertiary-color-darker-rgb: 80,128,0;

/* Buttons */

--button-radius: .25rem;

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

/* CRM Widgets */

--widget-heading-contrast-text: var(--primary-color-dark);

/* Header */

--header-color: var(--primary-color);
--header-contrast-text: var(--primary-color-contrast-text);

/* CRM Header */

--header-ico-menu-color: var(--primary-color-contrast-text);
--header-ico-menu-color-hover: var(--primary-color-contrast-text);
--header-ico-color: var(--primary-color-contrast-text);
--header-ico-color-hover: var(--primary-color-contrast-text);
--header-user-color: var(--primary-color-contrast-text);
--header-object-contrast-text: var(--primary-color-contrast-text);
--header-separator: none; /* For White headers. Example: 1px dotted #ddd */

/* CRM Header object */

--header-object-color: var(--primary-color-contrast-text);
--header-object-contrast-text: var(--primary-color);
--header-object-ico-color: var(--primary-color);
--header-object-ico-color-hover: var(--primary-color-hover);

/* CRM Menu */

--menu-color: #fff;
--menu-contrast-text: #666;
--menu-font-weight-links: 500;
--menu-hover-color: var(--secondary-color-light);
--menu-hover-contrast-text: var(--secondary-color-light-contrast-text);
--menu-hover-border-color: var(--primary-color);
--menu-active-color: var(--primary-color);
--menu-active-contrast-text: var(--primary-color-contrast-text); 
--menu-active-border-color: var(--primary-color-dark);
--menu-active-content-color: 122,122,122;

/* Background image */

--bg-img-source: #ddd;
--bg-img-repeat: no-repeat;
--bg-img-position: center center;
--bg-img-attachment: fixed;
--bg-img-size: cover;

/* Main container */

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

/* CRM Highlight zone */

--highlight-zone-bg-color: hsl(from var(--primary-color) h s 95%);

/* Form */

--form-text-color: #1D2939;
--form-label-color: #667085;
--form-label-weight: 500;
--form-placeholder-color: #999999;
--form-plaintext-border-color: #D0D5DD;
--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 Drag multiselect */

--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: hsl(from var(--primary-color) h s 90%);
--drag-multiselect-header-select-text-color: var(--primary-color);
--drag-multiselect-header-options-bg-color: hsl(from var(--primary-color) h s 90%);
--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: hsl(from var(--primary-color) h s 90%);
--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: hsl(from var(--primary-color) h s 90%);
--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 */

--table-spacing: 1rem 1.25rem; /* DT & RT */
--table-margin-bottom: 1rem; /* DT & RT */
--table-border-radius: 4px;
--table-text-color: #000;

--table-header-font-size: 1rem; /* DT & RT */
--table-header-font-weight: 600; /* DT & RT */
--table-header-bg-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 89%); /* DT & RT */
--table-header-text-color: rgba(var(--primary-color-rgb), 1); /* DT & RT */
--table-header-filter-bg: #fff;
--table-header-icon-color: var(--primary-color); /* DT & RT */
--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: hsl(var(--primary-color-hue), var(--primary-color-saturation), 50%);
--table-row-text-color-selected: hsl(var(--primary-color-hue), var(--primary-color-saturation), 100%);
--table-row-icon-color-selected: hsl(var(--primary-color-hue), var(--primary-color-saturation), 100%);
--table-row-bg-color-even: #fff;
--table-row-bg-color-odd: #fff;
--table-row-bg-color-even-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), 94%);
--table-row-bg-color-odd-hover: hsl(var(--primary-color-hue), var(--primary-color-saturation), 94%);

--table-cell-font-size: 1rem; /* DT & RT */
--table-cell-grouped-bg: hsl(var(--primary-color-hue), var(--primary-color-saturation), 90%);
--table-cell-aggregated-bg: hsl(var(--primary-color-hue), var(--primary-color-saturation), 92%);
--table-cell-placeholder-bg: #fff;
--table-cell-border-width: 1px; /* DT & RT */
--table-cell-border-style: solid; /* DT & RT */
--table-cell-border-color: #eee; /* DT & RT */

--table-inner-border-width: 1px;
--table-inner-border-style: solid;
--table-inner-border-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 72%);

--table-outer-border-width: 1px;
--table-outer-border-style: solid;
--table-outer-border-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 80%);

--table-freeze-border-width: 0px;
--table-freeze-border-style: solid;
--table-freeze-border-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 72%);

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

}