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

*/

/* Font imports - Here not @use */

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

.login { 
    
/* Standard login */

--login-position: right; /* left/right/center (added as css class to .login) */
--login-width: 550px;
--login-color: #fff;
--login-link-color: var(--primary-color);
--login-link-color-hover: var(--primary-color-hover);
--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;
--login-img-attachment: fixed;
--login-img-size: cover;
--login-welcome-display: block; /* none/block */
--login-welcome-color: #2a66c6;
--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: var(--primary-color);

--login-btn-width: 100%;
--login-btn-color: #2a66c6;
--login-btn-color-rgb: 42,102,198;
--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: 100% 0;
--login-btn-img-hover-attachment: none;
--login-btn-img-hover-size: 300% 100%;
--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: 2rem;
--login-btn-hover-color: #2563eb;
--login-btn-hover-color-rgb: 37,99,235;
--login-btn-hover-contrast-text: #fff;
--login-footer-color: #fff;
--login-footer-contrast-text: #666;  
}

:root {

/* Fonts */

--font-general: 'Cocogoose';
--font-general-weight: 400;
--font-headings: 'Cocogoose';
--font-headings-weight: 700;
--font-size: 14px;

/* General Color */ 

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

/* 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: 241, 243, 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: 136, 161, 194;

--primary-color: #2a66c6;
--primary-color-contrast-text: #fff;
--primary-color-hue: 217;
--primary-color-saturation: 79%;
--primary-color-rgb: 77,109,152;

--primary-color-hover: hsl(from var(--primary-color) h s 30%);
--primary-color-hover-contrast-text: #fff;
--primary-color-hover-rgb: 59,96,144;

--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: 60, 85, 118;

--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: 51, 73, 101;

/* 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: 216, 226, 239;

--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: 173, 193, 216;

--secondary-color: #8a519d;
--secondary-color-contrast-text: #fff;
--secondary-color-hue: 285;
--secondary-color-saturation: 48%;
--secondary-color-rgb: 138,81,157;

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

--secondary-color-dark: hsl(from var(--secondary-color) h s 35%);
--secondary-color-dark-hover: hsl(from var(--secondary-color) h s 30%);
--secondary-color-dark-contrast-text: #fff;
--secondary-color-dark-rgb: 99, 130, 166;

--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: 77, 110, 148;

/* 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: 239, 232, 245;

--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: 196, 174, 215;

--tertiary-color: #ee5d84;
--tertiary-color-contrast-text: #fff;
--tertiary-color-hue: 344;
--tertiary-color-saturation: 61%;
--tertiary-color-rgb: 238,93,132;

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

--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: 123, 84, 157;

--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: 92, 52, 126;

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

/* 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:  var(--primary-color);
--header-separator: 1px dotted #ddd; /* 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(--primary-color-light); 
--menu-hover-contrast-text: var(--primary-color-light-contrast-text); 
--menu-hover-border-color: #6081AF;
--menu-active-color: var(--primary-color);
--menu-active-contrast-text: var(--primary-color-contrast-text); 
--menu-active-border-color: #6081AF;
--menu-active-content-color: 77,109,152;

/* CRM Background image */

--bg-img-source: none;
--bg-img-repeat: no-repeat;
--bg-img-position: 0;
--bg-img-attachment: fixed;
--bg-img-size: 100%;

/* Main container */

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

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

/* Footer */

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

/* Error */

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

}