/*

Styles mykiwi

*/

:root {
  --text-color: #444444;
  --text-indication: #999999;
  --text-discret: #BBBBBB;
  --text-invert: #FFFFFF;
  --body-background: #F9FAFB;
  --menu-background: #242424;
  --menu-link: #DDDDDD;
  --menu-background-active: #333333;
  --menu-color: #FFFFFF;
  --link-color: #008CBA;
  --tab-link: #666666;
  --tab-link-border: #999999;
  --tab-link-background: #EEEEEE;
  --top-background: #FFFFFF;
  --title-color: #444444;
  --color-alt: #E53739;
  --color-search: #E53739;
  /* La même */
  --code-background: #F9F9F9;
  --background-highlight: #FFFFFF;
  --table-background: #FFFFFF;
  --kiwi: #7F971B;
  --good: #53982E;
  --bad: #E53739;
  --warning: #F05F30;
  --notice: #FCE356;
  --td-selected: #DDF5FA;
  --td-hover: #F3F4F6;
  /* #d6f0ff; */
  --input-border: #EEEEEE;
  --fieldset-border: #DDDDDD;
  --fieldset-background: #EFEFEF;
  --input-select: #EEEEEE;
  --input-background: #FFFFFF;
  --results-border: #F4F4F4;
  --results-alt: #F6F6F6;
  --ui-active: #B4E5F9;
  --ui-active-border: #7FD1E3;
  --radius: 0.5rem;
  --border-w: 1px;
  --padding-inside: 3rem;
  --padding-inside-mini: 1rem;
  --padding-layout: 2rem;
  --shadow: 3px 3px 9px rgba(0, 0, 0, 0.1);
}

/* Messages d'erreur PHP */
body>div[style] {
  margin: 2rem !important;
  padding: 2rem !important;
}

body>div[style] p,
body>div[style] h4 {
  margin: 0.5rem;
}

html {
  font-size: 62.5%;
  font-size: calc(1em * 0.625);
}

body {
  background: var(--body-background);
  font-weight: 400;
  font-size: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

/* On utilise un conteneur à part pour mieux gérer les erreurs PHP */
.body {
  flex-direction: row;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

img {
  border: 0;
}

.center {
  text-align: center;
}

.clear {
  clear: both;
}

hr {
  margin: 2em;
  border: 0;
  border-top: 1px solid var(--input-border);
  height: 1px;
}

/* Liens */

a {
  color: var(--link-color);
  background-color: transparent;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*
a.ext {
  padding-left: 24px;
  background: url(/img/icons/search.svg) no-repeat center left;
  background-size: contain;
}

a.dl {
  padding-left: 24px;
  background: url(/img/icons/file.svg) no-repeat center left;
  background-size: contain;
  line-height: 2;
}
*/

a.extranet {
  padding-left: 24px;
  background: url("/img/icons/external-link.svg") no-repeat center left;
  background-size: contain;
  line-height: 2;
}

/*
a.dl.odt {
  background-image: url(/img/icons/file-download.svg);
}

a.dl.pdf {
  background-image: url(/img/icons/file-download.svg);
}
*/

/* Titres */

h1,
h2,
h3 {
  color: var(--title-color);
  background-color: transparent;
  font-size: 1.8em;
  font-weight: 400;
  margin: 0 0 14px 0;
  padding: 15px 15px 10px 0;
}

h2 {
  font-size: 1.3em;
  color: var(--color-alt);
}

h3 {
  font-size: 1.1em;
  font-weight: 700;
}

code {
  font-family: Consolas, Monaco, "Courier New", Courier, monospace;
  background-color: var(--code-background);
  color: var(--text-color);
  display: block;
  margin: 14px 0 14px 0;
  padding: 12px 10px 12px 10px;
}

h2 img {
  vertical-align: middle;
}

/* Formulaires */

fieldset {
  border: var(--border-w) solid var(--fieldset-border);
  background-color: var(--fieldset-background);
  border-radius: 1em;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

legend {
  padding: 0.4rem 1rem;
  font-size: 1.5rem;
  background-color: var(--menu-background-active);
  color: var(--text-invert);
  border-radius: var(--radius);
}

details summary {
  cursor: pointer;
}

/* Grille sur très large écran */
@media (min-width: 2000px) {
  .edit-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
    grid-auto-flow: row;
  }

  /* .edit-form-grid fieldset {
    margin-bottom: 0;
  } */
  .edit .edit-form-grid .large,
  .edit .edit-form-grid textarea {
    width: 80%;
  }
}

/* Layout */

#container {
  flex-grow: 1;
  /*
  width: 100%;
  margin: 2em;
  */
}

/* Contenu central */

.content {
  padding-right: var(--padding-inside);
  clear: right;
  overflow: auto;
}

.content h1 {
  margin: 0;
  padding: 0;
}

/* Footer */

footer {
  text-align: right;
  font-size: 0.9em;
  padding: var(--padding-inside);
  clear: both;
}

/* Menu principal */

header,
.menu {
  background: var(--menu-background);
  color: var(--menu-color);
}

header {
  min-width: 24rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: var(--padding-layout);
  border-radius: calc(var(--radius) * 2);
}

header .logo {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  justify-content: center;
  gap: 1rem;
}

header .logo img {
  max-width: 5rem;
}

.menu .navigationDockView-closeButton {
  cursor: pointer;
  font-size: 1.5em;
  color: #FFFFFF;
  float: left;
}

.menu {
  /* TODO: supprimer ceci + le code HTML correspondant car plus besoin de menu "mobile" désormais */
  display: none;
  text-align: center;
  padding: 1em;
}

.menu img {
  max-height: 2em;
  vertical-align: middle;
}

.menu a:hover {
  text-decoration: none;
}

header.reveal {
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}

header nav li {
  margin: 1rem;
  border-radius: var(--radius);
  padding: 0;
  text-align: center;
  border-left: 5px solid transparent;
  border-top: 1px solid transparent;
}

header nav li a:hover,
header nav li.active a,
header nav li a:focus {
  opacity: 1;
}

header nav li a {
  display: flex;
  gap: 1rem;
  backface-visibility: hidden;
  opacity: 0.65;
  text-decoration: none;
  color: var(--menu-link);
  padding: 0.8em 0.8em;
  transition: color 0.3s ease;
  transition: opacity 0.3s ease;
  font-weight: 400;
  align-items: center;
}

header nav li.active {
  border-left: 5px solid var(--color-alt);
  background: var(--menu-background-active);
  opacity: 1;
}

header nav li:not(.active):hover {
  background: var(--menu-background-active);
  border-left-color: var(--kiwi);
}

header nav li.active a,
header nav li:not(.active) a:hover,
header nav li:not(.active) a:focus {
  color: var(--text-invert);
  text-decoration: none;
}

/* Sous-menu */

.top {
  display: flex;
  align-items: flex-start;
  margin: var(--padding-layout);
  margin-left: 0;
  border-radius: calc(var(--radius) * 2);
  justify-content: space-between;
  padding: var(--padding-inside);
  background-color: var(--top-background);
  border-bottom: 1px solid #E5E7EB;
}

.top .more {
  text-align: center;
  flex-grow: 1;
}

/* Liste de liens du sous-menu */

.topnav ul {
  padding: 0 1em 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.topnav li {
  list-style-type: none;
  line-height: 1.4em;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.topnav li a {
  border: var(--border-w) solid var(--tab-link-border);
  background-color: var(--tab-link-background);
  border-radius: var(--radius);
  line-height: 1.8em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  padding: 0.3em 0.7em;
  margin-right: 1em;
  color: var(--tab-link);
  display: flex;
  align-items: center;
}

.topnav li a img {
  margin-right: 0.5rem;
  opacity: 0.75;
}

/* Lien d'ajout */
.topnav li a.add {
  background: var(--kiwi);
  color: var(--text-invert);
  border-color: var(--kiwi);
}

/* Lien actif de la nav horizontale */
.topnav li.active a {
  background: var(--color-alt);
  color: var(--text-invert);
  border-color: transparent;
}

/* Focus sur un lien de la nav */
.topnav li a:hover,
.topnav li a:focus {
  /* :not(.add) / :not(.active) */
  /* background-color: var(--menu-background-active); */
  /* color: var(--text-invert); */
  /* box-shadow: 0 1px 2px rgba(145,145,145, .2); */
  /* filter: invert(); */
  filter: contrast(150%);
}

/* Icône inversée si le background est sombre */
.topnav li.active img,
.topnav li a.add img {
  filter: invert();
}

/* Footer */

footer a,
.discret,
footer {
  color: var(--text-discret);
}

/* Forms */

.edit label {
  color: var(--text-color);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-left: 16%;
  gap: 2rem;
}

/* Bouton delete */
.form-actions a {
  margin: 0.5em;
}

.edit .fr {
  display: flex;
}

.edit input[type="text"],
.edit input[type="date"],
.edit input[type="url"],
.edit input[type="email"],
.edit input[type="number"],
.edit input[type="password"],
.edit select,
.edit textarea {
  padding: 1rem;
  font-family: inherit;
  font-size: inherit;
  border: var(--border-w) solid var(--input-border);
  border-radius: var(--radius);
  background-color: var(--input-background);
}

.edit input[type="text"]:focus,
.edit input[type="date"]:focus,
.edit input[type="url"]:focus,
.edit input[type="email"]:focus,
.edit input[type="number"]:focus,
.edit input[type="password"]:focus,
.edit select:focus,
.edit textarea:focus {
  outline: none;
  border-color: var(--link-color);
}

.edit textarea[readonly],
.edit input[type="text"][readonly] {
  background: none;
}

.edit textarea {
  width: 50%;
}

.edit .now,
.edit .tva_calc {
  cursor: pointer;
  background: none;
  border: 0;
}

.edit .now {
  color: var(--link-color);
  font-weight: 400;
}

.edit input:invalid,
.edit input.warning {
  border-color: var(--notice);
}

.edit input.positif {
  color: var(--good);
}

.edit input.negatif {
  color: var(--bad);
}

.edit label:first-child {
  min-width: 11%;
  width: 11%;
  display: inline-block;
  vertical-align: top;
  padding-right: 1%;
  text-align: right;
}

.edit label:first-child,
.edit .message {
  padding-top: 0.5em;
}

.edit .message {
  display: inline-block;
}

.edit input[type="checkbox"] {
  margin-top: 0.7em;
}

.edit label img {
  vertical-align: middle;
  margin-left: 5px;
  max-width: 24px;
  max-height: 24px;
}

.edit .editcontainer {
  display: inline-block;
  padding-top: 0.5em;
}

/* Boutons */

[type="submit"],
[type="button"],
button {
  line-height: 2em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  padding: 0.4rem 1.25rem;
  border: 0;
  color: var(--text-invert);
  background: none;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--link-color);
  font-size: inherit;
  font-weight: 400;
  color: var(--link-color);
}

.action-like {
  display: flex;
  gap: 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--fieldset-border);
  background-color: var(--table-background);
}

.edit .delete,
.edit .view,
.edit .close {
  color: var(--text-color);
  padding: 0.3em 1.25em;
  line-height: 2em;
  text-decoration: none;
  display: inline-block;
}

[type="submit"]:hover {
  border-color: #0A6DA9;
  /* Bleu plus foncé */
  background-color: #138DC1;
  /* Bleu plus clair */
  color: var(--text-invert);
}

[type="submit"][value="Dupliquer"] {
  border-color: var(--kiwi);
  color: var(--kiwi);
}

[type="submit"][value="Dupliquer"]:hover {
  border-color: #37791B;
  /* Vert plus foncé */
  background-color: var(--kiwi);
  color: var(--text-invert);
}

.content .delete {
  border: var(--border-w) solid var(--color-alt);
  border-radius: var(--radius);
  color: var(--color-alt);
}

.content .delete:hover {
  background: var(--color-alt);
  color: var(--text-invert);
  border-color: var(--color-alt);
}

button:hover,
a.btn:hover,
[type="submit"]:hover,
.delete:hover,
.close:hover,
.view:hover,
[type="submit"]:focus,
.formrecherche .btn:hover,
.formrecherche .btn:focus {
  transition: 0.25s;
}

button img {
  vertical-align: -10% !important;
}

/* Formulaires header */

.formrecherche .btn {
  color: var(--text-invert);
  background: var(--color-search);
  border-color: var(--color-search);
  text-decoration: none;
  padding: 0.3em 0.7em;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.formrecherche,
.formyear {
  display: flex;
}

.formrecherche {
  flex-grow: 1;
  justify-content: flex-end;
}

/* Année de recherche */
.formyear {
  min-height: 3em;
}

.formyear select {
  padding: 0.3em 0.6em;
  vertical-align: top;
  color: var(--text-color);
  margin: 0 0.5em;
  border: none;
  font-size: inherit;
  background: var(--input-select);
  border-radius: var(--radius);
}

/* Champ de recherche */

#q {
  min-width: 75%;
  border: 0;
  padding: 0.5em 1em;
  line-height: 150%;
  font-size: inherit;
  border: var(--border-w) solid var(--color-search);
  border-radius: var(--radius) 0 0 var(--radius);
}

.top :focus {
  outline: none;
}

/* Commun et tableaux */

.content canvas {
  background: #FFFFFF;
  margin: 0 0 3em 0;
}

th {
  text-align: left;
}

table .empty {
  background: transparent !important;
  border: 0 !important;
}

table.results {
  border-spacing: 1px;
  width: 100%;
  line-height: 2;
  border-collapse: collapse;
}

/* Fusion avec la ligne du dessus */
table.results tr.fusion td {
  border-top: 2px solid #FFFFFF;
}

table.results .header th {
  background-color: transparent;
}

.statssessions table.results th,
.statssessions table.results td:nth-child(2) {
  width: 6em;
}

table.results a {
  text-decoration: none;
}

table.results a:hover {
  text-decoration: underline;
}

/* Cellules du tableau de résultats */
table.results td {
  background-color: var(--table-background);
  padding: 1.5em 1em;
  border-bottom: 1px solid var(--results-border);
  vertical-align: top;
}

table.results .alt {
  background-color: var(--results-alt);
}

table.results .id {
  width: 2em;
  color: var(--text-indication);
  text-align: center;
}

table.results .id a {
  color: inherit;
}

table.results .mois th {
  background: var(--results-border);
}

table.results .somme {
  text-align: right;
  white-space: nowrap;
}

table.results .somme a {
  padding: 2px 0 2px 20px;
}

.results .totalm .panic,
.results .totalm .good,
.results .totalm .warning,
.results .totalg .panic,
.results .totalg .good,
.results .totalg .warning,
.results .totaly .panic,
.results .totaly .good,
.results .totaly .warning,
.results .totalm td,
.results .totalg td,
.results .totaly td,
.results .totals {
  color: var(--text-indication);
}

/* Total sélectionné */
table.results .totalabs {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  box-shadow: var(--shadow);
  display: none;
}

/* On affiche juste s'il y a une somme pertinente */
table.results .totalabs:has(#totals_ttc:not(:empty)) {
  display: block;
  border: 2px solid var(--color-search);
}

table.results .totalabs td {
  background: var(--table-background);
}

/* Total de statistiques */
table.results .total td {
  background: var(--results-border);
}

/* Cellule individuelle de total */
table.results .addition {
  border-top: 2px solid var(--text-color);
}

/* Marge supplémentaire pour séparer le total général */
.results .totalg {
  border-top: 2rem solid transparent;
}

/* Pas de background pour les totaux en bas de page */
.results .totalg td,
.results .totals td {
  background-color: transparent;
}

/* Survol de ligne dans tableau */
table.results tr:hover:not(.mois):not(.totalm):not(.totalg):not(.totaly):not(.totals):not(.header),
.planning .today th {
  background: var(--td-hover);
}

/* Sélection de cellules au clic */
table.results tr.sel td,
table.results tr.sel:not(.mois) th {
  background: var(--td-selected);
}

table.results tr.minus td {
  opacity: 0.5;
}

/* Ligne active dans un tableau */
table.results tr.active td {
  background: var(--notice);
}

table.results th {
  padding: 0.75em 2em 0.75em 1em;
  color: var(--text-color);
  font-weight: 400;
  text-transform: uppercase;
}

table.results:not(.statsyear) th {
  font-size: smaller;
}

table .date,
.formation_reference,
table.conges .conge_status,
table.conges .conge_fk_user,
.inventaire_fk_user,
.compta_reglement,
.devis_reference {
  white-space: nowrap;
}

.formation_status,
.contrat_status,
.inventaire_status,
.devis_status,
.mysql_status,
.git_status,
.svn_status,
.domaine_status,
.client_status,
.devisdetails_im {
  width: 3em;
  text-align: center;
}

.inventaire_status img,
.conge_status img,
.edit p img,
.session_lieu img,
.session_effectif img,
.formation_reference img,
.compta_reglement img,
.results img {
  vertical-align: middle;
}

.compta_reglement img {
  width: 24px;
}

/* Copier-coller */

table.results .clipboard {
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;

  &:hover {
    outline: 1px dotted #ccc;
    background-color: var(--td-selected);
  }

  &.clipboard-ok {
    outline: 1px dotted green;
  }
}

/* Messages */

.dump {
  background: var(--code-background);
  padding: 2em 1em;
  margin: 2em 0 2em 0;
  box-shadow: var(--shadow);
}

.dump[contenteditable] {
  font-family: sans-serif;
  font-size: initial;
  color: initial;
  /* Pour éviter les polices custom copier-coller dans les mails */
}

.padwarning,
.padgood,
.padpanic {
  border-radius: var(--radius);
  color: var(--text-invert);
  padding: 0 6px;
  display: inline-block;
  /* évite les retours à la ligne */
}

.error {
  color: var(--bad);
}

.info {
  float: left;
}

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

.padwarning {
  background: var(--warning);
}

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

.padgood {
  background: var(--good);
}

.panic {
  color: var(--bad);
}

.padpanic {
  background: var(--bad);
}

.titleprint {
  display: none;
  font-weight: 700;
  margin-left: var(--padding-inside);
}

tr.high td {
  background: var(--notice);
  color: var(--text-color);
}

/* Highlight texte recherché */
/* Règlement à venir */
span.high,
span.incoming {
  background: var(--notice);
  padding: 3px 2px;
  border-radius: 3px;
}

/* Indication inline par exemple pour TVA */
.edit .indic {
  color: var(--text-indication);
  margin-left: 1rem;
}

/* Indication à la ligne (bloc) */
.edit .indication {
  color: var(--text-indication);
  margin: 0;
  margin-left: 16%;
  position: relative;
  top: -0.5em;
}

.process {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

/* Stats */

table.stats,
table.statsyear {
  width: 90%;
  margin-bottom: 1em;
}

table.statsyear .separ td,
table.statsyear .separ th {
  padding-top: 1.5em;
}

table.comptastats {
  table-layout: fixed;
}

table.comptastats th {
  width: 27%;
  text-align: right;
}

table.comptastats td.somme {
  width: 10%;
}

.statsformations .statsyear th:first-child {
  width: 40% !important;
}

table.stats tr:first-child th {
  text-align: right;
}

.count {
  color: var(--text-indication);
  float: right;
  margin: 1em 0;
}

/* Etiquette de champ d'aide (TVA) */
.field {
  background: #98CCFF;
  /* Sur-mesure */
  padding: 0.5em;
}

/* Champ d'aide avec valeur */
input.field {
  width: 7em;
  font-size: inherit;
  box-sizing: border-box;
  background: inherit;
}

input.field.hidden,
.is-hidden {
  display: none;
}

/* Inventaire */

.inventaire_commentaire {
  width: 30%;
}

.inventaire_fk_user img,
.conge_fk_user img,
.session_formateur img,
.formation_effectif img,
.devis_details_add img {
  vertical-align: middle;
}

/* Formations */

/* Lien vers l'extranet */
.extralink {
  cursor: pointer;
}

/* Personnes */

.personne_avatar {
  width: 100px;

  img {
    max-width: 8rem;
  }
}

/* Compta */

body .edit .big {
  font-size: 1.5em;
}

.edit .medium {
  min-width: 30%;
}

.edit .large {
  min-width: 50%;
}

.editlink {
  width: 2em;
  text-align: center;
}

.editlink a {
  opacity: 0.5;
}

.editlink a:hover {
  opacity: 1;
}

/* Congés */

table.conges small {
  color: var(--warning);
}

/* Devis */

.devis_details {
  border-collapse: collapse;
  width: 100%;
}

@media (max-width: 900px) {
  .devis_detail {
    display: flex;
    flex-direction: column;
    min-width: 90vw;

    /* Hack ? */
    .devis_actions {
      order: -1;
    }
  }
}

.group-label {
  display: flex;
}

.devis_details_container {
  flex-grow: 1;
}

.devis_detail td {
  padding-bottom: 2em;
}

.devis_detail td:first-child {
  width: 100%;
}

.devis_details textarea {
  width: 96%;
  resize: vertical;
}

.devis_details .devis_actions,
.devis_details .devis_params {
  vertical-align: top;
  line-height: 2em;
  white-space: nowrap;
  text-align: right;
  padding: 0 1em;
}

.devis_actions {
  max-width: 6em;
}

.devis_actions button {
  background: none;
  border: 0;
  margin: 0;
}

.devis_details .devis_ht {
  text-align: right;
  width: 3em;
}

.devis_details .somme {
  text-align: right;
  width: 3em;
}

.devis_details .devis_dt,
.devis_details .devis_ds {
  font-weight: 700;
  width: 96%;
  border-bottom: 1px solid var(--input-border) !important;
}

.devis_details .devis_qt {
  text-align: center;
  width: 3em;
}

.devis_details .devis_ds,
.devis_details .devis_lv {
  width: 96%;
  color: var(--text-color);
}

.devis_details .devis_lv {
  border-top: 1px solid var(--input-border) !important;
  position: relative;
  top: -5px;
}

/* Popin d'insertion de détails dans un devis */

.details_insert {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50rem, 1fr));
}

.details_insert li {
  display: flex;
  gap: 2rem;
  flex-shrink: 0;
  padding: 0.5rem;
  cursor: pointer;
  max-width: 50rem;
  align-items: center;
}

.details_insert img {
  max-width: 2.5vw;
  max-height: 2.5vw;
}

.details_insert li:hover {
  background: var(--background-highlight);
}

.devis_detail_somme,
.devis_details_total,
.devis_detail_h {
  text-align: right;
  border: 0 !important;
  max-width: 100%;
}

.devis_detail_somme,
.devis_detail_h {
  max-width: 4em;
}

.devis_details_img {
  margin: 1em 0;
  cursor: pointer;
}

.devis_details_img img {
  max-width: 40px;
  opacity: 0.8;
  margin: 0.5rem;
  padding: 0.25rem;
  border: 3px solid transparent;
}

.devis_details_img img:hover {
  opacity: 1;
}

.devis_details_img img.selected {
  opacity: 1;
  background: var(--background-highlight);
  border: 3px solid var(--warning);
  border-radius: 1rem;
}

/* ---- MEDIA QUERIES ----- */

/* Impression */
@media print {

  body>header,
  .topnav,
  .formyear,
  .formrecherche,
  #container>footer,
  .editlink,
  .count,
  .noprint,
  .totalm,
  .totalg,
  .inventaire_commentaire {
    display: none !important;
  }

  a.ext,
  a.mailing {
    padding: 0;
  }

  .compta_reglement img {
    display: none;
  }

  td,
  th {
    padding: 0.1em 1em !important;
    font-size: 75% !important;
    line-height: 1.2em !important;
  }

  tr:not(.mois) td {
    border-top: 1px solid var(--results-border);
  }

  .titleprint {
    display: block;
  }

  body,
  html,
  .content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .padwarning,
  .padgood,
  .padpanic {
    background: transparent;
  }
}

/* RWD Big screen */

@media (min-width: 1280px) {
  .devis_details_container {
    max-width: 70%;
  }
}

@media (min-width: 900px) {
  .edit label:first-child {
    min-width: 15%;
    width: 15%;
  }
}

/* RWD tablet+mobile */

@media (max-width: 900px) {

  .body,
  .top {
    flex-direction: column;
  }

  .top {
    align-items: stretch;
    margin: 0 var(--padding-layout);
  }

  .top,
  .content,
  footer {
    padding: var(--padding-layout);
  }

  /*
  #container {
    padding: 0 1em;
    margin: 0;
  }
  */
  .topnav li {
    margin-bottom: 1rem;
  }

  h1 {
    margin: 0;
  }

  body {
    width: 100%;
  }

  body header {
    box-sizing: border-box;
  }

  header .logo {
    display: none;
  }

  header ul {
    display: flex;
  }

  body header nav li.active {
    border-left: none;
    border-top: 5px solid var(--color-alt);
  }

  footer {
    text-align: center;
  }

  .formrecherche {
    margin: 0;
    width: auto;
    margin-bottom: 0.5em;
    text-align: left;
    float: none;
    justify-content: start;
  }

  .form-actions {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 0; */
  }

  .content .edit {
    margin: 0;
  }

  .edit .fr {
    display: block;
  }

  .edit .indication {
    margin-left: 0;
    top: 0;
  }

  .content p {
    margin: 0;
  }

  .content .edit [type="submit"] {
    margin: 0.5em;
  }

  .edit h1 {
    padding: 0;
  }

  .edit label,
  .edit label:first-child {
    padding: 1em 0 0.5em 0;
    /* display: block; */
    width: 90%;
    text-align: left;
    margin: 0;
  }

  .edit textarea,
  .edit .large {
    width: 90%;
  }

  .group-label {
    display: block;
  }

  .compta_reglement {
    white-space: normal;
  }

  table.statsyear th,
  table.statsyear td,
  table.statsyear td.somme {
    display: block;
    width: 100%;
    /* padding: 0.5rem; */
  }

  table.statsyear th {
    margin-top: 3rem;
  }
}

/* ---- PLUGINS ----- */

/* Radios stylisés en boutons */

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.radios input[type="radio"],
.radios input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.radios input[type="radio"]+label,
.radios input[type="checkbox"]+label {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--input-border);
  padding: 0.8rem 2rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  background-color: var(--input-background);
  cursor: pointer;
}

.radios input[type="radio"]:checked+label,
.radios input[type="checkbox"]:checked+label {
  background-color: var(--ui-active);
  border-color: var(--ui-active-border);
}

/* Hack */
.radios label[for="compta_ref_tva"] {
  place-self: center;
}

/*! Hint.css - v1.1.0 - 2013-02-20
* https://github.com/chinchang/hint.css
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */

.hint {
  position: relative;
  display: inline-block;
}

.hint::before,
.hint::after {
  position: absolute;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  transition: 0.1s ease;
}

.hint:hover::before,
.hint:hover::after {
  opacity: 1;
}

.hint::before {
  content: "";
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  z-index: 1000001;
}

.hint::after {
  content: attr(data-hint);
  background: #383838;
  color: #FFFFFF;
  text-shadow: 0 -1px 0 #000000;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

.hint--top::before {
  border-top-color: #383838;
  margin-bottom: -12px;
}

.hint--bottom::before {
  border-bottom-color: #383838;
  margin-top: -12px;
}

.hint--left::before {
  border-left-color: #383838;
  margin-right: -12px;
  margin-bottom: -6px;
}

.hint--right::before {
  border-right-color: #383838;
  margin-left: -12px;
  margin-bottom: -6px;
}

.hint--top::after {
  margin-left: -18px;
}

.hint--top::before,
.hint--top::after {
  bottom: 100%;
  left: 50%;
}

.hint--top:hover::before,
.hint--top:hover::after {
  transform: translateY(-8px);
}

.hint--bottom::after {
  margin-left: -18px;
}

.hint--bottom::before,
.hint--bottom::after {
  top: 100%;
  left: 50%;
}

.hint--bottom:hover::before,
.hint--bottom:hover::after {
  transform: translateY(8px);
}

.hint--right::after {
  margin-bottom: -14px;
}

.hint--right::before,
.hint--right::after {
  left: 100%;
  bottom: 50%;
}

.hint--right:hover::before,
.hint--right:hover::after {
  transform: translateX(8px);
}

.hint--left::after {
  margin-bottom: -14px;
}

.hint--left::before,
.hint--left::after {
  right: 100%;
  bottom: 50%;
}

.hint--left:hover::before,
.hint--left:hover::after {
  transform: translateX(-8px);
}

.hint--error::after {
  background-color: #B34E4D;
  text-shadow: 0 -1px 0 #5A2626;
}

.hint--error.hint--top::before {
  border-top-color: #B34E4D;
}

.hint--error.hint--bottom::before {
  border-bottom-color: #B34E4D;
}

.hint--error.hint--left::before {
  border-left-color: #B34E4D;
}

.hint--error.hint--right::before {
  border-right-color: #B34E4D;
}

.hint--warning::after {
  background-color: #C09854;
  text-shadow: 0 -1px 0 #6D5228;
}

.hint--warning.hint--top::before {
  border-top-color: #C09854;
}

.hint--warning.hint--bottom::before {
  border-bottom-color: #C09854;
}

.hint--warning.hint--left::before {
  border-left-color: #C09854;
}

.hint--warning.hint--right::before {
  border-right-color: #C09854;
}

.hint--info::after {
  background-color: #3986AC;
  text-shadow: 0 -1px 0 #193C4C;
}

.hint--info.hint--top::before {
  border-top-color: #3986AC;
}

.hint--info.hint--bottom::before {
  border-bottom-color: #3986AC;
}

.hint--info.hint--left::before {
  border-left-color: #3986AC;
}

.hint--info.hint--right::before {
  border-right-color: #3986AC;
}

.hint--success::after {
  background-color: #458746;
  text-shadow: 0 -1px 0 #1A331A;
}

.hint--success.hint--top::before {
  border-top-color: #458746;
}

.hint--success.hint--bottom::before {
  border-bottom-color: #458746;
}

.hint--success.hint--left::before {
  border-left-color: #458746;
}

.hint--success.hint--right::before {
  border-right-color: #458746;
}

.hint--always::after,
.hint--always::before {
  opacity: 1;
}

.hint--always.hint--top::after,
.hint--always.hint--top::before {
  transform: translateY(-8px);
}

.hint--always.hint--bottom::after,
.hint--always.hint--bottom::before {
  transform: translateY(8px);
}

.hint--always.hint--left::after,
.hint--always.hint--left::before {
  transform: translateX(-8px);
}

.hint--always.hint--right::after,
.hint--always.hint--right::before {
  transform: translateX(8px);
}

.hint--rounded::after {
  border-radius: 4px;
}

/*
  Charts pour dashboard
  https://codepen.io/maoberlehner/pen/jwVWQz
*/

.dashboard .charts {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

/**
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle {
  /* animation: circle-chart-fill 0.5s reverse; */
  /* 1 */
  transform: rotate(-90deg);
  /* 2, 3 */
  transform-origin: center;
  /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround (https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart/#part-4-internet-explorer-strikes-back).
 */
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1, -1);
  /* 1, 2, 3 */
}

/*
.circle-chart__info {
  animation: circle-chart-appear 0.5s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}
*/

@keyframes circle-chart-fill {
  to {
    stroke-dasharray: 0 100;
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Welcome */
.welcome a {
  color: #888;
  text-decoration: none;
}

.welcome ul {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  text-align: center;
  margin: 0;
  padding: 0;
}

.welcome li {
  display: inline-block;
  list-style-type: none;
  text-align: center;
  margin: 2em;
}

.welcome img {
  display: block;
  margin: 1em;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}

.welcome hr {
  border-color: #fff;
  border-top-style: solid;
}