.extranet-usi {
  /* BOF CONF CSS */
  /* --content */
  --extranet-content-width: auto;
  --extranet-content-background: transparent;
  --extranet-content-color: inherit;
  --extranet-content-border: none;
  --extranet-content-border-radius: 0;
  --extranet-content-padding: 0;
  --extranet-content-shadow: none;
  /* --content-links */
  --extranet-link-color: #deb857;
  --extranet-link-colorHover: var(--extranet-link-color);
  --extranet-link-decoration: underline;
  --extranet-link-decorationHover: none;
  /* --form content*/
  --extranet-form-line-height: inherit;
  --extranet-form-horizontal-spacing: 1rem;
  --extranet-form-vertical-spacing: .5rem;
  --extranet-form-orientation: column;
  /* row or column */
  --extranet-form-alignment: flex-start;
  /* center, flex-start */
  /* --form elements (wrappers for text & password types) */
  --extranet-form-element-orientation: column;
  /* row or column */
  --extranet-form-element-alignment: flex-start;
  /* center, flex-start */
  /* --labels */
  --extranet-label-color: inherit;
  --extranet-label-font-size: inherit;
  --extranet-label-font-weight: normal;
  --extranet-label-font-style: normal;
  --extranet-label-line-height: inherit;
  --extranet-label-margin: 0.25rem 0;
  /* --inputs */
  --extranet-input-font-size: inherit;
  --extranet-input-font-weight: normal;
  --extranet-input-line-height: inherit;
  --extranet-input-background: #ffffff;
  --extranet-input-color: #171a1f;
  --extranet-input-border: .1rem solid var(--extranet-input-color);
  --extranet-input-borderFocus: .1rem solid #deb857;
  --extranet-input-border-radius: .2rem;
  --extranet-input-padding: .25rem 1rem;
  --extranet-input-width: 30rem;
  /* auto, 100%, 20rem, etc */
  --extranet-password-toggle-color: var(--extranet-input-color);
  /* --placeholders */
  --extranet-placeholder-color: #b1b1b1;
  --extranet-placeholder-font-size: inherit;
  --extranet-placeholder-font-style: normal;
  /* --submit button */
  --extranet-submit-alignment: unset;
  /*unset, center, flex-start */
  --extranet-submit-margin: 1rem 0 0;
  --extranet-submit-color: #171a1f;
  --extranet-submit-colorHover: var(--extranet-submit-color);
  --extranet-submit-background: #deb857;
  --extranet-submit-backgroundHover: #d6a62c;
  --extranet-submit-border: .1rem solid var(--extranet-submit-background);
  --extranet-submit-borderHover: .1rem solid var(--extranet-submit-backgroundHover);
  --extranet-submit-border-radius: .2rem;
  --extranet-submit-text-transform: uppercase;
  --extranet-submit-padding: .25rem 1rem;
  --extranet-submit-font-weight: 600;
  --extranet-submit-font-size: inherit;
  --extranet-submit-icon-display: block;
  /* none or block */
  --extranet-submit-icon-size: 2rem;
  --extranet--submit-text-display: block;
  /* none or block - warning: check if an icon is present & displayed in the button before setting "none" */
  /* --error message */
  --extranet-error-alignment: unset;
  /*unset, center, flex-start */
  --extranet-error-color: red;
  --extranet-error-background: #edcccc;
  --extranet-error-border: none;
  --extranet-error-border-radius: 0;
  --extranet-error-padding: .25rem 1rem;
  --extranet-error-margin: 1rem 0;
  /* EOF CONF CSS */
  /* JS-RELATED: connection-error-notify.js */ }
  .extranet-usi form {
    position: relative; }
  .extranet-usi_content {
    width: var(--extranet-content-width);
    padding: var(--extranet-content-padding);
    background: var(--extranet-content-background);
    color: var(--extranet-content-color);
    border: var(--extranet-content-border);
    border-radius: var(--extranet-content-border-radius);
    box-shadow: var(--extranet-content-shadow); }
    .extranet-usi_content a {
      color: var(--extranet-link-color);
      text-decoration: var(--extranet-link-decoration); }
      .extranet-usi_content a:hover {
        color: var(--extranet-link-colorHover);
        text-decoration: var(--extranet-link-decorationHover); }
  .extranet-usi_form-content {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    max-width: 100%;
    line-height: var(--extranet-form-line-height);
    -webkit-align-items: var(--extranet-form-alignment);
        -ms-flex-align: var(--extranet-form-alignment);
            align-items: var(--extranet-form-alignment);
    -webkit-flex-direction: var(--extranet-form-orientation);
        -ms-flex-direction: var(--extranet-form-orientation);
            flex-direction: var(--extranet-form-orientation);
    -webkit-column-gap: var(--extranet-form-horizontal-spacing);
            column-gap: var(--extranet-form-horizontal-spacing);
    row-gap: var(--extranet-form-vertical-spacing);
    /* in case of form error, highlights the inputs of type text/password only if no input is focused */ }
    .extranet-usi_form-content--has-errors:not(:focus-within) .extranet-usi_form-element--password input,
    .extranet-usi_form-content--has-errors:not(:focus-within) .extranet-usi_form-element--text input {
      border-color: red;
      box-shadow: 0 0 0.4rem 0.1rem rgba(255, 0, 0, 0.75); }
  .extranet-usi_form-element {
    max-width: 100%; }
    .extranet-usi_form-element label {
      color: var(--extranet-label-color);
      font-size: var(--extranet-label-font-size);
      font-weight: var(--extranet-label-font-weight);
      font-style: var(--extranet-label-font-style);
      line-height: var(--extranet-label-line-height); }
    .extranet-usi_form-element input::-webkit-input-placeholder {
      color: var(--extranet-placeholder-color);
      font-size: var(--extranet-placeholder-font-size);
      font-style: var(--extranet-placeholder-font-style); }
    .extranet-usi_form-element input::placeholder {
      color: var(--extranet-placeholder-color);
      font-size: var(--extranet-placeholder-font-size);
      font-style: var(--extranet-placeholder-font-style); }
    .extranet-usi_form-element--password, .extranet-usi_form-element--text {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-flex-direction: var(--extranet-form-element-orientation);
          -ms-flex-direction: var(--extranet-form-element-orientation);
              flex-direction: var(--extranet-form-element-orientation);
      -webkit-align-items: var(--extranet-form-element-alignment);
          -ms-flex-align: var(--extranet-form-element-alignment);
              align-items: var(--extranet-form-element-alignment); }
      .extranet-usi_form-element--password.no-label label, .extranet-usi_form-element--text.no-label label {
        display: none !important; }
      .extranet-usi_form-element--password label, .extranet-usi_form-element--text label {
        display: inline-block;
        margin: var(--extranet-label-margin); }
      .extranet-usi_form-element--password input[type="text"],
      .extranet-usi_form-element--password input[type="password"], .extranet-usi_form-element--text input[type="text"],
      .extranet-usi_form-element--text input[type="password"] {
        max-width: 100%;
        outline: none;
        line-height: var(--extranet-input-line-height);
        font-size: var(--extranet-input-font-size);
        color: var(--extranet-input-color);
        font-weight: var(--extranet-input-font-weight);
        background: var(--extranet-input-background);
        border: var(--extranet-input-border);
        border-radius: var(--extranet-input-border-radius);
        padding: var(--extranet-input-padding);
        width: var(--extranet-input-width); }
        .extranet-usi_form-element--password input[type="text"]:focus,
        .extranet-usi_form-element--password input[type="password"]:focus, .extranet-usi_form-element--text input[type="text"]:focus,
        .extranet-usi_form-element--text input[type="password"]:focus {
          border: var(--extranet-input-borderFocus); }
    .extranet-usi_form-element--password {
      position: relative; }
      .extranet-usi_form-element--password input {
        padding-right: 3.5rem !important;
        /* add padding to display the toggle; = toggle width + horizontal padding */ }
      .extranet-usi_form-element--password .extranet-usi_password-toggle {
        position: absolute;
        bottom: 0;
        right: 0;
        padding-right: 1rem;
        padding-left: .5rem;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        cursor: pointer; }
        .extranet-usi_form-element--password .extranet-usi_password-toggle svg {
          height: 2rem;
          width: 2rem;
          fill: var(--extranet-password-toggle-color); }
        .extranet-usi_form-element--password .extranet-usi_password-toggle-on, .extranet-usi_form-element--password .extranet-usi_password-toggle-off {
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-justify-content: center;
              -ms-flex-pack: center;
                  justify-content: center; }
        .extranet-usi_form-element--password .extranet-usi_password-toggle-on {
          display: none; }
        .extranet-usi_form-element--password .extranet-usi_password-toggle-off {
          display: -webkit-inline-flex;
          display: -ms-inline-flexbox;
          display: inline-flex; }
        .extranet-usi_form-element--password .extranet-usi_password-toggle.is-on .extranet-usi_password-toggle-off {
          display: none; }
        .extranet-usi_form-element--password .extranet-usi_password-toggle.is-on .extranet-usi_password-toggle-on {
          display: -webkit-inline-flex;
          display: -ms-inline-flexbox;
          display: inline-flex; }
    .extranet-usi_form-element--checkbox input {
      margin-left: .5rem; }
    .extranet-usi_form-element--submit {
      -webkit-appearance: button;
      transition: color .3s ease, background-color .3s ease, border-color .3s ease;
      cursor: pointer;
      outline: none;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-column-gap: .25rem;
              column-gap: .25rem;
      -webkit-align-self: var(--extranet-submit-alignment);
          -ms-flex-item-align: var(--extranet-submit-alignment);
              align-self: var(--extranet-submit-alignment);
      margin: var(--extranet-submit-margin);
      color: var(--extranet-submit-color);
      background: var(--extranet-submit-background);
      border: var(--extranet-submit-border);
      border-radius: var(--extranet-submit-border-radius);
      text-transform: var(--extranet-submit-text-transform);
      padding: var(--extranet-submit-padding);
      font-weight: var(--extranet-submit-font-weight);
      font-size: var(--extranet-submit-font-size); }
      .extranet-usi_form-element--submit:hover {
        color: var(--extranet-submit-colorHover);
        background: var(--extranet-submit-backgroundHover);
        border: var(--extranet-submit-borderHover); }
      .extranet-usi_form-element--submit svg {
        fill: currentColor;
        display: var(--extranet-submit-icon-display);
        width: var(--extranet-submit-icon-size);
        height: var(--extranet-submit-icon-size); }
      .extranet-usi_form-element--submit .extranet-usi_submit-text {
        display: var(--extranet-submit-text-display); }
  .extranet-usi_form-error {
    display: inline-block;
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    -webkit-align-self: var(--extranet-error-alignment);
        -ms-flex-item-align: var(--extranet-error-alignment);
                -ms-grid-row-align: var(--extranet-error-alignment);
            align-self: var(--extranet-error-alignment);
    color: var(--extranet-error-color);
    background: var(--extranet-error-background);
    border: var(--extranet-error-border);
    border-radius: var(--extranet-error-border-radius);
    padding: var(--extranet-error-padding);
    margin: var(--extranet-error-margin); }
  .extranet-usi .js-extranet-error-anchor {
    position: relative; }
    .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-top, .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-bottom {
      position: absolute;
      cursor: default;
      z-index: 1;
      margin: 0 !important; }
      .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-top:after, .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-bottom:after {
        content: '';
        pointer-events: none;
        position: absolute;
        left: 1rem;
        border: 10px solid transparent;
        /* 10px = the extra height added to the error message to add the .notify-top/bottom class in error-notify.js*/ }
      .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-top.hidden, .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-bottom.hidden {
        display: none; }
    .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-top {
      top: -10px;
      -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
              transform: translateY(-100%);
      box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2); }
      .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-top:after {
        bottom: .5px;
        /* avoids a very thin gap between the error box and the arrow */
        -webkit-transform: translateY(100%);
            -ms-transform: translateY(100%);
                transform: translateY(100%);
        border-top-color: var(--extranet-error-background); }
    .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-bottom {
      bottom: -10px;
      -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
              transform: translateY(100%);
      box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2); }
      .extranet-usi .js-extranet-error-anchor .js-extranet-error.notify-bottom:after {
        top: .75px;
        /* avoids a very thin gap between the error box and the arrow */
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
        border-bottom-color: var(--extranet-error-background); }