@charset "UTF-8";

:root {
  /* RADIUS */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-full: 100px;
  /* SIZE */
  --size-xxsmall: 12px;
  --size-xsmall: 16px;
  --size-small: 24px;
  --size-medium: 32px;
  --size-large: 40px;
  --size-xlarge: 48px;
  --size-xxlarge: 64px;
  /* SPACING */
  --spacing-xxsmall: 4px;
  --spacing-xsmall: 8px;
  --spacing-small: 16px;
  --spacing-medium: 24px;
  --spacing-large: 32px;
  --spacing-xlarge: 40px;
  --spacing-xxlarge: 48px;
  /* TRANSITIONS */
  --ease-out: 0.2s ease-out;
  /* MODE : default */
  /* MODE : Inverse */
  --CPx-ChirurgienDentiste: #4A2A91;
  --CPx-Medecin: #D3103E;
  --CPx-Pharmacien: #0FAA4B;
  --CPx-SageFemme: #F46BB7;
  --CPx-PedicurePodologue: #FCD006;
  --CPx-Infirmier: #1E5AAF;
  --CPx-MasseurKinesitherapeute: #BCACDC;
  --CPx-OrthophonisteOrthoptiste: #A0D2BB;
  --CPx-OpticienLunetier: #B7D1ED;
  --CPx-ChirurgienDentisteFormation: #B19EC9;
  --CPx-PharmacienFormation: #8ED1A6;
  --CPx-SageFemmeFormation: #F8CDDD;
  --CPx-MedecinFormation: #EA8EA9;
  --CPx-CPECDE: #F8C997;
  --CPx-CPACDA: #8ED0D9;
  --CPx-Unknown: #B0B0B0;
}
:root .ds-default-mode {
  --neutral-8010: rgba(29, 51, 81, 0.10);
  --color-negative: #d73744;
  --color-neutral: #ffffff;
  --color-primary: #005b84;
  --color-primary-hover: #00496A;
  --color-primary-pressed: #00374F;
  --content-high-emphasis: #333333;
  --content-inverse: #ffffff;
  --content-low-emphasis: #999999;
  --content-medium-emphasis: #5f5f5f;
  --content-positive: #165034;
  --content-on-state-disabled: #00000066;
  --content-warning: #5B2209;
  --content-negative: #600910;
  --line-high-emphasis: #00000066;
  --line-high-emphasis-hover: #00000099;
  --line-high-emphasis-pressed: #000000cc;
  --line-inverse: #ffffff;
  --line-low-emphasis: #00000033;
  --line-low-emphasis-hover: #00000066;
  --line-low-emphasis-pressed: #00000099;
  --line-positive: #16503433;
  --line-warning: #5B220933;
  --line-negative: #60091033;
  --state-disabled: #0000001a;
  --state-selected: #0000001a;
  --state-hover-line: #00000033;
  --state-hover-surface: #0000000d;
  --state-hover-color-primary: #00000033;
  --state-pressed-line: #00000066;
  --state-pressed-surface: #0000001a;
  --state-pressed-color-primary: #00000066;
  --surface-main: #ffffff;
  --surface-positive: #f3fcf8;
  --surface-variant: #f1efea;
  --surface-warning: #FFF8F0;
  --surface-negative: #FFF0F2;
}
:root .ds-inverse-mode {
  --color-negative: #000000;
  --color-neutral: #000000;
  --color-primary: #ffffff;
  --color-primary-hover: #F2F2F2;
  --color-primary-pressed: #E5E5E5;
  --content-high-emphasis: #ffffff;
  --content-inverse: #333333;
  --content-low-emphasis: #000000;
  --content-medium-emphasis: #000000;
  --content-positive: #000000;
  --content-on-state-disabled: #000000;
  --line-high-emphasis: #ffffff;
  --line-inverse: #000000;
  --line-low-emphasis: #ffffff66;
  --line-positive: #000000;
  --state-disabled: #000000;
  --state-selected: #ffffff;
  --state-hover-line: #000000;
  --state-hover-surface: #ffffff1a;
  --state-hover-color-primary: #0000000d;
  --state-pressed-line: #000000;
  --state-pressed-surface: #ffffff33;
  --state-pressed-color-primary: #0000001a;
  --surface-main: #004463;
  --surface-positive: #000000;
  --surface-variant: #000000;
}

.ds-header-1 {
  font-family: "Verdana", sans-serif;
  font-size: 26px !important;
  font-weight: 400;
  color: var(--content-high-emphasis) !important;
  margin: 0 !important;
}

.ds-header-2 {
  font-family: "Verdana", sans-serif;
  font-size: 22px !important;
  font-weight: 400;
  color: var(--content-high-emphasis) !important;
  margin: 0 !important;
}

.ds-header-3 {
  font-family: "Verdana", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  color: var(--content-high-emphasis) !important;
  margin: 0 !important;
}

.ds-header-4 {
  font-family: "Verdana", sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  color: var(--content-high-emphasis) !important;
  margin: 0 !important;
}

.ds-body {
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.ds-body-strong {
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ds-caption {
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: 400;
}

.ds-caps {
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ds-small-caps {
  font-family: "Verdana", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.ds-button {
  --button-disabled: var(--content-on-state-disabled);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xsmall);
  color: var(--button-color) !important;
  background-color: var(--button-bg-color) !important;
  border-radius: var(--radius-small);
  text-decoration: none !important;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: "Verdana", sans-serif;
  font-weight: 700;
  position: relative;
  box-shadow: var(--button-shadow, none);
  box-sizing: border-box;
  border: 0;
  transition: background-color var(--ease-out), box-shadow var(--ease-out);
}
@media (hover: hover) {
  .ds-button:hover {
    background-color: var(--button-bg-color-hover) !important;
    cursor: pointer;
  }
}
.ds-button:active {
  background-color: var(--button-bg-color-pressed) !important;
}
.ds-button svg path {
  fill: var(--button-color);
}

.ds-button--disabled {
  color: var(--button-disabled) !important;
  pointer-events: none;
}
.ds-button--disabled svg path {
  fill: var(--button-disabled);
}

.ds-button--medium {
  font-size: 11px;
  min-height: var(--size-medium);
  padding: 0 var(--spacing-small);
}

.ds-button--small {
  font-size: 10px;
  min-height: var(--size-small);
  padding: 0 var(--spacing-xsmall);
}

.ds-button--filled {
  --button-color: var(--content-inverse);
  --button-bg-color: var(--color-primary);
  --button-bg-color-hover: var(--color-primary-hover);
  --button-bg-color-pressed: var(--color-primary-pressed);
}
.ds-button--filled.ds-button--disabled {
  --button-bg-color: var(--state-disabled);
}

.ds-button--outlined {
  --button-color: var(--color-primary);
  --button-bg-color: transparent;
  --button-bg-color-hover: var(--state-hover-surface);
  --button-bg-color-pressed: var(--state-pressed-surface);
  --button-shadow: 0 0 0 1px var(--color-primary) inset;
}

.ds-button--ghost {
  --button-color: var(--color-primary);
  --button-bg-color: transparent;
  --button-bg-color-hover: var(--state-hover-surface);
  --button-bg-color-pressed: var(--state-pressed-surface);
}
.ds-button--ghost.ds-button--medium {
  padding: 0 var(--spacing-xsmall);
}
.ds-button--ghost.ds-button--small {
  padding: 0 var(--spacing-xxsmall);
}

.ds-digit {
  background-color: var(--color-neutral);
  border: 1px solid var(--line-low-emphasis);
  border-radius: var(--radius-small);
  box-sizing: border-box;
  color: var(--content-high-emphasis);
  font-size: 12px;
  height: var(--size-xxlarge);
  padding: var(--spacing-xsmall) 12px;
  transition: border-color var(--ease-out);
  width: var(--size-xlarge);
  text-align: center;
}
.ds-digit:not(.ds-digit-filled):hover {
  border-color: var(--line-low-emphasis-hover);
}
.ds-digit:not(.ds-digit-filled):focus {
  border-color: var(--line-low-emphasis-pressed);
  outline: none;
}

.ds-panel-digit {
  text-align: center !important;
}

.ds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease-out);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 0;
  background-color: transparent;
  padding: 0;
}
@media (hover: hover) {
  .ds-icon-button:hover {
    background-color: var(--state-hover-surface);
    cursor: pointer;
  }
}
.ds-icon-button:active {
  background-color: var(--state-pressed-surface);
}

.ds-icon-button--medium {
  width: var(--size-medium);
  height: var(--size-medium);
}
.ds-icon-button--medium svg {
  width: var(--size-small);
  height: var(--size-small);
}

.ds-icon-button--small {
  width: var(--size-small);
  height: var(--size-small);
}
.ds-icon-button--small svg {
  width: var(--size-xsmall);
  height: var(--size-xsmall);
}

.ds-icon-button--neutral path {
  fill: var(--content-high-emphasis);
}

.ds-icon-button--primary path {
  fill: var(--color-primary);
}

.ds-link {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  transition: color var(--ease-out);
  display: inline-flex;
  gap: var(--spacing-xxsmall);
  align-items: center;
  font-size: 12px;
}
@media (hover: hover) {
  .ds-link:hover {
    color: var(--color-primary-hover) !important;
    text-decoration: underline !important;
  }
  .ds-link:hover .ds-link__icon path {
    fill: var(--color-primary-hover);
  }
}
.ds-link:active {
  color: var(--color-primary-pressed) !important;
}
.ds-link:active .ds-link__icon path {
  fill: var(--color-primary-pressed);
}

.ds-link--small {
  font-size: 11px;
}

.ds-link--disabled {
  pointer-events: none;
  color: var(--content-on-state-disabled) !important;
}
.ds-link--disabled .ds-link__icon path {
  fill: var(--content-on-state-disabled);
}

.ds-link__icon {
  display: inline-flex;
  align-items: center;
}
.ds-link__icon path {
  fill: var(--color-primary);
}

.ds-divider {
  margin: 0;
  height: 1px;
  background-color: var(--line-low-emphasis);
  border: 0;
}

.ds-tag {
  box-sizing: border-box;
  color: var(--content-high-emphasis);
  background-color: var(--color-neutral);
  border-radius: var(--radius-full);
  border: 1px solid var(--line-low-emphasis);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxsmall);
  min-width: var(--size-large);
  height: var(--size-small);
  padding: 0 8px;
}

.ds-card {
  border-radius: var(--radius-medium);
  border: 1px solid var(--line-low-emphasis);
  padding: var(--spacing-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--ease-out), border-color var(--ease-out);
  text-decoration: none !important;
}
@media (hover: hover) {
  .ds-card:hover {
    background-color: var(--state-hover-surface);
    border-color: var(--line-low-emphasis-hover);
    cursor: pointer;
    text-decoration: none !important;
  }
}
.ds-card:active {
  background-color: var(--state-pressed-surface);
  border-color: var(--line-low-emphasis-pressed);
  text-decoration: none !important;
}

.ds-menu-item {
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  transition: background-color var(--ease-out);
  text-decoration: none !important;
}
@media (hover: hover) {
  .ds-menu-item:not(.ds-menu-item-selected):hover {
    background-color: var(--state-hover-surface);
  }
}
.ds-menu-item:not(.ds-menu-item-selected):active {
  background-color: var(--state-pressed-surface);
}

.ds-menu-item-selected {
  background-color: var(--state-selected);
}
@media (hover: hover) {
  .ds-menu-item-selected:hover {
    pointer-events: none;
  }
}

.ds-menu-item__content {
  flex-grow: 1;
}

.ds-menu-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-small);
  height: var(--size-small);
  margin-right: var(--spacing-xsmall);
}
.ds-menu-item__icon path {
  fill: var(--color-primary);
}

.ds-popover {
  background-color: var(--surface-main);
  border-radius: var(--radius-small);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium);
  margin-left: 12px;
  max-width: 308px;
  box-sizing: border-box;
  width: 308px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: all;
  opacity: 1;
  transition: opacity var(--ease-out);
}
.ds-popover.is-closed {
  opacity: 0;
  pointer-events: none;
}
.ds-popover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.5px 12px 8.5px 0;
  border-color: transparent var(--surface-main) transparent transparent;
}
.ds-popover .ds-button--filled.ds-button--small {
  background-image: none !important;
  padding: 0 var(--spacing-xsmall) !important;
  display: inline-flex !important;
  font-size: 10px !important;
  line-height: normal !important;
}
.ds-popover .ds-button--ghost.ds-button--small {
  background-image: none !important;
  padding: 0 var(--spacing-xsmall) !important;
  display: inline-flex !important;
  font-size: 10px !important;
  line-height: normal !important;
}

.ds-popover__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
  color: var(--content-high-emphasis);
}

.ds-popover__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xsmall);
}

.ds-modal {
  background-color: var(--surface-main);
  border-radius: var(--radius-medium);
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.2), 0 2px 24px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: fixed;
  z-index: 10;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-out);
  max-width: 430px;
  text-align: left;
}
.ds-modal.is-active {
  display: flex;
  pointer-events: all;
  opacity: 1;
}
.ds-modal p {
  margin: 0 !important;
  padding: 0 !important;
}
.ds-modal ul {
  list-style-image: none !important;
  list-style-type: disc !important;
}

.ds-modal-large {
  max-width: 640px;
}

.ds-modal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-small) var(--spacing-medium) var(--spacing-medium);
}

.ds-modal__header {
  display: flex;
  align-items: center;
  padding-right: var(--spacing-small);
  min-height: var(--spacing-medium);
}

.ds-modal__close {
  position: absolute;
  top: var(--spacing-small);
  right: var(--spacing-small);
}

.ds-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  max-height: 480px;
  overflow-y: auto;
  margin-right: -20px;
  padding-right: 20px;
}
.ds-modal__body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
}
.ds-modal__body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--line-high-emphasis);
}
.ds-modal__body::-webkit-scrollbar-track {
  background-color: var(--neutral-8010);
}

.ds-modal__body-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

.ds-modal__info-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.ds-modal__info-wrapper--small-gap {
  gap: var(--spacing-xxsmall);
}

.ds-modal__btn-wrapper {
  display: flex;
  gap: var(--spacing-small);
}
.ds-modal__btn-wrapper .ds-button {
  flex: 1;
}

.ds-modal__text {
  color: var(--content-medium-emphasis);
}

.ds-modal__list {
  margin: 0 !important;
  padding-left: 6px !important;
  list-style-position: inside;
  list-style-image: none !important;
}
.ds-modal__list li {
  padding: 0 !important;
}

.ds-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.ds-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}

/* TEXT-FIELD */
.ds-label {
  color: var(--content-medium-emphasis);
  text-align: left;
}

.ds-list-valid {
  font-weight: bold;
}

.ds-input {
  background-color: var(--color-neutral);
  border: 1px solid var(--line-low-emphasis);
  border-radius: var(--radius-small);
  height: var(--size-medium);
  box-sizing: border-box;
  font-size: 12px;
  color: var(--content-high-emphasis);
  transition: border-color var(--ease-out);
  padding: var(--spacing-xsmall) 12px;
  width: 100%;
}
@media (hover: hover) {
  .ds-input:hover {
    border-color: var(--line-low-emphasis-hover);
  }
}
.ds-input:focus {
  outline: none;
  border-color: var(--line-low-emphasis-pressed);
}
.ds-input:invalid {
  outline: none;
  border-color: var(--color-negative);
}
.ds-input:read-only {
  background-color: var(--state-disabled);
}

.ds-input-error {
  color: var(--color-negative);
  margin: 0;
  font-size: 11px;
}

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxsmall);
}

/* PASSWORD */
.ds-input--password {
  padding-right: var(--spacing-large);
}
.ds-input--password::-ms-reveal {
  display: none;
}

.ds-field__wrapper {
  position: relative;
}

.ds-password__button {
  display: none;
  border: 0;
  background-color: transparent;
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0;
  z-index: 1;
}
@media (hover: hover) {
  .ds-password__button:hover {
    cursor: pointer;
  }
}
.ds-password__button.is-visible .ds-field__icon--see {
  display: none;
}
.ds-password__button.is-visible .ds-field__icon--hide {
  display: block;
}

.ds-field__icon {
  width: var(--size-xsmall);
  height: var(--size-xsmall);
}

.ds-field__icon--see {
  display: block;
}

.ds-field__icon--hide {
  display: none;
}

/* CHECKBOX */
.ds-checkbox {
  display: flex;
  gap: var(--spacing-xsmall);
  margin: 0;
}

.ds-checkbox__input {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--line-high-emphasis);
  border-radius: var(--radius-small);
  width: var(--size-xsmall);
  height: var(--size-xsmall);
  transition: background-color var(--ease-out), border-color var(--ease-out);
  margin: 0;
  background-color: transparent;
}
@media (hover: hover) {
  .ds-checkbox__input:hover {
    background-color: var(--state-hover-surface);
    border-color: var(--line-high-emphasis-hover);
  }
}
.ds-checkbox__input::before {
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ds-checkbox__input:checked, .ds-checkbox__input:indeterminate {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
@media (hover: hover) {
  .ds-checkbox__input:checked:hover, .ds-checkbox__input:indeterminate:hover {
    background-color: var(--color-primary-hover);
  }
}
.ds-checkbox__input:checked::before {
  content: "";
  -webkit-mask-image: url("/assets/img/status/tick.svg");
  mask-image: url("/assets/img/status/tick.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--color-neutral);
  display: block;
  width: 10px;
  height: 8px;
}
.ds-checkbox__input:indeterminate::before {
  content: "";
  -webkit-mask-image: url("/assets/img/status/indeterminate.svg");
  mask-image: url("/assets/img/status/indeterminate.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--color-neutral);
  display: block;
  width: 10px;
  height: 8px;
}

.ds-checkbox__label {
  padding-top: 1px;
}

/* SWITCH */
.ds-checkbox-switch {
  display: flex;
  gap: var(--spacing-xsmall);
  margin: 0;
}

.ds-checkbox-switch__input {
  height: 0;
  width: 0;
  visibility: hidden;
}
.ds-checkbox-switch__input:checked ~ .ds-checkbox-switch-label {
  background: var(--color-primary);
}
.ds-checkbox-switch__input:checked ~ .ds-checkbox-switch-label::after {
  left: calc(100% - var(--spacing-xxsmall));
  transform: translateX(-100%);
}

.ds-checkbox-switch-label {
  text-indent: -9999px;
  width: var(--size-medium);
  height: var(--size-xsmall);
  background-color: var(--content-low-emphasis);
  display: block;
  border-radius: var(--radius-medium);
  position: relative;
  transition: background-color var(--ease-out), border-color var(--ease-out);
}
.ds-checkbox-switch-label::after {
  content: "";
  position: absolute;
  top: var(--spacing-xxsmall);
  left: var(--spacing-xxsmall);
  width: var(--radius-medium);
  height: var(--radius-medium);
  background-color: var(--color-neutral);
  border-radius: var(--size-xsmall);
  transition: 0.3s;
}
@media (hover: hover) {
  .ds-checkbox-switch-label:hover {
    background-color: var(--color-primary-hover);
  }
}

.ds-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  justify-content: center;
  max-width: 400px;
  box-sizing: border-box;
}

.ds-empty-state__svg {
  justify-content: center;
  display: flex;
}

.ds-empty-state__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
  justify-content: center;
  text-align: center;
}
.ds-empty-state__content strong {
  font-weight: 700;
}
.ds-empty-state__content p {
  margin: 0 0 15px;
}
.ds-empty-state__content p:last-child {
  margin-bottom: 0;
}

.ds-empty-state__text {
  color: var(--content-medium-emphasis);
}

#ds-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-out);
}
#ds-overlay.is-active {
  pointer-events: all;
  opacity: 1;
}

.c-notification {
  display: flex;
  padding: var(--spacing-xsmall) var(--spacing-small);
  gap: 12px;
  align-items: center;
  border-radius: var(--radius-small);
  text-align: left;
}
.c-notification svg {
  width: var(--size-small);
  height: var(--size-small);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.c-notification p {
  padding: 0 !important;
}

.ds-page-content-banner {
  margin-bottom: var(--spacing-small);
}

.c-notification--success {
  background-color: var(--surface-positive);
  border: 1px solid var(--line-positive);
  color: var(--content-positive);
}
.c-notification--success svg path {
  fill: var(--content-positive);
}

.c-notification--warning {
  background-color: var(--surface-warning);
  border: 1px solid var(--line-warning);
  color: var(--content-warning);
}
.c-notification--warning svg path {
  fill: var(--content-warning);
}

.c-notification--error {
  background-color: var(--surface-negative);
  border: 1px solid var(--line-negative);
  color: var(--content-negative);
}
.c-notification--error svg path {
  fill: var(--content-negative);
}
.c-notification--error .validation-summary-errors {
  color: var(--content-negative);
}
.c-notification--error .validation-summary-errors ul {
  list-style-type: none;
}

.ds-account-card {
  box-sizing: border-box;
  width: 264px;
  height: 158px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  border-radius: var(--radius-medium);
  position: relative;
  overflow: hidden;
}
.ds-account-card:not(.ds-account-card--empty) {
  box-shadow: 1px 4px 8px 0px rgba(0, 0, 0, 0.2);
  background-color: var(--color-neutral);
  border: 1px solid var(--line-low-emphasis);
  justify-content: flex-end;
  padding: var(--spacing-medium);
}

.ds-account-card-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ds-account-card--empty {
  border: 1px dashed var(--line-high-emphasis);
  background: rgba(0, 0, 0, 0.05);
  justify-content: center;
  align-items: center;
}
.ds-account-card--empty .ds-button {
  width: 100%;
  height: 100%;
}

.ds-account-card__infos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxsmall);
  color: var(--content-high-emphasis);
}

.ds-account-card__identity {
  width: 214px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-account__tag {
  position: absolute;
  top: var(--spacing-xsmall);
  right: var(--spacing-xsmall);
}
.ds-account__tag .ds-tag {
  color: var(--content-positive);
}
.ds-account__tag .ds-tag svg path {
  fill: var(--content-positive);
}

.ds-CPx-ChirurgienDentiste {
  color: var(--CPx-ChirurgienDentiste);
}

.ds-CPx-Medecin {
  color: var(--CPx-Medecin);
}

.ds-CPx-Pharmacien {
  color: var(--CPx-Pharmacien);
}

.ds-CPx-SageFemme {
  color: var(--CPx-SageFemme);
}

.ds-CPx-PedicurePodologue {
  color: var(--CPx-PedicurePodologue);
}

.ds-CPx-Infirmier {
  color: var(--CPx-Infirmier);
}

.ds-CPx-MasseurKinesitherapeute {
  color: var(--CPx-MasseurKinesitherapeute);
}

.ds-CPx-OrthophonisteOrthoptiste {
  color: var(--CPx-OrthophonisteOrthoptiste);
}

.ds-CPx-OpticienLunetier {
  color: var(--CPx-OpticienLunetier);
}

.ds-CPx-ChirurgienDentisteFormation {
  color: var(--CPx-ChirurgienDentisteFormation);
}

.ds-CPx-PharmacienFormation {
  color: var(--CPx-PharmacienFormation);
}

.ds-CPx-SageFemmeFormation {
  color: var(--CPx-SageFemmeFormation);
}

.ds-CPx-MedecinFormation {
  color: var(--CPx-MedecinFormation);
}

.ds-CPx-CPECDE {
  color: var(--CPx-CPECDE);
}

.ds-CPx-CPACDA {
  color: var(--CPx-CPACDA);
}

.ds-CPx-Unknown {
  color: var(--CPx-Unknown);
}

.ds-tooltip {
  position: absolute;
  opacity: 0;
  top: -50px;
  background-color: var(--button-color) !important;
  border-radius: 5px;
  color: #fff;
  padding: 10px 20px;
  text-transform: none;
  transition: all 0.75s ease;
  width: 101px;
}

.ds-tooltip.active {
  opacity: 1;
}

/* Styles génériques sur las pages */
#navigation {
  padding: 0 30px 0 0;
}

#navigation-actu-bottom,
#navigation-bottom {
  margin-bottom: var(--spacing-small);
}

#tzr-page-content {
  padding-right: 30px;
}

.basdepage {
  padding-top: var(--spacing-xsmall);
  padding-bottom: var(--spacing-xsmall);
}
.basdepage::after {
  content: "";
  clear: both;
  display: table;
}

.ds-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ds-content {
  flex-grow: 1;
  display: flex;
}

.ds-authentication .top-nav2 {
  background: none;
  padding-bottom: 5px;
}

.ds-authentication__wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxlarge);
  background-color: var(--surface-main);
  min-height: 600px;
  padding: var(--spacing-xxlarge);
  box-sizing: border-box;
  height: 100%;
}

/* AREA */
.ds-authentication-area {
  display: flex;
  box-sizing: border-box;
  gap: var(--spacing-xxlarge);
}

/* LEFT AREA */
.ds-authentication__left-area {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 500px;
  width: 400px;
  gap: var(--spacing-medium);
}

.ds-authentication__panel {
  background-color: var(--surface-main);
  border-radius: var(--radius-medium);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  flex: 1 0 0;
  padding: var(--spacing-large);
  box-sizing: border-box;
}

.ds-authentication__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxsmall);
  text-align: left;
  color: var(--content-medium-emphasis);
}

/* RIGHT AREA */
.ds-authentication__right-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxlarge);
  flex: 1 0 0;
  padding: var(--spacing-large) var(--spacing-xxlarge);
  box-sizing: border-box;
}

.ds-authentication__frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-large);
}

.ds-authentication__ad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xsmall);
}

.ds-authentication__ad-desc {
  color: var(--content-high-emphasis);
  text-align: left;
}

/*.ds-authentication__right-area-img {
  mix-blend-mode: luminosity;
}
*/
.ds-authentication__or-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}
.ds-authentication__or-divider .ds-divider {
  flex-grow: 1;
}

/* LOGIN SSO */
.ds-authentication__logo-container {
  background-color: var(--surface-variant);
  border-radius: var(--radius-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-large);
}

.ds-authentication__logo {
  max-height: var(--size-xxlarge);
  box-sizing: border-box;
}

/* LOG IN SSO UNAVAILABLE */
.ds-authentication__log-in {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__log-in-frame {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  justify-content: center;
  flex: 1 0 0;
}

.ds-authentication__log-in-id {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  height: 325px;
}

.ds-authentication__links {
  display: flex;
  justify-content: center;
}
.ds-authentication__links a:not(:last-child) {
  gap: 0;
}
.ds-authentication__links a:not(:last-child)::after {
  content: "";
  height: 100%;
  display: flex;
  width: 1px;
  background-color: var(--line-low-emphasis);
  margin: 0 var(--spacing-xsmall);
}

/* ACCOUNT LOCKED */
.ds-authentication__account-locked {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-large);
  align-items: center;
  flex: 1 0 0;
}

.ds-authentication__account-locked-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-large);
  flex: 1 0 0;
  align-self: stretch;
}

/* PASSWORD RESET */
.ds-authentication__lost-password {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__lost-password-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  flex: 1 0 0;
}

/* PASSWORD RESET - EMAIL SENT */
.ds-authentication__lost-password-reset-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__password-help-content {
  color: var(--content-low-emphasis);
  list-style-position: inside;
}

/* MULTIPLE ACCOUNT */
.ds-authentication__multiple-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__multiple-account-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  flex: 1 0 0;
}

.ds-authentication__multiple-account-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
  flex: 1 0 0;
  max-height: 276px;
  overflow-y: auto;
  margin: 0 calc(-1 * var(--spacing-xsmall));
  padding: 0 var(--spacing-xsmall);
}
.ds-authentication__multiple-account-scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px;
}
.ds-authentication__multiple-account-scroll::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--line-high-emphasis);
}
.ds-authentication__multiple-account-scroll::-webkit-scrollbar-track {
  background-color: var(--neutral-8010);
}

.ds-authentication__account-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ds-authentication__account-card-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}

.ds-authentication__account-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.ds-authentication__account-title,
.ds-authentication__account-subtitle {
  text-align: left;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-authentication__account-title {
  color: var(--content-high-emphasis);
}

.ds-authentication__account-subtitle {
  color: var(--content-low-emphasis);
}

/* ASSOCIATION */
.ds-authentication__association {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__association-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}

/* ASSOCIATION SUCCESS */
.ds-authentication__association-success-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-large);
  flex: 1 0 0;
}

.ds-authentication__association-success-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-xsmall);
}

.ds-account__psc-area {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  padding-top: var(--spacing-small);
}

.ds-account__panel {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-medium);
  border-radius: var(--radius-medium);
  background-color: var(--surface-variant);
  gap: var(--spacing-large);
}

.ds-account__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.ds-account__content {
  display: flex;
  gap: var(--spacing-medium);
}

.ds-account__frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-small);
  flex-grow: 1;
}

.ds-account__associated-account {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.ds-account__associated-account-header {
  display: flex;
  padding-right: var(--spacing-small);
}

.ds-account__associated-account-title {
  flex: 1 0 0;
}

.ds-account__accounts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}

.ds-account__account-card {
  background-color: var(--color-neutral);
  display: flex;
  gap: var(--spacing-small);
}

.ds-account__account-card-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}

.ds-account__account-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.ds-account__account-title,
.ds-account__account-subtitle {
  text-align: left;
  width: 396px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-account__account-title {
  color: var(--content-high-emphasis);
}

.ds-account__account-subtitle {
  color: var(--content-low-emphasis);
}

.ds-account__account-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
}

.ds-account__logged-user {
  color: var(--color-primary);
}

/* Account button on left bar */
.ds-account__navigation {
  position: relative;
}

.ds-account__dropdown-btn {
  margin: -15px 0;
  border: 0;
  border-right: 1px solid #00567c;
  border-radius: var(--radius-medium) 13px 13px 0;
  width: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-xsmall) 12px var(--spacing-xsmall) var(--spacing-xxsmall);
  color: var(--color-primary);
  position: relative;
  z-index: 1;
  transition: background-color var(--ease-out);
}
.ds-account__dropdown-btn.is-opened {
  background-color: var(--state-pressed-surface);
}
.ds-account__dropdown-btn.is-opened .ds-account__dropdown-arrow {
  transform: rotate(-180deg);
}
@media (hover: hover) {
  .ds-account__dropdown-btn:hover {
    cursor: pointer;
  }
  .ds-account__dropdown-btn:hover:not(.is-opened) {
    background-color: var(--state-hover-surface);
  }
}
.ds-account__dropdown-btn svg {
  flex-shrink: 0;
}

.ds-account__dropdown-arrow {
  transition: transform var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-account__dropdown-arrow svg path {
  fill: var(--color-primary);
}

.ds-account__dropdown-title {
  flex-grow: 1;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.ds-account__menu {
  flex-direction: column;
  padding: var(--spacing-xsmall);
  gap: var(--spacing-xsmall);
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  z-index: 1;
  background-color: var(--surface-main);
  border-radius: var(--radius-medium);
  box-shadow: 0 8px 16px 0 rgba(29, 51, 81, 0.2), 0 1px 8px 0 rgba(29, 51, 81, 0.1);
  opacity: 0;
  transition: opacity var(--ease-out);
  pointer-events: none;
}
.ds-account__menu.is-opened {
  opacity: 1;
  pointer-events: all;
  display: flex;
}

.ds-account__menu-header {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xxsmall) 0 var(--spacing-xsmall);
  gap: var(--spacing-medium);
}

.ds-account__menu-header-title {
  flex-grow: 1;
  color: var(--content-low-emphasis);
}

.ds-account__menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  padding: var(--spacing-xsmall);
  text-decoration: none !important;
}

.ds-account__account-menu-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.ds-account__account-menu-title,
.ds-account__account-menu-subtitle {
  text-align: left;
  min-width: 128px;
  max-width: 328px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-account__account-menu-title {
  color: var(--content-high-emphasis);
}

.ds-account__account-menu-subtitle {
  color: var(--content-low-emphasis);
}

.ds-account__menu-item-add {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  padding: var(--spacing-xsmall) var(--spacing-small);
  text-decoration: none !important;
  color: var(--content-high-emphasis) !important;
}

/* POPOVER */
.ds-account-psc {
  position: relative;
}

.ds-options {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.ds-options-card {
  padding: var(--spacing-small);
  padding-left: 0px;
  padding-right: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ds-options-card-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.ds-options-card--actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
}

.ds-options__totp-code {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ds-sr-only {
  border: 0;
  clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem);
  clip-path: inset(50%);
  height: 0.1rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0.1rem;
  white-space: nowrap;
}

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

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

.ds-m-0 {
  margin: 0 !important;
}

.ds-p-0 {
  padding: 0 !important;
}

.ds-w-100 {
  width: 100%;
}

.ds-height-auto {
  height: auto;
}

.ds-gap-medium {
  gap: var(--spacing-medium);
}

.ds-uppercase {
  text-transform: uppercase;
}

.ds-color-high-emphasis {
  color: var(--content-high-emphasis);
}