@charset "UTF-8";
:root {
  --main-color-900: #0000CB;
  --main-color-800: #0022DB;
  --main-color-700: #0030E5;
  --main-color-600: #003DF2;
  --main-color-500: #0046FE;
  --main-color-400: #4965FF;
  --main-color-300: #7183FF;
  --main-color-200: #9FA7FF;
  --main-color-100: #C7C9FF;
  --main-color-50: #E9EAFF;
  --secondary-color-900: #BD3D21;
  --secondary-color-800: #D74928;
  --secondary-color-700: #E64F2C;
  --secondary-color-600: #F45631;
  --secondary-color-500: #FF5C35;
  --secondary-color-400: #FE7451;
  --secondary-color-300: #FE8D70;
  --secondary-color-200: #FEAD98;
  --secondary-color-100: #FECDC0;
  --secondary-color-50: #FAEAE8;
  --grey-1000: #000;
  --grey-900: #212121;
  --grey-800: #424242;
  --grey-700: #616161;
  --grey-600: #757575;
  --grey-500: #9E9E9E;
  --grey-400: #BDBDBD;
  --grey-300: #E0E0E0;
  --grey-200: #EEEEEE;
  --grey-100: #F5F5F5;
  --grey-50: #FAFAFA;
  --grey-0: #fff;
  --query-color: #a4d1fc;
  --mode-query-color: #cee2f5;
  --table-line-bg: var(--grey-0);
  --table-tr-ligne-bg: var(--grey-100);
  --background-color: var(--grey-100);
  --global-bg-color: var(--grey-100);
  --section-bg: var(--grey-0);
  --elevated-bg-color: var(--grey-0);
  /* -------------- Palette de couleur -------------- */
  --notif-color: #FF5C35;
  --danger-color: #f44336;
  --danger-color-light: #f5554a;
  --mandatory-color: #edcb44;
  --mandatory-color-light: #eed056;
  --mandatory-color-light: #eed056;
  --mandatory-color-dark: #bda236;
  --warning-color: #ffeb3b;
  --info-color: #2196f3;
  --info-color-light: #4dabf5;
  --success-color: #4caf50;
  --key-1: #95ABE6;
  --key-2: #0084FF;
  --key-3: #004480;
  --key-4: #EDC6BE;
  --key-5: #E65538;
  --key-6: #E67B38;
  --key-7: #FEC55C;
  --cds-color-background-light: #ffffff;
  --cds-color-background-dark: #f5f5f5;
  --cds-color-background-avatar-red: #f44336;
  --cds-color-background-avatar-pink: #e91e63;
  --cds-color-background-avatar-purple: #9c27b0;
  --cds-color-background-avatar-deep-purple: #673ab7;
  --cds-color-background-avatar-indigo: #3f51b5;
  --cds-color-background-avatar-blue: #2196f3;
  --cds-color-background-avatar-light-blue: #03a9f4;
  --cds-color-background-avatar-cyan: #00bcd4;
  --cds-color-background-avatar-teal: #009688;
  --cds-color-background-avatar-green: #4caf50;
  --cds-color-background-avatar-orange: #ff9800;
  --cds-color-background-avatar-deep-orange: #ff5722;
  --cds-color-background-avatar-brown: #795548;
  --cds-color-background-avatar-blue-grey: #607d8b;
  /* -------------- /Palette de couleur -------------- */
  --red: #f44336;
  --green: #4caf50;
  --yellow: #ffeb3b;
  --blue: #2196f3;
  --orange: #ff9800;
  --mode-input-color: transparent;
  --mode-submit-color: transparent;
  --mode-request-color: transparent;
  --mode-control-color: transparent;
  --disable-color: var(--grey-300);
  --stepview-bg: #D1F2EB;
  --stepview-current-bg: #1ABC9C;
  --stepview-progress-bg: #F8C471;
  --stepview-inactive-bg: #E5E8E8;
  --stepview-current-cancel-bg: var(--danger-color);
  --stepview-shadow-arrow: #616161;
  --stepview-active-color: var(--grey-50);
  --number-color: var(--grey-900);
  --number-negative-color: var(--danger-color);
  --date-color: var(--grey-900);
  --link-color: var(--main-color-500);
  --link-color-hover: var(--main-color-700);
  --font-color: var(--grey-1000);
  --toolbar-avatar-color-shadow: var(--grey-300);
  --toolbar-avatar-color: var(--grey-0);
  --red-900: #B71C1C;
  --red-800: #C62828;
  --red-700: #D32F2F;
  --red-600: #E53935;
  --red-500: #F44336;
  --red-400: #EF5350;
  --red-300: #E57373;
  --red-200: #EF9A9A;
  --red-100: #FFCDD2;
  --red-50: #FFEBEE;
  --pink-900: #880E4F;
  --pink-800: #AD1457;
  --pink-700: #C2185B;
  --pink-600: #D81B60;
  --pink-500: #E91E63;
  --pink-400: #EC407A;
  --pink-300: #F06292;
  --pink-200: #F48FB1;
  --pink-100: #F8BBD0;
  --pink-50: #FCE4EC;
  --purple-900: #4A148C;
  --purple-800: #6A1B9A;
  --purple-700: #7B1FA2;
  --purple-600: #8E24AA;
  --purple-500: #9C27B0;
  --purple-400: #AB47BC;
  --purple-300: #BA68C8;
  --purple-200: #CE93D8;
  --purple-100: #E1BEE7;
  --purple-50: #F3E5F5;
  --deep-purple-900: #311B92;
  --deep-purple-800: #4527A0;
  --deep-purple-700: #512DA8;
  --deep-purple-600: #5E35B1;
  --deep-purple-500: #673AB7;
  --deep-purple-400: #7E57C2;
  --deep-purple-300: #9575CD;
  --deep-purple-200: #B39DDB;
  --deep-purple-100: #D1C4E9;
  --deep-purple-50: #EDE7F6;
  --indigo-900: #1A237E;
  --indigo-800: #283593;
  --indigo-700: #303F9F;
  --indigo-600: #3949AB;
  --indigo-500: #3F51B5;
  --indigo-400: #5C6BC0;
  --indigo-300: #7986CB;
  --indigo-200: #9FA8DA;
  --indigo-100: #C5CAE9;
  --indigo-50: #E8EAF6;
  --blue-900: #0D47A1;
  --blue-800: #1565C0;
  --blue-700: #1976D2;
  --blue-600: #1E88E5;
  --blue-500: #2196F3;
  --blue-400: #42A5F5;
  --blue-300: #45A5F5;
  --blue-200: #90CAF9;
  --blue-100: #BBDEFB;
  --blue-50: #E3F2FD;
  --light-blue-900: #01579B;
  --light-blue-800: #0277BD;
  --light-blue-700: #0288D1;
  --light-blue-600: #039BE5;
  --light-blue-500: #03A9F4;
  --light-blue-400: #29B6F6;
  --light-blue-300: #4FC3F7;
  --light-blue-200: #81D4F4;
  --light-blue-100: #B3E5FC;
  --light-blue-50: #E1F5FE;
  --cyan-900: #006064;
  --cyan-800: #00838F;
  --cyan-700: #0097A7;
  --cyan-600: #00ACC1;
  --cyan-500: #00BCD4;
  --cyan-400: #26C6DA;
  --cyan-300: #4DD0E1;
  --cyan-200: #80DEEA;
  --cyan-100: #B2EBF2;
  --cyan-50: #E0F7FA;
  --teal-900: #004D40;
  --teal-800: #00695C;
  --teal-700: #00796B;
  --teal-600: #00897B;
  --teal-500: #009688;
  --teal-400: #26A69A;
  --teal-300: #4DB6AC;
  --teal-200: #80CBC4;
  --teal-100: #B2DFDB;
  --teal-50: #E0F2F1;
  --green-900: #1B5E20;
  --green-800: #2E7D32;
  --green-700: #388E3C;
  --green-600: #43A047;
  --green-500: #4CAF50;
  --green-400: #66BB6A;
  --green-300: #81C784;
  --green-200: #A5D6A7;
  --green-100: #C8E6C9;
  --green-50: #E8F5E9;
  --light-green-900: #33691E;
  --light-green-800: #558B2F;
  --light-green-700: #689F38;
  --light-green-600: #7CB342;
  --light-green-500: #8BC34A;
  --light-green-400: #9CCC65;
  --light-green-300: #AED581;
  --light-green-200: #C5E1A5;
  --light-green-100: #DCEDC8;
  --light-green-50: #F1F8E9;
  --lime-900: #827717;
  --lime-800: #9E9D24;
  --lime-700: #AFB42B;
  --lime-600: #C0CA33;
  --lime-500: #CDDC39;
  --lime-400: #D4E157;
  --lime-300: #DCE775;
  --lime-200: #E6EE9C;
  --lime-100: #F0F4C3;
  --lime-50: #F9FBE7;
  --yellow-900: #F57F17;
  --yellow-800: #F9A825;
  --yellow-700: #FBC02D;
  --yellow-600: #FDD835;
  --yellow-500: #FFEB3B;
  --yellow-400: #FFEE58;
  --yellow-300: #FFF176;
  --yellow-200: #FFF59D;
  --yellow-100: #FFF9C4;
  --yellow-50: #FFFDE7;
  --amber-900: #FF6F00;
  --amber-800: #FF8F00;
  --amber-700: #FFA000;
  --amber-600: #FFB300;
  --amber-500: #FFC107;
  --amber-400: #FFCA28;
  --amber-300: #FFD54F;
  --amber-200: #FFE082;
  --amber-100: #FFECB3;
  --amber-50: #FFF8E1;
  --orange-900: #E65100;
  --orange-800: #EF6C00;
  --orange-700: #F67C00;
  --orange-600: #FB8C00;
  --orange-500: #FF9800;
  --orange-400: #FFA726;
  --orange-300: #FFB74D;
  --orange-200: #FFCC80;
  --orange-100: #FFE0B2;
  --orange-50: #FFF3E0;
  --deep-orange-900: #BF360C;
  --deep-orange-800: #D84315;
  --deep-orange-700: #E64A19;
  --deep-orange-600: #F4511E;
  --deep-orange-500: #FF5722;
  --deep-orange-400: #FF7043;
  --deep-orange-300: #FF8A65;
  --deep-orange-200: #FFAB91;
  --deep-orange-100: #FFCCBC;
  --deep-orange-50: #FBE9E7;
  --brown-900: #3E2723;
  --brown-800: #4E342E;
  --brown-700: #5D4037;
  --brown-600: #6D4C41;
  --brown-500: #8D6E63;
  --brown-400: #8D6E63;
  --brown-300: #A1887F;
  --brown-200: #BCAAA4;
  --brown-100: #D7CCC8;
  --brown-50: #EFEBE9;
  --gray-900: #212121;
  --gray-800: #424242;
  --gray-700: #616161;
  --gray-600: #757575;
  --gray-500: #9E9E9E;
  --gray-400: #BDBDBD;
  --gray-300: #E0E0E0;
  --gray-200: #EEEEEE;
  --gray-100: #F5F5F5;
  --gray-50: #FAFAFA;
  --blue-gray-900: #263238;
  --blue-gray-800: #37474F;
  --blue-gray-700: #455A64;
  --blue-gray-600: #546E7A;
  --blue-gray-500: #607D8B;
  --blue-gray-400: #78909C;
  --blue-gray-300: #90A4AE;
  --blue-gray-200: #B0BEC5;
  --blue-gray-100: #CFD8DC;
  --blue-gray-50: #ECEFF1;
  --amo-color: var(--red-200);
  --deb-color: var(--green-400);
  --dwh-color: var(--indigo-200);
  --gta-color: var(--pink-300);
  --gti-color: var(--orange-400);
  --mir-color: var(--blue-100);
  --obd-color: var(--light-green-300);
  --ocm-color: var(--cyan-400);
  --oct-color: var(--lime-500);
  --ode-color: var(--green-100);
  --qal-color: var(--orange-200);
  --qam-color: var(--yellow-300);
  --qdf-color: var(--blue-400);
  --qec-color: var(--purple-200);
  --qlo-color: var(--teal-300);
  --qpn-color: var(--amber-300);
  --qpr-color: var(--yellow-100);
  --qrm-color: var(--cyan-100);
  --qta-color: var(--lime-200);
  --sac-color: var(--deep-orange-200);
  --seb-color: var(--deep-orange-400);
  --sir-color: var(--brown-300);
  --stk-color: var(--brown-100);
  --svt-color: var(--light-blue-300);
  --svx-color: var(--deep-purple-200);
  --tus-color: var(--deep-purple-300);
  --gmi-color: var(--indigo-400);
  --spec-color: var(--red-400);
}
@media (prefers-color-scheme: dark) {
  :root {
    --secondary-color-50: #0046FE;
    --secondary-color-100: #4965FF;
    --secondary-color-200: #4965FF;
    --secondary-color-300: #7183FF;
    --secondary-color-400: #7183FF;
    --secondary-color-500: #9FA7FF;
    --secondary-color-600: #9FA7FF;
    --secondary-color-700: #C7C9FF;
    --secondary-color-800: #C7C9FF;
    --secondary-color-900: #E9EAFF;
    --main-color-50: #BF360C;
    --main-color-100: #D84315;
    --main-color-200: #E64A19;
    --main-color-300: #F4511E;
    --main-color-400: #FF5722;
    --main-color-500: #FF7043;
    --main-color-600: #FF8A65;
    --main-color-700: #FFAB91;
    --main-color-800: #FFCCBC;
    --main-color-900: #FBE9E7;
    --grey-0: #424242;
    --grey-50: #616161;
    --grey-100: #757575;
    --grey-200: #9E9E9E;
    --grey-300: #BDBDBD;
    --grey-400: #E0E0E0;
    --grey-500: #EEEEEE;
    --grey-600: #EEEEEE;
    --grey-700: #F5F5F5;
    --grey-800: #FAFAFA;
    --grey-900: #FAFAFA;
    --grey-1000: #fff;
    /* Palette de couleur dark high contrast
    --grey-0: #121212;
    --grey-50: #424242;
    --grey-100: #424242;
    --grey-200: #616161;
    --grey-300: #757575;
    --grey-400: #9E9E9E;
    --grey-500: #BDBDBD;
    --grey-600: #E0E0E0;
    --grey-700: #EEEEEE;
    --grey-800: #F5F5F5;
    --grey-900: #FAFAFA;
    --grey-1000: #fff;
    */
    --query-color: #1086f7;
    --mode-query-color: #194775;
    --disable-color: var(--grey-200);
    --link-color: var(--grey-900);
    --link-color-hover: var(--main-color-700);
    --info-color: #c3e1f8;
    --info-color-light: #c2e2f9;
    --stepview-bg: #4fb3bf;
    --stepview-current-bg: #00838f;
    --stepview-progress-bg: #ff8a80;
    --stepview-inactive-bg: var(--grey-300);
    --stepview-current-cancel-bg: var(--danger-color);
    --stepview-shadow-arrow: #616161;
    --stepview-active-color: var(--grey-900);
    --table-line-bg: var(--grey-50);
    --table-tr-ligne-bg: var(--grey-100);
    --background-color: var(--grey-0);
    --global-bg-color: var(--grey-0);
    --section-bg: var(--grey-300);
    --elevated-bg-color: var(--grey-50);
    --toolbar-avatar-color-shadow: var(--grey-50);
    --toolbar-avatar-color: var(--grey-1000);
    --amo-color: var(--red-500);
    --deb-color: var(--green-700);
    --dwh-color: var(--indigo-500);
    --gta-color: var(--pink-600);
    --gti-color: var(--orange-700);
    --mir-color: var(--blue-400);
    --obd-color: var(--light-green-600);
    --ocm-color: var(--cyan-700);
    --oct-color: var(--lime-800);
    --ode-color: var(--green-400);
    --qal-color: var(--orange-500);
    --qam-color: var(--yellow-600);
    --qdf-color: var(--blue-700);
    --qec-color: var(--purple-500);
    --qlo-color: var(--teal-600);
    --qpn-color: var(--amber-600);
    --qpr-color: var(--yellow-400);
    --qrm-color: var(--cyan-400);
    --qta-color: var(--lime-500);
    --sac-color: var(--deep-orange-500);
    --seb-color: var(--deep-orange-700);
    --sir-color: var(--brown-600);
    --stk-color: var(--brown-400);
    --svt-color: var(--light-blue-600);
    --svx-color: var(--deep-purple-500);
    --tus-color: var(--deep-purple-600);
    --std-color: var(--indigo-700);
    --spec-color: var(--red-700);
  }
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
  margin: 0;
}

/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
  background-color: transparent;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
* Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
  border-style: none;
}

/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button, .tag,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button, .tag,
input { /* 1 */
  overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button, .tag,
select { /* 1 */
  text-transform: none;
}

/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button, .tag,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, .tag::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, .tag:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Correct the padding in Firefox.
*/
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.
*/
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
  vertical-align: baseline;
}

/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
  overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
  display: block;
}

/*
* Add the correct display in all browsers.
*/
summary {
  display: list-item;
}

/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
  display: none;
}

/**
* Add the correct display in IE 10.
*/
[hidden] {
  display: none;
}

/* --------------- Paramètres du composant type -------------- */
/* -------------- /Paramètres du composant type -------------- */
/* --------------- Paramètres du composant type -------------- */
/* -------------- /Paramètres du composant type -------------- */
/* CARLITO */
@font-face {
  font-family: "Carlito";
  src: url("../../fonts/Carlito-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Carlito";
  src: url("../../fonts/Carlito-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Carlito";
  src: url("../../fonts/Carlito-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Carlito";
  src: url("../../fonts/Carlito-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
/* /CARLITO */
/* OPEN SANS */
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-LightItalic.ttf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../fonts/OpenSans-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
/* /OPEN SANS */
/* ROBOTO */
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-ThinItalic.ttf");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-LightItalic.ttf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-Black.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../../fonts/Roboto-BlackItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
/* /ROBOTO */
* {
  box-sizing: border-box;
}
*::after, *::before {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: var(--background-color);
  line-height: 18px;
  font-size: 12px;
  font-family: "Carlito", sans-serif;
  font-weight: normal;
  font-style: normal;
}

button, .tag,
input,
optgroup,
select,
textarea {
  line-height: 18px;
}

.background {
  background-color: var(--background-color);
}

.is-upper-case {
  text-transform: uppercase;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.is-none-display {
  display: none !important;
}

.has-padding-10 {
  padding: 10px;
}

.has-padding-20 {
  padding: 20px;
}

.space-10 {
  height: 10px;
  display: block;
}

.space-20 {
  height: 20px;
  display: block;
}

.space-40 {
  height: 40px;
  display: block;
}

.is-bold {
  font-weight: bold;
}

.has-overflow-x-auto {
  overflow-x: auto;
}

.has-overflow-x-hidden, .transaction__header-right, .transaction__title, .transaction__mnemo {
  overflow-x: hidden;
}

.has-overflow-y-auto {
  overflow-y: auto;
}

.has-overflow-y-hidden, .transaction__header-right, .transaction__title, .transaction__mnemo {
  overflow-y: hidden;
}

.has-overflow-hidden {
  overflow: hidden !important;
}

.is-vertical-align {
  display: table;
}
.is-vertical-align > div {
  display: table-cell;
  vertical-align: middle;
}

.is-full {
  height: 100%;
  width: 100%;
}

.is-full-height {
  height: 100%;
}

.is-full-width {
  width: 100%;
}

.is-none-selectable {
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.is-selectable {
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.is-deleted {
  opacity: 0.4;
  color: #d88383;
}

.is-selected {
  background-color: var(--main-color-200);
  color: var(--grey-0);
}

.is-red {
  color: var(--red) !important;
}

.is-light {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5);
}

.has-space-10 {
  height: 10px;
}

.has-space-20 {
  height: 20px;
}

.has-space-30 {
  height: 30px;
}

.has-space-40 {
  height: 40px;
}

.has-space-50 {
  height: 50px;
}

[data-mode=QUERY] {
  background-color: var(--mode-query-color);
  border: solid 1px var(--query-color);
}

[data-mode=INPUT],
[data-mode=DISPLAY] {
  background-color: var(--mode-input-color);
}

[data-mode=SUBMIT] {
  background-color: var(--mode-submit-color);
}

[data-mode=CONTROL] {
  background-color: var(--mode-control-color);
}

[data-format-type=number][data-number-sign=positiv] {
  color: var(--number-color) !important;
}
[data-format-type=number][data-number-sign=negativ] {
  color: var(--number-negative-color) !important;
}

[data-format-type=dateComplete],
[data-format-type=dateMonth] {
  color: var(--date-color) !important;
}

.title-1 {
  font-size: 60px;
  line-height: 71px;
  letter-spacing: -0.5px;
  font-weight: 300;
  margin: 0;
}

.title-2 {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.19px;
  font-weight: 600;
  margin: 0;
}

.title-3 {
  font-size: 48px;
  line-height: 57px;
  letter-spacing: 0px;
  font-weight: 400;
  margin: 0;
}

.title-4 {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: 0.25px;
  font-weight: 400;
  margin: 0;
}

.title-5 {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 400;
  margin: 0;
}

.title-6 {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15px;
  font-weight: 700;
  margin: 0;
}

.title-7, .Calendar-grid__head-number {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0px;
  font-weight: 400;
  margin: 0;
}

.title-8, .transaction__label, .Calendar-cell.Calendar-cell-year .Calendar-cell-year__week-number, .Calendar .link, .Calendar .Calendar-grid__day-link, .Calendar .Calendar-grid__week-link, .Calendar .Calendar-grid__month-link, .Calendar-grid__month {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.19px;
  font-weight: 600;
  margin: 0;
}

.body-1 {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  font-weight: 400;
  margin: 0;
}

.body-2 {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.25px;
  font-weight: 400;
  margin: 0;
}

.subtitle-1 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
  font-weight: 400;
  margin: 0;
}

.subtitle-2 {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.1px;
  font-weight: 500;
  margin: 0;
}

.caption {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
  font-weight: 400;
  margin: 0;
}

.overline {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin: 0;
}

input {
  padding: 0px;
}

/* @define button; weak */
button, .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  text-align: center;
  text-transform: initial;
  overflow: hidden;
  height: 20px;
  width: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: initial;
  line-height: 20px;
  margin: 0;
  padding: 0 8px;
  justify-content: space-evenly;
  position: relative;
}
button:disabled, .tag:disabled {
  cursor: not-allowed;
}
button:disabled .button__image, .tag:disabled .button__image {
  opacity: 0.33;
}

.button--primary, .objectpage__button, .button--secondary {
  background-color: var(--main-color-500);
  color: var(--grey-0);
  border-radius: 2px;
  border: none;
}
@media (prefers-color-scheme: light) {
  .button--primary, .objectpage__button, .button--secondary {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .button--primary, .objectpage__button, .button--secondary {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--primary svg > use, .objectpage__button svg > use, .button--secondary svg > use {
  fill: var(--grey-0);
}
.button--primary:focus, .objectpage__button:focus, .button--secondary:focus {
  background-color: var(--main-color-300);
  border-color: var(--main-color-300);
  color: var(--grey-0);
}
@media (prefers-color-scheme: light) {
  .button--primary:focus, .objectpage__button:focus, .button--secondary:focus {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .button--primary:focus, .objectpage__button:focus, .button--secondary:focus {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--primary:focus svg > use, .objectpage__button:focus svg > use, .button--secondary:focus svg > use {
  fill: var(--grey-0);
}
.button--primary:hover:not([disabled]), .objectpage__button:hover:not([disabled]), .button--secondary:hover:not([disabled]) {
  background-color: var(--main-color-400);
  border-color: var(--main-color-400);
  border: none;
  color: var(--main-color-50);
}
@media (prefers-color-scheme: light) {
  .button--primary:hover:not([disabled]), .objectpage__button:hover:not([disabled]), .button--secondary:hover:not([disabled]) {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .button--primary:hover:not([disabled]), .objectpage__button:hover:not([disabled]), .button--secondary:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--primary:hover:not([disabled]) svg > use, .objectpage__button:hover:not([disabled]) svg > use, .button--secondary:hover:not([disabled]) svg > use {
  fill: var(--main-color-50);
}
.button--primary:disabled, .objectpage__button:disabled, .button--secondary:disabled {
  background-color: var(--main-color-100);
  border-color: var(--disable-color);
  color: var(--main-color-300);
}
@media (prefers-color-scheme: light) {
  .button--primary:disabled, .objectpage__button:disabled, .button--secondary:disabled {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--primary:disabled, .objectpage__button:disabled, .button--secondary:disabled {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--primary:disabled svg > use, .objectpage__button:disabled svg > use, .button--secondary:disabled svg > use {
  fill: var(--main-color-300);
}
.button--primary:active:not([disabled]), .objectpage__button:active:not([disabled]), .button--secondary:active:not([disabled]) {
  background-color: var(--grey-100);
  border-color: var(--main-color-700);
  background: var(--main-color-300);
  color: var(--grey-0);
}
@media (prefers-color-scheme: light) {
  .button--primary:active:not([disabled]), .objectpage__button:active:not([disabled]), .button--secondary:active:not([disabled]) {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .button--primary:active:not([disabled]), .objectpage__button:active:not([disabled]), .button--secondary:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--primary:active:not([disabled]) svg > use, .objectpage__button:active:not([disabled]) svg > use, .button--secondary:active:not([disabled]) svg > use {
  fill: var(--grey-0);
}

.button--secondary {
  background-color: var(--secondary-color-500);
}
.button--secondary:focus {
  background-color: var(--secondary-color-300);
  border-color: var(--secondary-color-300);
}
.button--secondary:hover:not([disabled]) {
  background-color: var(--secondary-color-400);
  border-color: var(--secondary-color-400);
  color: var(--secondary-color-50);
}
.button--secondary:disabled {
  background-color: var(--secondary-color-100);
  color: var(--secondary-color-300);
}
.button--secondary:disabled svg > use {
  fill: var(--secondary-color-300);
}

.button--info {
  background-color: var(--main-color-500);
  border: none;
}

.button--padding {
  padding: 5px 10px;
}

.button--text_bottom {
  flex-direction: column;
}

.button--text_top {
  flex-direction: column-reverse;
}

.button--text_right {
  flex-direction: row;
  padding: 0 5px;
}
.button--text_right > svg {
  margin-right: 5px;
}

.button--text_left {
  flex-direction: row-reverse;
  padding: 0 5px;
}
.button--text_left > svg {
  margin-left: 5px;
}

.button--align_left {
  justify-content: flex-start;
}

.button--align_right {
  justify-content: flex-end;
}

/* --------- /Gestion du positionnement entre un texte et une image(balise image ou svg) --------- */
.button__text {
  text-overflow: ellipsis;
  pointer-events: none;
}

.button--icon {
  padding: 0;
  border: initial;
  background-color: transparent;
  height: 24px;
}
@media (prefers-color-scheme: light) {
  .button--icon {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--icon {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--icon svg > use {
  fill: var(--grey-800);
}
.button--icon:hover:not([disabled]) {
  background-color: transparent;
  border-color: initial;
  border: initial;
  color: initial;
}
@media (prefers-color-scheme: light) {
  .button--icon:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--icon:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--icon:hover:not([disabled]) svg > use {
  fill: var(--main-color-400);
}
.button--icon:disabled {
  background-color: transparent;
  opacity: 0.5;
}

.button__icon {
  padding: 0px;
  flex-shrink: 0;
  pointer-events: none;
}

.button__icon--select {
  margin: 0;
}

.button--outlined, .button--outlined-black {
  border-radius: 2px;
  border: solid 1px var(--grey-300);
  background-color: var(--grey-0);
  color: var(--main-color-500);
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
@media (prefers-color-scheme: light) {
  .button--outlined, .button--outlined-black {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--outlined, .button--outlined-black {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--outlined svg > use, .button--outlined-black svg > use {
  fill: var(--main-color-500);
}
.button--outlined:focus:not([disabled]), .button--outlined-black:focus:not([disabled]) {
  background-color: var(--main-color-200);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--outlined:focus:not([disabled]), .button--outlined-black:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--outlined:focus:not([disabled]), .button--outlined-black:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--outlined:focus:not([disabled]) svg > use, .button--outlined-black:focus:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--outlined:hover:not([disabled]), .button--outlined-black:hover:not([disabled]) {
  background-color: var(--main-color-50);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--outlined:hover:not([disabled]), .button--outlined-black:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--outlined:hover:not([disabled]), .button--outlined-black:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--outlined:hover:not([disabled]) svg > use, .button--outlined-black:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--outlined:active:not([disabled]), .button--outlined-black:active:not([disabled]) {
  background-color: var(--main-color-200);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--outlined:active:not([disabled]), .button--outlined-black:active:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--outlined:active:not([disabled]), .button--outlined-black:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--outlined:active:not([disabled]) svg > use, .button--outlined-black:active:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--outlined:disabled, .button--outlined-black:disabled {
  background-color: transparent;
  color: var(--main-color-300);
  cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
  .button--outlined:disabled, .button--outlined-black:disabled {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--outlined:disabled, .button--outlined-black:disabled {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--outlined:disabled svg > use, .button--outlined-black:disabled svg > use {
  fill: var(--main-color-300);
}

.button--outlined-black {
  color: var(--grey-900);
  /* -------------- /Etat du composant -------------- */
}
.button--outlined-black svg > use {
  fill: var(--grey-900);
}
.button--outlined-black:disabled {
  color: var(--main-color-300);
}
.button--outlined-black:disabled svg > use {
  fill: var(--main-color-300);
}

.button--text, .do-action__button {
  border: none;
  background-color: transparent;
  color: var(--main-color-500);
  border-radius: 2px;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
@media (prefers-color-scheme: light) {
  .button--text, .do-action__button {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--text, .do-action__button {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--text svg > use, .do-action__button svg > use {
  fill: var(--main-color-500);
}
.button--text:focus:not([disabled]), .do-action__button:focus:not([disabled]) {
  background-color: var(--main-color-200);
  border: none;
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--text:focus:not([disabled]), .do-action__button:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--text:focus:not([disabled]), .do-action__button:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--text:focus:not([disabled]) svg > use, .do-action__button:focus:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--text:hover:not([disabled]), .do-action__button:hover:not([disabled]) {
  border: none;
  background-color: var(--main-color-50);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--text:hover:not([disabled]), .do-action__button:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--text:hover:not([disabled]), .do-action__button:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--text:hover:not([disabled]) svg > use, .do-action__button:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--text:disabled, .do-action__button:disabled {
  background-color: var(--disable-color);
  border: none;
  color: var(--disable-color);
  cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
  .button--text:disabled, .do-action__button:disabled {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--text:disabled, .do-action__button:disabled {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--text:active:not([disabled]), .do-action__button:active:not([disabled]) {
  border: none;
  background-color: var(--main-color-300);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--text:active:not([disabled]), .do-action__button:active:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--text:active:not([disabled]), .do-action__button:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--text:active:not([disabled]) svg > use, .do-action__button:active:not([disabled]) svg > use {
  fill: var(--main-color-500);
}

.button--grey-text {
  border: none;
  background-color: transparent;
  color: var(--grey-700);
  border-radius: 2px;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
@media (prefers-color-scheme: light) {
  .button--grey-text {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--grey-text {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--grey-text svg > use {
  fill: var(--grey-700);
}
.button--grey-text:focus:not([disabled]) {
  background-color: var(--main-color-200);
  border: none;
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--grey-text:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--grey-text:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--grey-text:focus:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--grey-text:hover:not([disabled]) {
  border: none;
  background-color: var(--main-color-50);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--grey-text:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--grey-text:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--grey-text:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.button--grey-text:disabled {
  background-color: var(--disable-color);
  border: none;
  cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
  .button--grey-text:disabled {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--grey-text:disabled {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--grey-text:active:not([disabled]) {
  border: none;
  background-color: var(--main-color-300);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .button--grey-text:active:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--grey-text:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--grey-text:active:not([disabled]) svg > use {
  fill: var(--main-color-500);
}

.button--toggle {
  border: solid 1px var(--grey-300);
  border-radius: 2px;
  background-color: var(--grey-0);
  color: var(--grey-800);
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
@media (prefers-color-scheme: light) {
  .button--toggle {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--toggle {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--toggle svg > use {
  fill: var(--grey-800);
}
.button--toggle:focus:not([disabled]) {
  border: none;
  background-color: var(--grey-300);
  color: var(--grey-700);
}
@media (prefers-color-scheme: light) {
  .button--toggle:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--toggle:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--toggle:focus:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.button--toggle:hover:not([disabled]) {
  border: none;
  background-color: var(--grey-200);
  color: var(--grey-700);
}
@media (prefers-color-scheme: light) {
  .button--toggle:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--toggle:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--toggle:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.button--toggle:disabled {
  border: none;
  background-color: var(--disable-color);
  cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
  .button--toggle:disabled {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--toggle:disabled {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--toggle:active:not([disabled]) {
  border: solid 1px var(--main-color-50);
  background-color: var(--main-color-50);
  color: var(--main-color-700);
}
@media (prefers-color-scheme: light) {
  .button--toggle:active:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--toggle:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--toggle:active:not([disabled]) svg > use {
  fill: var(--main-color-700);
}

.button--action, .toolbar__mnemo-entry button, .toolbar__mnemo-entry .tag, .input__group--file > aside > .button--browse,
.input__group--file > aside .button--show-link, .button--action-outline, .button--action-secondary, .button--action-primary {
  background-color: transparent;
  color: var(--grey-700);
  height: 100%;
  width: auto;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0 12px;
  font-weight: normal;
  box-shadow: none;
  max-height: 36px;
  flex-direction: row;
}
.button--action svg use, .toolbar__mnemo-entry button svg use, .toolbar__mnemo-entry .tag svg use, .input__group--file > aside > .button--browse svg use,
.input__group--file > aside .button--show-link svg use, .button--action-outline svg use, .button--action-secondary svg use, .button--action-primary svg use {
  fill: var(--grey-700);
}
.button--action:hover:not([disabled]), .toolbar__mnemo-entry button:hover:not([disabled]), .toolbar__mnemo-entry .tag:hover:not([disabled]), .input__group--file > aside > .button--browse:hover:not([disabled]),
.input__group--file > aside .button--show-link:hover:not([disabled]), .button--action-outline:hover:not([disabled]), .button--action-secondary:hover:not([disabled]), .button--action-primary:hover:not([disabled]) {
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: light) {
  .button--action:hover:not([disabled]), .toolbar__mnemo-entry button:hover:not([disabled]), .toolbar__mnemo-entry .tag:hover:not([disabled]), .input__group--file > aside > .button--browse:hover:not([disabled]),
  .input__group--file > aside .button--show-link:hover:not([disabled]), .button--action-outline:hover:not([disabled]), .button--action-secondary:hover:not([disabled]), .button--action-primary:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--action:hover:not([disabled]), .toolbar__mnemo-entry button:hover:not([disabled]), .toolbar__mnemo-entry .tag:hover:not([disabled]), .input__group--file > aside > .button--browse:hover:not([disabled]),
  .input__group--file > aside .button--show-link:hover:not([disabled]), .button--action-outline:hover:not([disabled]), .button--action-secondary:hover:not([disabled]), .button--action-primary:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--action:hover:not([disabled]) svg use, .toolbar__mnemo-entry button:hover:not([disabled]) svg use, .toolbar__mnemo-entry .tag:hover:not([disabled]) svg use, .input__group--file > aside > .button--browse:hover:not([disabled]) svg use,
.input__group--file > aside .button--show-link:hover:not([disabled]) svg use, .button--action-outline:hover:not([disabled]) svg use, .button--action-secondary:hover:not([disabled]) svg use, .button--action-primary:hover:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.button--action:active:not([disabled]), .toolbar__mnemo-entry button:active:not([disabled]), .toolbar__mnemo-entry .tag:active:not([disabled]), .input__group--file > aside > .button--browse:active:not([disabled]),
.input__group--file > aside .button--show-link:active:not([disabled]), .button--action-outline:active:not([disabled]), .button--action-secondary:active:not([disabled]), .button--action-primary:active:not([disabled]) {
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: light) {
  .button--action:active:not([disabled]), .toolbar__mnemo-entry button:active:not([disabled]), .toolbar__mnemo-entry .tag:active:not([disabled]), .input__group--file > aside > .button--browse:active:not([disabled]),
  .input__group--file > aside .button--show-link:active:not([disabled]), .button--action-outline:active:not([disabled]), .button--action-secondary:active:not([disabled]), .button--action-primary:active:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--action:active:not([disabled]), .toolbar__mnemo-entry button:active:not([disabled]), .toolbar__mnemo-entry .tag:active:not([disabled]), .input__group--file > aside > .button--browse:active:not([disabled]),
  .input__group--file > aside .button--show-link:active:not([disabled]), .button--action-outline:active:not([disabled]), .button--action-secondary:active:not([disabled]), .button--action-primary:active:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--action:active:not([disabled]) svg use, .toolbar__mnemo-entry button:active:not([disabled]) svg use, .toolbar__mnemo-entry .tag:active:not([disabled]) svg use, .input__group--file > aside > .button--browse:active:not([disabled]) svg use,
.input__group--file > aside .button--show-link:active:not([disabled]) svg use, .button--action-outline:active:not([disabled]) svg use, .button--action-secondary:active:not([disabled]) svg use, .button--action-primary:active:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.button--action:disabled, .toolbar__mnemo-entry button:disabled, .toolbar__mnemo-entry .tag:disabled, .input__group--file > aside > .button--browse:disabled,
.input__group--file > aside .button--show-link:disabled, .button--action-outline:disabled, .button--action-secondary:disabled, .button--action-primary:disabled {
  background-color: transparent;
  color: var(--disable-color);
  border: 1px solid transparent;
}
.button--action:disabled svg use, .toolbar__mnemo-entry button:disabled svg use, .toolbar__mnemo-entry .tag:disabled svg use, .input__group--file > aside > .button--browse:disabled svg use,
.input__group--file > aside .button--show-link:disabled svg use, .button--action-outline:disabled svg use, .button--action-secondary:disabled svg use, .button--action-primary:disabled svg use {
  fill: var(--disable-color);
}
.button--action:focus:not([disabled]), .toolbar__mnemo-entry button:focus:not([disabled]), .toolbar__mnemo-entry .tag:focus:not([disabled]), .input__group--file > aside > .button--browse:focus:not([disabled]),
.input__group--file > aside .button--show-link:focus:not([disabled]), .button--action-outline:focus:not([disabled]), .button--action-secondary:focus:not([disabled]), .button--action-primary:focus:not([disabled]) {
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: light) {
  .button--action:focus:not([disabled]), .toolbar__mnemo-entry button:focus:not([disabled]), .toolbar__mnemo-entry .tag:focus:not([disabled]), .input__group--file > aside > .button--browse:focus:not([disabled]),
  .input__group--file > aside .button--show-link:focus:not([disabled]), .button--action-outline:focus:not([disabled]), .button--action-secondary:focus:not([disabled]), .button--action-primary:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .button--action:focus:not([disabled]), .toolbar__mnemo-entry button:focus:not([disabled]), .toolbar__mnemo-entry .tag:focus:not([disabled]), .input__group--file > aside > .button--browse:focus:not([disabled]),
  .input__group--file > aside .button--show-link:focus:not([disabled]), .button--action-outline:focus:not([disabled]), .button--action-secondary:focus:not([disabled]), .button--action-primary:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.button--action:focus:not([disabled]) svg use, .toolbar__mnemo-entry button:focus:not([disabled]) svg use, .toolbar__mnemo-entry .tag:focus:not([disabled]) svg use, .input__group--file > aside > .button--browse:focus:not([disabled]) svg use,
.input__group--file > aside .button--show-link:focus:not([disabled]) svg use, .button--action-outline:focus:not([disabled]) svg use, .button--action-secondary:focus:not([disabled]) svg use, .button--action-primary:focus:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.button--action .svg--pushed > use, .toolbar__mnemo-entry button .svg--pushed > use, .toolbar__mnemo-entry .tag .svg--pushed > use, .input__group--file > aside > .button--browse .svg--pushed > use,
.input__group--file > aside .button--show-link .svg--pushed > use, .button--action-outline .svg--pushed > use, .button--action-secondary .svg--pushed > use, .button--action-primary .svg--pushed > use {
  fill: var(--main-color-500);
}

.button--action-primary {
  color: var(--main-color-500);
}
.button--action-primary svg use {
  fill: var(--main-color-500);
}
.button--action-primary:hover:not([disabled]) {
  background-color: var(--main-color-50);
}
.button--action-primary:active:not([disabled]) {
  background-color: var(--main-color-50);
}
.button--action-primary:focus:not([disabled]) {
  background-color: var(--main-color-100);
}

.button--action-secondary {
  color: var(--secondary-color-500);
}
.button--action-secondary svg use {
  fill: var(--secondary-color-500);
}
.button--action-secondary:hover:not([disabled]) {
  color: var(--secondary-color-500);
  background-color: var(--secondary-color-50);
}
.button--action-secondary:hover:not([disabled]) svg use {
  fill: var(--secondary-color-500);
}
.button--action-secondary:active:not([disabled]) {
  color: var(--secondary-color-500);
  background-color: var(--secondary-color-50);
}
.button--action-secondary:active:not([disabled]) svg use {
  fill: var(--secondary-color-500);
}
.button--action-secondary:focus:not([disabled]) {
  color: var(--secondary-color-500);
  background-color: var(--secondary-color-100);
}
.button--action-secondary:focus:not([disabled]) svg use {
  fill: var(--secondary-color-500);
}

.button--action-outline {
  background-color: var(--grey-100);
  border: 1px solid var(--grey-500);
  border-radius: 2px;
}
.button--action-outline:hover:not([disabled]) {
  background-color: var(--grey-100);
  border: 1px solid var(--grey-500);
}
.button--action-outline:active:not([disabled]) {
  background-color: var(--grey-100);
  border: 1px solid var(--grey-500);
}
.button--action-outline:disabled {
  background-color: var(--grey-100);
  border: 1px solid var(--grey-500);
}
.button--action-outline:focus:not([disabled]) {
  background-color: var(--grey-100);
  border: 1px solid var(--grey-500);
}

.button__image {
  flex-shrink: 0;
  padding-left: 5px;
}

.button--pushed, .window--reduced button[data-window-action=reduce], .window--reduced [data-window-action=reduce].tag {
  z-index: 0;
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
.button--pushed svg > use, .window--reduced button[data-window-action=reduce] svg > use, .window--reduced [data-window-action=reduce].tag svg > use {
  fill: var(--main-color-500);
}

.button-select {
  height: auto;
  max-height: 36px;
  max-width: 280px;
}

.button__loader {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
  /* Ne pas oublier de prendre en compte le padding */
  top: 0;
  left: 16px;
  width: calc(100% - 32px);
  height: 100%;
}

.button__ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  animation: ripple 1s;
  opacity: 0;
}

.button__bg-test {
  height: auto;
  width: 80%;
  background-color: var(--grey-100);
}

.button--outlined.isLoading svg > use, .isLoading.button--outlined-black svg > use {
  fill: var(--secondary-color-500);
}

.div__button {
  display: flex;
  height: 40px;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(10);
  }
}
/* --------------- Composant -------------- */
:host(.cegid-card) {
  border-radius: 4px;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  background-color: var(--elevated-bg-color);
}
@media (prefers-color-scheme: light) {
  :host(.cegid-card) {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  :host(.cegid-card) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
:host(.cegid-card):hover {
  background-color: var(--grey-100);
}
:host(.cegid-card):focus {
  background-color: var(--grey-200);
}

.cegid-card__header {
  padding: 8px;
  border-bottom: 1px solid var(--global-bg-color);
}

.cegid-card__body {
  overflow: auto;
  height: 100%;
  padding: 16px 16px 8px 16px;
}

.cegid-card__body--fixed-height {
  height: calc(100% - 41px);
}

.cegid-card__icon--primary-color > use {
  fill: var(--main-color-500);
}

/* --------------- Composant -------------- */
.block {
  display: flex;
  justify-content: space-evenly;
  margin: 4.5rem;
}

.checkboxes {
  margin-top: 12px;
}

.checkboxes__input {
  visibility: hidden;
  -moz-appearance: initial;
}

.checkboxes__input::after {
  position: absolute;
  border: 2px solid var(--grey-600);
  border-radius: 3px;
  background-color: var(--cds-color-background-light);
  cursor: pointer;
  width: 24px;
  height: 24px;
  content: " ";
  z-index: 1;
  visibility: visible;
}

.checkboxes__icon {
  position: absolute;
  cursor: pointer;
  width: 24px;
  height: 24px;
  z-index: 1;
}
.checkboxes__icon > svg > use {
  visibility: hidden;
}

.checkboxes__div {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  z-index: 0;
  left: 6px;
  top: 6px;
}

.checkboxes__label {
  position: absolute;
  color: var(--grey-600);
  font-size: 14px;
  font-weight: normal;
  left: 50px;
  top: -6px;
}

.checkboxes__span {
  position: absolute;
  color: var(--grey-600);
  font-size: 12px;
  font-weight: normal;
  left: 50px;
  top: 15px;
}

.checkboxes {
  position: relative;
  width: 100%;
  height: 100%;
}
.checkboxes > .checkboxes__input:checked + .checkboxes__icon > svg > use {
  visibility: visible;
  fill: var(--cds-color-background-light);
}
.checkboxes > .checkboxes__input:checked::after {
  border: 2px solid var(--main-color-500);
  background-color: var(--main-color-500);
}
.checkboxes > .checkboxes__input:hover:checked + .checkboxes__icon + .checkboxes__div {
  background-color: var(--main-color-50);
  animation: anim2 0.2s;
  transform: scale(6);
}
.checkboxes > .checkboxes__input:hover:not(:checked) + .checkboxes__icon + .checkboxes__div {
  background-color: var(--grey-100);
  animation: anim1 0.2s;
  transform: scale(6);
}
.checkboxes > .checkboxes__input:hover:not(:checked):after {
  border: 2px solid var(--indigo-900);
}
.checkboxes--disabled, .checkboxes--readonly {
  width: 100%;
  height: 100%;
}
.checkboxes--disabled > .checkboxes__input::after, .checkboxes--readonly > .checkboxes__input::after {
  border-color: var(--disable-color);
}
.checkboxes--disabled > .checkboxes__icon, .checkboxes--readonly > .checkboxes__icon {
  cursor: not-allowed;
}
.checkboxes--disabled > .checkboxes__label, .checkboxes--readonly > .checkboxes__label {
  color: var(--disable-color);
}
.checkboxes--disabled > .checkboxes__span, .checkboxes--readonly > .checkboxes__span {
  color: var(--disable-color);
}
.checkboxes--disabled > .checkboxes__input:checked + .checkboxes__icon > svg > use, .checkboxes--readonly > .checkboxes__input:checked + .checkboxes__icon > svg > use {
  visibility: visible;
  fill: var(--cds-color-background-light);
}
.checkboxes--disabled > .checkboxes__input:checked::after, .checkboxes--readonly > .checkboxes__input:checked::after {
  border: 2px solid var(--key-1);
  background-color: var(--key-1);
}
@keyframes anim1 {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(6);
  }
}
@keyframes anim2 {
  0% {
    background-color: var(--main-color-50);
    transform: scale(2);
  }
  100% {
    background-color: var(--main-color-50);
    transform: scale(6);
  }
}
.snackbar-grids {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  position: fixed;
  right: 32px;
  bottom: 32px;
}

.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  width: 360px;
  border-radius: 6px;
  box-shadow: 0px 6px 10px 0px var(--grey-600), 0px 1px 18px 0px var(--grey-600), 0px 3px 5px -1px var(--grey-600);
}
.snackbar > .snackbar__icon {
  width: 24px;
  height: 24px;
  margin: 14px 0px 14px 16px;
}
.snackbar > .snackbar__span {
  z-index: 6;
  width: 250px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.25px;
  line-height: 20px;
  margin: 14px 12px 14px 12px;
}
.snackbar > .snackbar__button {
  width: auto;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  padding-right: 20px;
}
.snackbar > .snackbar__button > svg {
  display: flex;
  align-items: center;
}
.snackbar--info {
  background-color: var(--blue-100);
}
.snackbar--info .snackbar__icon > svg > use {
  fill: var(--blue-900);
}
.snackbar--info .snackbar__span {
  color: var(--blue-900);
}
.snackbar--info .snackbar__button {
  background-color: var(--blue-100);
  color: var(--blue-900);
}
.snackbar--info .snackbar__button > svg > use {
  fill: var(--blue-900);
}
.snackbar--success {
  background-color: var(--green-100);
}
.snackbar--success .snackbar__icon > svg > use {
  fill: var(--green-900);
}
.snackbar--success .snackbar__span {
  color: var(--green-900);
}
.snackbar--success .snackbar__button {
  background-color: var(--green-100);
  color: var(--green-900);
}
.snackbar--success .snackbar__button > svg > use {
  fill: var(--green-900);
}
.snackbar--warn {
  background-color: var(--orange-100);
}
.snackbar--warn .snackbar__icon > svg > use {
  fill: var(--deep-orange-900);
}
.snackbar--warn .snackbar__span {
  color: var(--deep-orange-900);
}
.snackbar--warn .snackbar__button {
  background-color: var(--orange-100);
  color: var(--deep-orange-900);
}
.snackbar--warn .snackbar__button > svg > use {
  fill: var(--deep-orange-900);
}
.snackbar--error {
  background-color: var(--red-100);
}
.snackbar--error .snackbar__icon > svg > use {
  fill: var(--red-900);
}
.snackbar--error .snackbar__span {
  color: var(--red-900);
}
.snackbar--error .snackbar__button {
  background-color: var(--red-100);
  color: var(--red-900);
}
.snackbar--error .snackbar__button > svg > use {
  fill: var(--red-900);
}

/* ---------- Code spécifique à déplacer ---------- */
.block {
  display: flex;
  justify-content: space-evenly;
  margin: 4.5rem;
}

/* ---------- Code spécifique à déplacer ---------- */
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.textfield-invalid > .textfield__input {
  border: 2px solid var(--danger-color);
  caret-color: var(--danger-color);
}
.textfield-invalid > .textfield__label {
  color: var(--danger-color);
}
.textfield-invalid > .textfield__assistive {
  color: var(--danger-color);
}
.textfield-invalid > .textfield__icon use {
  fill: var(--danger-color);
}

.textfield {
  position: relative;
  width: 100%;
}
.textfield > .textfield__input:hover {
  background-color: var(--grey-100);
  border: 2px solid var(--key-3);
}
.textfield > .textfield__input:hover + .textfield__label {
  background-color: none;
  cursor: pointer;
}
.textfield > .textfield__input::placeholder {
  color: var(--grey-600);
  opacity: 0;
}
.textfield > .textfield__input:focus {
  background-color: var(--cds-color-background-light);
  border: 2px solid var(--main-color-500);
  caret-color: var(--main-color-500);
}
.textfield > .textfield__input:focus::placeholder {
  opacity: 1;
}
.textfield > .textfield__input:focus + .textfield__label {
  background-color: var(--cds-color-background-light);
  color: var(--main-color-500);
  font-size: 12px;
  top: -11px;
}
.textfield > .textfield__input:focus + .textfield__label + .textfield__assistive {
  color: var(--main-color-500);
}
.textfield > .textfield__input:not(:placeholder-shown) {
  background-color: var(--cds-color-background-light);
}
.textfield > .textfield__input:not(:placeholder-shown):not(:focus) + .textfield__label {
  background-color: var(--cds-color-background-light);
  font-size: 12px;
  top: -11px;
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown {
  border: 1px solid var(--grey-600);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown + .textfield__label {
  color: var(--grey-600);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown + .textfield__label + .textfield__assistive {
  color: var(--grey-600);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--grey-600);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown:hover {
  border: 2px solid var(--key-3);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown:not(:placeholder-shown):invalid {
  border: 2px solid var(--danger-color);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown:not(:placeholder-shown):invalid + .textfield__label {
  color: var(--danger-color);
}
.textfield > .textfield__input:required:not(:focus):placeholder-shown:not(:placeholder-shown):invalid + .textfield__label + .textfield__assistive {
  color: var(--danger-color);
}
.textfield--disabled > .textfield__input {
  border: 1px solid var(--disable-color);
  background-color: var(--cds-color-background-light);
}
.textfield--disabled > .textfield__input + .textfield__label {
  color: var(--disable-color);
}
.textfield--disabled > .textfield__input + .textfield__label + .textfield__assistive {
  color: var(--disable-color);
}
.textfield--disabled > .textfield__input + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--disable-color);
}
.textfield--disabled > .textfield__input:hover {
  border: 1px solid var(--disable-color);
  background-color: var(--cds-color-background-light);
  cursor: not-allowed;
}
.textfield--disabled > .textfield__input:hover + .textfield__label {
  color: var(--disable-color);
  cursor: not-allowed;
}
.textfield--disabled > .textfield__input:hover + .textfield__label + .textfield__assistive {
  color: var(--disable-color);
}
.textfield--disabled > .textfield__input:hover + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--disable-color);
}
.textfield--readonly > .textfield__input {
  border: 1px solid var(--grey-600);
  background-color: var(--cds-color-background-light);
}
.textfield--readonly > .textfield__input + .textfield__label {
  color: var(--grey-600);
}
.textfield--readonly > .textfield__input + .textfield__label + .textfield__assistive {
  color: var(--grey-600);
}
.textfield--readonly > .textfield__input + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--grey-600);
}
.textfield--readonly > .textfield__input:hover {
  border: 1px solid var(--grey-600);
  background-color: var(--cds-color-background-light);
  cursor: not-allowed;
}
.textfield--readonly > .textfield__input:hover + .textfield__label {
  color: var(--grey-600);
  cursor: not-allowed;
}
.textfield--readonly > .textfield__input:hover + .textfield__label + .textfield__assistive {
  color: var(--grey-600);
}
.textfield--readonly > .textfield__input:hover + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--grey-600);
}
.textfield--readonly > .textfield__input:focus {
  border: 1px solid var(--grey-600);
}
.textfield--readonly > .textfield__input:focus + .textfield__label {
  color: var(--grey-600);
}
.textfield--readonly > .textfield__input:focus + .textfield__label + .textfield__assistive {
  color: var(--grey-600);
}
.textfield--readonly > .textfield__input:focus + .textfield__label + .textfield__assistive + .textfield__icon > svg > use {
  fill: var(--grey-600);
}

.textfield__label {
  position: absolute;
  background-color: none;
  font-weight: normal;
  height: 21px;
  color: var(--grey-600);
  font-size: 16px;
  line-height: 21px;
  left: 16px;
  top: 12px;
  padding: 0 4px 0 4px;
  transition: 0.3s;
  z-index: 1;
}

.textfield__input {
  position: relative;
  background-color: none;
  font-weight: normal;
  outline: none;
  cursor: pointer;
  width: 100%;
  height: 48px;
  color: var(--font-color);
  font-size: 16px;
  z-index: 0;
  border-radius: 5px;
  padding-left: 16px;
}
.textfield__input::-ms-reveal {
  display: none;
}

.textfield__input--outlined {
  border: 1px solid var(--grey-600);
}

.textfield__input--filled {
  border-bottom: 1px solid var(--grey-600);
}

.textfield__assistive {
  position: absolute;
  font-weight: normal;
  color: var(--grey-600);
  font-size: 12px;
  left: 20px;
  bottom: -30px;
}

.textfield__icon {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 12px;
  top: 12px;
}
.textfield__icon > svg > use {
  fill: var(--grey-600);
}

.avatar {
  background-color: var(--cds-color-background-avatar-cyan);
  color: var(--toolbar-avatar-color);
  font-weight: normal;
  border: none;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar button.avatar, .toolbar .avatar.tag {
  height: 36px;
  width: 36px;
  font-size: 14px;
}
.toolbar button.avatar:hover, .toolbar .avatar.tag:hover {
  box-shadow: 0px 0px 0px 3px var(--toolbar-avatar-color-shadow);
}

.avatar.button--pushed, .window--reduced button.avatar[data-window-action=reduce], .window--reduced .avatar[data-window-action=reduce].tag {
  background-color: var(--cds-color-background-avatar-cyan);
  color: var(--toolbar-avatar-color);
  box-shadow: 0px 0px 0px 3px var(--toolbar-avatar-color-shadow);
}

.avatar .toolbar {
  max-height: 36px;
  width: 36px;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.badge {
  background-color: var(--main-color-500);
  color: var(--grey-0);
  padding: 0 15px;
  line-height: 22px;
  height: 22px;
  border-radius: 10px;
  box-shadow: none;
  text-align: center;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}

/* --------------- Composant -------------- */
.card, .Search--reduce, .mosaic > * {
  border-radius: 4px;
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  background-color: var(--elevated-bg-color);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
@media (prefers-color-scheme: light) {
  .card, .Search--reduce, .mosaic > * {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .card, .Search--reduce, .mosaic > * {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.card:hover, .Search--reduce:hover, .mosaic > :hover {
  background-color: var(--grey-100);
}
.card:focus, .Search--reduce:focus, .mosaic > :focus {
  background-color: var(--grey-200);
}

.card__header {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid var(--global-bg-color);
}

.card__body {
  overflow: auto;
  padding: 16px;
}

.card__footer {
  display: flex;
  justify-content: center;
}

.card__footer-separator {
  border-top: 1px solid var(--global-bg-color);
}

.card--selected {
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  background-color: var(--main-color-50);
}
@media (prefers-color-scheme: light) {
  .card--selected {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .card--selected {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.card--current {
  border-width: 1px;
  border-color: transparent;
  border-style: solid;
  background-color: var(--main-color-50);
}
@media (prefers-color-scheme: light) {
  .card--current {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .card--current {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.card--no-framed {
  border-width: 0px;
  border-color: transparent;
  border-style: none;
  background-color: transparent;
}
@media (prefers-color-scheme: light) {
  .card--no-framed {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .card--no-framed {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.card--no-framed .card__header {
  border: none;
}

.checkbox.in-consultation-mode > .checkbox__input:disabled ~ .checkbox__text {
  color: inherit;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.checkbox {
  cursor: default;
  display: inline-flex;
  overflow: visible;
  position: relative;
}

.checkbox--error .checkbox__input:hover:not([disabled]) + .checkbox__box {
  border-color: var(--danger-color);
  background-color: var(--grey-0);
}
.checkbox--error .checkbox__input:focus:not([disabled]) + .checkbox__box {
  border-color: var(--danger-color);
  background-color: var(--grey-0);
}
.checkbox--error .checkbox__input:checked:disabled + .checkbox__box {
  border-color: var(--danger-color);
  background-color: var(--danger-color);
}
.checkbox--error .checkbox__input:checked:not([disabled]) + .checkbox__box {
  border-color: var(--danger-color);
  background-color: var(--danger-color);
}
.checkbox--error .checkbox__input:disabled + .checkbox__box {
  border-color: var(--danger-color);
  background-color: var(--grey-0);
}

.checkbox__input {
  cursor: pointer;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  opacity: 0;
  position: absolute;
}
.checkbox__input:disabled {
  cursor: default;
}
.checkbox__input:hover:not([disabled]) + .checkbox__box {
  border-color: var(--grey-900);
  background-color: var(--grey-200);
}
.checkbox__input:focus:not([disabled]) + .checkbox__box {
  border-color: var(--grey-700);
  background-color: var(--grey-300);
}
.checkbox__input:checked:disabled + .checkbox__box {
  cursor: default;
  border-color: var(--grey-500);
  background-color: var(--grey-500);
}
.checkbox__input:checked:not([disabled]) + .checkbox__box {
  border-color: var(--main-color-500);
  background-color: var(--main-color-500);
}
.checkbox__input:disabled + .checkbox__box {
  cursor: default;
  border-color: var(--grey-500);
  background-color: var(--grey-0);
}
.checkbox__input:disabled ~ .checkbox__text {
  cursor: default;
  color: var(--grey-500);
}
.checkbox__input:disabled ~ .checkbox__text::before {
  display: none;
}
.checkbox__input:checked + .checkbox__box::after {
  transform: rotate(45deg) scale(0.4);
  border-width: 5px;
  border-left-width: 0;
  border-top-width: 0;
  border-radius: 0;
  background-color: transparent;
  height: calc(14px + 10px);
  opacity: 1;
}
.checkbox__input:hover:not([disabled]) ~ .checkbox__text::before {
  background-color: var(--grey-200);
}
.checkbox__input:focus:not([disabled]) ~ .checkbox__text::before {
  background-color: var(--grey-300);
}
.checkbox__input:hover:checked:not([disabled]) ~ .checkbox__text::before {
  background-color: var(--main-color-50);
}
.checkbox__input:hover:checked:disabled ~ .checkbox__text::before {
  cursor: default;
  background-color: var(--grey-200);
}
.checkbox__input:focus:checked:not([disabled]) ~ .checkbox__text::before {
  background-color: var(--main-color-100);
}
.checkbox__input:focus:checked:disabled ~ .checkbox__text::before {
  cursor: default;
  background-color: var(--grey-300);
}

.checkbox__box {
  height: 14px;
  width: 14px;
  border: 1px solid var(--grey-800);
  background-color: var(--grey-0);
  position: relative;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  z-index: 1;
  flex-shrink: 0;
}
.checkbox__box::after {
  position: absolute;
  top: -8px;
  left: -1px;
  content: "";
  height: 14px;
  width: 14px;
  transition: all;
  transition-duration: 200ms;
  transition-timing-function: easy-in-out;
  border-right: 1px solid var(--grey-0);
  border-bottom: 1px solid var(--grey-0);
  opacity: 0;
  z-index: 2;
}

.checkbox__text {
  overflow: hidden;
  padding-left: calc((20px - 14px) / 2 + 4px);
  cursor: pointer;
}
.checkbox__text::before {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  position: absolute;
  top: calc(50% - 20px / 2);
  left: calc(-1 * (20px - 14px) / 2);
  background-color: transparent;
  z-index: 0;
}

.checkbox--mandatory .checkbox__box {
  box-shadow: 0 0 0 2px var(--mandatory-color);
}

.checkbox__text--hidden {
  font-size: 0;
  line-height: 0;
  padding: 0;
}

.checkbox__aside {
  width: 20px;
  padding: 0 5px;
}

.checkbox__aside > .checkbox {
  margin: 0 auto;
}

/* --------------- Composant -------------- */
/* --------------- Composant -------------- */
.chip, .chip__stepview, .stepview.in-consultation-mode > *.active, .chip--action {
  background-color: var(--grey-200);
  color: var(--grey-900);
  line-height: 32px;
  height: 32px;
  border-radius: 4px;
  box-shadow: none;
  text-align: center;
  border-width: 1px;
  border-color: transparent;
  display: inline-block;
}
.chip:hover, .chip__stepview:hover, .stepview.in-consultation-mode > .active:hover, .chip--action:hover {
  background-color: var(--grey-300);
}
.chip:focus, .chip__stepview:focus, .stepview.in-consultation-mode > .active:focus, .chip--action:focus {
  background-color: var(--grey-400);
}
.chip:disabled, .chip__stepview:disabled, .stepview.in-consultation-mode > .active:disabled, .chip--action:disabled {
  background-color: var(--disable-color);
}
@media (prefers-color-scheme: light) {
  .chip:active, .chip__stepview:active, .stepview.in-consultation-mode > .active:active, .chip--action:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .chip:active, .chip__stepview:active, .stepview.in-consultation-mode > .active:active, .chip--action:active {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.chip .is-selected, .chip__stepview .is-selected, .stepview.in-consultation-mode > *.active .is-selected, .chip--action .is-selected {
  background-color: var(--grey-300);
}

.chip__text {
  padding-left: 12px;
  padding-right: 12px;
  overflow: initial;
}

.chip__avatar > svg {
  height: 24px;
  width: 24px;
  padding: 0 8px 0 4px;
}

.chip__input > svg {
  height: 24px;
  width: 24px;
  padding: 0 8px 0 4px;
}

.chip--action :active {
  color: var(--main-color-500);
  background-color: var(--main-color-300);
}

.chip--outlined {
  border-color: var(--grey-color-500);
}

.chip__stepview, .stepview.in-consultation-mode > *.active {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.chip__link {
  line-height: 32px !important;
  height: 32px !important;
}

/* --------------- Composant -------------- */
.dialog {
  background-color: var(--grey-0);
  padding: 8px;
  min-width: 280px;
  max-width: 560px;
}

.dialog--full-width {
  max-width: initial;
}

.dialog__message {
  font-size: 12px;
  padding: 8px 8px 8px 16px;
  margin: 0;
}

.dialog__title {
  line-height: 52px;
  margin: 0;
  padding: 8px 8px 8px 16px;
}

.dialog__button {
  /* mettre des pointillés si le texte dépasse pour ne pas avoir de dpéassement mais indiquer que le texte est coupé */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  min-width: 100px;
  height: 36px;
}

.dialog__button--is-full {
  width: 100%;
}

.dialog__contains {
  height: 100%;
  overflow: auto;
}

.error {
  min-width: 280px;
}
.error p {
  margin: 6px 0;
}
.error > button, .error > .tag {
  padding: 0 12px;
}

.error__detail {
  max-height: 0px;
  max-width: 0px;
  overflow: hidden;
  -webkit-transition: max-height 0s ease 0.4s, max-width 0s ease 0.4s;
  transition: max-height 0s ease 0.4s, max-width 0s ease 0.4s;
  padding: 6px 0 0 0;
}
.error__detail h1 {
  margin-top: 10px;
}

.error__div-to-animate {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
  transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.error--show-detail .error__detail {
  max-height: 600px;
  max-width: 1000px;
  overflow-y: auto;
  -webkit-transition: max-height 0s ease, max-width 0s ease;
  transition: max-height 0s ease, max-width 0s ease;
}
.error--show-detail .error__div-to-animate {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out 0.4s, visibility 0s ease 0.4s;
  transition: transform 0.4s ease-in-out 0.4s, visibility 0s ease 0.4s;
}

.error--blocking {
  background-color: var(--grey-0);
  padding: 0 10px;
  margin: 0;
}

.error--blocking__svg {
  margin-right: 20px;
}
.error--blocking__svg use {
  fill: var(--danger-color);
}

.error--non_blocking {
  padding: 0 10px;
  margin: 0;
}

.error--non_blocking__svg {
  margin-right: 20px;
}
.error--non_blocking__svg use {
  fill: var(--info-color);
}

.error__close, .error__help {
  margin: 5px;
  min-width: 100px;
}

.error__button-div {
  justify-content: flex-end;
}

.error__code {
  font-weight: bold;
}

.error__open-detail {
  width: 100%;
  height: 48px;
  text-transform: none;
  font-weight: 500;
  border-top: solid 1px var(--grey-200);
  border-bottom: solid 1px var(--grey-200);
}

.filter-bar {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.filter-bar__element {
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: var(--main-color-500);
  cursor: pointer;
  overflow: hidden;
  padding: 5px;
  white-space: pre;
}
.filter-bar__element:first-child {
  border-left-width: 1px;
}

.filter-bar__element--current {
  background-color: var(--main-color-500);
  color: var(--main-color-50);
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.flexline, .transaction__header-right, .transaction__header, .transaction__title, .transaction__mnemo, .do-action__buttons, .window__header, .grid__body__td__flexline, .button__image {
  display: flex;
}

.flexline__child--flex_grow {
  flex-grow: 1;
}

.flexline--inline {
  display: inline-flex;
}

.flexline--align-vz, .transaction__header-right, .transaction__header, .transaction__title, .transaction__mnemo, .grid__body__td__flexline, .button__image {
  align-items: center;
}

.flexline--align-hz {
  justify-content: center;
}

.flexline--spaced, .transaction__header, .window__header {
  justify-content: space-between;
}

.flexline--align-right, .do-action__buttons {
  justify-content: flex-end;
}

.flexline--has-margin > *, .do-action__buttons > * {
  margin-right: 8px;
}
.flexline--has-margin > *:last-child, .do-action__buttons > *:last-child {
  margin-right: 0;
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.form {
  position: relative;
}
.form > button, .form > .tag {
  padding: 0;
}

.form--deleted::before {
  background-color: var(--grey-1000);
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0.2;
  position: absolute;
  z-index: 10;
}

/* FIXME le design system material oblige de mettre des boutons avec le texte en majuscule, soucis pour les masques avec boutons en taille et position fixe, supprimer cette propriété à l'avenir */
.form button, .form .tag {
  text-transform: initial;
}

/* --------------- Composant -------------- */
/* --------------- Composant -------------- */
.grid {
  overflow: hidden;
  /* --------------- Positionement des différents enfants dans le gridLayout -------------- */
  display: grid;
  grid-template-columns: 52px 1fr var(--scrollbar-size) 200px;
  grid-template-rows: auto 1fr var(--scrollbar-size);
  grid-template-areas: "side-header header . action-header" "side-body body body action-body" ". body body .";
  /* --------------- Positionement des différents enfants dans le gridLayout -------------- */
}
.grid:not(.grid--header-input) .input__group_grid-header {
  display: none;
}
.grid td {
  border-width: 0;
  border-right: 1px solid var(--grey-300);
  text-overflow: ellipsis;
  overflow: hidden;
}

.grid__header {
  overflow: hidden;
  position: relative;
  grid-area: header;
}

.grid__body {
  overflow: scroll;
  position: relative;
  grid-area: body;
}

.grid__action-header {
  grid-area: action-header;
  overflow: hidden;
  position: relative;
}

.grid__action-body {
  grid-area: action-body;
  overflow: hidden;
  position: relative;
}

.grid__side-header {
  grid-area: side-header;
  overflow: hidden;
  border-right: 1px solid var(--grey-300);
}

.grid__side-body {
  grid-area: side-body;
  overflow: hidden;
}

.grid--no-header {
  grid-template-areas: "side-body body body" "side-body body body" ". body body";
}

.grid--no-side {
  grid-template-areas: "header header ." "body body body" "body body body";
}
.grid--no-side > .grid__body {
  overflow-x: auto;
}
.grid--no-side > .grid__side-header,
.grid--no-side > .grid__side-body {
  z-index: -1;
}

.grid--no-action {
  grid-template-columns: 52px 1fr var(--scrollbar-size);
  grid-template-rows: auto 1fr var(--scrollbar-size);
  grid-template-areas: "side-header header ." "side-body body body" ". body body";
}

.grid--no-action.grid--no-side {
  grid-template-columns: 1fr var(--scrollbar-size);
  grid-template-rows: auto 1fr var(--scrollbar-size);
  grid-template-areas: "header ." "body body" "body body";
}

.grid--no-side.grid--no-header {
  grid-template-areas: "body body body" "body body body" "body body body";
}
.grid--no-side.grid--no-header > .grid__side-header,
.grid--no-side.grid--no-header > .grid__header,
.grid--no-side.grid--no-header > .grid__action-header {
  display: none;
}

.grid--no-lines .grid__header {
  overflow-x: auto;
}

.grid__current-cell {
  box-shadow: 0px 0px 0px 2px var(--main-color-500) inset;
}

.grid__current-cell .is-in-edition {
  box-shadow: none;
}

.grid__header,
.grid__side-header,
.grid__action-header {
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  background: transparent;
  white-space: nowrap;
}
.grid__header > table,
.grid__side-header > table,
.grid__action-header > table {
  background-color: transparent;
}

.grid__header td {
  text-align: center;
  position: relative;
}
.grid__header td:hover {
  background-color: transparent;
}
.grid__header td[data-format-type=number] {
  text-align: center;
}
.grid__header .input__group {
  margin: 5px;
}
.grid__header .input__group > svg {
  display: none;
}

.grid__side-body {
  text-align: center;
}

.grid__body tr,
.grid__side-body tr,
.grid__action-body tr {
  padding: 0;
}
.grid__body td,
.grid__side-body td,
.grid__action-body td {
  height: 28px;
  padding: 0 2px;
  white-space: pre;
}

.grid__body__td__flexline > svg {
  flex: none;
}

.grid__drop-zone-bar {
  background-color: var(--red);
  width: 2px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.grid__resizing-bar {
  width: 4px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: w-resize;
}

.grid__visual-resizing-bar {
  width: 1px;
  height: 100%;
  background-color: #777;
  position: absolute;
  top: 0;
}
.grid__visual-resizing-bar.isOnOldPosition {
  background-color: #d88383;
  width: 3px;
  z-index: 2;
}

.grid__query_button {
  width: 30px;
  height: 30px;
  padding: 0;
}
.grid__query_button > svg {
  height: 100%;
  width: 20px;
}

.column--draggable {
  cursor: move;
}

.column--sortable {
  cursor: pointer;
}

.column--current {
  background-color: transparent;
}

.column--sort {
  width: calc(100% - 10px);
}

.column--sort-asc::after {
  content: "↑";
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
}

.column--sort-desc::after {
  content: "↓";
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.group__title {
  background-color: transparent;
  color: var(--grey-900);
  text-align: right;
  white-space: pre;
  font-weight: bold;
  margin: 0;
  padding-left: 2px;
}

.group--framed {
  border: none;
  border-radius: 5px;
  background: var(--elevated-bg-color);
}
@media (prefers-color-scheme: light) {
  .group--framed {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .group--framed {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.group--framed .group__title {
  text-align: left;
  text-indent: 10px;
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.image--scale-down {
  object-fit: scale-down;
}

/* --------------- Etat du composant -------------- */
/* -------------- /Etat du composant -------------- */
.image--on-click {
  cursor: pointer;
}

.image--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.image.in-consultation-mode {
  opacity: 1;
  max-width: 500px;
}

.image--label {
  color: var(--grey-600);
}

.image--img {
  height: 100%;
  width: 100%;
}

.image__hierarchy--visible {
  padding-left: 6px;
}

.image__hierarchy--hidden {
  padding-left: 6px;
  display: none;
}

.in-consultation-mode > .image--disabled {
  opacity: 1;
  max-width: 500px;
}

.input__group.in-consultation-mode > span:first-child {
  display: none;
}
.input__group.in-consultation-mode > .contextualHelp {
  display: none;
}
.input__group.in-consultation-mode > input[type=text] {
  border: 0;
  background-color: transparent;
  padding: 0;
  cursor: default;
}
.input__group.in-consultation-mode > input[type=text]:focus {
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}
.input__group.in-consultation-mode > textarea {
  border: 1px solid var(--disable-color);
}
.input__group.in-consultation-mode > .input__last-span {
  display: none;
}

.input__group--required.in-consultation-mode > span:nth-child(1) {
  display: none;
}

.input__group.in-consultation-mode .input--colorpicker {
  max-width: 28px;
  background-color: none;
}

.input__group.in-consultation-mode .input--colorpicker-value {
  display: block;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.input__group {
  display: flex;
  transition-property: none;
  font-size: 12px;
  letter-spacing: normal;
  font-weight: normal;
  overflow: hidden;
  position: relative;
}
.input__group > .contextualHelp {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  left: 11px;
  bottom: 1px;
  border-left: 2px solid var(--main-color-200);
  border-bottom: 2px solid var(--main-color-200);
  cursor: pointer;
  z-index: 1;
}
.input__group > span:first-child {
  width: 10px;
  flex-shrink: 0;
  font-weight: bold;
  text-align: center;
  /* NOTE L'étoile "*" avec la police Carlito en 12px est illisible. */
  font-family: "Open Sans", sans-serif;
  color: var(--danger-color);
  visibility: hidden;
}
.input__group > span:first-child::after {
  content: "*";
}
.input__group > input,
.input__group > textarea {
  transition-duration: 0s !important;
  flex-grow: 1;
  min-width: 0;
  padding: 0 2px;
  color: var(--grey-900);
}
.input__group > input ~ span,
.input__group > textarea ~ span {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 10px;
  flex-shrink: 0;
  visibility: hidden;
}
.input__group > input ~ span > svg,
.input__group > textarea ~ span > svg {
  width: 10px;
  height: 100%;
}
.input__group > input::placeholder,
.input__group > textarea::placeholder {
  color: var(--grey-500);
}
.input__group > input {
  border-radius: 0;
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--grey-500);
  border-bottom-style: solid;
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
  background-color: transparent;
}
.input__group > input:focus {
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  border-color: var(--main-color-500);
}
.input__group > input ~ span {
  border-bottom: 1px solid var(--grey-500);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: transparent;
}
.input__group > input ~ span svg > use {
  fill: var(--grey-700);
}
.input__group > input ~ span:hover:not([disabled]) {
  background-color: transparent;
}
.input__group > input ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__group > input:focus ~ span {
  border-bottom: 1px solid var(--main-color-500);
  background-color: transparent;
}
.input__group > input:focus ~ span svg > use {
  fill: var(--main-color-500);
}
.input__group > input:focus ~ span:hover:not([disabled]) {
  background-color: transparent;
}
.input__group > input:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.input__group > textarea {
  border-radius: 0;
  border: 1px solid var(--grey-500);
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
  background-color: var(--grey-0);
}
.input__group > textarea:focus {
  border: 1px solid var(--main-color-500);
}
.input__group > textarea ~ span {
  border-top: 1px solid var(--grey-500);
  border-right: 1px solid var(--grey-500);
  border-bottom: 1px solid var(--grey-500);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: var(--grey-0);
}
.input__group > textarea ~ span svg > use {
  fill: var(--grey-700);
}
.input__group > textarea ~ span:hover:not([disabled]) {
  background-color: var(--grey-0);
}
.input__group > textarea ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__group > textarea:focus ~ span {
  border-top: 1px solid var(--main-color-500);
  border-right: 1px solid var(--main-color-500);
  border-bottom: 1px solid var(--main-color-500);
  background-color: transparent;
}
.input__group > textarea:focus ~ span svg > use {
  fill: var(--main-color-500);
}
.input__group > textarea:focus ~ span:hover:not([disabled]) {
  background-color: transparent;
}
.input__group > textarea:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}
.input__group > [type=color] {
  height: 20px;
}
.input__group > [type=color][disabled=disabled] {
  background: var(--disable-color);
  border-color: transparent;
}
.input__group > aside > button, .input__group > aside > .tag,
.input__group > span > button,
.input__group > span > .tag {
  border: 0;
}
.input__group > aside > button:hover, .input__group > aside > .tag:hover,
.input__group > span > button:hover,
.input__group > span > .tag:hover {
  background-color: transparent;
  border: 0;
}
.input__group > aside > button:hover > svg use, .input__group > aside > .tag:hover > svg use,
.input__group > span > button:hover > svg use,
.input__group > span > .tag:hover > svg use {
  fill: var(--main-color-500);
}

.input__group--negative-value > input[data-format-type=number] {
  color: var(--number-negative-color);
}

.input__group--disabled > input,
.input__group--disabled > textarea {
  background-color: transparent;
  border-color: transparent;
}
.input__group--disabled > .input__last-span {
  opacity: 0;
  z-index: -1;
}

.input__group--mandatory > input,
.input__group--mandatory > textarea {
  border-radius: 0;
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--mandatory-color-light);
  border-bottom-style: solid;
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
}
.input__group--mandatory > input:focus,
.input__group--mandatory > textarea:focus {
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  border-color: var(--mandatory-color);
}
.input__group--mandatory > input ~ span,
.input__group--mandatory > textarea ~ span {
  border-bottom: 1px solid var(--mandatory-color-light);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: var(--mandatory-color-light);
}
.input__group--mandatory > input ~ span svg > use,
.input__group--mandatory > textarea ~ span svg > use {
  fill: var(--grey-700);
}
.input__group--mandatory > input ~ span:hover:not([disabled]),
.input__group--mandatory > textarea ~ span:hover:not([disabled]) {
  background-color: var(--mandatory-color-light);
}
.input__group--mandatory > input ~ span:hover:not([disabled]) svg > use,
.input__group--mandatory > textarea ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__group--mandatory > input:focus ~ span,
.input__group--mandatory > textarea:focus ~ span {
  border-bottom: 1px solid var(--mandatory-color);
  background-color: var(--mandatory-color);
}
.input__group--mandatory > input:focus ~ span svg > use,
.input__group--mandatory > textarea:focus ~ span svg > use {
  fill: var(--main-color-500);
}
.input__group--mandatory > input:focus ~ span:hover:not([disabled]),
.input__group--mandatory > textarea:focus ~ span:hover:not([disabled]) {
  background-color: var(--mandatory-color);
}
.input__group--mandatory > input:focus ~ span:hover:not([disabled]) svg > use,
.input__group--mandatory > textarea:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}

.input__group--error > input,
.input__group--error > textarea {
  border-radius: 0;
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--danger-color-light);
  border-bottom-style: solid;
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
}
.input__group--error > input:focus,
.input__group--error > textarea:focus {
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  border-color: var(--danger-color);
}
.input__group--error > input ~ span,
.input__group--error > textarea ~ span {
  border-bottom: 1px solid var(--danger-color-light);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: var(--danger-color-light);
}
.input__group--error > input ~ span svg > use,
.input__group--error > textarea ~ span svg > use {
  fill: var(--grey-700);
}
.input__group--error > input ~ span:hover:not([disabled]),
.input__group--error > textarea ~ span:hover:not([disabled]) {
  background-color: var(--danger-color-light);
}
.input__group--error > input ~ span:hover:not([disabled]) svg > use,
.input__group--error > textarea ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__group--error > input:focus ~ span,
.input__group--error > textarea:focus ~ span {
  border-bottom: 1px solid var(--danger-color);
  background-color: var(--danger-color);
}
.input__group--error > input:focus ~ span svg > use,
.input__group--error > textarea:focus ~ span svg > use {
  fill: var(--grey-700);
}
.input__group--error > input:focus ~ span:hover:not([disabled]),
.input__group--error > textarea:focus ~ span:hover:not([disabled]) {
  background-color: var(--danger-color);
}
.input__group--error > input:focus ~ span:hover:not([disabled]) svg > use,
.input__group--error > textarea:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}

.input__group--required > span:nth-child(1) {
  visibility: visible;
}

.input__group--legend {
  border-color: transparent;
  background-color: transparent;
}

.input__group--legend > span,
.input__group--legend > .contextualHelp,
.input__group--text > span,
.input__group--text > .contextualHelp {
  display: none !important;
}

.input__group--text input {
  background-color: transparent;
  border-color: transparent;
  cursor: inherit;
}
.input__group--text input:focus {
  border-color: transparent;
  background-color: transparent;
}

.input__group--steps > input {
  border-radius: 0 0 0 0;
}
.input__group--steps > input ~ span {
  flex-direction: column;
  width: 13px;
}
.input__group--steps button, .input__group--steps .tag {
  background-color: transparent;
}
.input__group--steps svg {
  height: 10px;
  width: 10px;
}

.input__group--file > input {
  border-radius: 0 0 0 0;
}
.input__group--file input[type=file] {
  display: none;
}
.input__group--file > aside {
  display: flex;
  background-color: var(--grey-0);
  border: 1px solid var(--grey-300);
  border-left: 0px;
}
.input__group--file > aside > .button--browse,
.input__group--file > aside .button--show-link {
  padding: 0;
}
.input__group--file > aside > .button--browse svg,
.input__group--file > aside .button--show-link svg {
  height: 18px;
  width: 18px;
}

.input__group--action > input,
.input__group--action > textarea {
  border-radius: 0 0 0 0;
}
.input__group--action > input ~ span,
.input__group--action > textarea ~ span {
  visibility: visible;
}

.input__text {
  display: block;
  color: var(--grey-600);
  height: auto;
  margin: 0 10px 0 0;
  font-weight: 400;
  font-size: 12px;
}

.input__group--tooltip_info > input,
.input__group--tooltip_info > textarea {
  border-radius: 0;
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--grey-500);
  border-bottom-style: solid;
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
}
.input__group--tooltip_info > input:focus,
.input__group--tooltip_info > textarea:focus {
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  border-color: var(--main-color-500);
}
.input__group--tooltip_info > input ~ span,
.input__group--tooltip_info > textarea ~ span {
  border-bottom: 1px solid var(--grey-500);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: transparent;
}
.input__group--tooltip_info > input ~ span svg > use,
.input__group--tooltip_info > textarea ~ span svg > use {
  fill: var(--grey-700);
}
.input__group--tooltip_info > input ~ span:hover:not([disabled]),
.input__group--tooltip_info > textarea ~ span:hover:not([disabled]) {
  background-color: transparent;
}
.input__group--tooltip_info > input ~ span:hover:not([disabled]) svg > use,
.input__group--tooltip_info > textarea ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__group--tooltip_info > input:focus ~ span,
.input__group--tooltip_info > textarea:focus ~ span {
  border-bottom: 1px solid var(--main-color-500);
  background-color: transparent;
}
.input__group--tooltip_info > input:focus ~ span svg > use,
.input__group--tooltip_info > textarea:focus ~ span svg > use {
  fill: var(--main-color-500);
}
.input__group--tooltip_info > input:focus ~ span:hover:not([disabled]),
.input__group--tooltip_info > textarea:focus ~ span:hover:not([disabled]) {
  background-color: transparent;
}
.input__group--tooltip_info > input:focus ~ span:hover:not([disabled]) svg > use,
.input__group--tooltip_info > textarea:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}

.input__group--action > input,
.input__group--action > textarea {
  border-radius: 0 0 0 0;
}

.input__string-area {
  border-radius: 0;
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-color: var(--info-color-light);
  border-bottom-style: solid;
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
}
.input__string-area:focus {
  border-bottom: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-style: solid;
  border-color: var(--info-color);
}
.input__string-area ~ span {
  border-bottom: 1px solid var(--info-color-light);
  border-radius: 0 0 0 0;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  background-color: var(--info-color-light);
}
.input__string-area ~ span svg > use {
  fill: var(--grey-700);
}
.input__string-area ~ span:hover:not([disabled]) {
  background-color: var(--info-color-light);
}
.input__string-area ~ span:hover:not([disabled]) svg > use {
  fill: var(--grey-700);
}
.input__string-area:focus ~ span {
  border-bottom: 1px solid var(--info-color);
  background-color: var(--info-color);
}
.input__string-area:focus ~ span svg > use {
  fill: var(--main-color-500);
}
.input__string-area:focus ~ span:hover:not([disabled]) {
  background-color: var(--info-color);
}
.input__string-area:focus ~ span:hover:not([disabled]) svg > use {
  fill: var(--main-color-500);
}

.input__group .input--colorpicker {
  border: none;
}
.input__group .input--colorpicker:focus {
  border: none;
}

.input__group .input--colorpicker-value {
  display: none;
}

/* --------------- Composant -------------- */
@media screen and (max-width: 640px) {
  .input__group {
    width: 100%;
  }
}
.link.in-consultation-mode, .in-consultation-mode.Calendar-grid__month-link, .in-consultation-mode.Calendar-grid__week-link, .in-consultation-mode.Calendar-grid__day-link {
  color: var(--link-color);
  text-decoration: underline;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.link, .Calendar-grid__month-link, .Calendar-grid__week-link, .Calendar-grid__day-link {
  color: var(--link-color);
  text-decoration: underline;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
.link[disabled], [disabled].Calendar-grid__month-link, [disabled].Calendar-grid__week-link, [disabled].Calendar-grid__day-link {
  text-decoration: none;
  color: var(--grey-500);
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
}
.link:hover:not([disabled]), .Calendar-grid__month-link:hover:not([disabled]), .Calendar-grid__week-link:hover:not([disabled]), .Calendar-grid__day-link:hover:not([disabled]) {
  color: var(--link-color-hover);
}

.link__mmemoLabel {
  color: var(--grey-900) !important;
  text-decoration: none !important;
  padding-top: 0px !important;
}
.link__mmemoLabel:hover:not([disabled]) {
  color: var(--grey-900);
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.list {
  overflow-x: auto;
  padding: 8px 0;
}

.list__element {
  color: var(--grey-900);
  height: 72px;
}
.list__element:hover {
  background-color: var(--grey-100);
}
.list__element:focus {
  background-color: var(--grey-200);
}
.list__element:activate {
  background-color: var(--main-color-50);
}
.list__element > * {
  height: 100%;
  align-content: center;
}

.list__leading {
  border: none;
  padding: 16px 10px;
}

.list__leading-underline {
  border-bottom: solid 1px var(--grey-100);
  padding: 16px 10px;
}

.list__tailing {
  border-bottom: solid 1px var(--grey-100);
  padding: 16px 10px;
}
.list__tailing svg > use {
  fill: var(--grey-700);
}

.list__texte {
  border-bottom: solid 1px var(--grey-100);
  color: var(--grey-700);
  padding: 16px 10px;
}

.list__secondary-text {
  color: var(--grey-500);
}

.list__overline {
  color: var(--grey-700);
}

.list__caption {
  color: var(--grey-700);
}

/* --------------- Composant -------------- */ /* --------------- Composant -------------- */
.loader {
  display: inline-block;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
.loader.has-container > section {
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 10px;
}
.loader.has-container > section > p {
  padding-left: 10px;
  font-weight: 600;
}
.loader.has-light {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* --------------- Composant -------------- */
.circular-progress {
  animation: rotate 2s linear infinite;
  height: 48px;
  position: relative;
  width: 48px;
}

.dash {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: var(--secondary-color-500);
  stroke-width: 4px;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
/* --------------- Composant -------------- */
.menu {
  overflow-y: auto;
  background-color: var(--grey-0);
  border-radius: 4px;
  color: var(--grey-700);
  z-index: 990;
  margin-top: 3px;
  display: inline-block;
}
@media (prefers-color-scheme: light) {
  .menu {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .menu {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.menu__ul {
  margin: 0;
  padding: 8px 0;
}

.menu__li {
  padding: 0 16px;
  text-align: left;
  height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.menu__li--tappable {
  cursor: pointer;
}
.menu__li--tappable:hover {
  background-color: var(--grey-200);
}

.menu__li--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.menu--current {
  background-color: var(--grey-200);
}

.menu__li--mnemo {
  min-width: 80px;
}

.menu__li--label {
  margin: 0 10px 0 5px;
  overflow: inherit;
  white-space: nowrap;
}

.menu__li--condensed {
  height: 28px;
}

.menu__li svg > use {
  fill: var(--grey-700);
}

.menu__li--pushed {
  background-color: var(--grey-200);
}

.menu__left-part {
  min-width: 24px;
  min-height: 24px;
  margin-right: 20px;
}

.menu__right-part {
  margin-left: auto;
  padding-left: 20px;
}

.menu__separator {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--grey-300);
}

/* --------------- Composant -------------- */
.mosaic__container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto 1fr auto;
  overflow: auto;
}

.mosaic__body[data-breakgroup-type=TABS] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.mosaic {
  overflow: auto;
  position: relative;
}
.mosaic::after {
  clear: both;
  content: "";
  display: block;
}
.mosaic > * {
  position: relative;
}

.mosaic__article {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mosaic__article::after {
  clear: both;
  content: "";
  display: block;
}
.mosaic__article > section {
  flex-grow: 1;
}

/* --------------- Composant -------------- */
/* --------------- Etat du composant -------------- */
.mosaic--only-one > article > aside {
  display: none;
}

.mosaic--full {
  overflow-x: auto;
}
.mosaic--full::after {
  clear: none;
  content: "";
  display: block;
}
.mosaic--full > * {
  float: none;
  width: 100%;
  line-height: 48px;
}

.mosaic__element--spaced {
  margin: 4px;
}

.mosaic__element--left {
  float: left;
}

.mosaic__element--grouped {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  max-width: 100%;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.multiselect {
  border: 1px solid var(--grey-500);
  padding: 0;
  margin: 0;
  overflow: auto;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
.multiselect > li {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0px;
}
.multiselect > li > img {
  height: 18px;
  margin: 0px;
}
.multiselect > li:hover {
  background-color: var(--main-color-200);
}

/* --------------- Composant -------------- */ /* --------------- Composant -------------- */
.popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: visible;
}

.popup--popuped {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup--centered {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.popup--full-spaced .toolbar {
  height: 56px;
}

.popup__notification {
  height: 100%;
  width: 100%;
  min-height: 80px;
  min-width: 300px;
  max-height: 670px;
}

.radio-group.in-consultation-mode > .radio > input:disabled ~ label {
  color: inherit;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.radio {
  position: relative;
  line-height: 14px;
}
.radio > label {
  padding-left: calc(12px + 2px * 2 + 2px);
  cursor: pointer;
}
.radio > label::before {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: background-color;
  content: "";
  position: absolute;
  left: calc(12px / 4 + (14px - 12px) / 2);
  top: calc(12px / 4 + (14px - 12px) / 2);
  height: calc(12px / 2);
  width: calc(12px / 2);
  background-color: var(--grey-0);
  border-radius: 12px;
  z-index: 1;
  display: block;
}
.radio > label::after {
  content: "";
  position: absolute;
  display: block;
  left: calc((14px - 12px) / 2);
  top: calc((14px - 12px) / 2);
  height: 12px;
  width: 12px;
  background-color: var(--grey-0);
  border-radius: 12px;
  border: 1px solid var(--grey-600);
}
.radio > input:enabled:focus ~ label::before {
  background-color: var(--grey-50);
}
.radio > input:enabled:focus ~ label::after {
  background-color: var(--grey-50);
  border: 1px solid var(--grey-600);
  box-shadow: 0 0 0 2px var(--grey-300);
}
.radio > input:enabled:focus:checked ~ label::before {
  background-color: var(--main-color-500);
}
.radio > input:enabled:focus:checked ~ label::after {
  background-color: var(--main-color-50);
  border: 1px solid var(--main-color-500);
  box-shadow: 0 0 0 2px var(--main-color-50);
}
.radio > input:enabled:hover ~ label::before {
  background-color: var(--grey-50);
}
.radio > input:enabled:hover ~ label::after {
  background-color: var(--grey-50);
  border: 1px solid var(--grey-600);
  box-shadow: 0 0 0 2px var(--grey-200);
}
.radio > input:enabled:hover:checked ~ label::before {
  background-color: var(--main-color-500);
}
.radio > input:enabled:hover:checked ~ label::after {
  background-color: var(--main-color-50);
  border: 1px solid var(--main-color-500);
  box-shadow: 0 0 0 2px var(--main-color-50);
}
.radio > input:checked ~ label::before {
  background-color: var(--main-color-500);
  border: 1px solid var(--main-color-500);
}
.radio > input:checked ~ label::after {
  border: 1px solid var(--main-color-500);
}
.radio > input:disabled:checked ~ label::before {
  background-color: var(--grey-500);
  border: 1px solid var(--grey-500);
}
.radio > input:disabled:checked ~ label::after {
  border: 1px solid var(--grey-500);
}
.radio > input:disabled ~ label {
  cursor: default;
  color: var(--grey-500);
}
.radio > input:disabled ~ label::after {
  border: 1px solid var(--grey-500);
}
.radio > input:disabled:focus ~ label::before {
  opacity: 0;
}
.radio > input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: -1;
}

.radio-group--horizontal {
  display: inline-flex;
  padding-left: 5px;
}

.radio-group--vertical .radio:not(:last-child) {
  margin-bottom: 10px;
}

.radio-group--horizontal .radio:not(:last-child) {
  padding-right: 20px;
}

.radio-group--mandatory {
  box-shadow: 0 0 0 2px var(--mandatory-color);
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.select {
  width: 100px;
  display: inline-block;
  padding: 0 5px;
  cursor: pointer;
  color: var(--grey-700);
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}

.select-ul, .select-ul.has-children li ul {
  margin: 0;
  padding: 0;
  background-color: var(--grey-0);
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  box-shadow: 0 0 12px var(--grey-800);
  border-radius: 5px;
}
.select-ul > li, .select-ul.has-children li ul > li, .select-ul.has-children li ul.select-ul li ul > li {
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 5px;
  background-color: transparent;
}
.select-ul > li:hover, .select-ul.has-children li ul > li:hover, .select-ul.has-children li ul.select-ul li ul > li:hover {
  background-color: var(--main-color-500);
  color: var(--grey-0);
}
.select-ul > li:hover a, .select-ul.has-children li ul > li:hover a, .select-ul.has-children li ul.select-ul li ul > li:hover a {
  color: var(--grey-0) !important;
}
.select-ul > li.is-selected, .select-ul.has-children li ul > li.is-selected, .select-ul.has-children li ul.select-ul li ul > li.is-selected {
  background-color: var(--main-color-500);
}
.select-ul > li.is-selected:hover, .select-ul.has-children li ul > li.is-selected:hover, .select-ul.has-children li ul.select-ul li ul > li.is-selected:hover {
  background-color: var(--main-color-600);
}
.select-ul > li.is-selected a, .select-ul.has-children li ul > li.is-selected a, .select-ul.has-children li ul.select-ul li ul > li.is-selected a {
  color: var(--grey-0) !important;
}
.select-ul > li a, .select-ul.has-children li ul > li a, .select-ul.has-children li ul.select-ul li ul > li a {
  color: var(--grey-500);
  margin-left: 10px;
}
.select-ul > .is-divider, .select-ul.has-children li ul > .is-divider, .select-ul.has-children li ul.select-ul li ul > .is-divider {
  height: 1px;
  margin: 0;
  padding: 0;
  background-color: var(--grey-1000);
}
.select-ul.has-children, .select-ul.has-children li ul {
  overflow-y: visible;
  max-height: initial;
}
.select-ul.has-children li, .select-ul.has-children li ul li {
  position: relative;
  overflow: initial;
}
.select-ul.has-children li ul {
  position: absolute;
  left: calc(100% - 5px);
  top: 0;
  display: none;
}
.select-ul.has-children li span {
  padding: 0 5px;
}
.select-ul.has-children li:hover > ul {
  color: var(--grey-1000);
  display: block;
}

.select--filed {
  background-color: var(--grey-100);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid var(--grey-500);
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.select--filed:hover:not([disabled]) {
  background-color: var(--grey-200);
  border-bottom: 1px solid var(--grey-700);
  outline: none;
}
.select--filed:focus:not([disabled]) {
  border-bottom: 2px solid var(--main-color-500);
  outline: none;
}
.select--filed[disabled] {
  background-color: var(--grey-200);
  cursor: not-allowed;
}

.select--outlined {
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--grey-500);
}
.select--outlined:hover:not([disabled]) {
  border: 1px solid var(--grey-700);
  outline: none;
}
.select--outlined:focus:not([disabled]) {
  border: 2px solid var(--main-color-500);
  outline: none;
}
.select--outlined[disabled] {
  background-color: var(--grey-200);
  cursor: not-allowed;
}

.select__option {
  background-color: var(--grey-100);
  color: var(--grey-700);
}

/* --------------- Composant -------------- */
.statusBar.statusBar__main .toolbar {
  height: 40px;
  overflow: hidden;
}
.statusBar.statusBar__main .toolbar > div {
  justify-content: center;
  border-right: 1px solid var(--grey-500);
  padding: 0 5px;
  max-width: 140px;
  height: 24px !important;
  line-height: 24px !important;
  white-space: normal;
  align-items: normal;
  overflow: hidden;
  width: 0;
}
.statusBar.statusBar__main .toolbar > div:last-child {
  border: none;
  max-width: none;
  justify-content: start;
}

.stepview.in-consultation-mode {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.stepview.in-consultation-mode > * {
  display: none;
}
.stepview.in-consultation-mode > * .stepview__arrow {
  display: none;
}
.stepview.in-consultation-mode > * .stepview__progressbar {
  display: none;
}
.stepview.in-consultation-mode > *.active {
  display: inherit;
}

.stepview {
  padding-left: 3px;
  padding-top: 3px;
  --stepview-height: 18px;
  --stepview-arrow-bg: var(--stepview-bg);
}

.stepview__step {
  height: 100%;
  line-height: calc(var(--stepview-height) - 3px);
  display: inline-block;
  position: relative;
  background-color: var(--stepview-bg);
  padding-left: var(--stepview-height);
  padding-right: calc(var(--stepview-height) / 2);
}

.stepview__step:last-child {
  padding-right: var(--stepview-height);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.stepview__step:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.stepview__step.isClickable {
  cursor: pointer;
}

.stepview__step.active {
  background-color: var(--stepview-current-bg);
  color: var(--stepview-active-color);
  border-color: var(--stepview-current-bg);
  --stepview-arrow-bg: var(--stepview-current-bg);
}

.stepview__step--canceled {
  background-color: var(--stepview-inactive-bg);
  color: var(--stepview-active-color);
  --stepview-arrow-bg: var(--stepview-inactive-bg);
}

.stepview__step--canceled.active {
  background-color: var(--stepview-current-cancel-bg);
  color: var(--stepview-active-color);
  --stepview-arrow-bg: var(--stepview-current-cancel-bg);
}

.active ~ .stepview__step {
  background-color: var(--stepview-inactive-bg);
  --stepview-arrow-bg: var(--stepview-inactive-bg);
}

.stepview__arrow {
  height: var(--stepview-height);
  width: var(--stepview-height);
  right: calc(var(--stepview-height) / -2);
  border-bottom-left-radius: calc(var(--stepview-height) * 3);
  position: absolute;
  top: -1px;
  transform: scale(0.68) rotate(45deg);
  z-index: 1;
  box-shadow: inset -4px 4px 0px 0px var(--stepview-shadow-arrow);
  background-color: var(--stepview-arrow-bg);
}

.stepview__progressbar {
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: 1px;
  left: 0;
  background-color: var(--stepview-progress-bg);
}

.stepview__progressbar.halfbar {
  width: 50%;
}

svg {
  height: 24px;
  width: 24px;
  pointer-events: fill;
}
svg > use {
  fill: var(--grey-700);
}
svg > use.is-odd {
  fill: var(--grey-700);
}
svg > use.is-even {
  fill: var(--grey-0);
}

svg.image--img {
  height: 24px;
  width: 24px;
}

.svg--success > use {
  fill: var(--green);
}
.svg--success > use.is-odd {
  fill: var(--green);
}
.svg--success > use.is-even {
  fill: var(--grey-0);
}

.svg--warning > use {
  fill: var(--yellow);
}
.svg--warning > use.is-odd {
  fill: var(--yellow);
}
.svg--warning > use.is-even {
  fill: var(--grey-0);
}

.svg--danger > use {
  fill: var(--red);
}
.svg--danger > use.is-odd {
  fill: var(--red);
}
.svg--danger > use.is-even {
  fill: var(--grey-0);
}

.svg--info > use {
  fill: var(--blue);
}
.svg--info > use.is-odd {
  fill: var(--blue);
}
.svg--info > use.is-even {
  fill: var(--grey-0);
}

.svg--orange > use {
  fill: var(--orange);
}
.svg--orange > use.is-odd {
  fill: var(--orange);
}
.svg--orange > use.is-even {
  fill: var(--grey-0);
}

.svg--pushed > use {
  fill: var(--main-color-500);
}
.svg--pushed > use.is-odd {
  fill: var(--main-color-500);
}
.svg--pushed > use.is-even {
  fill: var(--grey-0);
}

.svg__cursor--not-allowed {
  cursor: not-allowed;
}

.svg--rotate-right {
  transform: rotate(90deg);
}

.svg--rotate-left {
  transform: rotate(270deg);
}

.svg--rotate-bottom {
  transform: rotate(180deg);
}

.svg--rotate-top {
  transform: rotate(360deg);
}

.svg--rotate-top-right {
  transform: rotate(45deg);
}

.svg__hierarchy--visible {
  padding-left: 6px;
}

.svg__hierarchy--hidden {
  padding-left: 6px;
  display: none;
}

.toggle-item {
  pointer-events: stroke;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
table {
  background-color: var(--table-line-bg);
  border-collapse: collapse;
  /* bug chrome : une fois que tous les éléments sont affichés et qu'il y a un grand nombre, en agrandissant la taille d'affichage, seules les lignes visibles à la taille initiale sont visibles, les autres sont des lignes vides. Si on force le retaillage comme par exemple en ouvrant ou fermant une section de la hiérarchie, l'espace d'affichage devient le nouveau. Si on agrandie à nouveau, on voit les lignes supplémentaires toujours vides et en scrollant, elles se remplissent uniquement quand elles apparaissent dans la zone d'affichage initiale */
  transform: translateZ(0);
}

td {
  min-width: 20px;
}

.table--text-centered {
  text-align: center;
}

.table--scrollable {
  overflow-y: auto;
  height: 200px;
  display: inline-block;
}

.table--fixed-layout {
  table-layout: fixed;
}

.table--fixed-layout-to-col {
  table-layout: fixed;
  width: 1px;
}

.table--fixed-layout-to-container {
  table-layout: fixed;
  width: 100%;
}

.table--bg-event tr:nth-child(even) {
  background-color: var(--table-tr-ligne-bg);
}
.table--bg-event tr:nth-child(even):hover {
  background-color: var(--grey-200);
}

.table--bg-event tr:hover {
  background-color: var(--grey-200);
}

.table--ligne-selected,
.table--bg-event tr.table--ligne-selected {
  background-color: var(--main-color-100);
}
.table--ligne-selected:hover,
.table--bg-event tr.table--ligne-selected:hover {
  background-color: var(--main-color-100);
}

tr.table--current.table--ligne-selected,
.table--bg-event tr.table--current.table--ligne-selected {
  background-color: var(--main-color-100);
}

.table--show-hover tr {
  cursor: pointer;
}
.table--show-hover tr:hover {
  background-color: var(--grey-200);
}

.grid__side-body tr.table--current,
.grid__side-body .table--bg-event tr.table--current {
  box-shadow: 1px 0px 0px 1px var(--main-color-500) inset;
}

.grid__side-body ~ .grid__body tr.table--current,
.table--bg-event tr.table--current {
  box-shadow: -1px 0px 0px 1px var(--main-color-500) inset;
}

tr.table--current,
.table--bg-event tr.table--current {
  box-shadow: 0px 0px 0px 1px var(--main-color-500) inset;
}

.tabs {
  background-color: var(--grey-0);
  border-color: var(--grey-200);
  border-style: solid;
  border-radius: 0;
  border-width: 0 0 1px 0;
  list-style: none;
  margin: 0;
  overflow: auto;
  padding: 0;
  white-space: nowrap;
}

.tabs--center {
  display: flex;
  justify-content: center;
}

.tabs__element {
  color: var(--grey-900);
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  border-style: solid;
  border-width: 0 0 1px 0;
  cursor: pointer;
  box-sizing: content-box;
  font-weight: 500;
  display: inline-block;
  min-width: 120px;
  height: 56px;
  padding-left: 16px;
  padding-right: 16px;
  line-height: 56px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.94px;
  text-transform: uppercase;
  text-align: center;
  justify-content: center;
  margin: 0;
}
.tabs__element:hover {
  background-color: var(--main-color-100);
}
.tabs__element:focus {
  background-color: var(--main-color-200);
}

.tabs__element--current {
  color: var(--main-color-500);
  background-color: transparent;
  border-color: var(--main-color-500);
  border-style: solid;
  border-width: 0 0 3px 0;
}
.tabs__element--current:hover {
  background-color: var(--main-color-100);
}
.tabs__element--current:focus {
  background-color: var(--main-color-200);
}

.tabs__element--temporary:not(.tabs__element--current) {
  display: none;
}

.accordion--action {
  display: flex;
  justify-content: space-between;
  padding: 0 24px 0 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.94px;
  text-transform: uppercase;
  background-color: var(--grey-0);
  border: 1px solid var(--grey-200);
  align-items: center;
}
@media (prefers-color-scheme: light) {
  .accordion--action {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .accordion--action {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.accordion--action:hover:not([disabled]) {
  border: 1px solid var(--grey-200);
  background-color: var(--grey-200);
  color: var(--grey-1000);
}
.accordion--action:focus:not([disabled]) {
  border: 1px solid var(--grey-200);
  background-color: var(--grey-300);
  color: var(--grey-1000);
}
.accordion--action .accordion--chevron {
  fill: var(--grey-500);
}

.accordion--current {
  color: var(--main-color-500);
  border-color: var(--main-color-500);
  border-style: solid;
  border-width: 0 0 3px 0;
}
.accordion--current .accordion--chevron {
  transition: transform 0.5s;
  transform: rotate(180deg);
}
.accordion--current .accordion--chevron > use {
  fill: var(--main-color-500);
}

.accordion--disabled,
.tabs__element--disabled {
  color: var(--disable-color);
  cursor: not-allowed;
}

[data-breakgroup-type=ACCORDEONS] > .high-filter + * {
  margin: 0 15px;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.tag {
  border-radius: 2px;
  border: solid 1px var(--grey-300);
  background-color: var(--grey-0);
  color: var(--grey-900);
}
@media (prefers-color-scheme: light) {
  .tag {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .tag {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.tag:hover:not([disabled]) {
  border: solid 1px var(--grey-300);
  background-color: var(--main-color-50);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .tag:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .tag:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.tag:focus:not([disabled]) {
  border: solid 1px var(--main-color-500);
  background-color: var(--main-color-100);
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .tag:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .tag:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.toolbar {
  background-color: var(--grey-0);
  color: var(--grey-700);
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 1;
}
@media (prefers-color-scheme: light) {
  .toolbar {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .toolbar {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.toolbar > div {
  flex-grow: 1;
  display: flex;
  height: 100%;
  max-height: auto;
  align-items: center;
}
.toolbar > div > * {
  margin-right: 4px;
}
.toolbar > div > *:last-child {
  margin-right: 0;
}
.toolbar > div:not(:first-child):last-child {
  justify-content: flex-end;
}
.toolbar > div:not(:first-child):not(:last-child) {
  justify-content: center;
}
.toolbar > div:first-child > *:first-child {
  margin-left: 12px;
}
.toolbar > div:last-child > *:last-child {
  margin-right: 12px;
}
.toolbar.is-involve {
  border-radius: 4px;
  border: 1px solid var(--grey-200);
}
.toolbar button, .toolbar .tag {
  height: 100%;
}

.toolbar__button-menu {
  cursor: pointer;
  text-decoration: none;
  padding: 0 12px;
  white-space: nowrap;
  border: 1px solid transparent;
  height: 100%;
  width: auto;
  background-color: transparent;
  color: var(--grey-700);
  border-radius: 0;
  font-weight: normal;
  box-shadow: none;
}
.toolbar__button-menu svg use {
  fill: var(--grey-700);
}
.toolbar__button-menu:hover:not([disabled]) {
  cursor: pointer;
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: light) {
  .toolbar__button-menu:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .toolbar__button-menu:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.toolbar__button-menu:hover:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.toolbar__button-menu:focus:not([disabled]) {
  cursor: pointer;
  background-color: transparent;
  color: var(--main-color-500);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: light) {
  .toolbar__button-menu:focus:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .toolbar__button-menu:focus:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.toolbar__button-menu:focus:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.toolbar__button-menu:disabled {
  background-color: transparent;
  border: 1px solid transparent;
}
.toolbar__button-menu > .button__icon {
  margin: 0;
}

.toolbar__button-menu--activated {
  box-shadow: 0 0 6px var(--grey-1000);
}

.toolbar__info {
  padding-left: 10px;
  padding-right: 10px;
}

.toolbar--main {
  background-color: var(--grey-0);
  color: var(--grey-700);
}
.toolbar--main > div {
  flex-basis: inherit;
}
.toolbar--main > div > *:last-child {
  margin-right: 4px;
}
.toolbar--main .button--action svg use, .toolbar--main .toolbar__mnemo-entry button svg use, .toolbar__mnemo-entry .toolbar--main button svg use, .toolbar--main .toolbar__mnemo-entry .tag svg use, .toolbar__mnemo-entry .toolbar--main .tag svg use, .toolbar--main .button--action-primary svg use, .toolbar--main .button--action-secondary svg use, .toolbar--main .button--action-outline svg use, .toolbar--main .input__group--file > aside > .button--browse svg use,
.toolbar--main .input__group--file > aside .button--show-link svg use,
.input__group--file > aside .toolbar--main .button--show-link svg use {
  fill: var(--grey-700);
}
.toolbar--main .button--action:hover:not([disabled]) svg use, .toolbar--main .toolbar__mnemo-entry button:hover:not([disabled]) svg use, .toolbar__mnemo-entry .toolbar--main button:hover:not([disabled]) svg use, .toolbar--main .toolbar__mnemo-entry .tag:hover:not([disabled]) svg use, .toolbar__mnemo-entry .toolbar--main .tag:hover:not([disabled]) svg use, .toolbar--main .button--action-primary:hover:not([disabled]) svg use, .toolbar--main .button--action-secondary:hover:not([disabled]) svg use, .toolbar--main .button--action-outline:hover:not([disabled]) svg use, .toolbar--main .input__group--file > aside > .button--browse:hover:not([disabled]) svg use,
.toolbar--main .input__group--file > aside .button--show-link:hover:not([disabled]) svg use,
.input__group--file > aside .toolbar--main .button--show-link:hover:not([disabled]) svg use {
  fill: var(--main-color-500);
}
.toolbar--main .button--action:focus svg use, .toolbar--main .toolbar__mnemo-entry button:focus svg use, .toolbar__mnemo-entry .toolbar--main button:focus svg use, .toolbar--main .toolbar__mnemo-entry .tag:focus svg use, .toolbar__mnemo-entry .toolbar--main .tag:focus svg use, .toolbar--main .button--action-primary:focus svg use, .toolbar--main .button--action-secondary:focus svg use, .toolbar--main .button--action-outline:focus svg use, .toolbar--main .input__group--file > aside > .button--browse:focus svg use,
.toolbar--main .input__group--file > aside .button--show-link:focus svg use,
.input__group--file > aside .toolbar--main .button--show-link:focus svg use {
  fill: var(--main-color-500);
}
.toolbar--main .button--action .svg--pushed > use, .toolbar--main .toolbar__mnemo-entry button .svg--pushed > use, .toolbar__mnemo-entry .toolbar--main button .svg--pushed > use, .toolbar--main .toolbar__mnemo-entry .tag .svg--pushed > use, .toolbar__mnemo-entry .toolbar--main .tag .svg--pushed > use, .toolbar--main .button--action-primary .svg--pushed > use, .toolbar--main .button--action-secondary .svg--pushed > use, .toolbar--main .button--action-outline .svg--pushed > use, .toolbar--main .input__group--file > aside > .button--browse .svg--pushed > use,
.toolbar--main .input__group--file > aside .button--show-link .svg--pushed > use,
.input__group--file > aside .toolbar--main .button--show-link .svg--pushed > use {
  fill: var(--main-color-500);
}

.toolbar__mnemo-entry {
  height: auto;
  width: auto;
}
.toolbar__mnemo-entry .mnemoTransaction {
  height: auto;
  border-radius: 4px;
}
.toolbar__mnemo-entry .launchCommand {
  height: auto;
}

.separator {
  border-left: solid 2px var(--grey-300);
  height: 80%;
  width: 10px;
}

.toolbar--transparent {
  background-color: transparent;
}

/* --------------- Composant -------------- */
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant -------------- */
/* --------------- Composant -------------- */
.tooltip {
  background-color: var(--grey-900);
  color: var(--grey-100);
  overflow: visible;
  position: absolute;
  text-align: center;
  min-height: 16px;
  line-height: 16px;
  z-index: 10;
  border: 1px solid var(--grey-1000);
  border-radius: 4px;
  display: block;
  padding: 2px 5px;
}

.tooltip--arrow-left::before, .tooltip--arrow-bottom::before, .tooltip--arrow-right::before, .tooltip--arrow-top::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  -webkit-transform: rotate(0.125turn);
  transform: rotate(0.125turn);
}

.tooltip--arrow-top::before {
  left: calc((100% - 10px) / 2);
  top: -5px;
  border-left: 5px solid var(--grey-1000);
  border-top: 5px solid var(--grey-1000);
  border-bottom: 5px solid transparent;
  border-right: 5px solid transparent;
}

.tooltip--arrow-right::before {
  top: calc((100% - 10px) / 2);
  left: calc(100% - 5px);
  border-right: 5px solid var(--grey-1000);
  border-top: 5px solid var(--grey-1000);
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tooltip--arrow-bottom::before {
  top: calc(100% - 5px);
  left: calc((100% - 10px) / 2);
  border-bottom: 5px solid var(--grey-1000);
  border-right: 5px solid var(--grey-1000);
  border-left: 5px solid transparent;
  border-top: 5px solid transparent;
}

.tooltip--arrow-left::before {
  left: -5px;
  top: calc((100% - 10px) / 2);
  border-bottom: 5px solid var(--grey-1000);
  border-left: 5px solid var(--grey-1000);
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
}

.tooltip--danger {
  background-color: var(--danger-color);
  color: var(--grey-1000);
}

.tooltip--info {
  background-color: var(--info-color);
  color: var(--grey-1000);
}

.tooltip--success {
  background-color: var(--success-color);
  color: var(--grey-1000);
}

.tooltip--warning {
  background-color: var(--warning-color);
  color: var(--grey-1000);
}

/* --------------- Composant -------------- */
/* --------------- Composant -------------- */
.window {
  background-color: var(--grey-0);
  display: inline-flex;
  flex-direction: column;
  border: 4px solid var(--grey-200);
  position: relative;
  border-radius: 0;
  /* -------------- /Etat du composant -------------- */
}
@media (prefers-color-scheme: light) {
  .window {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .window {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.window:not(.window--header) .window__header {
  display: none;
}
.window:not(.window--resizable) [class^=window__resize] {
  display: none;
}

/* --------------- Composant -------------- */
.window__body {
  height: 100%;
  width: auto;
  overflow: auto;
  background-color: var(--global-bg-color);
}

.window__header {
  height: 40px;
  line-height: 40px;
  background-color: var(--grey-200);
  font-weight: bold;
  position: relative;
  overflow: hidden;
  padding: 0 10px;
}
.window__header > aside {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window__header > aside > div {
  height: 100%;
}

.window__header-button {
  color: var(--grey-700);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.window__header-button > svg {
  pointer-events: none;
}
.window__header-button:not(.button--pushed) {
  background-color: transparent;
}
.window__header-button:hover:not([disabled]) {
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .window__header-button:hover:not([disabled]) {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .window__header-button:hover:not([disabled]) {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.window__header-button:focus {
  color: var(--main-color-500);
}
@media (prefers-color-scheme: light) {
  .window__header-button:focus {
    box-shadow: none;
  }
}
@media (prefers-color-scheme: dark) {
  .window__header-button:focus {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}
.window__header-button:focus svg > use {
  fill: var(--main-color-500);
}

.window__title {
  display: block;
}

.window__resize-t,
.window__resize-rt,
.window__resize-r,
.window__resize-rb,
.window__resize-b,
.window__resize-lb,
.window__resize-l,
.window__resize-lt {
  position: absolute;
  background-color: transparent;
}

.window__resize-r,
.window__resize-l {
  top: 0;
  width: 4px;
  height: calc(100% - 0px);
  cursor: ew-resize;
}

.window__resize-r {
  right: -4px;
}

.window__resize-l {
  left: -4px;
}

.window__resize-t,
.window__resize-b {
  left: 0;
  width: calc(100% - 0px);
  height: 4px;
  cursor: ns-resize;
}

.window__resize-t {
  top: 0;
}

.window__resize-b {
  bottom: -4px;
}

.window__resize-rb,
.window__resize-lb {
  bottom: -4px;
  width: 4px;
  height: 4px;
}

.window__resize-rb {
  right: -4px;
  cursor: nwse-resize;
}

.window__resize-lb {
  left: -4px;
  cursor: nesw-resize;
}

.window__resize-rt,
.window__resize-lt {
  top: 0;
  width: 4px;
  height: 4px;
}

.window__resize-rt {
  right: -4px;
  cursor: nesw-resize;
}

.window__resize-lt {
  left: -4px;
  cursor: nwse-resize;
}

/* --------------- Etat du composant -------------- */
.window--popuped {
  border-radius: 2px;
  border: solid;
  border-color: var(--grey-0);
  max-height: 100%;
  max-width: 100%;
}
@media (prefers-color-scheme: light) {
  .window--popuped {
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .window--popuped {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.window--popuped .window__body {
  height: 100%;
  overflow: auto;
}

.window--header {
  border-top: 0;
}

.window--header .window__body {
  height: calc(100% - 40px);
}

.window--header.window--popuped {
  /* TODO: PB POPUP qui ne font pas 100% a supprimer si il n'y pas d'effet de bord
  .window__body {
    height: calc(100% - 40px);
  }
  */
}
.window--header.window--popuped .window__header {
  background-color: var(--grey-0);
  font-size: 14px;
  border-radius: 2px;
  font-weight: normal;
  font-style: normal;
}
.window--header.window--popuped .window__header button > svg, .window--header.window--popuped .window__header .tag > svg {
  pointer-events: none;
}
.window--header.window--popuped .window__header > .window__header-buttons {
  display: flex;
}

.window--movable .window__header {
  cursor: move;
}

.window--focused {
  border-color: var(--grey-50);
}

.window--focused .window__header {
  background-color: var(--grey-50);
}

.window--full {
  bottom: 0;
  right: 0;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
}

.window--full .window__header {
  cursor: inherit;
}

.window--no-framed {
  border-width: 0;
}

.window--no-framed .window__resize-t,
.window--no-framed .window__resize-rt,
.window--no-framed .window__resize-r,
.window--no-framed .window__resize-rb,
.window--no-framed .window__resize-b,
.window--no-framed .window__resize-lb,
.window--no-framed .window__resize-l,
.window--no-framed .window__resize-lt {
  display: none;
}

.window--reduced .transaction__button-variation,
.window--reduced .transaction__buton-amns,
.window--reduced button[data-window-action=full],
.window--reduced [data-window-action=full].tag {
  display: none;
}

.window--too-big-height {
  height: 100% !important;
}

.window--too-big-height .window__body {
  height: 100%;
  overflow-y: scroll;
}

.window--too-big-width {
  width: 100% !important;
  left: 0 !important;
}

.window--too-big-width .window__body {
  width: 100%;
  overflow-x: scroll;
}

.window--popuped.has-radius {
  border-radius: 10px;
  border-width: 0;
}

.window--popuped p {
  white-space: pre-wrap;
}

.window__header-buttons {
  display: none;
}

.menuWindow {
  height: 100%;
  border: solid 1px var(--grey-500);
  box-shadow: none;
}

.Container {
  overflow: auto;
  background-color: var(--global-bg-color);
}

.menuWindow-header {
  justify-content: flex-end;
}

.menuWindow-header ~ * {
  height: 100% !important;
}

.menuWindow--pinned {
  position: relative;
}

.menuWindow--unpinned {
  position: absolute;
}

/*----------------Colors---------------*/
/*---------------/Colors---------------*/
/*----------------Variables--------------*/
:root {
  --resource-grid-line-height: 13px;
  --resource-grid-cell-height: 50px;
  --resource-grid-cell-width: 50px;
}

/*---------------/Variables--------------*/
/*----------------Calendar Component--------------*/
.Calendar {
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}
.Calendar .grid__header, .Calendar .grid__side-header {
  background: transparent;
}

.Calendar__head tr {
  height: 20px;
  line-height: 20px;
}
.Calendar__head td, .Calendar__head th {
  border-right: 1px solid var(--grey-300);
}
.Calendar__head .Resource-row-header--primary-scale th, .Calendar__head .Resource-row-header--primary-scale td {
  border-bottom: 1px solid var(--grey-300);
}

.Calendar-grid__week-link {
  text-align: center;
  font-weight: bold;
}

.Calendar .grid__side-body > table {
  background-color: transparent;
}

.Calendar .grid__body td {
  border-right: 1px solid var(--grey-300) !important;
}

.get-text-size {
  position: absolute;
  visibility: hidden;
  display: none;
  height: 0;
  white-space: nowrap;
}

/*---------------/Calendar Component--------------*/
/*----------------Calendar Toolbar--------------*/
.Calendar-toolbar {
  background-color: transparent;
  height: 40px;
}

.Calendar-toolbar--hide-today {
  display: none !important;
}

.Calendar-toolbar__title {
  display: flex;
  margin: 0 10px;
  align-items: center;
}

.Calendar-toolbar__input .input__group {
  margin-left: 5px;
  width: 85px;
}
.Calendar-toolbar__input .input__group input {
  padding-right: 0;
  margin-right: 0;
}
.Calendar-toolbar__input .input__group span:first-child {
  display: none;
}

.Calendar-parameters {
  padding: 0 20px 20px;
}
.Calendar-parameters label {
  margin: 6px;
}

.Calendar-parameters--disable-parameter {
  display: none !important;
}

.Calendar-parameters__content {
  display: none;
}

.Calendar-parameters__content--current {
  display: flex;
  flex-flow: column;
}

.Calendar-parameters__button {
  display: inline-block;
  margin-left: 6px;
  min-width: 50px;
}

.Calendar-parameters__hour-height-example {
  border: 1px solid var(--grey-700);
  border-radius: 4px;
  padding: 5px;
}

.Calendar-parameters__hour-height {
  margin: 0 10px;
}

.Calendar-parameters__cal-size {
  margin-top: 5px;
}

.Calendar-parameters__footer {
  text-align: right;
}

.Calendar-parameters__group {
  margin: 10px;
  padding: 10px;
  display: block;
}

/*---------------/Calendar Toolbar--------------*/
/*----------------Calendar Grid---------------*/
.Calendar-grid {
  /* Surcharge le template de grid pour avoir une première colonne de 70px au lieu de 52px */
  grid-template-columns: 70px 1fr var(--scrollbar-size);
  grid-template-rows: auto 1fr var(--scrollbar-size);
  height: calc(100% - 40px);
  min-height: 352px;
}
.Calendar-grid td {
  padding: 0;
  height: auto;
  white-space: normal;
}
.Calendar-grid .grid__side-header--hidden {
  display: none;
}
.Calendar-grid .grid__side-body--hidden {
  display: none;
}

.Calendar-grid__body--year {
  height: 100%;
}

.Calendar-table {
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.Calendar-table tbody {
  height: 100%;
}

.Calendar-cell {
  border-bottom: 1px solid var(--grey-300) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.Calendar-cell__subcell {
  flex: 1;
  margin: 0 !important;
}

.Calendar-cell__subcell:not(.Calendar-cell__subcell--selected):hover {
  background-color: var(--main-color-300);
}

.Calendar-cell__subcell--selected {
  background-color: var(--main-color-200);
}

.Calendar-cell-year {
  flex: none;
  display: table-cell;
}

.Calendar-cell-year__end-of-week {
  border-bottom: 2px solid var(--grey-500) !important;
}

.Calendar-cell-year--none {
  visibility: hidden;
}

.Calendar-cell-year__nb-events {
  background-color: var(--main-color-100);
  border-radius: 4px;
  position: absolute;
  left: 42%;
  width: 25%;
  padding-left: 2px;
}

.Calendar-cell-year__subcell {
  position: relative;
  padding-left: 5px !important;
  height: 100%;
}

.Calendar-cell--is-grayed-out {
  background-color: var(--grey-200);
}

.Calendar-cell--selected {
  background-color: var(--main-color-200);
}

.Calendar-cell__hour {
  vertical-align: top;
  position: relative;
  top: -4px;
}

.Calendar-cell-month {
  display: table-cell;
}

.Calendar-cell-month__container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.Calendar-cell-month--is-grayed-out {
  background-color: var(--grey-200);
}

.Calendar-cell-month__header {
  border-bottom: 1px solid var(--grey-300);
  padding-left: 5px;
}

.Calendar-cell-month__subcell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.Calendar-event {
  --event-color: var(--main-color-100);
  --font-color: var(--grey-900);
  color: var(--font-color);
  border-radius: 4px;
  border: solid 1px transparent;
  background-color: var(--event-color);
  position: absolute;
  line-height: 13px;
  display: flex;
  flex-direction: column;
  text-overflow: ellipsis;
  overflow: hidden;
  min-height: 27px;
}

.Calendar-event__header {
  cursor: ns-resize;
  height: 20px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-weight: bold;
}

.Calendar-event__body {
  flex-grow: 1;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
}

.Calendar-event__footer {
  cursor: ns-resize;
  height: 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.Calendar-event--hidden {
  display: none;
}

.Calendar-event--has-focus {
  z-index: 1;
  border: 3px solid var(--font-color);
}
@media (prefers-color-scheme: light) {
  .Calendar-event--has-focus {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-color-scheme: dark) {
  .Calendar-event--has-focus {
    /*
    @if $dpValue == 1 {
      background-color: var(--grey-0);
    } @else if $dpValue == 2 {
      background-color: var(--grey-50);
    } @else if $dpValue == 3 {
      background-color: var(--grey-50);
    } @else if $dpValue == 4 {
      background-color: var(--grey-100);
    } @else if $dpValue == 5 {
      background-color: var(--grey-100);
    } @else if $dpValue == 6 {
      background-color: var(--grey-100);
    } @else if $dpValue == 7 {
      background-color: var(--grey-100);
    } @else if $dpValue == 8 {
      background-color: var(--grey-100);
    } @else if $dpValue == 9 {
      background-color: var(--grey-100);
    } @else if $dpValue == 10 {
      background-color: var(--grey-100);
    } @else if $dpValue == 11 {
      background-color: var(--grey-100);
    } @else if $dpValue == 12 {
      background-color: var(--grey-200);
    } @else if $dpValue == 13 {
      background-color: var(--grey-200);
    } @else if $dpValue == 14 {
      background-color: var(--grey-200);
    } @else if $dpValue == 15 {
      background-color: var(--grey-200);
    } @else if $dpValue == 16 {
      background-color: var(--grey-200);
    } @else if $dpValue == 17 {
      background-color: var(--grey-200);
    } @else if $dpValue == 18 {
      background-color: var(--grey-200);
    } @else if $dpValue == 19 {
      background-color: var(--grey-200);
    } @else if $dpValue == 20 {
      background-color: var(--grey-200);
    } @else if $dpValue == 21 {
      background-color: var(--grey-200);
    } @else if $dpValue == 22 {
      background-color: var(--grey-200);
    } @else if $dpValue == 23 {
      background-color: var(--grey-200);
    } @else if $dpValue == 24 {
      background-color: var(--grey-300);
    } @else if $dpValue == none {
      background-color: var(--grey-0);
    }   */
  }
}

.Calendar-event--multiday {
  flex-direction: row;
  min-height: 20px;
  white-space: pre;
}
.Calendar-event--multiday svg {
  height: 17px;
  width: 17px;
}
.Calendar-event--multiday .Calendar-event__body {
  padding: 0;
  font-weight: bold;
}
.Calendar-event--multiday .Calendar-event__footer {
  height: 100%;
  width: 5px;
  border-radius: 4px;
  background-color: transparent;
  cursor: ew-resize;
}

.Calendar-event:not(.Calendar-event--can-move-end) .Calendar-event__footer {
  display: none;
}

.Calendar-event--read-only {
  opacity: 0.5;
}
.Calendar-event--read-only .Calendar-event__footer {
  display: none;
}

/*----------------/Calendar Event---------------*/
/*--------------Mode Ressource-------------------*/
.Resource-grid {
  grid-template-columns: 230px 1fr var(--scrollbar-size);
  grid-template-rows: auto 1fr var(--scrollbar-size);
  height: calc(100% - 40px);
}
.Resource-grid .grid__header td {
  padding-left: 5px;
  min-width: var(--resource-grid-cell-width);
}
.Resource-grid .grid__header .grid__header--row-disabled {
  visibility: collapse;
}
.Resource-grid .Calendar__side-table tr,
.Resource-grid .Calendar-grid__body tr {
  height: 35px;
  display: none;
  position: relative;
}
.Resource-grid .Calendar__side-table .Resource-row--is-active,
.Resource-grid .Calendar-grid__body .Resource-row--is-active {
  display: table-row;
}
.Resource-grid tr .Resource-grid__row-container {
  /* NOTE: obligation d'indiquer le positionnement en relatif car les évènements sot positionnés en absolue à l'intérieur
   * NOTE 2: le positionnement relatif ne fonctionne pas sur les table row: https://stackoverflow.com/a/6746339
   * Une solution de contournement est de créer un conteneur dans la table row en absolute qui reset le positionnement: https://stackoverflow.com/a/5928069 */
  position: absolute;
  left: 0;
}
.Resource-grid td, .Resource-grid th {
  min-width: var(--resource-grid-cell-width);
  text-align: left;
  padding: 0px;
}
.Resource-grid .grid__side-body td, .Resource-grid .grid__body td {
  height: var(--resource-grid-cell-height);
  box-sizing: border-box;
}
.Resource-grid .grid__side-body {
  text-align: left;
}
.Resource-grid .grid__side-body td {
  box-shadow: inset 0 -1px 0 var(--grey-300);
  border-right: 1px solid var(--grey-300);
  vertical-align: top;
}
.Resource-grid .grid__side-body > table {
  background-color: transparent;
}
.Resource-grid .Calendar__head {
  table-layout: fixed;
}
.Resource-grid .Calendar-table {
  width: unset;
  height: auto;
}
.Resource-grid .Calendar-cell {
  flex-direction: row;
}
.Resource-grid .Resource-row--is-not-selectable td {
  background-color: var(--grey-200);
  background-clip: padding-box;
}
.Resource-grid .Resource-row--is-arrow-down td::before {
  transform: rotate(90deg);
}
.Resource-grid .Resource-row--is-category td {
  background-color: var(--grey-200);
  color: dodgerblue;
  font-weight: bold;
}
.Resource-grid .Resource-row--is-category td::before {
  content: "▶";
  color: var(--grey-900);
  display: inline-block;
  margin-right: 6px;
}
.Resource-grid .Resource-cell__sticky-wrapper {
  /* Enlever le overflow pour faire fonctionner position: sticky sous chrome */
  overflow: unset !important;
}
.Resource-grid .Resource-cell__sticky-elem {
  position: -webkit-sticky;
  position: sticky;
  left: 3px;
  /* Permet d'avoir une largeur équivalente au contenu */
  display: inline-block;
  white-space: normal;
  word-wrap: anywhere;
}

.Calendar-grid__head-number {
  line-height: 30px;
}
.Calendar-grid__head-number:hover > .Calendar-grid__span-number::before {
  background-color: var(--grey-300);
}

.Calendar-grid__span-number::before {
  content: "";
  position: absolute;
  background-color: transparent;
  display: block;
  height: 27px;
  width: 27px;
  border-radius: 27px;
  z-index: -1;
  top: 1px;
}

.Calendar-grid__head-number--today > .Calendar-grid__span-number {
  color: var(--grey-50);
}
.Calendar-grid__head-number--today > .Calendar-grid__span-number::before {
  background-color: var(--main-color-500);
}
.Calendar-grid__head-number--today:hover > .Calendar-grid__span-number::before {
  background-color: var(--main-color-800);
}

.Calendar-grid__head-weekday--today {
  color: var(--main-color-500) !important;
}

/*--------------Mode Ressource-------------------*/
/*---------------Clickable Elements---------------*/
.Calendar .link, .Calendar .Calendar-grid__day-link, .Calendar .Calendar-grid__week-link, .Calendar .Calendar-grid__month-link {
  color: var(--grey-700);
  text-decoration: none;
  margin: none;
  padding-top: 0;
}

.Calendar-cell.Calendar-cell-year .Calendar-cell-year__week-number {
  position: absolute;
  right: 2px;
}

.Calendar-grid__head-weekday--disabled {
  display: none;
}

/*--------------/Clickable Elements---------------*/
/*----------------Cursors--------------*/
.Calendar-cursor--move, .Calendar-event__body, .Calendar-event--multiday .Calendar-event__header, .Calendar-event--multiday .Calendar-event__body {
  cursor: move;
}

.Calendar-cursor--pointer, .Calendar-grid__week-link, .Calendar-grid__day-number-link, .Calendar-cell__subcell:not(.Calendar-cell__subcell--selected):hover, .Calendar-cell-year__nb-events {
  cursor: pointer;
}

.Calendar-cursor--default, .Calendar, .Calendar-event__footer :not(.Calendar-event--is-real-end), .Calendar-event--read-only .Calendar-event__header, .Calendar-event--read-only .Calendar-event__body {
  cursor: default;
}

/* --------------- Style-------------- */
.DataTable {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background-color: var(--grey-0);
}
.DataTable ::placeholder {
  text-transform: uppercase;
}
.DataTable .grid__header .input__group:hover {
  position: relative;
}
.DataTable .grid__header .input__group:hover svg {
  display: block;
}
.DataTable .grid__header .input__group svg {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 14px;
  cursor: pointer;
  pointer-events: stroke;
  width: 14px;
  display: none;
}
.DataTable .grid__header .input__group svg use {
  fill: var(--main-color-500);
}
.DataTable .grid {
  scrollbar-width: thin;
}
.DataTable .grid .has-error {
  background-color: var(--danger-color);
  color: var(--grey-0);
}
.DataTable .grid .has-info {
  background-color: var(--info-color);
  color: var(--grey-0);
}
.DataTable .grid.grid--header-input .grid__header,
.DataTable .grid.grid--header-input .grid__side-header,
.DataTable .grid.grid--header-input .grid__action-header {
  height: auto;
}
.DataTable .grid .secondary-block {
  display: none;
}
.DataTable .grid .grid__current-cell {
  box-shadow: none;
}
.DataTable .grid td {
  box-sizing: content-box;
  color: var(--grey-900);
  border-width: 0;
  border-right: none;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 16px;
}
.DataTable .grid .grid__resizing-bar {
  display: none;
}
.DataTable .tools {
  background-color: transparent;
  overflow: auto;
}
.DataTable .tools .changeMask .select {
  width: auto;
}
.DataTable .tools input {
  height: 100%;
}
.DataTable .tools .select-ul, .DataTable .tools .select-ul.has-children li ul, .select-ul.has-children li .DataTable .tools ul {
  z-index: 50;
}
.DataTable .tools .pagination {
  margin: 0 2px;
}
.DataTable [data-record-mode=CUMUL] {
  font-weight: 900;
}
.DataTable .grid__header,
.DataTable .grid__side-header,
.DataTable .grid__action-header {
  font-weight: bold;
  border-right: none;
  border-bottom: 1px solid var(--grey-300);
  height: 56px;
}
.DataTable .grid__header td,
.DataTable .grid__side-header td,
.DataTable .grid__action-header td {
  text-align: left;
}
.DataTable .grid__header td > div,
.DataTable .grid__side-header td > div,
.DataTable .grid__action-header td > div {
  text-overflow: ellipsis;
  overflow: hidden;
}
.DataTable .grid__header td[data-format-type=number],
.DataTable .grid__side-header td[data-format-type=number],
.DataTable .grid__action-header td[data-format-type=number] {
  text-align: right;
}
.DataTable .grid__body td,
.DataTable .grid__side-body td,
.DataTable .grid__action-body td {
  height: 52px;
  border-bottom: 1px solid var(--grey-300);
}
.DataTable .grid__body [data-format-type=number],
.DataTable .grid__side-body [data-format-type=number],
.DataTable .grid__action-body [data-format-type=number] {
  text-align: right;
}
.DataTable .grid__side-body td,
.DataTable .grid__side-header td {
  padding: 0 4px;
}
.DataTable .column--sort-asc::after {
  content: "↑";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
}
.DataTable .column--sort-desc::after {
  content: "↓";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
}

.is-cell-size {
  display: flex;
  align-items: center;
}
.is-cell-size.checkbox {
  width: 20px;
  margin: 0 auto;
  position: relative;
}
.is-cell-size .checkbox__text {
  color: transparent;
  width: 0px;
}
.is-cell-size .button__icon, .is-cell-size.image > img {
  height: 100%;
  object-fit: scale-down;
}
.is-cell-size .principal-block {
  width: 100%;
}

button.is-cell-size, .is-cell-size.tag {
  width: 100%;
}

.is-cell-size {
  height: 28px;
}

.is-at-least-cell-size {
  min-height: 28px;
  min-width: 100%;
  position: absolute;
  top: 0;
}
.is-at-least-cell-size.RadioGroup {
  background-color: var(--grey-0);
  z-index: 1;
  padding: 5px;
}
.is-at-least-cell-size.RadioGroup label {
  width: 18px;
}
.is-at-least-cell-size.RadioGroup > section {
  display: block;
}
.is-at-least-cell-size.RadioGroup > section.flexline > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__header-right > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__header > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__title > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__mnemo > .radio, .is-at-least-cell-size.RadioGroup > section.do-action__buttons > .radio, .is-at-least-cell-size.RadioGroup > section.button__image > .radio, .is-at-least-cell-size.RadioGroup > section.grid__body__td__flexline > .radio, .is-at-least-cell-size.RadioGroup > section.window__header > .radio {
  margin-top: 10px;
}
.is-at-least-cell-size.RadioGroup > section.flexline > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__header-right > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__header > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__title > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__mnemo > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.do-action__buttons > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.button__image > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.grid__body__td__flexline > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.window__header > .radio:first-child {
  margin-top: 0;
}

.column--sort {
  width: 100%;
}

.footer__tools .pagination > * {
  padding: 0 10px;
}

/* --------------- Style-------------- */
/* --------------- Style-------------- */
.Records-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto 1fr auto auto;
  overflow: hidden;
}
.Records-grid ::placeholder {
  text-transform: uppercase;
}
.Records-grid .grid__header .input__group:hover {
  position: relative;
}
.Records-grid .grid__header .input__group:hover svg {
  display: block;
}
.Records-grid .grid__header .input__group svg {
  position: absolute;
  top: 3px;
  right: 3px;
  height: 14px;
  cursor: pointer;
  pointer-events: stroke;
  width: 14px;
  display: none;
}
.Records-grid .grid__header .input__group svg use {
  fill: var(--main-color-500);
}
.Records-grid .is-in-edition {
  overflow: visible !important;
  white-space: nowrap !important;
  z-index: 1;
}
.Records-grid .is-in-edition .input__group:not(.input__group--legend),
.Records-grid .is-in-edition .textarea__group {
  flex-shrink: 0;
  margin-left: -10px;
  width: calc(100% + 11px);
}
.Records-grid .is-in-edition .input__group:not(.input__group--legend).input__group--required,
.Records-grid .is-in-edition .textarea__group.input__group--required {
  margin-left: 0;
  width: calc(100% - 1px);
}
.Records-grid .is-in-edition:first-child .input__group--required, .Records-grid .is-in-edition:first-child .textarea .is-required {
  margin-left: 0;
}
.Records-grid .is-in-edition .radio-group--horizontal .radio:not(:last-child) {
  margin-bottom: 10px;
  padding-right: 0;
}
.Records-grid .grid .has-error {
  background-color: var(--danger-color);
  color: var(--grey-0);
}
.Records-grid .grid .has-info {
  background-color: var(--info-color);
  color: var(--grey-0);
}
.Records-grid .grid .secondary-block {
  display: none;
}
.Records-grid .grid-scroll {
  padding-top: 1px;
}
.Records-grid .tools {
  background-color: transparent;
  overflow: auto;
}
.Records-grid .tools .changeMask .select {
  width: 150px;
}
.Records-grid .tools input {
  height: 100%;
}
.Records-grid .tools .select-ul, .Records-grid .tools .select-ul.has-children li ul, .select-ul.has-children li .Records-grid .tools ul {
  z-index: 50;
}
.Records-grid .tools .pagination {
  margin: 0 2px;
}
.Records-grid .tools .page-number {
  white-space: nowrap;
}
.Records-grid [data-record-mode=CUMUL] {
  font-weight: 900;
}

.Records-grid__hierarchy-img {
  margin-right: 5px;
  flex-shrink: 0;
}

.is-cell-size {
  display: flex;
  align-items: center;
}
.is-cell-size.checkbox {
  width: 20px;
  margin: 0 auto;
  position: relative;
}
.is-cell-size .checkbox__text {
  color: transparent;
  width: 0px;
}
.is-cell-size .button__icon, .is-cell-size.image > img {
  height: 100%;
  object-fit: scale-down;
}
.is-cell-size .principal-block {
  width: 100%;
}

button.is-cell-size, .is-cell-size.tag {
  width: 100%;
}

.is-cell-size {
  height: 28px;
}
.is-cell-size .image--img {
  height: 28px;
}

.is-at-least-cell-size {
  min-height: 28px;
  min-width: 100%;
  position: absolute;
  top: 0;
}
.is-at-least-cell-size.RadioGroup {
  background-color: var(--grey-0);
  z-index: 1;
  padding: 5px;
  border: solid 1px var(--main-color-500);
}
.is-at-least-cell-size.RadioGroup label {
  width: 18px;
}
.is-at-least-cell-size.RadioGroup > section {
  display: block;
}
.is-at-least-cell-size.RadioGroup > section.flexline > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__header-right > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__header > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__title > .radio, .is-at-least-cell-size.RadioGroup > section.transaction__mnemo > .radio, .is-at-least-cell-size.RadioGroup > section.do-action__buttons > .radio, .is-at-least-cell-size.RadioGroup > section.button__image > .radio, .is-at-least-cell-size.RadioGroup > section.grid__body__td__flexline > .radio, .is-at-least-cell-size.RadioGroup > section.window__header > .radio {
  margin-top: 10px;
}
.is-at-least-cell-size.RadioGroup > section.flexline > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__header-right > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__header > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__title > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.transaction__mnemo > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.do-action__buttons > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.button__image > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.grid__body__td__flexline > .radio:first-child, .is-at-least-cell-size.RadioGroup > section.window__header > .radio:first-child {
  margin-top: 0;
}
.is-at-least-cell-size .input__group > textarea {
  background-color: var(--grey-0);
  z-index: 1;
  display: block;
  resize: both !important;
}

.Records-grid:not(.current-mask) .grid__current-cell {
  box-shadow: 0px 0px 0px 2px var(--main-color-500) inset;
}

/* --------------- Style-------------- */
.Chart__node {
  height: 100%;
  width: 100%;
}

.Chart__node svg {
  height: 100%;
  width: 100%;
}

.Chart__space {
  height: calc(100% - 48px);
}
.Chart__space svg {
  height: 100%;
  width: 100%;
}

.Chart__pie-choice {
  padding-top: 18px;
  height: 48px;
}

.Chart svg {
  pointer-events: auto;
}

.Gauge,
.Gauge div,
.Gauge svg {
  overflow: visible !important;
}

.IndRestit {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 40px auto auto 1fr auto;
}
.IndRestit[data-type-display=message-only] .toolbar,
.IndRestit[data-type-display=message-only] .Periode,
.IndRestit[data-type-display=message-only] .IndRestit__indChart,
.IndRestit[data-type-display=message-only] .Legend,
.IndRestit[data-type-display=message-only] .loader,
.IndRestit[data-type-display=message-only] .IndRestit__sync-mnemo-select {
  display: none;
}
.IndRestit[data-type-display=message] .IndRestit__indChart,
.IndRestit[data-type-display=message] .Legend,
.IndRestit[data-type-display=message] .loader,
.IndRestit[data-type-display=message] .IndRestit__sync-mnemo-select {
  display: none;
}
.IndRestit[data-type-display=chart] {
  border: 1px silver solid;
  border-radius: 5px;
}
.IndRestit[data-type-display=chart] .IndRestit__messNode,
.IndRestit[data-type-display=chart] .loader {
  display: none;
}
.IndRestit[data-type-display=loader] .IndRestit__messNode,
.IndRestit[data-type-display=loader] .toolbar,
.IndRestit[data-type-display=loader] .IndRestit__breadcrumb,
.IndRestit[data-type-display=loader] .IndRestit__indChart,
.IndRestit[data-type-display=loader] .Legend,
.IndRestit[data-type-display=loader] .IndRestit__sync-mnemo-select {
  display: none;
}
.IndRestit svg {
  pointer-events: auto;
}
.IndRestit.no-breadcrumb .IndRestit__breadcrumb {
  display: none;
}
.IndRestit.no-toolbar .Toolbar {
  display: none;
}
.IndRestit.no-toolbar {
  grid-template-rows: auto auto auto 1fr auto;
}

.IndRestit > .Toolbar {
  grid-column: 1/3;
  grid-row: 1;
}
.IndRestit > .Toolbar > div:first-of-type {
  width: 59%;
}
.IndRestit > .Toolbar div {
  overflow: hidden;
  width: auto;
}
.IndRestit > .Toolbar div h6 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 12px;
}
.IndRestit > .Toolbar > div > *:last-child {
  margin-left: 12px;
}

.IndRestit__indChart, .IndRestit__messNode {
  grid-column: 1/3;
  grid-row: 4;
}

.IndRestit__indChart canvas, .IndRestit__indChart svg {
  width: 100% !important;
  height: 100% !important;
}

.IndRestit__breadcrumb {
  grid-column: 1/3;
  grid-row: 2;
  align-self: center;
  margin-left: 12px;
}

.IndRestit__text {
  padding: 0 10px;
  display: grid;
}

.IndRestit__label {
  color: var(--grey-700);
}

.IndRestit__image {
  height: 50px;
  width: 50px;
  line-height: 50px;
}

.Map > svg:not(.mapSvg) {
  display: none;
  height: auto;
  width: auto;
}

.Map__map {
  height: 100%;
  width: 100%;
}
.Map__map svg:not(.mapSvg) {
  height: auto;
  width: auto;
}

.mapSvg {
  pointer-events: fill;
  width: 100%;
  height: calc(100% - 20px);
}

.Map__indicator {
  /* fixme 40px correspond à $btn-height x 2, cependant je ne peux pas utiliser la variable $btn-height, soucis de compilation, voir ce qui a été modifié récemment dans le fichier nodeFcts.js pour que les variables ne soient à présent plus accessible */
  width: calc(100% - 40px);
}

.Map__indicator__select,
.Map__indicator__select > .select {
  width: 200px;
}

.Map__indicator__main__description {
  white-space: nowrap;
  margin: 0 2px;
}

.Map__indicator__main__color {
  margin: 0 2px;
  display: block;
  height: 15px;
  min-width: 30px;
  border: 1px solid #9a9a9a;
  border-radius: 4px;
}

.card__connections {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 8px;
}

.card__connection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
.card__connection:hover {
  background-color: var(--grey-200);
  cursor: pointer;
}

.card__connections--grid-row-end {
  grid-row-end: -1;
}

.card__separator {
  width: 100%;
  height: 2px;
  margin: 8px 0;
  background-color: var(--grey-200);
}

.card__label {
  color: var(--grey-500);
}

.card__elements {
  display: flex;
}

.card__element--by-three {
  width: 33.3333333333%;
  overflow-wrap: anywhere;
  text-align: center;
}

.card-one__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(8px * 2.5);
}

.card-one__value {
  text-align: right;
}

.card-one__unit,
.card-one__symbol,
.card-one__value-label {
  text-align: right;
  color: var(--grey-500);
}

.card-three__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100%;
}

.card-three__element {
  width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.card-two__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  height: 100%;
}

.objectpage {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
}

.objectpage__cards {
  overflow: auto;
  display: grid;
  padding: 16px;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(344px, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 250px;
}

.objectpage__button {
  width: fit-content;
}

.PdfViewer {
  position: relative;
}

.PdfViewer__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.pdfViewer__toolbar {
  height: 50px;
}

.PdfViewer-iframe, .PdfViewer__pdf-canvas {
  height: calc(100% - 50px);
  width: 100%;
}

.PdfViewer__pdf-canvas {
  overflow: auto;
}

.AdvancedFilter {
  width: 400px;
}
.AdvancedFilter select {
  width: 100%;
}
.AdvancedFilter .input > .input__group input[type=text] {
  width: auto;
}
.AdvancedFilter strong {
  margin: 0 5px;
}
.AdvancedFilter td:first-child {
  padding-left: 7px;
  width: 28px;
}
.AdvancedFilter #advancedParamBtn {
  margin-bottom: 10px;
}
.AdvancedFilter .advancedParam {
  max-height: 0px;
  max-width: 0px;
  overflow: hidden;
  transition: max-height 0s ease 0.4s, max-width 0s ease 0.4s;
}
.AdvancedFilter .toAnimate {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out, visibility 0s ease 0.4s;
}
.AdvancedFilter.ShowAdvancedParam .advancedParam {
  max-height: 300px;
  max-width: 500px;
  padding: 5px;
  margin: 0 0 10px 0;
  border: 1px solid var(--main-color-500);
  border-radius: 5px;
  transition: max-height 0s ease, max-width 0s ease;
}
.AdvancedFilter.ShowAdvancedParam .toAnimate {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  transition: transform 0.4s ease-in-out 0.4s, visibility 0s ease 0.4s;
}

.amnsChoice {
  background-color: var(--grey-0);
  cursor: pointer;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.42857;
  max-height: 300px;
}
.amnsChoice tr > td {
  font-weight: 600;
  font-size: 12px;
}
.amnsChoice tr > td:first-child {
  background-color: var(--grey-200);
  width: 30px;
  height: 100%;
}
.amnsChoice tr > td:nth-child(2) {
  padding: 2px 5px;
}
.amnsChoice tr:not(.disabled):hover {
  color: var(--main-color-500);
  background-color: var(--grey-0);
}
.amnsChoice tr[data-type=L] {
  background-color: var(--main-color-100);
}
.amnsChoice tr.disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.65;
}
.amnsChoice svg {
  display: none;
}
.amnsChoice .chip, .amnsChoice .chip--action, .amnsChoice .chip__stepview, .amnsChoice .stepview.in-consultation-mode > *.active {
  width: 100%;
}

.amnsChoice--show-svg svg {
  display: block;
}

.Calculator .row {
  margin: 0px -5px 0px 5px;
}
.Calculator .row .btn {
  margin: 1px;
}
.Calculator button, .Calculator .tag {
  width: 100%;
  padding: 12px;
}

.Calculator__header {
  border-bottom: silver 1px solid;
  height: 50px;
  line-height: 50px;
}

.Calculator__input {
  border-left-width: 0px;
  float: left;
  width: 254px;
}

.Calculator__memorize {
  border-right-width: 0px;
  float: left;
  width: 22px;
}

.Calculator__memorize:not([class~=show]) i {
  background-image: none;
  visibility: hidden;
}

.Calculator__memorize.Calculator__show i {
  display: inline-block;
  visibility: visible;
}

.ComboGrid {
  height: 100%;
  max-height: 360px;
}
.ComboGrid table {
  min-width: 100%;
}

/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.Datepicker {
  padding: 0 10px;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0px;
  font-weight: 400;
}
.Datepicker table {
  margin: 0;
}
.Datepicker table td, .Datepicker table th {
  text-align: center;
  width: 40px;
  height: 40px;
}
.Datepicker table tr td.day {
  background: none;
  cursor: pointer;
  color: var(--grey-900);
  font-weight: 500;
}
.Datepicker table tr td.day:hover {
  background: var(--grey-100);
  cursor: pointer;
}
.Datepicker table tr td.old, .Datepicker table tr td.new {
  color: var(--grey-500);
}
.Datepicker table tr td.disabled {
  cursor: default;
  background-color: var(--grey-300);
}
.Datepicker table tr td.weekEnd {
  cursor: pointer;
  background-color: var(--grey-300);
}
.Datepicker table tr td.beforeToday {
  color: var(--grey-500);
}
.Datepicker table tr td.today, .Datepicker table tr td.today.disabled {
  background-color: transparent;
  color: var(--main-color-500);
}
.Datepicker table tr td.active {
  background-color: var(--main-color-500);
  color: var(--grey-0);
}
.Datepicker table tr td span {
  display: block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  float: left;
  border: solid 1px var(--grey-300);
  cursor: pointer;
  background: none;
  font-weight: 600;
}
.Datepicker table tr td span:hover {
  background: var(--grey-300);
}
.Datepicker table tr td span.disabled,
.Datepicker table tr td span.disabled:hover {
  cursor: default;
}
.Datepicker table tr td span.active {
  background-color: var(--main-color-500);
  color: var(--grey-0);
}
.Datepicker th.Datepicker__switch {
  width: 145px;
}
.Datepicker thead tr:first-child th,
.Datepicker tfoot tr:first-child th {
  cursor: pointer;
}
.Datepicker .Datepicker__switch,
.Datepicker .Datepicker__today {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0px;
  font-weight: 400;
}
.Datepicker .Datepicker__switch:hover,
.Datepicker .Datepicker__today:hover {
  background: var(--grey-200);
}
.Datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.Datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}

.Datepicker__day {
  border: solid 1px var(--grey-300);
}

.Datepicker__button {
  border: solid 1px var(--grey-300);
  border-radius: 40px;
  padding: inherit;
  width: 100%;
}
.Datepicker__button:hover:not([disabled]) {
  border: solid 1px var(--main-color-500);
}

.Datepicker__month,
.Datepicker__year {
  border: solid 1px transparent;
}

/* --------------- Style-------------- */
.LoVGrid {
  position: relative;
  height: 400px;
}

.LoVGrid__request {
  margin: auto;
}

.LoV__records-counter {
  padding-left: 5px;
}

/* --------------- Style-------------- */
.dates-choice {
  display: flex;
  flex-direction: column;
  padding: 12px;
  justify-content: space-between;
  background-color: var(--grey-0);
  min-height: 150px;
}

.dates-choice__periode {
  display: flex;
  flex-direction: row;
}

.dates-choice__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.dates-choice__button-actions {
  margin: 5px;
}

.button--text:disabled, .do-action__button:disabled {
  color: var(--main-color-500);
}

/* --------------- Style -------------- */
::-ms-clear {
  height: 0;
  width: 0;
}

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  color: var(--font-color);
}

span,
label {
  overflow: hidden;
}

.Link label,
.image label,
[data-qlc-view=Text],
[data-format-type=number] {
  text-align: right;
}

.hidden {
  visibility: hidden !important;
  z-index: -1 !important;
}

.input.hidden > .input__group > span:last-of-type {
  visibility: hidden;
}

.input.hidden > .input__group > span:first-of-type {
  visibility: hidden;
}

.transition {
  overflow: hidden;
}
.transition[data-type=shiftToLeft] .previous-elmt,
.transition[data-type=shiftToLeft] .next-elmt, .transition[data-type=shiftToRight] .previous-elmt,
.transition[data-type=shiftToRight] .next-elmt {
  transition: transform 750ms ease 0s;
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.transition[data-type=shiftToLeft] .previous-elmt {
  transform: translate3d(0, 0, 0);
}
.transition[data-type=shiftToLeft] .next-elmt {
  transform: translate3d(100%, 0, 0);
}
.transition[data-type=shiftToLeft].action .previous-elmt {
  transform: translate3d(-100%, 0, 0);
}
.transition[data-type=shiftToLeft].action .next-elmt {
  transform: translate3d(0, 0, 0);
}
.transition[data-type=shiftToRight] .previous-elmt {
  transform: translate3d(0, 0, 0);
}
.transition[data-type=shiftToRight] .next-elmt {
  transform: translate3d(-100%, 0, 0);
}
.transition[data-type=shiftToRight].action .previous-elmt {
  transform: translate3d(100%, 0, 0);
}
.transition[data-type=shiftToRight].action .next-elmt {
  transform: translate3d(0, 0, 0);
}

.constraint-horizontal,
.constraint-vertical {
  background-color: transparent;
  position: absolute;
  z-index: 1;
}

.constraint-horizontal--movable {
  cursor: n-resize;
  z-index: 2;
}

.constraint-vertical--movable {
  cursor: w-resize;
  z-index: 2;
}

@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}
/* --------------- Style -------------- */
.Breadcrumb__label-bold {
  font-weight: bold;
}

.Breadcrumb__label {
  padding: 0px 2px;
}

.Breadcrumb__label-link {
  cursor: pointer;
}
.Breadcrumb__label-link:hover {
  text-decoration: underline;
}

.Breadcrumb__separator {
  padding: 0px 2px;
}
.Breadcrumb__separator:last-child {
  display: none;
}

.ChoiceMask {
  overflow: hidden;
  position: relative;
}
.ChoiceMask > *:not(.ChoiceMask__btn) {
  height: 100%;
  width: 100%;
}

.ChoiceMask__btn {
  height: 20px;
  width: 20px;
  position: absolute;
  bottom: var(--scrollbar-size);
  right: var(--scrollbar-size);
  z-index: 50;
}
.ChoiceMask__btn > svg {
  position: inherit;
  padding-top: 2px;
  padding-bottom: 2px;
}

.ChoiceMask__list {
  cursor: pointer;
  max-height: 300px;
  padding: 0 2px;
}
.ChoiceMask__list tr:hover {
  color: var(--main-color-500);
}

.ChoiceMask--current-mask {
  cursor: default;
  font-weight: 600;
  font-size: 1.1em;
}

.ChoiceMask__list tr > td:first-child {
  background-color: var(--grey-200);
  width: 30px;
  height: 100%;
}
.ChoiceMask__list tr > td:last-child {
  padding-left: 15px;
}

.Composite {
  overflow: auto;
}

.Container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
}

.Container__section {
  background-color: var(--section-bg);
  overflow: hidden;
  position: relative;
}
.Container__section > *:not(.is-focused) {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 2px var(--grey-500);
}
.Container__section > .is-focused {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid 2px var(--secondary-color-500);
}
.Container__section > .constraint-horizontal,
.Container__section .constraint-vertical {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.CriteriaSettings {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto 1fr;
}

.CriteriaSettings__bar {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
}

.CriteriaSettings__fields .checkbox {
  justify-content: center;
}

.CriteriaSetting__line {
  display: grid;
  grid-template-columns: auto 200px 1fr 1fr auto;
  align-items: center;
}

.CriteriaSettings__line__action {
  padding: 0 20px;
  display: flex;
}

.CriteriaSettings__line__action__button {
  pointer-events: none;
}

.CriteriaSetting__line__fieldInfos__breadcrumb-label {
  margin: 0;
}

.CriteriaSetting__line__fieldInfos .Breadcrumb {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media screen and (max-width: 640px) {
  .CriteriaSetting__line {
    grid-template-columns: auto 100px 1fr 1fr auto;
  }
}
/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.Dispatch {
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
.Dispatch .checkbox {
  overflow: visible;
  margin-right: 6px;
  position: relative;
  flex: none;
}
.Dispatch .select {
  min-width: 70px;
}

/* --------------- Composant -------------- */
.do-action {
  padding: 0 16px 16px 16px;
  max-width: 1200px;
}

.do-action__message {
  font-size: 12px;
  margin: 0;
}

.do-action__buttons {
  margin-top: 24px;
}

.do-action__button {
  /* mettre des pointillés si le texte dépasse pour ne pas avoir de dpéassement mais indiquer que le texte est coupé */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  min-width: 100px;
  height: 36px;
}

.FilterListGroup .principal-block {
  padding: 5px;
  overflow: auto;
  white-space: nowrap;
}
.FilterListGroup .radio > label {
  padding-left: 0;
}
.FilterListGroup .radio > label::before, .FilterListGroup .radio > label::after {
  visibility: hidden;
}
.FilterListGroup .radio > label:hover {
  text-decoration: underline;
}
.FilterListGroup .radio.is-checked > label {
  font-weight: bold;
}
.FilterListGroup .principal-block {
  display: grid;
  grid-gap: 5px;
}
.FilterListGroup .principal-block--horizontal-children {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.FilterListGroup .principal-block--horizontal-children > * {
  margin-right: 5px;
}

.Finder {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
}

.Finder__flip-flop:not(.Finder__flip-flop--flop) .Finder__input,
.Finder__flip-flop:not(.Finder__flip-flop--flop) .Finder__get-actions {
  display: none;
}

.Finder__input {
  border-radius: 0;
  border: 1px solid var(--grey-500);
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
  border-radius: 4px;
  outline: none;
  margin-right: 4px;
}
.Finder__input:focus {
  border: 1px solid var(--main-color-500);
}

.Finder__flip-flop.Finder__flip-flop--flop .Finder__show-launcher {
  display: none;
}

.FullSpace {
  position: relative;
}

.FullSpace > :not(.Loading) {
  margin: 0 auto;
  height: 100% !important;
  width: 100% !important;
}

.GroupedForm {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  overflow-y: auto;
}

.GroupedForm__header {
  margin: 16px 16px 0 16px;
}

.GroupedForm__open-secondary-form, .GroupedForm__switch-mode-edit {
  float: right;
}

.GroupedForm__body {
  overflow: auto;
  padding: 16px;
}

.GroupedForm__footer {
  display: flex;
  justify-content: center;
}

.GroupedForm__group-title {
  padding: 8px;
  border-bottom: 1px solid var(--global-bg-color);
}

.GroupedForm__sub-group {
  display: grid;
  column-gap: 8px;
  row-gap: 8px;
  margin: 8px 8px 16px 8px;
}

.GroupedForm__sub-group--take-three-column {
  grid-template-columns: 1fr 1fr 1fr;
}

.GroupedForm__sub-group--take-two-column {
  grid-template-columns: 2fr 1fr;
}

.GroupedForm__sub-group--take-one-column {
  grid-template-columns: 1fr;
}

.GroupedForm__sub-group--take-one-column--centered {
  margin: 0 8px;
  width: calc(100% - 16px);
  text-align: center;
}
.GroupedForm__sub-group--take-one-column--centered > * {
  display: block;
}

.GroupedForm__group-child[data-qlc-view=StringArea] > .input__group {
  height: 150px;
}

@media screen and (max-width: 640px) {
  .GroupedForm__sub-group {
    grid-template-columns: auto;
  }
}
.GroupedForm__switch-identify {
  margin-bottom: 16px;
}

.GroupedForm__body-separator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--grey-0);
  background-size: auto 200px;
  background-repeat: no-repeat;
  background-position: 28px 28px;
  background-image: url("../../images/common/Cegid_Balloon.svg");
}

.home-header_title {
  font-size: 34px;
  color: var(--grey-700);
}

.List--current-id {
  cursor: default;
  font-weight: 600;
  font-size: 1.1em;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.Loading {
  position: absolute;
  right: 5px;
  top: 5px;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}

/* --------------- Composant -------------- */
/* --------------- Style-------------- */
.MaskSlider {
  overflow: hidden;
  position: relative;
}
.MaskSlider > [data-qlc-view] {
  height: calc(100% - 20px);
}

.MaskSlider__squares-list {
  bottom: 0;
  height: 20px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 100%;
}

.MaskSlider__square {
  background-color: var(--grey-0);
  border: 1px solid var(--grey-1000);
  cursor: pointer;
  display: inline-block;
  height: 12px;
  margin: 4px;
  position: relative;
  width: 12px;
  /* z-index à 10 pour que'il soit toujours actif même dans le designer */
  z-index: 10;
  border-radius: 12px;
}
.MaskSlider__square:hover {
  background-color: var(--main-color-500);
}

.MaskSlider__square--selected,
.MaskSlider__square--selected:hover {
  cursor: default;
  background-color: var(--grey-1000);
}

/* --------------- Style-------------- */
.MultiGraphic {
  display: grid;
  grid-template-rows: auto 1fr;
}

.Notification__center {
  width: 480px;
  box-shadow: 0 0 15px var(--grey-200);
  margin-top: 10px;
  color: var(--grey-900);
  background-color: var(--grey-0);
}
.Notification__center > h5 {
  background-color: var(--grey-200);
  padding: 10px;
}
.Notification__center > .list {
  background-color: var(--grey-200);
  max-height: 400px;
}
.Notification__center > .list .flexline > div:nth-child(2), .Notification__center > .list .transaction__header-right > div:nth-child(2), .Notification__center > .list .transaction__header > div:nth-child(2), .Notification__center > .list .transaction__title > div:nth-child(2), .Notification__center > .list .transaction__mnemo > div:nth-child(2), .Notification__center > .list .button__image > div:nth-child(2), .Notification__center > .list .grid__body__td__flexline > div:nth-child(2), .Notification__center > .list .window__header > div:nth-child(2), .Notification__center > .list .do-action__buttons > div:nth-child(2) {
  width: 100%;
}
.Notification__center > button, .Notification__center > .tag {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.Notification {
  height: 120px;
  width: 444px;
  cursor: pointer;
  margin: 8px;
  padding-bottom: 0;
}
.Notification:last-child {
  margin-bottom: 0;
}

.Notification__card {
  height: 100%;
}

.Notification__button > span {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: var(--red);
  color: var(--grey-0);
  position: absolute;
  right: 8px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Notification__headIcon {
  height: 100%;
  padding: 10px;
}
.Notification__headIcon > svg {
  height: 18px;
  width: 18px;
}

.Notification__infos {
  height: 100%;
  width: 80%;
  padding: 8px 10px;
}

.Notification__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

.Notification__date, .Notification__text {
  color: var(--grey-500);
}

.Notification__text {
  padding-top: 16px;
  height: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}

.Notification__tailIcon {
  height: 100%;
  padding: 8px 10px;
}
.Notification__tailIcon > svg {
  height: 18px;
  width: 18px;
}

.notificationButton {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.notification-consult-job {
  font-weight: bold;
  background-color: var(--grey-50);
  border-radius: 0 0 4px 4px;
}
.notification-consult-job:hover:not([disabled]) {
  background-color: var(--grey-50);
}

.Notification__meter > meter {
  width: 100%;
}

.Progress .principal-block {
  display: grid;
  grid-template-columns: minmax(10px, auto) 1fr minmax(10px, auto);
  grid-template-rows: 18px 10px;
  grid-template-areas: "min value max" "min progress max";
  align-items: center;
}
.Progress .principal-block .min {
  grid-area: min;
}
.Progress .principal-block .align-space {
  grid-area: value;
}
.Progress .principal-block .align-space .value {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
}
.Progress .principal-block .max {
  grid-area: max;
}
.Progress .principal-block progress {
  width: 100%;
  height: 10px;
  grid-area: progress;
  align-self: center;
}
.Progress .principal-block[data-label-position=bottom] {
  grid-template-rows: 10px 18px;
}
.Progress .principal-block[data-label-position=bottom] .min {
  grid-row: 2;
}
.Progress .principal-block[data-label-position=bottom] .align-space {
  grid-row: 2;
}
.Progress .principal-block[data-label-position=bottom] .max {
  grid-row: 2;
}
.Progress .principal-block[data-label-position=bottom] progress {
  grid-row: 1;
}
.Progress .principal-block[data-label-position=hidden] {
  grid-template-rows: 10px;
}
.Progress .principal-block[data-label-position=hidden] .min, .Progress .principal-block[data-label-position=hidden] .align-space, .Progress .principal-block[data-label-position=hidden] .max {
  display: none;
}
.Progress .principal-block[data-label-position=hidden] progress {
  grid-row: 1;
}

.QuickSearch,
.flipper,
.right,
.front,
.back,
.traButtons {
  display: flex;
  align-items: center;
}
.QuickSearch > .toolbar,
.flipper > .toolbar,
.right > .toolbar,
.front > .toolbar,
.back > .toolbar,
.traButtons > .toolbar {
  box-shadow: none;
  background-color: transparent;
  border-top: none;
  border-bottom: none;
  height: 100%;
}

.QuickSearch {
  background-color: var(--elevated-bg-color);
}

.right {
  height: inherit;
}

.flipper {
  /* permet de garder l'effet 3 et donc d'inverser l'élément qui passe devant quand on fait la rotation. Fonctionne sur tous les navigateurs modernes. non fonctionnel sous ie 11*/
  /* une astuce est possible : https://davidwalsh.name/css-flip */
  transform-style: preserve-3d;
  position: relative;
}

.flip {
  transform: rotateX(180deg);
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: space-between;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.front > div,
.back > div {
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%;
  overflow: hidden;
}

.front {
  z-index: 2;
  /* pour firefox afin que une fois tourné, le dos soit invisible */
  transform: rotateX(0deg);
}

.back {
  /* tourner le verser de base */
  transform: rotateX(180deg);
}

.quicksearch-grow,
.quicksearch-form {
  align-self: stretch;
  flex-grow: 1;
}

.quicksearch-form > * {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* --------------- Style-------------- */
.RadioGroup > h1 {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0 0 0 10px;
}
.RadioGroup > h1.framed {
  background-image: linear-gradient(to bottom, var(--grey-1000) 0%, transparent 20px);
  border-color: var(--grey-400);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
}
.RadioGroup .radio {
  white-space: nowrap;
}

.RadioGroup__info.group--framed {
  border: 2px solid var(--info-color);
}

.RadioGroup__info ~ .radio-group .radio > label::after {
  border: 2px solid var(--info-color);
}

.RadioGroup__info.radio-group .radio > label::after {
  border: 2px solid var(--info-color);
}

.RadioGroup__err.group--framed {
  border: 2px solid var(--danger-color);
}

.RadioGroup__err ~ .radio-group .radio > label::after {
  border: 2px solid var(--danger-color);
}

.RadioGroup__err.radio-group .radio > label::after {
  border: 2px solid var(--danger-color);
}

/* --------------- Style-------------- */
/* --------------- Style-------------- */
.Resizing {
  position: relative;
}
.Resizing > .child-space {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 5px;
  left: 0;
}
.Resizing > .child-space > div {
  height: 100%;
  width: 100%;
}

.Resizing__resize {
  background-color: var(--grey-500);
  position: absolute;
  z-index: 10;
}

.Resizing__separator {
  background-color: var(--grey-300);
  position: absolute;
  z-index: 10;
}

.Resizing__bottom-resize {
  border-bottom: 1px solid var(--grey-400);
  border-top: 1px solid var(--grey-400);
  cursor: row-resize;
  bottom: 0;
  height: 5px;
  width: 100%;
}

.Resizing__right-resize {
  border-right: 1px solid var(--grey-400);
  border-left: 1px solid var(--grey-400);
  cursor: col-resize;
  right: 0;
  height: 100%;
  width: 5px;
}

.Resizing__right-separator {
  border-right: 1px solid var(--grey-300);
  border-left: 1px solid var(--grey-300);
  right: 0;
  height: 100%;
  width: 2px;
}

.Resizing__bottom-separator {
  border-bottom: 1px solid var(--grey-300);
  border-top: 1px solid var(--grey-300);
  bottom: 0;
  height: 2px;
  width: 100%;
}

.Resizing__line-separator {
  border-bottom: 1px solid var(--grey-300);
  border-top: 1px solid var(--grey-300);
  height: 2px;
  width: 100%;
}

.Resizing__bottom-resize--hidden > .Resizing__bottom-resize {
  display: none;
}

.Resizing__bottom-resize--hidden > .child-space {
  bottom: 0;
}

.Resizing__right-resize--hidden > .Resizing__right-resize {
  display: none;
}

/* --------------- Style-------------- */
.Search {
  border: solid 1px var(--grey-0);
  background-color: var(--grey-0);
}
.Search .separator {
  width: 0px;
}

.Search--reduce {
  margin: 16px;
}

.Search__header {
  padding: 16px 0;
}

.Search__title {
  line-height: 18px;
  padding-bottom: 18px;
}

.Search__finder {
  height: 28.8px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.Search__query-bar {
  height: 28.8px;
  grid-column: 2;
}
.Search__query-bar > .select, .Search__query-bar .select--outlined, .Search__query-bar .select--filed {
  height: 28.8px;
  width: 100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.Search__query-bar > .button--action-outline {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  max-height: 28.8px;
}

.Search__action {
  grid-column: 3;
  height: 100%;
}

.Search__search-fields {
  background-color: var(--grey-50);
  max-height: calc(18px * 4 + 8px * 6);
  overflow: auto;
}

.Search__search-fields > .GroupedForm > .GroupedForm__body {
  padding: 0 16px;
}

.Search__toolbar-criteria {
  background-color: var(--grey-50);
  padding: 16px 0;
}

/* --------------- Style-------------- */
.SelectList select {
  padding: 0;
}

/* --------------- Style-------------- */
.Shell {
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 0;
}

.SysMenu {
  display: inline-flex;
  justify-content: space-between;
}

.SysMenu__child {
  margin: 0 4px;
}

.TextArea textarea {
  resize: none;
}
.TextArea span {
  width: 10px;
}
.TextArea .principal-block.display-dispatch .dispatch {
  overflow: hidden;
  width: 70px;
}
.TextArea .principal-block.display-dispatch .text {
  width: calc(100% - 80px);
}
.TextArea .principal-block:not(.display-dispatch) .dispatch {
  display: none;
}
.TextArea .principal-block:not(.display-dispatch) .text {
  width: 100%;
}

.Toolbar .Finder {
  height: 100%;
}

.Toolbar__domain-fields,
.Toolbar__amns {
  display: flex;
}
.Toolbar__domain-fields button, .Toolbar__domain-fields .tag,
.Toolbar__amns button,
.Toolbar__amns .tag {
  overflow: hidden;
  height: 100%;
  line-height: 22px;
  padding: 0 5px;
  margin-left: 5px;
}

.Panel--tabs {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
}

.Panel--has-toolbars-space {
  display: grid;
  grid-template-rows: 56px 1fr;
}
.Panel--has-toolbars-space.Panel--tabs {
  grid-template-rows: 56px auto 1fr;
}

.Panel__toolbars-space {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--grey-200);
  background-color: var(--grey-0);
}

.Panel__tabs-header {
  display: flex;
  border-color: var(--grey-200);
  border-style: solid;
  border-radius: 0;
  border-width: 0 0 1px 0;
}

.Panel__tabs {
  border: none;
  flex-grow: 1;
}

.Panel__toolbar {
  flex-shrink: 1;
  width: 100%;
}

.Panel__toolbar:last-child {
  flex-shrink: 0;
  width: auto;
}

.Panel__toolbar .toolbar__information {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.Panel__toolbar .button--action, .Panel__toolbar .button--action-primary, .Panel__toolbar .button--action-secondary, .Panel__toolbar .button--action-outline, .Panel__toolbar .input__group--file > aside > .button--browse,
.Panel__toolbar .input__group--file > aside .button--show-link,
.input__group--file > aside .Panel__toolbar .button--show-link, .Panel__toolbar .toolbar__mnemo-entry button, .toolbar__mnemo-entry .Panel__toolbar button, .Panel__toolbar .toolbar__mnemo-entry .tag, .toolbar__mnemo-entry .Panel__toolbar .tag {
  flex-shrink: 0;
}

.Panel__tabs-section {
  overflow: hidden;
}

.Panel__accordion {
  transition: height 0.7s ease 0s;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.Panel__accordion--temporary:not(.Panel__accordion--current) {
  display: none;
}

.Panel__child {
  height: 100%;
  width: 100%;
}

.Panel__transaction-title {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.transaction__header {
  position: relative;
  width: 100%;
  height: 100%;
}
.transaction__header .chip, .transaction__header .chip--action, .transaction__header .chip__stepview, .transaction__header .stepview.in-consultation-mode > *.active {
  overflow: initial;
  margin-left: 2px;
}
.transaction__header img {
  margin-right: 5px;
}
.transaction__header title-8 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.transaction__title, .transaction__mnemo {
  gap: 10px;
}

.transaction__mnemo {
  gap: 5px;
}

.transaction__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction__header-right {
  flex-shrink: 0;
  height: 100%;
}

.transaction__icon {
  flex-shrink: 0;
}

.transaction-contain__header {
  padding: 0 10px 0 10px;
}
.transaction-contain__header button > svg, .transaction-contain__header .tag > svg {
  pointer-events: none;
}

.Transaction {
  overflow: hidden;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  background-color: var(--global-bg-color);
  /* NOTE il faut obligatoirement spécifier la position pour que le before sur is-desactivated empèche toute interaction uniquement sur la transaction et pas potentiellement sur les parents. Par exmple, il ne faut pas que ça empêche l'accès à la fermeture de la transaction dans une fenêtre ou dans une popup. */
  position: relative;
}
.Transaction > section {
  position: relative;
  overflow: auto;
  overflow: overlay;
}
.Transaction.is-desactivated::before {
  content: "";
  background-color: var(--grey-500);
  cursor: not-allowed;
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
}
.Transaction .dragging {
  /* cette classe ne sert que pour rendre transparent l'objet en cours de déplacement sous edge. Du coup, il ne faut pas que l'opacité soit trop importante sinon on ne voit plus l'objet déplacé dans les autres navigateurs */
  opacity: 0.7;
  overflow: hidden;
  position: inherit;
}

.TreeNavigation {
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-rows: 100%;
  position: relative;
}

.TreeNavigation__expand-button, .TreeNavigation__shrink-button {
  height: 48px;
  border-radius: 70% 0 0 70%;
  background-color: var(--elevated-bg-color);
  padding: 0;
  position: absolute;
  top: calc(50% - 15px);
  width: 36px;
  z-index: 999;
}
.TreeNavigation__expand-button:hover, .TreeNavigation__shrink-button:hover {
  background-color: var(--elevated-bg-color) !important;
}
.TreeNavigation__expand-button:focus, .TreeNavigation__shrink-button:focus {
  background-color: var(--elevated-bg-color) !important;
}

.TreeNavigation__expand-button {
  right: 0;
}

.TreeNavigation__shrink-button {
  right: 376px;
  margin: 0 15px;
}

:not(.TreeNavigation--expanded) > .TreeNavigation__shrink-button,
:not(.TreeNavigation--expanded) > .TreeNavigation__navigation > .TreeNavigation__title,
:not(.TreeNavigation--expanded) > .TreeNavigation__navigation > .TreeNavigation__list {
  display: none;
}

.TreeNavigation--expanded {
  grid-template-columns: 1fr 400px;
}
.TreeNavigation--expanded .TreeNavigation__navigation {
  padding: 12px;
}
.TreeNavigation--expanded .TreeNavigation__expand-button {
  display: none;
}

.TreeNavigation__workspace {
  grid-column: 1;
}
.TreeNavigation__workspace > * {
  height: 100%;
  width: 100%;
}

.TreeNavigation__navigation {
  background-color: var(--elevated-bg-color);
  grid-column: 2;
  padding: 0 0 0 24px;
  border-left: solid 2px var(--grey-100);
}

.TreeNavigation__title {
  color: var(--grey-800);
  margin: 0 0 24px 0;
}

.TreeNavigation__list {
  list-style: none;
  margin: 0;
  padding: 0;
  height: calc(100% - 42px);
  overflow-X: hidden;
  overflow-y: auto;
}

.TreeNavigation__sub-list {
  list-style: none;
  margin: 0 0 0 28px;
  padding: 0;
}

.TreeNavigation__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  line-height: 24px;
}

.TreeNavigation__link-line {
  cursor: pointer;
  padding: 4px 4px;
  justify-content: space-between;
}
.TreeNavigation__link-line:hover:not(menu__li--disabled) {
  background-color: var(--main-color-50);
}

.TreeNavigation__link-infos {
  overflow: hidden;
  white-space: nowrap;
}

.TreeNavigation__link-close {
  flex-shrink: 0;
  padding: 0 4px;
}

.TreeNavigation__link--current > div .TreeNavigation__link-text {
  color: var(--main-color-600);
  font-weight: bold;
}

.TreeNavigation__link-text {
  color: var(--grey-900);
  font-size: 16px;
  line-height: 24px;
  margin: 8px;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
}

.window--full > section > *,
.window--containtToContainerSize > section > * {
  height: 100% !important;
  width: 100% !important;
}

.window--no-framed .window__header {
  display: none;
}

.window--no-framed .window__body {
  height: 100%;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.WindowSpace {
  z-index: 1;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}

/* --------------- Composant -------------- */
.WindowSpace__menu {
  grid-row: 1/3;
  grid-column: 1;
  position: relative;
  display: grid;
}
.WindowSpace__menu > .window {
  grid-row: 1;
  grid-column: 1;
}

.WindowSpace__extended-windows {
  grid-row: 1;
  grid-column: 2;
  overflow: auto;
  position: relative;
}

.WindowSpace__reduced-windows {
  grid-row: 2;
  grid-column: 2;
  background-color: var(--elevated-bg-color);
}
.WindowSpace__reduced-windows .window {
  display: inline-flex;
  margin-right: 5px;
  position: relative;
  width: 250px;
}
.WindowSpace__reduced-windows .window__body {
  display: none;
}
.WindowSpace__reduced-windows .window--no-framed > header {
  display: flex;
}

.WindowSpace--home-window > .window__body,
.WindowSpace--home-window > .window__body > .Transaction,
.WindowSpace--home-window > .window__body > .Transaction .form {
  background-color: transparent !important;
}

.WindowSpace--home-window .window__resize-t,
.WindowSpace--home-window .window__resize-rt,
.WindowSpace--home-window .window__resize-r,
.WindowSpace--home-window .window__resize-rb,
.WindowSpace--home-window .window__resize-b,
.WindowSpace--home-window .window__resize-lb,
.WindowSpace--home-window .window__resize-l,
.WindowSpace--home-window .window__resize-lt {
  background-color: var(--grey-0);
}

.WindowSpace--home-window .window__header button, .WindowSpace--home-window .window__header .tag {
  background-color: var(--grey-200);
  color: var(--grey-200);
}
.WindowSpace--home-window .window__header button.button--pushed, .WindowSpace--home-window .window__header .button--pushed.tag, .WindowSpace--home-window .window__header .window--reduced button[data-window-action=reduce], .window--reduced .WindowSpace--home-window .window__header button[data-window-action=reduce], .WindowSpace--home-window .window__header .window--reduced .tag[data-window-action=reduce], .window--reduced .WindowSpace--home-window .window__header .tag[data-window-action=reduce] {
  background-color: var(--grey-200) !important;
  color: var(--grey-200) !important;
}
.WindowSpace--home-window .window__header button.button--pushed svg use, .WindowSpace--home-window .window__header .button--pushed.tag svg use, .WindowSpace--home-window .window__header .window--reduced button[data-window-action=reduce] svg use, .window--reduced .WindowSpace--home-window .window__header button[data-window-action=reduce] svg use, .WindowSpace--home-window .window__header .window--reduced .tag[data-window-action=reduce] svg use, .window--reduced .WindowSpace--home-window .window__header .tag[data-window-action=reduce] svg use {
  fill: var(--grey-200);
}
.WindowSpace--home-window .window__header .chip, .WindowSpace--home-window .window__header .chip--action, .WindowSpace--home-window .window__header .chip__stepview, .WindowSpace--home-window .window__header .stepview.in-consultation-mode > *.active {
  display: none;
}

/* --------------- Variables pour le développement du composant -------------- */
/* --------------- /Variables pour le développement du composant-------------- */
/* --------------- Composant -------------- */
.form {
  /* Comme le radio-group peut aussi dessiner un groupe complet, il faut qu'il passe devant les groupes classiques sans géner la saisie des inputs potentiellement à l'intérieur */
  /* --------------- Etat du composant -------------- */
  /* -------------- /Etat du composant -------------- */
}
.form [data-qlc-view] {
  z-index: 2;
  /* les enfants peuvent être en position absolues. ils doivent tenir compte du zindex */
  position: relative;
}
.form [data-qlc-view=Group] {
  z-index: 0;
}
.form [data-qlc-view=RadioGroup] {
  z-index: 1;
}

/* --------------- Composant -------------- */
.select--tooltip_info {
  border-radius: 0;
  border: 1px solid var(--info-color-light);
  outline: none;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-property: border, background-color, fill, box-shadow;
  appearance: none;
  margin: 0;
}
.select--tooltip_info:focus {
  border: 1px solid var(--info-color);
}

.mosaic .ListString__ul > li.is-selected {
  background-color: transparent;
  color: inherit;
}
.mosaic .ListString__ul > li {
  display: flex;
  padding: 15px 25px 15px 5px;
  font-size: 18px;
  border-bottom: solid 1px var(--grey-300);
}
.mosaic .ListString__ul > li:hover {
  background-color: var(--main-color-200);
}
.mosaic .ListString__ul > li::after {
  content: "→";
  color: var(--main-color-500);
  position: absolute;
  right: 5px;
  font-weight: bold;
  font-size: 20px;
}

/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-container {
  overflow: hidden;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
  background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}

/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}

.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  /* Fallback for FF which doesn't support pinch-zoom */
  touch-action: none;
  touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}

.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-pane {
  z-index: 400;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-shadow-pane {
  z-index: 500;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-tooltip-pane {
  z-index: 650;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-map-pane canvas {
  z-index: 100;
}

.leaflet-map-pane svg {
  z-index: 200;
}

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}

.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}

/* control positioning */
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top {
  top: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
  will-change: opacity;
}

.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}

.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

/* cursors */
.leaflet-interactive {
  cursor: pointer;
}

.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}

.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

/* visual tweaks */
.leaflet-container {
  background: #ddd;
  outline: 0;
}

.leaflet-container a {
  color: #0078A8;
}

.leaflet-container a.leaflet-active {
  outline: 2px solid orange;
}

.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}

/* general typography */
.leaflet-container {
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* general toolbar styles */
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}

.leaflet-bar a:hover {
  background-color: #f4f4f4;
}

.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}

.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px "Lucida Console", Monaco, monospace;
  text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}

/* layers control */
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 5px;
}

.leaflet-control-layers-toggle {
  background-image: url(images/layers.png);
  width: 36px;
  height: 36px;
}

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(images/layers-2x.png);
  background-size: 26px 26px;
}

.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}

.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}

.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}

.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}

.leaflet-control-layers label {
  display: block;
}

.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
  background-image: url(images/marker-icon.png);
}

/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.leaflet-control-attribution,
.leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
}

.leaflet-control-attribution a {
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  font-size: 11px;
}

.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}

.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

/* popup */
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}

.leaflet-popup-content {
  margin: 13px 19px;
  line-height: 1.4;
}

.leaflet-popup-content p {
  margin: 18px 0;
}

.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  border: none;
  text-align: center;
  width: 18px;
  height: 14px;
  font: 16px/14px Tahoma, Verdana, sans-serif;
  color: #c3c3c3;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: #999;
}

.leaflet-popup-scrolled {
  overflow: auto;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
  zoom: 1;
}

.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

.leaflet-oldie .leaflet-popup-tip-container {
  margin-top: -1px;
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

/* div icon */
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}

/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip.leaflet-clickable {
  cursor: pointer;
  pointer-events: auto;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Directions */
.leaflet-tooltip-bottom {
  margin-top: 6px;
}

.leaflet-tooltip-top {
  margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}

.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}

.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}

.leaflet-tooltip-left {
  margin-left: -6px;
}

.leaflet-tooltip-right {
  margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}

.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}

.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}