/*
_     _       ___   _____    _       ___   _____   _       _____   _____  
| |   / /     /   | |  _  \  | |     /   | |  _  \ | |     | ____| /  ___/ 
| |  / /     / /| | | |_| |  | |    / /| | | |_| | | |     | |__   | |___  
| | / /     / / | | |  _  /  | |   / / | | |  _  { | |     |  __|  \___  \ 
| |/ /     / /  | | | | \ \  | |  / /  | | | |_| | | |___  | |___   ___| | 
|___/     /_/   |_| |_|  \_\ |_| /_/   |_| |_____/ |_____| |_____| /_____/  v4.58

*/

/* Font imports - Here not @use */

@import "fonts/font-montserrat.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: #131313; /* Links of form login. Important not footer */
--login-link-color-hover: #000000; /* Links of form login. Important not footer */
--login-shadow: 0 0.15rem 1.75rem 0 rgba(58,59,69,.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 right;
--login-img-attachment: fixed;
--login-img-size: cover;
--login-welcome-display: block; /* none/block */
--login-welcome-color: #131313;
--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: #212529;
--login-form-color: #fff;
--login-form-contrast-text: #212529;
--login-form-border-color: #c8cfd5;
--login-form-border: bottom; /* default/bottom (added as css class to .login) */
--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: #848484;

--login-btn-width: 100%;
--login-btn-color: #ED1F1F;
--login-btn-color-rgb: 237, 31, 31;
--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: 600;
--login-btn-shadow: none;
--login-btn-border: none;
--login-btn-border-radius: var(--bs-border-radius);
--login-btn-hover-color: #ad281e;
--login-btn-hover-color-rgb: 173, 40, 30;
--login-btn-hover-contrast-text: #fff;

--login-footer-color: #fff;
--login-footer-contrast-text: #666; 
--login-footer-link-color: #666;
--login-footer-link-color-hover: #666;
}

:root {

/* Fonts */

--font-general: "Montserrat";
--font-general-weight: 400;
--font-headings: "Montserrat";
--font-headings-weight: 600;
--font-size: 14px;

/* General Color */ 

--general-link-color: var(--primary-color);
--general-link-color-hover: var(--primary-color-hover);
--general-bg-color: #fff;
--general-text-color: #181818;

/* Color brand */

--brand-color: #3c3c3c;
--brand-color-contrast-text: #fff;
--brand-color-hover: hsl(from var(--brand-color) h s 90%);
--brand-color-hue: 0;
--brand-color-saturation: 0%;
--brand-color-rgb: 60,60,60;
--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: 242, 242, 242;

--primary-color-light: hsl(from var(--primary-color) h s 90%);
--primary-color-light-hover: hsl(from var(--primary-color) h s 85%);
--primary-color-light-contrast-text: hsl(from var(--primary-color) h s 30%);
--primary-color-light-rgb: 230, 230, 230;

--primary-color: #3c3c3c;
--primary-color-contrast-text: #fff;
--primary-color-hue: 0;
--primary-color-saturation: 0%;
--primary-color-rgb: 60, 60, 60;

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

--primary-color-dark: hsl(from var(--primary-color) h s 15%);
--primary-color-dark-hover: hsl(from var(--primary-color) h s 10%);
--primary-color-dark-contrast-text: #fff;
--primary-color-dark-rgb: 38, 38, 38;

--primary-color-darker: hsl(from var(--primary-color) h s 10%);
--primary-color-darker-hover: hsl(from var(--primary-color) h s 5%);
--primary-color-darker-contrast-text: #fff;
--primary-color-darker-rgb: 26, 26, 26;

/* Color secondary */

--secondary-color-lighter: hsl(from var(--secondary-color) h s 97%);
--secondary-color-lighter-hover: hsl(from var(--secondary-color) h s 93%);
--secondary-color-lighter-contrast-text: hsl(from var(--secondary-color) h s 40%);
--secondary-color-lighter-rgb: 247, 247, 247;

--secondary-color-light: hsl(from var(--secondary-color) h s 92%);
--secondary-color-light-hover: hsl(from var(--secondary-color) h s 87%);
--secondary-color-light-contrast-text: hsl(from var(--secondary-color) h s 35%);
--secondary-color-light-rgb: 235, 235, 235;

--secondary-color: #131313;
--secondary-color-contrast-text: #fff;
--secondary-color-hue: 0;
--secondary-color-saturation: 0%;
--secondary-color-rgb: 19, 19, 19;

--secondary-color-hover: hsl(from var(--secondary-color) h s 15%);
--secondary-color-hover-contrast-text: #fff;
--secondary-color-hover-rgb: 124, 68, 143;

--secondary-color-dark: hsl(from var(--secondary-color) h s 10%);
--secondary-color-dark-hover: hsl(from var(--secondary-color) h s 15%);
--secondary-color-dark-contrast-text: #fff;
--secondary-color-dark-rgb: 106, 53, 123;

--secondary-color-darker: hsl(from var(--secondary-color) h s 5%);
--secondary-color-darker-hover: hsl(from var(--secondary-color) h s 10%);
--secondary-color-darker-contrast-text: #fff;
--secondary-color-darker-rgb: 78, 30, 94;

/* 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: 253, 231, 231;

--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 30%);
--tertiary-color-light-rgb: 251, 208, 208;

--tertiary-color: #ED1F1F;
--tertiary-color-contrast-text: #fff;
--tertiary-color-hue: 0;
--tertiary-color-saturation: 85%;
--tertiary-color-rgb: 237, 31, 31;

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

--tertiary-color-dark: hsl(from var(--tertiary-color) h s 30%);
--tertiary-color-dark-hover: hsl(from var(--tertiary-color) h s 25%);
--tertiary-color-dark-contrast-text: #fff;
--tertiary-color-dark-rgb: 142, 11, 11;

--tertiary-color-darker: hsl(from var(--tertiary-color) h s 20%);
--tertiary-color-darker-hover: hsl(from var(--tertiary-color) h s 15%);
--tertiary-color-darker-contrast-text: #fff;
--tertiary-color-darker-rgb: 94, 8, 8;

/* Buttons */

--button-radius: .25rem;

/* Icons */

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

/* CRM Widgets */

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

/* Header */

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

/* CRM Header */

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

/* CRM Header object */

--header-object-color: #fff;
--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(--primary-color-light);
--menu-hover-contrast-text: var(--primary-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: var(--primary-color-light);
--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: #474747;
--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;

/* Footer */

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

/* Error */

--danger-color: #c10003;
--danger-color-rgb: 193, 0, 3;

}

/* Tables */

.react-table-responsive-container {
  --table-spacing: .5rem 1.5rem;
  --table-margin-bottom: 1rem;
  --table-border-radius: .75rem;
  --table-text-color: #000;
  --table-font-size: 0.85rem;
  
  --table-header-font-size: 0.85rem;
  --table-header-font-weight: 600;
  --table-header-bg-color: var(--primary-color-lighter);
  --table-header-text-color: rgba(var(--primary-color-rgb), 1);
  --table-header-filter-bg: #fff;
  --table-header-icon-color: var(--primary-color);
  --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: 0.85rem;
  --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: 0px;
  --table-cell-border-style: solid;
  --table-cell-border-color: #eee;

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