/* #dialogue img, #Sirius img {display: inline-block} */

.body div.bandeau {display: flex; justify-content: space-between}
.body div.sousmenu {display: inline-block}
.body .bandeau.reduit {padding-right: 6%}

.body .diOption {margin-top: 1em; padding: 1em; border: 1px solid silver; border-radius: 15px}
.body .diOption div .qst {width: 13em}
.body .diOption div.divL {padding-left: 13em}
@media only screen and (max-width: 600px) {
  .diOption div.divL {padding-left: 0}
}

.body .clic,.body .clic label {cursor: pointer}
.body .clic:hover {opacity: 40%}
.body .clic:hover img {opacity: 50%}
.body .clic.disabled:hover:not(.fa-close) {cursor: not-allowed}
.body .disabled .clic:hover:not(.fa-close) {cursor: not-allowed}
.body .disabled button:hover:not(.fa-close) {cursor: not-allowed}

.body .aide {cursor: help}

.body label.link {cursor: pointer; border-bottom: 1px dotted}
.body label.link:hover {border-bottom: 1px solid}

.body .nocurs {cursor: none}
.body .bold {font-weight: bold}
.body .center {text-align: center}
.body .drag {cursor: grab}
.body .noSelect {user-select: none}
.body .noBold,.body label.qst.noBold,.body div.noBold {font-weight: 200}
.body .ital {font-style: italic}
.body .titre {font-size: 1.4em; font-weight: bold}
.body .fontUp {font-size: 1.2em}
.body .fontDw {font-size: 0.9em}
.body .affTypo.isSelect {background-color: #eee}
.body .greenK {background-color: green}
.body .redK {background-color: red}
.body .goldK {background-color: gold}
.body .alGold {background-color: gold; padding-left:6px; padding-right:6px}
.body .green {color: green}
.body .red {color: red}
.body .gold {color: gold}
.body .blue {color: blue}
.body .gray {color: silver}
.body .orange {color:#ff8000}
.body .dark {color: #888}
.body .black {color: black}
.body .espGau {padding-left: .6em}
.body .justif {text-align: justify}
.body .divDial {position: relative; max-width: 1000px; margin-left: auto; margin-right: auto}
.body .maxH75 {max-height: 75vh; overflow: auto}
.body .docURL {font-size: 16px}
.body .divL {padding-left: 14em}
.body .divR {width: 100%; text-align: right}
.body .divIB {display: inline-block}
.body .disNO {display: none}
.body .divQR {display: flex}
.body .max12m {max-width: 12em; text-overflow: ellipsis}
.body .infoTitre {text-transform: uppercase; font-size: 1.2em; font-weight: bold}
.body .disabled {opacity: .25}
.body .savPA td {padding-left: .6em}
.body .rep label.radio {position: relative; top: 6px}
.body div.noScroll {overflow: hidden}
.body .font1p4 {font-size: 1.4em}
.body .poR {position:relative}
.body .poRtm7 {position: relative; top: -7px}
.body .poRtm6 {position: relative; top: -6px}
.body .poRtm5 {position: relative; top: -5px}
.body .poRtm1 {position: relative; top: -1px}
.body .poRtm2 {position: relative; top: -2px}
.body .poRtp3 {position: relative; top: 3px}
.body .poRtp4 {position: relative; top: 4px}
.body .poRtp1 {position: relative; top: 1px}
.body .poRt1m {position: relative; top: 1em}
.body .noPad {padding: 0}
.body .pad20 {padding: 20px}
.body .patp6 {padding-top: .6em}
.body .pat1m {padding-top: 1em}
.body .pat2m {padding-top: 2em}
.body .pat3 {padding-top: 3px}
.body .patp6m {padding-top: .6em}
.body .pal20 {padding-left: 20px}
.body .pal1m {padding-left: 1em}
.body .pal2m {padding-left: 2em}
.body .pal6m {padding-left: 6em}
.body .pal4p {padding-left: 4px}
.body .pal6p {padding-left: 6px}
.body .par0 {padding-right: 0}
.body .par20 {padding-right: 20px}
.body .par1m {padding-right: 1em}
.body .par2m {padding-right: 2em}
.body .par6p {padding-right: 6px}
.body .par6m {padding-right: 6em}
.body .pab1m {padding-bottom: 1em}
.body .marT1 {margin-top: 1em}
.body .mag2m {margin: 2em}
.body .mal3m {margin-left: 3em}
.body .mal1m {margin-left: 1em}
.body .mar1m {margin-right: 1em}
.body .mab1m {margin-bottom: 1em}
.body .mabp5m {margin-bottom: .5em}
.body .mabp6m {margin-bottom: .6em}
.body .mat1m {margin-top: 1em}
.body .matp5m {margin-top: .5em}
.body .matp6m {margin-top: .6em}
.body .mab6p {margin-bottom: 6px}
.body .mal6p {margin-left: 6px}
.body .mat6p {margin-top: 6px}

.body .rt180 {transform: rotate(180deg)}

.body .sp4C {display: inline-block; max-width: 400px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
@media only screen and (max-width: 600px) {
  .body .divQR {display: block}
  .body .divL {padding-left:0}
}

@media only print {
  div.noPrint {display: none}
}

/* div pour justification gauche/droite */
.body div.infoGD {display: flex; justify-content: space-between}
.body .infoGD span,.body .infoGD label {margin-top: auto; margin-bottom: auto}

/*
 Affichage de paragraphes
 */
.body .prChap {padding-left: 1.5em; text-indent: -1.5em}
.body .prSuite {padding-left: 1.5em}
.body .prChap2 {padding-left: 3em; text-indent: -1.5em}
.body .prSuite2 {padding-left: 3em}

.body .actif {border-color: blue !important}
.body label.actif {border-color: blue !important}

/* infos du FAQ */
.body div.flechebas {display: block; width: 20px; height: 20px; background: url(/_images/flechebas.png) no-repeat}
.body div.flechehaut {display: block; width: 20px; height: 20px; background: url(/_images/flechehaut.png) no-repeat}
.body .diFAQ {margin-top: 1em; padding-top: 1em; border-top: 1px solid silver}
.body .qstFAQ {display: flex; justify-content: space-between}
.body .repFAQ {display: none; height: 0}
.body .affFAQ {display: block; height: auto; transition: all 1s}
.body .question {font-weight: bold}

/* couleurs des boutons */
.body .btn {padding: .725em 1.1em .7em; margin-top: .6em; cursor: pointer;
  font-weight: 700 ; color: inherit; text-transform: uppercase;
  transition: all .06s; border: 2px solid currentColor}
.body .alert .btn,.body .beware .btn,.body .valid .btn {border-width: 2px}
.body .btn,.body .text-input,.body select,.body textarea {font-size: 12px; line-height: 1.3em; letter-spacing: .01em; background-color: transparent; border-radius: 0; position: relative; min-height: 2.25rem}
.body input[type="submit"] {width: 180px; display: inline-block}
.body .btn:hover {opacity:.8}
.body .onHover {display: none !important}
.body td:hover .onHover {display: contents !important; color: silver}
.body .btn.focus,.body .btn:hover {color: white}
.body .btn:disabled {color: #ccc; cursor: not-allowed}
.body .normal {color: #333}
.body .normal .btn:hover {border-color:#333; background-color:#333}
.body .valid {color: #0ad95f}
.body .validF {background-color: #0ad95f}
.body .valid .btn:hover {border-color:#0ad95f; background-color:#0ad95f}
.body .beware {color: #f93}
.body .beware .btn:hover {border-color:#f93; background-color:#f93}
.body .alert {color: #f03}
.body .alertF {background-color: #f03}
.body .alert .btn:hover {border-color:#f03; background-color:#f03}
.body .quid,.body .btn:disabled:hover {color: silver}
.body .quid .btn:hover,.body .btn:disabled:hover {border-color:silver; color: white; background-color:silver}
.sizeUp {font-size: 1.4em}
.sizeDw {font-size: 0.8em}
.sizeDw2 {font-size: 0.6em}

.body .cellGoDr {display: inline-block}
.body .trGo,.body .trDr {display: inline-block}

.body .diBlocM {display: inline-block}
@media only screen and (max-width: 1200px) {
  .body .trDr {display: block; width: 100%; text-align:right}
  .body .trDr label,.body .trDr div {text-align: left}
  .body .diBlocM {display: block}
}
@media only screen and (max-width: 600px) {
  .body .tbrSu {display: inline-block}
  .body .cellGoDr label {width: 5em; color: #cccccc}
  .body .cellGoDr {display: block}
}

.body .vaT1 {background: url(/_images/bmNiv1.png) no-repeat left/15px; padding-left: 20px}
.body .vaT2 {background: url(/_images/bmNiv2.png) no-repeat left/15px; padding-left: 20px}
.body .vaT3 {background: url(/_images/bmNiv3.png) no-repeat left/15px; padding-left: 20px}
.body .vaT4 {background: url(/_images/bmNiv4.png) no-repeat left/15px; padding-left: 20px}
.body .vaT5 {background: url(/_images/bmNiv5.png) no-repeat left/15px; padding-left: 20px}
.body .vaT6 {background: url(/_images/bmNiv6.png) no-repeat left/15px; padding-left: 20px}
.body .vaT7 {background: url(/_images/bmNiv7.png) no-repeat left/15px; padding-left: 20px}
.body .vaT8 {background: url(/_images/bmNiv8.png) no-repeat left/15px; padding-left: 20px}
.body .vaT9 {background: url(/_images/bmNiv9.png) no-repeat left/15px; padding-left: 20px}

.body .block {display: block}
.body .inline {display: inline-block}
.body .h26 {height: 26px}
.body .w100p {width: 100%}
.body .w1 {width: 1em}
.body .w2 {width: 2em}
.body .w36 {width: 36px !important}
.body .w40 {width: 40px}
.body .w60 {width: 60px}
.body .w80 {width: 80px !important}
.body .w100 {width: 100px}
.body .w106 {width: 106px !important}
.body .w180 {width: 180px}
.body .w178 {width: 178px}
.body .w210 {width: 210px}
.body .w218 {width: 218px}
.body .w228 {width: 228px}
.body .w240 {width: 240px}
.body .w280 {width: 280px}
.body .w320 {width: 320px}
.body .w340 {width: 340px}
.body .w400 {width: 400px}
.body .w420 {width: 420px}
.body .w426 {width: 426px}
.body .w428 {width: 428px}
.body .w440 {width: 440px}
.body .w490 {width: 490px}
.body .w500 {width: 500px}
.body .w520 {width: 520px}
.body {border-color: silver}
.body .border {border: 1px solid currentColor}
.body .borderR {border: 1px solid silver; border-radius: 6px}

.body .sousrub {padding-left: 30px; width: 150px}
.body .old {background-color: silver}
.body input.edNb {width: 40px}
.body input.edCourt {width: 260px}
.body input.subDt {width: 80px}
.body label.expand {display: inline-block; width: 100%}
.body input.chAff {border: none}
.body input.chErr {border: none; color: red}
.body .oblig {font-weight:bold; cursor: help; color: rgb(var(--color-alert,255 0 51))}
.body input[name=apiVIL] {margin-left: 17px}

.body .numBVP {padding-left: .6em; padding-right: .6em; font-weight: bold}
.body .pdfBVP {padding-left: 1em}

.body .bcPM {display: inline-block; width: 20px; background-color: #e8e8e8;
  text-align: center; font-size: 24px; user-select: none}
/* tableau avec thead fixe et tbody scrollable
   à rajouter :
      la définition de la hauteur du tbody     .tabSC tbody {height: --em}
      la largeur des colonnes (une par une)    .tabSC thead tr th:nth-child(1),.tabSC tbody tr td:nth-child(1) {width:12em}
*/
.trSelect td {background-color: #0000AA; color: white}
.tabSC {border: solid 1px #cccccc}
.tabSC td {height: 2em}
.tabSC thead {display:block}
.tabSC thead td {height: 3em}
.tabSC thead tr {border-bottom: solid 1px #cccccc}
.tabSC tbody {display:block; overflow-y:scroll}
.tabSC:not(.noAlt) tbody tr:nth-child(2n):not(.isSelect) {background-color: #f8f8f8}
.tabHO tbody tr:hover {background-color: silver; cursor: pointer}
.tabSC tbody tr:disabled {background-color: #eeeeee; cursor: default}
.tabSC.noAlt tr {border-bottom: 1px solid var(--gris-tres-clair)}

.body td:hover.okEdit {background: url(/_images/bmModif.png) no-repeat right/15px}

/* tableau d'affichage des variables */

#dialParam {position: absolute; top: 140px; left: 660px; width: 50em}

#dialParam table.tabSC tbody {height: 40em}
#dialParam .tabSC tr td:nth-child(1) {width: 12em; padding-left: .4em}
#dialParam .tabSC tr td:nth-child(2) {width: 20em}
#dialParam .tabSC tr td:nth-child(3) {width: 10em}
#dialParam .tabSC tr td:nth-child(4) {width: 4em}

/* 'tableau' responsive construit avec des div
  tbrEn  ligne d'entête
  tbrSu  libellé précédent les lignes suivantes
  tbrCo  colonne
 */

.tbrEn label {display: inline-block}
.tbrSu {display: none}
.tbrSh {display: none; height: .4em}
.tbrCo {display: inline-block}
.tbrIt {display: none; height: 2em}

div.tbrGris {background-color: #F8F8F8}
/* div.tbr div:nth-child(2n) {background-color: #f8f8f8} /**/

@media only screen and (max-width: 600px) {
  .tbrSh {display: block}
  .tbrEn {display: none}
  .tbrSu {display: block}
  .tbrIt {display: block}
}

.body .agPlus {display: inline-block; width: 50px}
.body img[id|=agS] {display:none}

.body .apiInput.tAB  {width: 240px; padding-bottom: 6px}
.body .apiInput.rAB  {width: 120px}
.body .apiInput.kAB  {width: 60px; padding-left: 20px}
.body .apiInput.nAB, .apiInput.pAB {width: 220px !important}
.body .lbPrem label {display: inline-block; padding-left: 12px}
.body .lbSu {display: none}
.body .lbPrem .tAB {width: 240px}
.body .lbPrem .rAB {width: 120px}
.body .lbPrem .kAB {width: 60px}
.body .lbPrem .nAB {width: 220px}

@media only screen and (max-width: 600px) {
  .body label.tAB {padding-top: 30px}
  .body .lbPrem {display: none}
  .body .lbSu {display: block}
  .body img[id|=agP] {display: none}
  .body img[id|=agS] {display: inline-block; padding-top: 3em}
}


/* saisie des données */
                             /* select */
.body select,select.text-input {
  height:100%; width:100%;
  padding-right:2.75em;
  position:relative;
  background: transparent url(/_images/keyboard_arrow_down.svg) no-repeat right 8px center;
  background-size:1.35rem 1.35rem}
.body .fake-input,.text-input,select,textarea  {
  padding:.725em .9em;
  border:1px solid;
  color:inherit}
.body select {-moz-appearance: none; -webkit-appearance: none; -ms-progress-appearance: unset}
                              /* question */
.body label.qst {display: inline-block; font-weight: bold; width: 14em}
.body .qstTop {display: flex}
.body .lbArea {vertical-align: 30px}
                              /* réponse */
.body .rep {display: inline-block; min-height: 2.8em}
@media only screen and (max-width: 1000px) {
  .body .rep label.radio,.rep label.checkbox {display: block}
}
@media only screen and (max-width: 600px) {
  .body label.qst {display: block}
  .body .lbArea {vertical-align: baseline; padding-top: 20px}
  .body .rep {display: block}
}
                              /* champ de saisie */
.body .apiInput {display: inline-block; margin-top: 6px; width: 340px; vertical-align: middle; min-height: 3.5em}
.body .apiInput.isSelect {width: 361px}
.body .apiInput select {cursor: pointer}
.body textarea.apiInput {width:338px}
.body .isPetit {width: 70px}
.body .isVIL {width: 220px; margin-left: 30px}
.body .text-input {width: 100%; border: 1px solid; padding: 0.8em; min-height: 24px}
/* .body input {font-size: 16px} */
.body .input-text {cursor: pointer}                    /* curseur pointeur sur zone text des boutons radios */
.noBorder {border: none}
.borderTop {border-top: 1px solid silver}
                              /* bouton radio */
.body input:disabled {cursor: default}
.body input[type=checkbox]~.input-button,.body input[type=radio]~.input-button {
  position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  line-height:1.35em; width:1.4em; height:1.4em;
  -webkit-box-flex:0; -webkit-flex:0 0 1.4em; -moz-box-flex:0; -ms-flex:0 0 1.4em; flex:0 0 1.4em;
  display:inline-block; vertical-align:top}
.body input[type=checkbox]~.input-button:after,.body input[type=checkbox]~.input-button:before,.body input[type=radio]~.input-button:after,.body input[type=radio]~.input-button:before {
  content:""; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:absolute; left:0; top:0; bottom:0; right:0}
.body input[type=checkbox]~.input-text,.body input[type=radio]~.input-text {letter-spacing:.01em; padding-left:.5em; line-height:1.35em}
.body input[type=checkbox]~.input-text:not(:empty),.body input[type=radio]~.input-text:not(:empty) {margin-right:1.35em}

.body input:disabled~.input-text {cursor: not-allowed; color: silver}

.body label.checkbox {display:inline-flex; padding:.4em 0; cursor: pointer}
.body label.checkbox.inline {padding:0}
.body label.checkbox input[type=checkbox] {position:absolute; left:-9999px}

.body label.checkbox input[type=checkbox]+.input-button:before {border:1px solid; background:#fff}
.body label.checkbox input[type=checkbox]+.input-button:after {
  left:.3em; top:.7em; opacity:0; border:4px solid green; background:transparent; border-top:none; border-right:none;
  width:0; height:0;
  -webkit-transition:height .15s,width .15s .15s; -o-transition:height .15s,width .15s; transition:height .15s,width .15s .15s;
  -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);
  -webkit-transform-origin:0 0; -ms-transform-origin:0 0; transform-origin:0 0}
.body label.checkoff input[type=checkbox]+.input-button:after {border-color: red}
.body label.checkbox input[type=checkbox]:checked+.input-button:after {opacity:1; width:1.2em; height:.6em}
.body label.checkbox input[type=checkbox]:focus+.input-button:before {background:#f6f6f6}
.body label.checkbox input[type=checkbox].disabled~.input-button,.body label.checkbox input[type=checkbox][disabled]~.input-button {color:#aaa; cursor:not-allowed}
.body label.checkbox input[type=checkbox].disabled~.input-button:before,.body label.checkbox input[type=checkbox][disabled]~.input-button:before {border-color:#bbb}
.body label.checkbox input[type=checkbox].disabled~.input-text,.body label.checkbox input[type=checkbox][disabled]~.input-text {opacity:.5}

.body label.radio {display:-webkit-inline-box; display:-webkit-inline-flex; display:-moz-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  padding:.4em 0; color:inherit}
.body label.radio:not(:first-child[disabled]) {cursor: pointer}
.body label.radio input[type=radio] {position:absolute; left:-9999px}
.body label.radio input[type=radio]+.input-button {line-height:1.35em}

.body label.radio input[type=radio]+.input-button:after,.body label.radio input[type=radio]+.input-button:before {
  width:1.46em; height:1.49em; border-radius:50%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.body label.radio input[type=radio]+.input-button:before {border:4px solid #fff; background:#fff}
.body label.radio input[type=radio]+.input-button:after {border:1px solid; background:transparent}
.body label.radio input[type=radio]:checked+.input-button:before {background:currentColor}
.body label.radio input[type=radio]:focus+.input-button:before {border-color:#f4f4f4}
.body label.radio input[type=radio].disabled~.input-button,.body label.radio input[type=radio][disabled]~.input-button {cursor:not-allowed}
.body label.radio input[type=radio].disabled~.input-button:checked:before,.body label.radio input[type=radio][disabled]~.input-button:checked:before {
  border-color:currentColor; opacity:.8}
.body label.radio input[type=radio].disabled~.input-button:after,.body label.radio input[type=radio][disabled]~.input-button:after {
  border-color:currentColor; opacity:.6}
.body label.radio input[type=radio].disabled~.input-text,.body label.radio input[type=radio][disabled]~.input-text {
  opacity:.5}


/* gestion des rubriques, avec affichage à volonté en cliquant sur l'image au bout de la DIV */
div.lbOnOff {background-color: #e0e0e0; display: flex; justify-content: space-between;
  margin-top: .5em; margin-right: 1em; padding: 1em .4em 1em .4em; cursor: pointer}
.lbOnOff table {width: 100%}
.lbOnOff td {white-space:nowrap; padding-right: 10px}
.lbOnOff img {cursor: pointer}
.lbOnOff td:nth-child(1) {font-weight: bold}
.lbOnOff td:nth-child(2) {width: 100%; text-align: right}

div.diOnOff {padding: 1em 0 1em 0}

/* div volante de confirmation */

.confGray {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; z-index: 9980; opacity: 0.2}
.confDial {position: fixed; top: 0; left: 0; display: inline-block; padding: 1em; background-color: white; color: black; z-index: 9981; opacity: 1; margin: 0 auto}
.confDial {border-radius: 5px}
.confDial {max-height: 90vh; overflow: auto}
.confDial.modale {border: 1px solid blue}
.confDial .numtel {width: 160px}
.confDial img {display: inline-block}
.confDial .apiInput {min-height: 2em}
.dial2 {margin: 1em; border: 1px solid gray; border-radius: 15px}
.confInfo {display: inline-block; font-weight: bold; padding-right: 3em}
.confImg {padding-top: 4px; cursor: pointer}
.confCu {cursor: pointer}
.cfDial {position: absolute; top: 1em; bottom: 0; right: 0; padding-right: 8px; padding-bottom: 8px}
.cfTitre {position: absolute; top: 0; right: 0; padding-right: 14px; padding-top: 1em}
.cfDial .fa,.cfTitre .fa {padding-right: .25em}
.confTitre {padding-bottom: 1.4em}
.confInput {display: inline-block; width: 160px}
.body .confedCP,.confedCP {display: inline-block; width: 90px; margin-right: 1.4em}
.confedVIL {display: inline-block; width: 222px}
.confLb {display: inline-block; width: 7em}
.confLig {padding-bottom: .2em;display:flex;align-items: center}
.confTBL td {padding-right: .8em}
.lbTrunc {overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.confIco {padding-left: 2em}
.confTit {padding-bottom: .4em; margin-bottom: .6em}
.confJo, .confCP {display: inline-block; width: 28px; height: 21px; border: solid white 1px;
  text-align: center; cursor: pointer; font-size: 1.04em;padding:8px;background-color:white}
.confJo:hover, .confMo:hover {border-color: blue}
.confJx {color: silver}
.confMA {display: inline-block; flex:1; text-align: center; cursor: pointer;font-weight:bold}
.confMo {display: inline-block; width: 49px; height: 49px; border: solid white 1px;
  text-align: center; vertical-align: middle; cursor: pointer;padding: 14px;background-color:white}
.confAn {display: inline-block; width: 20px; height: 49px; border: solid white 1px;
  text-align: center; vertical-align: middle; cursor: pointer;padding: 28px 4px 12px 4px;background-color:white}
div .confAn:first-child {width:42px}
.confAff {cursor: default}
.confSL {border-color: black}
.confBk {display: inline-block}
.confHM {display: inline-block; cursor: pointer; border: solid black 1px; margin-left: 8px}
.confHMdm {display: inline-block; width: 30px; padding-left: 8px}
.confok {background-color: orange}

.imDyna {opacity: .7}
.imDyna:hover {opacity: 1; cursor: pointer}
.imClose {position: relative; top: -10px; left: 10px}

.icoModif {display: inline-block; padding-left: 12px; width: 3em}
.icoModif img {opacity: .6}
.icoModif img:hover {opacity: 1; cursor: pointer}

.imNivo {padding-left: 2px; width: 12px}
.imNivoOk {width: 20px}

.okCurs {cursor: pointer}
.noCurs {cursor: default}
.h100 {height: 100%}
.body img.reset { display: none; opacity: 20%; position: absolute; right: .6em; top: .5em; width: .8em}
.body img.reset:hover {cursor: pointer}
.body .flex {display: flex; align-items: center}
.body .flex-wrap {display: flex; flex-wrap: wrap}
.body .flex-evenly {display: flex; justify-content: space-evenly; align-items: center}
.body .flexR {display: flex; justify-content: space-between; align-items: center}
.body .flexCol {display:flex; flex-direction: column; align-items: flex-start}
.divInput {position: relative; padding-right: 12px}
div.inputZ {display: inline-block; position: relative; padding-right: 6px}
/* div.inputZ input {width: 100%} */
input.inputZ {font-size: 1.2em}
.diInline {display: inline-block}
label.edFocus {color: blue !important}
div.info, p.info, td.info, span.info, h1.info {text-align: justify; padding: 6px; background-color:#FFF8DC}

div.ligneZ {position: relative; min-height: 1.8em; display: flex}
div.ligneZ input {width: 100%; padding: .3em}
.ligneZ textarea {font-family: Calibri; font-size: inherit}
.ligneZ select {width: 20em; padding: .3em}

div.ligneSep {margin-top:1em; border-bottom: 1px solid silver}
div.ligneSep+legend {position: relative; top:-10px; left:4px; display: inline-block; background-color: white}

div.diRub {position: relative; border: 1px solid silver; border-radius: 10px; padding: 0 6px 6px 8px; margin-top: 10px}
div.diRub > label:first-child {display: inline-block !important; padding: 0 6px 0 6px; position: relative; top: -.7em; background-color: white; margin: 0 20px 0 6px}
.ckVertical label.checkboxZ {display: flex; padding-top: 2px}

.body fieldset {position: relative; border: 1px solid silver; border-radius: 10px; margin-top: 2px; min-height: 3.014em}
.body legend {padding-left: .4em; padding-right: .4em}

label.checkboxZ input[type=checkbox]~.input-button,label.radioZ input[type=radio]~.input-button {
  position:relative; top: .02em; cursor:pointer; user-select:none;
  line-height:1.35em; width:1.4em; height:1.4em;
  flex:0 0 1.4em;
  display:inline-block; vertical-align:top}
label.checkboxZ input[type=checkbox]~.input-button:after,.body input[type=checkbox]~.input-button:before, .body input[type=radio]~.input-button:after,.body input[type=radio]~.input-button:before {
  content:""; box-sizing:border-box; position:absolute; left:0; top:0; bottom:0; right:0}
label.checkboxZ input[type=checkbox]~.input-text,.body input[type=radio]~.input-text {position: relative; top: .05em;letter-spacing:.01em; padding-left:.5em; line-height:1.35em}

label.checkboxZ input[type=checkbox]~.input-text:not(:empty),label.radioZ input[type=radio]~.input-text:not(:empty) {margin-right:1.35em}

.body input:disabled~.input-text {cursor: not-allowed}

label.checkboxZ {display:inline-flex; cursor: pointer} /*; position: relative; top: 5px; padding-left: 6px}
/* label.checkboxZ span.input-text {position: relative; top: 3px} */
label.checkboxZ.inline {padding:0}
label.checkboxZ input[type=checkbox] {position:absolute; left:-9999px}
label.checkboxZ input[type=checkbox]+.input-button:before {border:1px solid; background:#fff}
label.checkboxZ input[type=checkbox]+.input-button:after {
  left:.3em; top:.7em; opacity:0; border:4px solid green; background:transparent; border-top:none; border-right:none;
  width:0; height:0;
  transition: height .15s,width .15s .15s;
  transform: rotate(-45deg);
  transform-origin: 0 0}
label.checkboxZ label.checkoff input[type=checkbox]+.input-button:after {border-color: red}
label.checkboxZ input[type=checkbox]:checked+.input-button:after {opacity:1; width:1.2em; height:.6em}
label.checkboxZ input[type=checkbox]:focus+.input-button:before {background:#f6f6f6}
label.checkboxZ input[type=checkbox].disabled~.input-button,.body label.checkbox input[type=checkbox][disabled]~.input-button {color:#aaa; cursor:not-allowed}
label.checkboxZ input[type=checkbox].disabled~.input-button:before,.body label.checkbox input[type=checkbox][disabled]~.input-button:before {border-color:#bbb}
label.checkboxZ input[type=checkbox].disabled~.input-text,.body label.checkbox input[type=checkbox][disabled]~.input-text {opacity:.5}

.body label.radioZ {display:inline-flex; color:inherit}
.body label.radioZ:not(:first-child[disabled]) {cursor: pointer}
.body label.radioZ input[type=radio] {position:absolute; left:-9999px}
.body label.radioZ input[type=radio]+.input-button {line-height:1.35em}
.body label.radioZ input[type=radio]+.input-button:after,.body label.radioZ input[type=radio]+.input-button:before {
  width:1.46em; height:1.49em; border-radius:50%; box-sizing: border-box}
.body label.radioZ input[type=radio]+.input-button:before {border:4px solid #fff; background:#fff}
.body label.radioZ input[type=radio]+.input-button:after {border:1px solid; background:transparent}
.body label.radioZ input[type=radio]:checked+.input-button:before {background:currentColor}
.body label.radioZ input[type=radio]:focus+.input-button:before {border-color:#f4f4f4}
.body label.radioZ input[type=radio].disabled~.input-button,.body label.radioZ input[type=radio][disabled]~.input-button {cursor:not-allowed}
.body label.radioZ input[type=radio].disabled~.input-button:checked:before,.body label.radioZ input[type=radio][disabled]~.input-button:checked:before {
  border-color:currentColor; opacity:.8}
.body label.radioZ input[type=radio].disabled~.input-button:after,.body label.radioZ input[type=radio][disabled]~.input-button:after {
  border-color:currentColor; opacity:.6}
.body label.radioZ input[type=radio].disabled~.input-text,.body label.radioZ input[type=radio][disabled]~.input-text {
  opacity:.5; cursor:not-allowed}

#bcAnnule .disabled {opacity: 10%}

.body .diOnglets {justify-content: space-between; padding-top: 8px; padding-left: 3px; border-bottom: 1px solid silver}
.body div.onglet {cursor: pointer; border: 1px solid silver; border-radius: 8px 8px 0 0; border-bottom: none; padding: 4px}
.body div.onglet:hover {background-color: silver}
.body fieldset.fsOnglets {border-radius: 0 0 10px 10px; margin-top: -1px}

/* affichage volant d'un texte */

#diVisu {position: absolute; top: 140px; left: 10px; width: 610px; padding: 1em;
  background-color: white; border: solid 2px silver;
  max-height: 38em}
#scrVisu {max-height: 36em; overflow: scroll}

/* enquête */

.saisieTexte {margin-top: 1em; margin-bottom: .6em}
.saisieLigne {display: flex; align-items: center}
@media only screen and (max-width: 600px) {
  .saisieLigne {display: block}
}

.nivel {font-family: var(--font-main, Source Sans Pro, Calibri, sans-serif)}
.nivel h1,.nivel h2,.nivel h3,.nivel h4,.nivel button,.nivel select,.nivel textarea,
.nivel .btn,.nivel .bandeau,.nivel input {font-family: var(--font-alt,Lato, sans-serif)}

/*noinspection ALL*/
.nivel .normal {color: rgb(var(--color-main,51 51 51))}
/*noinspection ALL*/
.nivel .normal .btn:hover {border-color:rgb(var(--color-main,51 51 51)); background-color:rgb(var(--color-main,51 51 51))}
/*noinspection ALL*/
.nivel .valid {color: rgb(var(--color-valid,15 177 85))}
/*noinspection ALL*/
.nivel .validF {background-color: rgb(var(--color-valid,15 177 85))}
/*noinspection ALL*/
.nivel .valid .btn:hover {border-color:rgb(var(--color-valid,15 177 85)); background-color:rgb(var(--color-valid,15 177 85))}
/*noinspection ALL*/
.nivel .beware {color: rgb(var(--color-beware,255 153 51))}
/*noinspection ALL*/
.nivel .beware .btn:hover {border-color:rgb(var(--color-beware,255 153 51)); background-color:rgb(var(--color-beware,255 153 51))}
/*noinspection ALL*/
.nivel .alert {color: rgb(var(--color-beware,255 0 51))}
/*noinspection ALL*/
.nivel .alertF {background-color: rgb(var(--color-beware,255 0 51))}
/*noinspection ALL*/
.nivel .alert .btn:hover {border-color:rgb(var(--color-beware,255 0 51)); background-color:rgb(var(--color-beware,255 0 51))}
/*noinspection ALL*/
.nivel .red {color: rgb(var(--color-alert,255 0 51))}
/*noinspection ALL*/
.nivel input.chErr {color: rgb(var(--color-alert,255 0 51))}