/* _ _ ___ _____ _ ___ _____ _ _____ _____ | | / / / | | _ \ | | / | | _ \ | | | ____| / ___/ | | / / / /| | | |_| | | | / /| | | |_| | | | | |__ | |___ | | / / / / | | | _ / | | / / | | | _ { | | | __| \___ \ | |/ / / / | | | | \ \ | | / / | | | |_| | | |___ | |___ ___| | |___/ /_/ |_| |_| \_\ |_| /_/ |_| |_____/ |_____| |_____| /_____/ v5.11 */ /* 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: right; /* left/right/center (added as css class to .login) */ --login-width: 550px; --login-color: #fff; --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-link-color: #131313; /* Links of form login. Important not footer */ --login-link-color-hover: #000000; /* Links of form login. Important not footer */ --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: var(--primary-color); --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 - in React it doesn't work - */ --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: 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-text-transform: none; /* none/uppercase */ --login-btn-font-size: 20px; --login-btn-font-weight: 600; --login-btn-contrast-text: #fff; --login-btn-shadow: none; --login-btn-border: none; --login-btn-border-radius: var(--bs-border-radius); --login-btn-hover-color: var(--primary-color-hover); --login-btn-hover-color-rgb: 173, 40, 30; --login-btn-hover-contrast-text: #fff; --login-recover-mdi-color: var(--primary-color); --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: #eaecf0; /* Usually white for portals */ --general-text-color: #181818; /* Color brand */ --brand-color: #444444; --brand-color-contrast-text: #fff; --brand-color-hover: color-mix(in srgb, var(--brand-color) 88%, black); --brand-color-hue: 0; --brand-color-saturation: 0%; --brand-color-rgb: 68, 68, 68; --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: 240, 240, 240; --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: 221, 221, 221; --primary-color: #444444; --primary-color-contrast-text: #fff; --primary-color-hue: 0; --primary-color-saturation: 0%; --primary-color-rgb: 68, 68, 68; --primary-color-hover: color-mix(in srgb, var(--primary-color) 88%, black); --primary-color-hover-contrast-text: #fff; --primary-color-hover-rgb: 60, 60, 60; --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: 51, 51, 51; --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: 37, 37, 37; /* 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: 241, 241, 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: 224, 224, 224; --secondary-color: #555555; --secondary-color-contrast-text: #fff; --secondary-color-hue: 0; --secondary-color-saturation: 0%; --secondary-color-rgb: 85, 85, 85; --secondary-color-hover: color-mix(in srgb, var(--secondary-color) 88%, black); --secondary-color-hover-contrast-text: #fff; --secondary-color-hover-rgb: 124, 68, 143; --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: 64, 64, 64; --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: 47, 47, 47; /* 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: 254, 254, 254; --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: 253, 253, 253; --tertiary-color: #f5f5f5; --tertiary-color-contrast-text: #000; --tertiary-color-hue: 0; --tertiary-color-saturation: 0%; --tertiary-color-rgb: 245, 245, 245; --tertiary-color-hover: color-mix(in srgb, var(--tertiary-color) 88%, black); --tertiary-color-hover-contrast-text: #fff; --tertiary-color-hover-rgb: 216, 216, 216; --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: 184, 184, 184; --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: 135, 135, 135; /* 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); /* 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: #ccc; --header-ico-color: var(--primary-color-contrast-text); --header-ico-color-hover: #ccc; --header-user-color: var(--primary-color-contrast-text); --header-object-contrast-text: #666; --header-separator: none; /* 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-active-color: var(--primary-color); --menu-active-contrast-text: var(--primary-color-contrast-text); --menu-current-color: var(--primary-color-light); --menu-current-contrast-text: var(--primary-color-light-contrast-text); /* 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: color-mix(in srgb, var(--primary-color) 8%, white); /* 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; /* 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(--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; }