/* jQuery Autocomplete plugin */

.ac_results {
  padding: 0;
  background-color: var(--ac-results-background);
  border: 1px dotted var(--ac-results-border);
  overflow: hidden;
  z-index: 99999;

  ul {
    width: 100%;
    list-style: none;
    list-style-position: outside;
    padding: 0;
    margin: 0;
  }

  li {
    margin: 0;
    padding: 2px 5px;
    cursor: default;
    display: block;
    font-size: 1em;
    line-height: 16px;
    overflow: hidden;
  }
}

.ac_loading {
  background: url('loader.gif') right center no-repeat;
  background-color: transparent;
}

.ac_odd {
  background-color: var(--ac-results-background);
}

.ac_over {
  color: var(--ac-results-over);
  background-color: var(--ac-results-over-background);
}

/* password show/hide */

.pw-show,
.pw-hide {
  width: 2.25em;
  height: 1.75em;
  margin-left: 0.25em;

  &,
  &:hover,
  &:focus,
  &:active {
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  &:hover,
  &:focus,
  &:active {
    background-color: #fff;
  }
}
input.maximal.pwd_helper {
  max-width: calc(100% - 3em);
}

body.auth {
  .pw-show,
  .pw-hide {
    height: 2em;
  }
}

.pw-show {
  &,
  &:hover,
  &:active,
  &:focus {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxODUwIDE4NTAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXRoIGQ9Ik0xNjk0LjM3MyA2ODMuODk4cS0xNTItMjM2LTM4MS0zNTMgNjEgMTA0IDYxIDIyNSAwIDE4NS0xMzEuNSAzMTYuNS0xMzEuNSAxMzEuNS0zMTYuNSAxMzEuNS0xODUgMC0zMTYuNS0xMzEuNS0xMzEuNS0xMzEuNS0xMzEuNS0zMTYuNSAwLTEyMSA2MS0yMjUtMjI5IDExNy0zODEgMzUzIDEzMyAyMDUgMzMzLjUgMzI2LjUgMjAwLjUgMTIxLjUgNDM0LjUgMTIxLjUgMjM0IDAgNDM0LjUtMTIxLjUgMjAwLjUtMTIxLjUgMzMzLjUtMzI2LjV6bS03MjAtMzg0cTAtMjAtMTQtMzQtMTQtMTQtMzQtMTQtMTI1IDAtMjE0LjUgODkuNS04OS41IDg5LjUtODkuNSAyMTQuNSAwIDIwIDE0IDM0IDE0IDE0IDM0IDE0IDIwIDAgMzQtMTQgMTQtMTQgMTQtMzQgMC04NiA2MS0xNDcgNjEtNjEgMTQ3LTYxIDIwIDAgMzQtMTQgMTQtMTQgMTQtMzR6bTg0OCAzODRxMCAzNC0yMCA2OS0xNDAgMjMwLTM3Ni41IDM2OC41LTIzNi41IDEzOC41LTQ5OS41IDEzOC41LTI2MyAwLTQ5OS41LTEzOS0yMzYuNS0xMzktMzc2LjUtMzY4LTIwLTM1LTIwLTY5IDAtMzQgMjAtNjkgMTQwLTIyOSAzNzYuNS0zNjggMjM2LjUtMTM5IDQ5OS41LTEzOSAyNjMgMCA0OTkuNSAxMzkgMjM2LjUgMTM5IDM3Ni41IDM2OCAyMCAzNSAyMCA2OXoiLz48L3N2Zz4K');
  }
}

.pw-hide {
  &,
  &:hover,
  &:active,
  &:focus {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxODUwIDE4NTAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXRoIGQ9Ik01ODUuMzczIDEwMTMuMzRsNzgtMTQxcS04Ny02My0xMzYtMTU5LTQ5LTk2LTQ5LTIwMyAwLTEyMSA2MS0yMjUtMjI5IDExNy0zODEgMzUzIDE2NyAyNTggNDI3IDM3NXptMzg5LTc1OXEwLTIwLTE0LTM0LTE0LTE0LTM0LTE0LTEyNSAwLTIxNC41IDg5LjUtODkuNSA4OS41LTg5LjUgMjE0LjUgMCAyMCAxNCAzNCAxNCAxNCAzNCAxNCAyMCAwIDM0LTE0IDE0LTE0IDE0LTM0IDAtODYgNjEtMTQ3IDYxLTYxIDE0Ny02MSAyMCAwIDM0LTE0IDE0LTE0IDE0LTM0em0zNjMtMTkxcTAgNy0xIDktMTA1IDE4OC0zMTUgNTY2LTIxMCAzNzgtMzE2IDU2N2wtNDkgODlxLTEwIDE2LTI4IDE2LTEyIDAtMTM0LTcwLTE2LTEwLTE2LTI4IDAtMTIgNDQtODctMTQzLTY1LTI2My41LTE3My0xMjAuNS0xMDgtMjA4LjUtMjQ1LTIwLTMxLTIwLTY5IDAtMzggMjAtNjkgMTUzLTIzNSAzODAtMzcxIDIyNy0xMzYgNDk2LTEzNiA4OSAwIDE4MCAxN2w1NC05N3ExMC0xNiAyOC0xNiA1IDAgMTggNiAxMyA2IDMxIDE1LjUgMTggOS41IDMzIDE4LjUgMTUgOSAzMS41IDE4LjUgMTYuNSA5LjUgMTkuNSAxMS41IDE2IDEwIDE2IDI3em0zNyA0NDdxMCAxMzktNzkgMjUzLjUtNzkgMTE0LjUtMjA5IDE2NC41bDI4MC01MDJxOCA0NSA4IDg0em00NDggMTI4cTAgMzUtMjAgNjktMzkgNjQtMTA5IDE0NS0xNTAgMTcyLTM0Ny41IDI2Ny0xOTcuNSA5NS00MTkuNSA5NWw3NC0xMzJxMjEyLTE4IDM5Mi41LTEzNyAxODAuNS0xMTkgMzAxLjUtMzA3LTExNS0xNzktMjgyLTI5NGw2My0xMTJxOTUgNjQgMTgyLjUgMTUzIDg3LjUgODkgMTQ0LjUgMTg0IDIwIDM0IDIwIDY5eiIvPjwvc3ZnPgo=');
  }
}

// datetime today helpe
.dt-today {
  width: 1.5em;
  height: 1.5em;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  & {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSIjZmZmZmZmIi8+PHBhdGggZD0iTTE5IDNoLTFWMmMwLS41NS0uNDUtMS0xLTFzLTEgLjQ1LTEgMXYxSDhWMmMwLS41NS0uNDUtMS0xLTFzLTEgLjQ1LTEgMXYxSDVjLTEuMTEgMC0xLjk5LjktMS45OSAyTDMgMTljMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTEgMTZINmMtLjU1IDAtMS0uNDUtMS0xVjhoMTR2MTBjMCAuNTUtLjQ1IDEtMSAxek04IDEwaDNjLjU1IDAgMSAuNDUgMSAxdjNjMCAuNTUtLjQ1IDEtMSAxSDhjLS41NSAwLTEtLjQ1LTEtMXYtM2MwLS41NS40NS0xIDEtMXoiLz48L3N2Zz4K');
  }

  &:hover,
  &:active,
  &:focus {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMmMwLS41NS0uNDUtMS0xLTFzLTEgLjQ1LTEgMXYxSDhWMmMwLS41NS0uNDUtMS0xLTFzLTEgLjQ1LTEgMXYxSDVjLTEuMTEgMC0xLjk5LjktMS45OSAyTDMgMTljMCAxLjEuODkgMiAyIDJoMTRjMS4xIDAgMi0uOSAyLTJWNWMwLTEuMS0uOS0yLTItMnptLTEgMTZINmMtLjU1IDAtMS0uNDUtMS0xVjhoMTR2MTBjMCAuNTUtLjQ1IDEtMSAxek04IDEwaDNjLjU1IDAgMSAuNDUgMSAxdjNjMCAuNTUtLjQ1IDEtMSAxSDhjLS41NSAwLTEtLjQ1LTEtMXYtM2MwLS41NS40NS0xIDEtMXoiLz48L3N2Zz4K');
  }
}

// Specific contexts
#login-screen {
  #user_pwd.pwd_helper,
  #new_pwd.pwd_helper,
  #new_pwd_c.pwd_helper {
    width: calc(100% - 2.51em);
  }
}

/* password strength indicator */
.pw-strength-meter {
  display: block;
}

/* ------------------------------------------------------------------ navigation */

/* selects accès rapide */

.anchor-nav-sticky {
  background: var(--nav-background);
  position: sticky;
  top: 0;
  padding: 0.5em 0;
}

.anchor-nav {
  background: var(--nav-background);
  margin: 0;

  label {
    vertical-align: bottom;
  }
}

/* nav links */

.nav_prevnext {
  margin-bottom: 2em;
  color: var(--nav-background);
}

.nav_prevnext a,
a.back {
  color: var(--nav-prevnext);
  border: 1px solid var(--nav-prevnext-border);
  padding: 2px 1.5em;
  border-radius: 0.75em;
  background-color: var(--nav-prevnext-background);
}

a.back::before {
  content: '\ab\a0';
}

a.onblog_link {
  color: var(--onblog-link);
  float: right;
  border: 1px solid var(--onblog-link-border);
  padding: 2px 1.5em;
  border-radius: 0.75em;
  background-color: var(--onblog-link-background);
  box-shadow: 0 1px 1px var(--onblog-link-shadow);
}

img.go_home {
  width: 1em;
  height: auto;
}

/* Pagination */

.pager {
  margin: 2em 0 1em 0;
  clear: left;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li,
  input {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.33em 0 0;
    padding: 0;
    text-align: center;
  }

  .btn {
    border: 1px solid var(--pager-border);
    background-color: var(--pager-background);
    color: var(--pager-link);
    border-radius: 3px;
    overflow: hidden;

    img {
      width: 1em;
      height: auto;
    }

    &.no-link {
      border-color: var(--pager-border);
      background-color: var(--pager-off-background);
      padding: 1px 3px 0;
    }
  }

  .active {
    padding: 4px 12px;
    color: var(--pager-active);
  }

  .direct-access {
    margin-left: 2em;

    input[type='text'] {
      border: 1px solid var(--pager-border);
      padding: 3px 8px;
      margin-left: 0.25em;
      background-color: var(--pager-input-background);
    }

    input[type='submit'] {
      padding: 3px 6px;
    }
  }

  a {
    display: block;
    padding: 0 3px;
    border: none;

    &:hover,
    &:focus {
      background-color: var(--pager-background-over);
    }
  }
}

.index {
  .btn.no-link,
  a {
    padding: 2px 8px 3px;
    font-variant: small-caps;
  }

  li {
    margin-bottom: 3px;
  }

  a {
    font-weight: bold;
  }

  .btn.no-link {
    color: var(--index-no-link);
  }

  .active {
    padding: 4px 8px;
    color: var(--index-active);
    background: var(--index-active-background);
    border-radius: 3px;
    font-variant: small-caps;
  }
}

/* Etapes */

.step {
  float: left;
  margin: 3px 10px 2px 0;
  padding: 5px 0.5em;
  color: var(--step);
  background: var(--step-background);
  border: 1px solid var(--step-border);
  border-radius: 3px;
  font-weight: bold;
}

/* ------------------------------------------------------------------------- indicateurs */

.mark-attach {
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  padding-left: 12px;
  background: var(--mark-attach-img) no-repeat;
  filter: var(--mark-attach-filter);
}

/* ---------------------------------------------------------------- utilisables partout  */

.legible {
  font-size: 1.16em;
  max-width: 62em;
}

.fieldset {
  background: var(--fieldset-background);
  border: 1px solid var(--fieldset-border);
  border-radius: 3px;
  padding: 1em 0.7em 0.5em;
  margin-bottom: 1em;

  h3 {
    margin-top: 0;
  }

  hr {
    background-color: var(--fieldset-border);
    border-width: 0;
    margin: 1em 0;
  }

  &:focus-within {
    background-color: var(--fieldset-focus-background);
  }
}

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

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

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

.no-margin,
label.no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

.vertical-separator {
  margin-top: 2em;
}

p.clear.vertical-separator {
  padding-top: 2em;
}

.border-top {
  border-top: 1px solid var(--link-border);
  padding-top: 1em;
  margin-top: 1em;
}

.grid {
  background: url('grid.png') repeat 0 0;
  background-color: transparent;
}

ul.nice {
  margin: 1em 0;
  padding: 0 0 0 2em;
  list-style: square;

  li {
    margin: 0;
    padding: 0;
  }
}

ul.from-left {
  list-style-type: none;
  padding-left: 0;
  margin: 1em 0;

  > li {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  ul {
    list-style-type: square;
  }
}

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

/* caché pour tout le monde */

.hide,
.button.hide {
  display: none !important;
}

/* Caché sauf pour les revues d'écran */

.hidden,
.with-js .out-of-screen-if-js {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* caché si js est inactif */

.no-js .hidden-if-no-js {
  display: none;
}

/* caché si js est actif */

.with-js .hidden-if-js {
  display: none;
}

/* Tailles des icônes SVG */

.icon-small {
  width: 12px;
  height: 12px;
}

.icon-mini {
  width: 16px;
  height: 16px;
}

.icon-large {
  width: 64px;
  height: 64px;
}
