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

*/

/* Font imports - Here not @use */

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

.login {

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

    --login-position: center; /* 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: center center;
    --login-img-attachment: fixed;
    --login-img-size: cover;
    --login-welcome-display: none; /* none/block */
    --login-welcome-color: #00005f;
    --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: #fff;
    --login-container-contrast-text: #00005f;
    --login-form-color: #fff;
    --login-form-contrast-text: #00005f;
    --login-form-border-color: #c8cfd5;
    --login-form-border: default; /* 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: #00005f;
    --login-btn-color-rgb: 26,33,77;
    --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: 20px;
    --login-btn-contrast-text: #fff;
    --login-btn-font-weight: 500;
    --login-btn-shadow: none;
    --login-btn-border: #fff;
    --login-btn-border-radius: .25rem;
    --login-btn-hover-color: var(--primary-color-hover);
    --login-btn-hover-color-rgb: 255,255,255;
    --login-btn-hover-contrast-text: #fff;

    --login-footer-color: rgba(0, 0, 0, 0.2);;
    --login-footer-contrast-text: #fff;
    --login-footer-link-color: #fff;
    --login-footer-link-color-hover: #fff;    
}

: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: #00005f;
--brand-color-contrast-text: #fff;
--brand-color-hover: hsl(from var(--brand-color) h s 90%);
--brand-color-hue: 240;
--brand-color-saturation: 25%;
--brand-color-rgb: 0,0,49;
--brand-color-disabled: hsl(from var(--brand-color) h s 95%);

/* Color primary */

--primary-color-lighter: #f4f5fc;
--primary-color-lighter-hover: #acacda;
--primary-color-lighter-contrast-text: #000;
--primary-color-lighter-rgb: 244, 245, 252;

--primary-color-light: #b0b0e4;
--primary-color-light-hover: #8181c9;
--primary-color-light-contrast-text: #000;
--primary-color-light-rgb: 176, 176, 228;

--primary-color: #00005f;
--primary-color-contrast-text: #fff;
--primary-color-hue: 240;
--primary-color-saturation: 25%; /* it's not the real value */
--primary-color-rgb: 0, 0, 95;

--primary-color-hover: #000031;
--primary-color-hover-contrast-text: #fff;
--primary-color-hover-rgb: 0, 0, 49;

--primary-color-dark: #000041;
--primary-color-dark-hover: #0a0a63;
--primary-color-dark-contrast-text: #fff;
--primary-color-dark-rgb: 0, 0, 65;

--primary-color-darker: #000035;
--primary-color-darker-hover: #07075c;
--primary-color-darker-contrast-text: #fff;
--primary-color-darker-rgb: 0, 0, 53;

/* Color secondary */

--secondary-color-lighter: #d5e7fd;
--secondary-color-lighter-hover: #8fadd4;
--secondary-color-lighter-contrast-text: #000;
--secondary-color-lighter-rgb: 213, 231, 253;

--secondary-color-light: #75a3df;
--secondary-color-light-hover: #5281be;
--secondary-color-light-contrast-text: #000;
--secondary-color-light-rgb: 117, 163, 223;

--secondary-color: #376db3;
--secondary-color-contrast-text: #fff;
--secondary-color-hue: 214;
--secondary-color-saturation: 53%;
--secondary-color-rgb: 55, 109, 179;

--secondary-color-hover: #275694;
--secondary-color-hover-contrast-text: #fff;
--secondary-color-hover-rgb: 39, 86, 148;

--secondary-color-dark: #173966;
--secondary-color-dark-hover: #21497e;
--secondary-color-dark-contrast-text: #fff;
--secondary-color-dark-rgb: 23, 57, 102;

--secondary-color-darker: #0c2444;
--secondary-color-darker-hover: #17365e;
--secondary-color-darker-contrast-text: #fff;
--secondary-color-darker-rgb: 12, 36, 68;


/* Color tertiary */

--tertiary-color-lighter: #ffdae0;
--tertiary-color-lighter-hover: #ddb6b6;
--tertiary-color-lighter-contrast-text: #000;
--tertiary-color-lighter-rgb: 255, 218, 224;

--tertiary-color-light: #eb7d8f;
--tertiary-color-light-hover: #c05567;
--tertiary-color-light-contrast-text: #000;
--tertiary-color-light-rgb: 235, 125, 143;

--tertiary-color: #a3001c;
--tertiary-color-contrast-text: #fff;
--tertiary-color-hue: 350;
--tertiary-color-saturation: 100%;
--tertiary-color-rgb: 163, 0, 28;

--tertiary-color-hover: #6b0718;
--tertiary-color-hover-contrast-text: #fff;
--tertiary-color-hover-rgb: 62, 66, 66;

--tertiary-color-dark: #4b0611;
--tertiary-color-dark-hover: #680c1b;
--tertiary-color-dark-contrast-text: #fff;
--tertiary-color-dark-rgb: 75, 6, 17;

--tertiary-color-darker: #35010a;
--tertiary-color-darker-hover: #570210;
--tertiary-color-darker-contrast-text: #fff;
--tertiary-color-darker-rgb: 53, 1, 10;

/* 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: #00005f;

/* Header */

--header-color: #00005f;
--header-contrast-text: #DCE2EE;

/* CRM Header */

--header-ico-menu-color: #DCE2EE;
--header-ico-menu-color-hover: #eee;
--header-ico-color: #DCE2EE;
--header-ico-color-hover: #eee;
--header-user-color: #fff;
--header-object-contrast-text: #828282;
--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: #495057;
--menu-font-weight-links: 500;
--menu-hover-color: #f4f4f4;
--menu-hover-contrast-text: #00005f;
--menu-hover-border-color: #00005f;
--menu-active-color: #00005f;
--menu-active-contrast-text: #fff;
--menu-active-border-color: #00005f;
--menu-active-content-color: rgba(244,244,244,.4);

/* 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: hsl(from var(--primary-color) h s 98%);

/* 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 96%);
--drag-multiselect-header-select-text-color: var(--primary-color);
--drag-multiselect-header-options-bg-color: hsl(from var(--primary-color) h s 96%);
--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 96%);
--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 96%);
--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: 0.85rem; /* DT & RT */
--table-margin-bottom: 0.75rem; /* DT & RT */
--table-border-radius: 0;
--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: #fff;
--table-row-bg-color-odd-hover: #fff;

--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: var(--bs-border-color) /* DT & RT */;

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

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

--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: #c10003;
--danger-color-rgb: 193, 0 3;

}