@charset "UTF-8";
:root {
  /* ********************************************************************************************* */
  /* * COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR * */
  /* * COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR-PALET COLOR * */
  /* ********************************************************************************************* */
  /* DS color palet: MAIN */
  --ml-m100: #f0ecfa;
  --ml-m200: #eae2ff;
  --ml-m300: #ddd0ff;
  --ml-m400: #b79dff;
  --ml-m500: #6a4dba;
  --ml-m600: #422c7e;
  --ml-m800: #2c1d54;
  --ml-m900: #2a243c;
  --ml-m950: #211c2e;
  /* DS color palet: INSTITUTIONNAL */
  --ml-i100: #ffedf0;
  --ml-i200: #ffcbd4;
  --ml-i300: #fe8896;
  --ml-i400: #fc4d62;
  --ml-i500: #e60028;
  --ml-i600: #b50028;
  --ml-i800: #820028;
  --ml-i900: #600028;
  --ml-i950: #360028;
  /* DS color palet: INFORMATION */
  --ml-b100: #f4f6ff;
  --ml-b200: #dde5ff;
  --ml-b300: #bccdff;
  --ml-b400: #518fff;
  --ml-b500: #0078f3;
  --ml-b600: #0063cb;
  --ml-b800: #273961;
  --ml-b900: #222a3f;
  --ml-b950: #171d2e;
  /* DS color palet: SUCCESS */
  --ml-g100: #dffee6;
  --ml-g200: #bce7cc;
  --ml-g300: #87cca0;
  --ml-g400: #4ba36c;
  --ml-g500: #1d8844;
  --ml-g600: #18753c;
  --ml-g800: #204129;
  --ml-g900: #1e2e22;
  --ml-g950: #142117;
  /* DS color palet: WARNING */
  --ml-o100: #fff4f3;
  --ml-o200: #ffe9e6;
  --ml-o300: #ffbeb4;
  --ml-o400: #fc5d00;
  --ml-o500: #cf4b00;
  --ml-o600: #b34000;
  --ml-o800: #5d2c20;
  --ml-o900: #3e231e;
  --ml-o950: #2d1814;
  /* DS color palet: ERROR */
  --ml-r100: #fef4f4;
  --ml-r200: #fddede;
  --ml-r300: #fcbfbf;
  --ml-r400: #f95c5e;
  --ml-r500: #e1000f;
  --ml-r600: #c9191e;
  --ml-r800: #5e2a2b;
  --ml-r900: #3b2424;
  --ml-r950: #2b1919;
  /* DS color palet: NEUTRAL */
  --ml-n000: #ffffff;
  --ml-n050: #fafbfc;
  --ml-n075: #f4f5f7;
  --ml-n100: #ebecf0;
  --ml-n150: #dfe1e6;
  --ml-n200: #c1c7d0;
  --ml-n250: #b3bac5;
  --ml-n300: #a5adba;
  --ml-n350: #97a0af;
  --ml-n400: #8993a4;
  --ml-n450: #7a869a;
  --ml-n500: #6b778c;
  --ml-n550: #5e6c84;
  --ml-n600: #576377;
  --ml-n700: #4f5561;
  --ml-n850: #353a47;
  --ml-n950: #1b1c22;
}

:root {
  /* PX VAR */
  --ml-small-px: 4px;
  --ml-medium-px: 8px;
  --ml-large-px: 12px;
  --ml-xlarge-px: 16px;
  --ml-xxlarge-px: 20px;
  /* FONT SIZE */
  --ml-small-font-size: 14px;
  --ml-medium-font-size: 16px;
  --ml-large-font-size: 18px;
  /* GAP */
  /* FLEX GAP */
  --ml-small-flex-gap: var(--ml-small-px);
  --ml-medium-flex-gap: var(--ml-medium-px);
  --ml-large-flex-gap: var(--ml-large-px);
  /* BORDER */
  --ml-border-light: 1px solid var(--border-light-color);
  --ml-border-default: 1px solid var(--border-default-color);
  --ml-border-active: 1px solid var(--border-active-color);
  /* BORDER RADIUS */
  --ml-small-border-radius: var(--ml-small-px);
  --ml-medium-border-radius: var(--ml-medium-px);
  --ml-large-border-radius: var(--ml-large-px);
  /* RADIO-BUTTON */
  --ml-radio-button-size: 24px;
  --ml-small-radio-button-size: 16px;
}

*[light] {
  --ml-dark-hide: initial;
  /* define main colors */
  --ml-foreground: var(--ml-n850);
  --ml-secondary: var(--ml-n500);
  --ml-background: var(--ml-n000);
  --ml-main: var(--ml-m600);
  --ml-warning: var(--ml-o600);
  --ml-success: var(--ml-g600);
  --ml-info: var(--ml-b600);
  --ml-error: var(--ml-r500);
  --ml-disabled: var(--ml-n250);
  --ml-neutral: var(--ml-n075);
  --ml-neutral-2: var(--ml-n200);
  /* define shadow vars */
  --ml-shadow-sm-background: var(--ml-background);
  --ml-shadow-md-background: var(--ml-background);
  --ml-shadow-lg-background: var(--ml-background);
  --ml-shadow-sm-shadow: 0 2px 6px #00001828;
  --ml-shadow-md-shadow: 0 4px 12px #00001828;
  --ml-shadow-lg-shadow: 0 6px 18px #00001828;
  --ml-focus-color: var(--ml-b500);
  --ml-code-background: var(--ml-n075);
  --ml-code-comment: #a0a1a7;
  --ml-code-keyword: #a626a4;
  --ml-code-name: #ae180b;
  --ml-code-literal: #0184bb;
  --ml-code-attribute: #10660e;
  --ml-code-variable: #7d5a0e;
  --ml-code-symbol: #1b4ebd;
  --ml-code-class: #c18401;
  --ml-button-active-color: var(--ml-b200);
  /* button */
  --ml-button-color: var(--ml-m500);
  --ml-button-over-background: var(--ml-m100);
  --ml-button-disabled-background: var(--ml-n000);
  --ml-button-disabled-color: var(--ml-n200);
  /* checkbox */
  --ml-checkbox-border-color: var(--ml-m900);
  --ml-checkbox-checked-background: var(--ml-m500);
  --ml-checkbox-disabled-background: var(--ml-n100);
  --ml-checkbox-check-color: var(--ml-n000);
  --ml-checkbox-check-disabled-color: var(--ml-n400);
  /* switch */
  --ml-switch-color: var(--ml-n950);
  --ml-switch-button-color: var(--ml-n000);
  --ml-switch-text-color: var(--ml-n500);
  /* switchtag */
  --ml-switchtag-background: var(--ml-n150);
  /* tag */
  --ml-tag-background: var(--ml-n950);
  --ml-tag-color: var(--ml-n000);
  /* tab */
  --ml-tab-active: var(--ml-m500);
  /* divider */
  --ml-divider-color: var(--ml-n100);
  /* TEXT */
  /* TEXT BODY & TITLE */
  --ml-text-body: var(--ml-n950);
  --ml-text-secondary: var(--ml-n500);
  --ml-text-disabled: var(--ml-n200);
  --ml-text-highlight: var(--ml-m500);
  /* TEXT BUTTONS */
  --text-button-primary: var(--ml-n000);
  --text-button-primary-hover: var(--ml-n000);
  --text-button-primary-disabled: var(--ml-n400);
  --text-button-secondary: var(--ml-m500);
  --text-button-secondary-hover: (var(--ml-m600));
  --text-button-secondary-disabled: var(--ml-n200);
  /* TEXT INFORMATIVE */
  --ml-text-information: var(--ml-b600);
  --ml-text-success: var(--ml-g600);
  --ml-text-warning: var(--ml-o600);
  --ml-text-error: var(--ml-r600);
  /* BORDERS */
  /* BORDER ACCENT */
  --accent-primary: var(--ml-n100);
  --accent-secondary: var(--ml-n075);
  --accent-tertiary: var(--ml-n050);
  /* BORDER BUTTONS */
  --border-button-primary: var(--ml-m500);
  --border-button-primary-hover: (var(--ml-m600));
  --border-button-secondary: var(--ml-n950);
  --border-button-secondary-hover: var(--ml-n850);
  --border-button-disabled: var(--ml-n200);
  /* BORDER INFORMATIVE */
  --border-information: var(--ml-b500);
  --border-success: var(--ml-g500);
  --border-warning: var(--ml-o500);
  --border-error: var(--ml-r500);
  /* BORDER FIELDS */
  --border-light-color: var(--ml-n200);
  --border-default-color: var(--ml-n300);
  --border-active-color: var(--ml-n950);
  /* BORDER CHECKBOX */
  --border-checkbox: var(--ml-m900);
}

*[dark] {
  --ml-dark-hide: none;
  /* define main colors */
  --ml-foreground: var(--ml-n150);
  --ml-secondary: var(--ml-n450);
  --ml-background: var(--ml-n950);
  --ml-main: var(--ml-m400);
  --ml-warning: var(--ml-o300);
  --ml-success: var(--ml-g300);
  --ml-info: var(--ml-b300);
  --ml-error: var(--ml-r300);
  --ml-disabled: var(--ml-n700);
  --ml-neutral: var(--ml-n850);
  --ml-neutral-2: var(--ml-n450);
  --ml-shadow-sm-background: #272b35;
  --ml-shadow-md-background: #303441;
  --ml-shadow-lg-background: #3b3f4f;
  --ml-shadow-sm-shadow: 0 2px 6px #000018;
  --ml-shadow-md-shadow: 0 4px 12px #000018;
  --ml-shadow-lg-shadow: 0 6px 18px #000018;
  --ml-focus-color: var(--ml-b500);
  --ml-code-background: var(--ml-n950);
  --ml-code-comment: #5c6370;
  --ml-code-keyword: #c678dd;
  --ml-code-name: #e06c75;
  --ml-code-literal: #56b6c2;
  --ml-code-attribute: #98c379;
  --ml-code-variable: #d19a66;
  --ml-code-symbol: #61aeee;
  --ml-code-class: #e6c07b;
  --ml-button-active-color: var(--ml-b800);
  /* primary button */
  --ml-primarybutton-border: solid 1px var(--ml-m400);
  --ml-primarybutton-background: var(--ml-m400);
  --ml-primarybutton-over-border: solid 1px var(--ml-m500);
  --ml-primarybutton-over-background: var(--ml-m500);
  --ml-primarybutton-disabled-background: var(--ml-n850);
  --ml-primarybutton-disabled-border: solid 1px var(--ml-n850);
  --ml-primarybutton-disabled-color: var(--ml-n400);
  /* secondary button */
  --ml-button-color: var(--ml-m300);
  --ml-button-background: transparent;
  --ml-button-border: solid 1px var(--ml-m300);
  --ml-button-over-background: var(--ml-m900);
  --ml-button-disabled-background: transparent;
  --ml-button-disabled-border: solid 1px var(--ml-n700);
  --ml-button-disabled-color: var(--ml-n700);
  /* tertiary button */
  --ml-flatbutton-color: var(--ml-m300);
  --ml-flatbutton-background: transparent;
  --ml-flatbutton-border: solid 1px transparent;
  --ml-flatbutton-over-background: var(--ml-m900);
  --ml-flatbutton-disabled-background: transparent;
  --ml-flatbutton-disabled-border: solid 1px transparent;
  --ml-flatbutton-disabled-color: var(--ml-n700);
  /* checkbox */
  --ml-checkbox-border-color: var(--ml-m100);
  --ml-checkbox-checked-background: var(--ml-m400);
  --ml-checkbox-disabled-background: var(--ml-n850);
  --ml-checkbox-check-color: var(--ml-ravel);
  --ml-checkbox-check-disabled-color: var(--ml-n400);
  /* switch */
  --ml-switch-color: var(--ml-n000);
  --ml-switch-button-color: var(--ml-n950);
  --ml-switch-text-color: var(--ml-n450);
  /* switchtag */
  --ml-switchtag-background: var(--ml-n700);
  /* tag */
  --ml-tag-background: var(--ml-n050);
  --ml-tag-color: var(--ml-n950);
  /* tab */
  --ml-tab-active: var(--ml-m400);
  /* divider */
  --ml-divider-color: (var(--ml-n600));
  /* TEXT */
  /* TEXT BODY & TITLE */
  --ml-text-body: #fff;
  --ml-text-secondary: var(--ml-n450);
  --ml-text-disabled: var(--ml-n700);
  --ml-text-highlight: var(--ml-m400);
  /* TEXT BUTTONS */
  --text-button-primary: var(--ml-n950);
  --text-button-primary-hover: var(--ml-n950);
  --text-button-primary-disabled: var(--ml-n400);
  --text-button-secondary: var(--ml-m400);
  --text-button-secondary-hover: var(--ml-m300);
  --text-button-secondary-disabled: var(--ml-n700);
  /* TEXT INFORMATIVE */
  --ml-text-information: var(--ml-b400);
  --ml-text-success: var(--ml-g400);
  --ml-text-warning: var(--ml-o400);
  --ml-text-error: var(--ml-r400);
  /* BORDERS */
  /* BORDER ACCENT */
  --accent-primary: (var(--ml-n600));
  --accent-secondary: var(--ml-n700);
  --accent-tertiary: var(--ml-n850);
  /* BORDER BUTTONS */
  --border-button-primary: var(--ml-m400);
  --border-button-primary-hover: var(--ml-m300);
  --border-button-secondary: var(--ml-n000);
  --border-button-secondary-hover: var(--ml-n150);
  --border-button-disabled: var(--ml-n700);
  /* BORDER INFORMATIVE */
  --border-information: var(--ml-b400);
  --border-success: var(--ml-g400);
  --border-warning: var(--ml-o400);
  --border-error: var(--ml-r400);
  /* BORDER FIELDS */
  --border-default-color: var(--ml-n550);
  --border-active-color: var(--ml-n150);
  /* BORDER CHECKBOX */
  --border-checkbox: var(--ml-n950);
}

/* ********************************************************************************************* */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* * ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION ACCORDION * */
/* ********************************************************************************************* */
/* accordion CSS rules */
.accordion-btn {
  border: none;
  border-top: solid var(--ml-neutral) 2px;
  background-color: var(--ml-background);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
}

.accordion-btn:last-of-type {
  border-bottom: solid var(--ml-neutral) 2px;
}

.accordion-btn:hover {
  background-color: var(--ml-m200);
  border: none;
  border-top: transparent solid 2px;
}

.active {
  background-color: var(--ml-m400);
  border: none;
  border-top: transparent solid 2px;
}

.accordion-panel {
  margin: 10px 18px;
  padding: 0 5px;
  background-color: var(--ml-neutral);
  display: none;
  overflow: hidden;
}

/* ********************************************************************************************* */
/* * BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE * */
/* * BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE BADGE * */
/* ********************************************************************************************* */
.badge-md {
  /* Layout */
  display: inline-flex;
  border-radius: 4px;
  padding: 0px 8px;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--ml-n950);
  background: var(--ml-n150);
  /* Icône */
}
.badge-md .icon {
  width: 16px;
  height: 16px;
  padding-right: 5px;
}
.badge-md .icon span {
  font-size: 1rem;
}
.badge-md p {
  margin: 1vh 0;
  align-self: baseline;
}

.badge-sd {
  /* Layout */
  display: inline-flex;
  border-radius: var(--ml-small-border-radius);
  padding: 0px 8px;
  align-items: center;
  font-size: 12px;
  color: var(--ml-n950);
  background: var(--ml-n150);
  /* Icône */
}
.badge-sd .icon {
  width: 16px;
  height: 16px;
  padding-right: var(--ml-small-px);
}
.badge-sd .icon span {
  font-size: 1rem;
}
.badge-sd p {
  margin: 1vh 0;
  align-self: baseline;
}

.success-badge {
  background: var(--ml-g100);
  color: var(--ml-g600);
}

.error-badge {
  background: var(--ml-r100);
  color: var(--ml-r600);
}

.warning-badge {
  background: var(--ml-o100);
  color: var(--ml-o600);
}

.information-badge {
  background: var(--ml-b100);
  color: var(--ml-b600);
}

/* ********************************************************************************************* */
/* * BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON * */
/* * BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON * */
/* ********************************************************************************************* */
.button {
  display: flex;
  gap: var(--ml-medium-flex-gap);
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color: var(--ml-button-color);
  fill: var(--ml-button-color);
  border: var(--ml-border-default);
  border-color: var(--ml-button-color);
  border-radius: var(--ml-small-px);
  font-size: var(--ml-medium-font-size);
  padding: var(--ml-medium-px) var(--ml-xlarge-px);
}
.button .icon {
  font-size: var(--ml-medium-font-size);
}
.button.small-button {
  font-size: var(--ml-small-font-size);
  padding: var(--ml-small-px) var(--ml-large-px);
}
.button.large-button {
  font-size: var(--ml-large-font-size);
  padding: var(--ml-large-px) var(--ml-xxlarge-px);
}
.button.tertiary-button {
  border: none;
  border-color: transparent;
}
.button.primary-button {
  background-color: var(--ml-button-color);
  color: var(--ml-n000);
}

.button:hover,
.button:active {
  background-color: var(--ml-button-over-background);
}
.button:hover.primary-button,
.button:active.primary-button {
  background-color: var(--ml-m600);
}

.button:disabled {
  background: var(--ml-button-disabled-background) !important;
  color: var(--ml-button-disabled-color);
  border-color: var(--ml-button-disabled-color);
}

/* ********************************************************************************************* */
/* * INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT * */
/* * INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT INPUT * */
/* ********************************************************************************************* */
.input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ml-medium-flex-gap);
  max-width: 300px;
}
.input-container .label {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: var(--ml-small-flex-gap);
}
.input-container .label .description {
  font-size: 12px;
  color: var(--ml-text-secondary);
}
.input-container .input-field {
  display: flex;
  align-items: center;
  width: 100%;
  border: var(--ml-border-default);
  border-radius: var(--ml-small-border-radius);
}
.input-container .input-field:focus-within {
  outline-style: solid;
  outline-color: var(--ml-focus-color);
  outline-width: 2px;
  outline-offset: 2px;
}
.input-container .input-field input {
  color: var(--ml-text-body);
  box-sizing: border-box;
  border-radius: var(--ml-small-border-radius);
  border: transparent;
  padding: var(--ml-small-px) var(--ml-medium-px);
  transition: all 0.3s ease-in-out;
  width: 100%;
  height: 32px;
}
.input-container .input-field input:focus {
  outline: none;
}
.input-container .input-field input[placeholder] {
  color: var(--ml--950);
}
.input-container .input-field .icon {
  margin-right: var(--ml-small-px);
  color: var(--ml-text-body) !important;
  font-size: 1px;
}
.input-container .input-field:has(input:disabled) {
  border-color: var(--ml-disabled);
}
.input-container .input-field:has(input:focus) {
  border: var(--ml-border-active);
}
.input-container .status {
  display: flex;
  align-items: flex-start;
  padding-right: 20px;
  gap: var(--ml-small-flex-gap);
}
.input-container .status span {
  font-size: 12px;
  line-height: 20px;
  text-align: left;
}

.input-container:has(input:disabled) label {
  color: var(--ml-text-disabled);
}

.input-status-success {
  color: var(--ml-g600);
}
.input-status-success .input-field {
  border-color: var(--ml-g600);
}
.input-status-success .input-field:has(input:focus) {
  border-color: var(--ml-g600);
}

.input-status-error {
  color: var(--ml-r600);
}
.input-status-error .input-field {
  border-color: var(--ml-r600);
}
.input-status-error .input-field:has(input:focus) {
  border-color: var(--ml-r600);
}

/* ********************************************************************************************* */
/* * RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX * */
/* * RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX RADIO-CHECKBOX * */
/* ********************************************************************************************* */
/* radio-button & checkbox container */
.radio-button-group,
.checkbox-group,
.rich-radio-button-group {
  border: none;
  /* status of radio-button or checkbox field*/
}
.radio-button-group .status,
.checkbox-group .status,
.rich-radio-button-group .status {
  display: flex;
  gap: var(--ml-small-px);
}
.radio-button-group .radio-button-list,
.radio-button-group .radio-button-list-horizontal,
.radio-button-group .checkbox-list,
.radio-button-group .checkbox-list-horizontal,
.radio-button-group .rich-radio-button-list,
.radio-button-group .rich-radio-button-list-horizontal,
.checkbox-group .radio-button-list,
.checkbox-group .radio-button-list-horizontal,
.checkbox-group .checkbox-list,
.checkbox-group .checkbox-list-horizontal,
.checkbox-group .rich-radio-button-list,
.checkbox-group .rich-radio-button-list-horizontal,
.rich-radio-button-group .radio-button-list,
.rich-radio-button-group .radio-button-list-horizontal,
.rich-radio-button-group .checkbox-list,
.rich-radio-button-group .checkbox-list-horizontal,
.rich-radio-button-group .rich-radio-button-list,
.rich-radio-button-group .rich-radio-button-list-horizontal {
  margin-top: var(--ml-xlarge-px);
  padding-left: var(--ml-small-px);
}
.radio-button-group.error .radio-button-list,
.radio-button-group.error .radio-button-list-horizontal,
.radio-button-group.error .checkbox-list,
.radio-button-group.error .checkbox-list-horizontal,
.radio-button-group.error .rich-radio-button-list,
.radio-button-group.error .rich-radio-button-list-horizontal,
.checkbox-group.error .radio-button-list,
.checkbox-group.error .radio-button-list-horizontal,
.checkbox-group.error .checkbox-list,
.checkbox-group.error .checkbox-list-horizontal,
.checkbox-group.error .rich-radio-button-list,
.checkbox-group.error .rich-radio-button-list-horizontal,
.rich-radio-button-group.error .radio-button-list,
.rich-radio-button-group.error .radio-button-list-horizontal,
.rich-radio-button-group.error .checkbox-list,
.rich-radio-button-group.error .checkbox-list-horizontal,
.rich-radio-button-group.error .rich-radio-button-list,
.rich-radio-button-group.error .rich-radio-button-list-horizontal {
  border-left: 2px var(--ml-text-error) solid !important;
}
.radio-button-group.error legend,
.checkbox-group.error legend,
.rich-radio-button-group.error legend {
  color: var(--ml-text-error);
}
.radio-button-group.error .status,
.checkbox-group.error .status,
.rich-radio-button-group.error .status {
  color: var(--ml-text-error);
}
.radio-button-group.success .radio-button-list,
.radio-button-group.success .radio-button-list-horizontal,
.radio-button-group.success .checkbox-list,
.radio-button-group.success .checkbox-list-horizontal,
.radio-button-group.success .rich-radio-button-list,
.radio-button-group.success .rich-radio-button-list-horizontal,
.checkbox-group.success .radio-button-list,
.checkbox-group.success .radio-button-list-horizontal,
.checkbox-group.success .checkbox-list,
.checkbox-group.success .checkbox-list-horizontal,
.checkbox-group.success .rich-radio-button-list,
.checkbox-group.success .rich-radio-button-list-horizontal,
.rich-radio-button-group.success .radio-button-list,
.rich-radio-button-group.success .radio-button-list-horizontal,
.rich-radio-button-group.success .checkbox-list,
.rich-radio-button-group.success .checkbox-list-horizontal,
.rich-radio-button-group.success .rich-radio-button-list,
.rich-radio-button-group.success .rich-radio-button-list-horizontal {
  border-left: 2px var(--ml-text-success) solid !important;
}
.radio-button-group.success legend,
.checkbox-group.success legend,
.rich-radio-button-group.success legend {
  color: var(--ml-text-success);
}
.radio-button-group.success .status,
.checkbox-group.success .status,
.rich-radio-button-group.success .status {
  color: var(--ml-text-success);
}

.radio-button-list-horizontal,
.checkbox-list-horizontal,
.rich-radio-button-list-horizontal {
  grid-template-columns: repeat(3, auto);
  display: grid;
  grid-gap: var(--ml-medium-px);
}

/* radio button CSS rules */
.radio-button,
.checkbox,
.rich-radio-button {
  display: block;
  position: relative;
  padding-left: calc(var(--ml-radio-button-size) + 32px);
  padding-top: var(--ml-small-px);
  padding-bottom: var(--ml-small-px);
  padding-right: var(--ml-small-px);
  margin-bottom: var(--ml-xxlarge-px);
  cursor: pointer;
  font-size: var(--ml-medium-font-size);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.radio-button input,
.checkbox input,
.rich-radio-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  /* Show the indicator (dot/circle) when checked */
  /* Show the checkmark when checked */
}
.radio-button input:checked ~ .radio-wrapper .radiomark:after,
.checkbox input:checked ~ .radio-wrapper .radiomark:after,
.rich-radio-button input:checked ~ .radio-wrapper .radiomark:after {
  display: block;
  background: var(--ml-main);
}
.radio-button input:checked ~ .checkbox-wrapper .checkmark:after,
.checkbox input:checked ~ .checkbox-wrapper .checkmark:after,
.rich-radio-button input:checked ~ .checkbox-wrapper .checkmark:after {
  display: block;
  background: var(--ml-main);
}
.radio-button .radio-wrapper,
.radio-button .checkbox-wrapper,
.checkbox .radio-wrapper,
.checkbox .checkbox-wrapper,
.rich-radio-button .radio-wrapper,
.rich-radio-button .checkbox-wrapper {
  position: absolute;
  top: 0;
  left: 20px;
  height: var(--ml-radio-button-size);
  width: var(--ml-radio-button-size);
  padding: 3px;
}
.radio-button .radio-wrapper .radiomark,
.radio-button .radio-wrapper .checkmark,
.radio-button .checkbox-wrapper .radiomark,
.radio-button .checkbox-wrapper .checkmark,
.checkbox .radio-wrapper .radiomark,
.checkbox .radio-wrapper .checkmark,
.checkbox .checkbox-wrapper .radiomark,
.checkbox .checkbox-wrapper .checkmark,
.rich-radio-button .radio-wrapper .radiomark,
.rich-radio-button .radio-wrapper .checkmark,
.rich-radio-button .checkbox-wrapper .radiomark,
.rich-radio-button .checkbox-wrapper .checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: var(--ml-radio-button-size);
  width: var(--ml-radio-button-size);
  background-color: var(--ml-background);
  border: 1px solid var(--ml-foreground);
  border-radius: 50%;
  margin: 2px;
  /* Create the indicator (the dot/circle - hidden when not checked) */
}
.radio-button .radio-wrapper .radiomark:after,
.radio-button .radio-wrapper .checkmark:after,
.radio-button .checkbox-wrapper .radiomark:after,
.radio-button .checkbox-wrapper .checkmark:after,
.checkbox .radio-wrapper .radiomark:after,
.checkbox .radio-wrapper .checkmark:after,
.checkbox .checkbox-wrapper .radiomark:after,
.checkbox .checkbox-wrapper .checkmark:after,
.rich-radio-button .radio-wrapper .radiomark:after,
.rich-radio-button .radio-wrapper .checkmark:after,
.rich-radio-button .checkbox-wrapper .radiomark:after,
.rich-radio-button .checkbox-wrapper .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  top: calc(var(--ml-radio-button-size) / 4);
  left: calc(var(--ml-radio-button-size) / 4);
  width: calc(var(--ml-radio-button-size) / 2);
  height: calc(var(--ml-radio-button-size) / 2);
  border-radius: 50%;
  background: white;
}
.radio-button .radio-wrapper .checkmark,
.radio-button .checkbox-wrapper .checkmark,
.checkbox .radio-wrapper .checkmark,
.checkbox .checkbox-wrapper .checkmark,
.rich-radio-button .radio-wrapper .checkmark,
.rich-radio-button .checkbox-wrapper .checkmark {
  border-radius: var(--ml-small-px);
  font-size: var(--ml-large-font-size);
  /* Create the checkmark/indicator (hidden when not checked) */
}
.radio-button .radio-wrapper .checkmark:after,
.radio-button .checkbox-wrapper .checkmark:after,
.checkbox .radio-wrapper .checkmark:after,
.checkbox .checkbox-wrapper .checkmark:after,
.rich-radio-button .radio-wrapper .checkmark:after,
.rich-radio-button .checkbox-wrapper .checkmark:after {
  content: "✓";
  top: 0;
  left: 0;
  width: var(--ml-radio-button-size);
  height: var(--ml-radio-button-size);
  border-radius: 0;
  color: white;
  align-content: center;
  text-align: center;
}
.radio-button.radio-button-small,
.checkbox.radio-button-small,
.rich-radio-button.radio-button-small {
  padding-left: calc(var(--ml-small-radio-button-size) + 32px);
}
.radio-button.radio-button-small .radio-wrapper,
.checkbox.radio-button-small .radio-wrapper,
.rich-radio-button.radio-button-small .radio-wrapper {
  height: var(--ml-small-radio-button-size);
  width: var(--ml-small-radio-button-size);
}
.radio-button.radio-button-small .radio-wrapper .radiomark,
.checkbox.radio-button-small .radio-wrapper .radiomark,
.rich-radio-button.radio-button-small .radio-wrapper .radiomark {
  height: var(--ml-small-radio-button-size);
  width: var(--ml-small-radio-button-size);
}
.radio-button.radio-button-small .radio-wrapper .radiomark:after,
.checkbox.radio-button-small .radio-wrapper .radiomark:after,
.rich-radio-button.radio-button-small .radio-wrapper .radiomark:after {
  top: calc(var(--ml-small-radio-button-size) / 4);
  left: calc(var(--ml-small-radio-button-size) / 4);
  width: calc(var(--ml-small-radio-button-size) / 2);
  height: calc(var(--ml-small-radio-button-size) / 2);
}
.radio-button.checkbox-small,
.checkbox.checkbox-small,
.rich-radio-button.checkbox-small {
  padding-left: calc(var(--ml-small-radio-button-size) + 32px);
}
.radio-button.checkbox-small .checkbox-wrapper,
.checkbox.checkbox-small .checkbox-wrapper,
.rich-radio-button.checkbox-small .checkbox-wrapper {
  height: var(--ml-small-radio-button-size);
  width: var(--ml-small-radio-button-size);
}
.radio-button.checkbox-small .checkbox-wrapper .checkmark,
.checkbox.checkbox-small .checkbox-wrapper .checkmark,
.rich-radio-button.checkbox-small .checkbox-wrapper .checkmark {
  height: var(--ml-small-radio-button-size);
  width: var(--ml-small-radio-button-size);
  font-size: var(--ml-small-font-size);
}
.radio-button.checkbox-small .checkbox-wrapper .checkmark:after,
.checkbox.checkbox-small .checkbox-wrapper .checkmark:after,
.rich-radio-button.checkbox-small .checkbox-wrapper .checkmark:after {
  width: var(--ml-small-radio-button-size);
  height: var(--ml-small-radio-button-size);
}

.rich-radio-button {
  display: flex;
  align-items: center;
  border: var(--ml-border-default);
  max-width: 15vw;
}
.rich-radio-button p {
  flex: auto;
}
.rich-radio-button img {
  max-height: 80px;
  max-width: 80px;
}
.rich-radio-button .radio-wrapper {
  top: 35%;
}
.rich-radio-button:hover {
  background-color: var(--ml-m200);
}

/* Additional text */
.radio-add-text {
  position: absolute;
  top: var(--ml-radio-button-size);
  left: calc(var(--ml-radio-button-size) + 32px);
  color: var(--ml-secondary);
  font-size: 12px;
}

.rich-radio-button .radio-add-text {
  top: calc(var(--ml-radio-button-size) + 32px);
}

/* Focus */
.radio-button:has(input:focus-visible):not(input:active) .radio-wrapper {
  outline-style: solid;
  outline-color: var(--ml-focus-color);
  outline-width: 2px;
  border-radius: 50%;
}

.rich-radio-button:has(input:focus-visible):not(input:active) .radio-wrapper {
  outline-style: solid;
  outline-color: var(--ml-focus-color);
  outline-width: 2px;
  border-radius: 50%;
}

/* Disabled */
.radio-button:has(input:disabled) {
  color: var(--ml-disabled);
  cursor: auto;
}

.radio-button input:disabled ~ .radio-wrapper .radiomark {
  border-color: var(--ml-disabled);
}

.radio-button input:disabled ~ .radio-wrapper .radiomark:after {
  background: var(--ml-disabled);
}

.checkbox:has(input:disabled) {
  color: var(--ml-disabled);
  cursor: auto;
}

.checkbox input:disabled ~ .checkbox-wrapper .checkmark {
  border-color: var(--ml-disabled);
}

.checkbox input:disabled ~ .checkbox-wrapper .checkmark:after {
  background: var(--ml-disabled);
}

.rich-radio-button:has(input:disabled) {
  border: var(--ml-border-light);
  color: var(--ml-disabled);
  cursor: auto;
}

.rich-radio-button input:disabled ~ .radio-wrapper .radiomark {
  border-color: var(--ml-disabled);
}

.rich-radio-button input:disabled ~ .radio-wrapper .radiomark:after {
  background: var(--ml-disabled);
}

/* ********************************************************************************************* */
/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
/* * PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGESS_BAR PROGR * */
/* ********************************************************************************************* */
.progress-bar {
  display: grid;
  grid-template-rows: auto;
  min-width: 48px;
  max-width: 50%;
}
.progress-bar label {
  display: grid;
  grid-template-columns: 85% 15%;
}
.progress-bar label span {
  text-align: right;
}
.progress-bar progress {
  height: 8px;
  border: none;
  border-radius: 4px;
  margin-top: var(--ml-medium-px);
  margin-bottom: var(--ml-medium-px);
}
.progress-bar progress::-webkit-progress-bar,
.progress-bar progress::-moz-progress-bar {
  background-color: var(--ml-m500);
}
.progress-bar.small progress {
  height: 4px;
}
.progress-bar.success progress::-webkit-progress-bar,
.progress-bar.success progress::-moz-progress-bar {
  background-color: var(--ml-text-success);
}
.progress-bar.error progress::-webkit-progress-bar,
.progress-bar.error progress::-moz-progress-bar {
  background-color: var(--ml-text-error);
}
.progress-bar .status {
  display: flex;
  gap: var(--ml-small-px);
}
.progress-bar.success .status {
  color: var(--ml-text-success);
}
.progress-bar.error .status {
  color: var(--ml-text-error);
}

:root {
  /* define fonts */
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

/* additionnal description for radio-button, progress-bar*/
.additionnal-description {
  color: var(--ml-text-secondary);
  margin: 0;
}

/*# sourceMappingURL=ds-ml.css.map */