select,
::picker(select) {
  appearance: base-select;
}



form.frmc {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
width:95%;
grid-gap: .8em;
padding: 1.2em;
margin-top: 0%;
margin-left:0%;
margin-bottom: 2%;
border-radius: 6px;
box-shadow: 0 0 10px 0 #095484;
}

form.frmc > fieldset.fset00  {
grid-column: 1 / 5;
grid-row: auto;
display: grid;
grid-template-columns: 0% 1fr 1fr 1fr 10%;
grid-auto-flow: row;
padding: 1.2em;
grid-gap: .8em;
text-align: right;
border:1px dotted grey;
border-radius: 3px;
}

form.frmc legend{
font-size: 10px;
width:auto;
text-align: left;
}

.fset00 > label,
.fset00 > fieldset  {
grid-column: 2 / 3;
grid-row: auto;
margin-top: 3%;
}

.fset00 > input,
.fset00 > select,
.fset00 > textarea {
grid-column: 3 / 5;
grid-row: auto;
padding: .4em;
border: 0;
}

#afficher > a{
  font-size: 70%;
  margin-top: 8%;
  color: crimson;
}

.fset00 > fieldset,
.fset00 > button {
grid-column: 3 / 5;
}

.fset00 > button {
padding: 0em;
background: slategrey;
border: 0;
color: darkseagreen;
}

.fset00 > .fset_01{
grid-column: 3 / 5;
grid-row: auto;
padding: 4%;
text-align: left;
border:1px dotted grey;
border-radius: 3px;
}

.fset00 > .fset_02{
grid-column: 3 / 5;
grid-row: auto;
padding: 4%;
text-align: left;
border:1px dotted grey;
border-radius: 3px;
}



span.required {
margin-left: 0;
color: crimson;
}

.fset00 > .btn {
  border: 0px solid black;
  background-color: #cdd;
  color: grey;
  padding: 10px 24px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  width: 45%;
  margin-left: 15%;
}

#saisie_txt_id01,
#saisie_txt_id02,
#chp_saisie_datalist{
  font-size: 100%;
}

#chp_saisie_datalist,#chp_ddown01{font-size: 110%;width:80%;}

#saisie_mlignes{font-size: 110%;}

#chp_date_01,
#chp_date_hr_02{
  font-size: 110%;
}

#plabel{
  font-size: 90%;
  font-size: var(--text_ms);
  padding-top: 0px;
  padding-left: 5%;
  text-indent: 0;
  font-family: monospace;
  color:var(--selectcol);
}

#chp_ddown01{
  font-size: 14px;
  font-size: var(--text_xls);
  padding-left: 2%;
  height: 85%;
  font-family: monospace;
  border-radius: 5px;
  color:var(--selectcol);
  background-color:var(--selectbackcol);
}

#frm_btn00{
  font-family: monospace;
  font-size: var(--text_xls);
  color:var(--selectcol);
}

/* 0035a - 2 - Tag form  */

form.frmc1 {
display: grid;
grid-template-columns: 35% 65%;
/*grid-template-areas: "a a";*/
/*grid-row: auto;*/
grid-auto-rows: auto;
width:95%;
grid-gap: .8em;
padding: 1.2em;
margin-top: 3%;
margin-left:0%;
margin-bottom: 2%;
border-radius: 6px;
box-shadow: 0 0 10px 0 #095484;
}

form.frmc1 > fieldset.fsetLibC1  {
grid-column: 1 / 2;
padding: 0;
padding-bottom: 4%;
padding-left: 0%;
border:0px solid lime;
}

.fsetC1a{
width: 75%;
}

form.frmc1 > fieldset.fsetLibC2  {
grid-column: 2 / 2;
margin-top: 0%;
border:0px solid lime;
}

form.frmc1 select {
  border: 2px solid #ddd;
  background: #eee;
  padding: 3px;
  padding-left: 0px;
  transition: 0.4s;
}

form.frmc1 select:hover,
form.frmc1 select:focus {
  background: #ddd;
}


form.frmc1 > fieldset.fsetLibC1Z  {
grid-column: 1 / span 2;
border:0px solid lime;
}


#btnBS1{
width:50%;
margin-left: -2%;
}

#chp_ddown01{
font-size: var(--text_xls);
/*font-size: 20px;*/
color:darkslategray;
line-height: 150%;
margin-top: 1%;
height:100%;
width: 100%;
}

.divalign{
position: relative;
top: 50%;
transform: translateY(-50%);
}

#plabel2{
font-size: var(--text_ms);
font-size: 150%;
vertical-align: middle;
text-indent: 0;
font-family: monospace;
color:var(--selectcol);
}


.fsetLibC2 > .btn2 {
  border: 1px dotted lime;
  background-color:darkseagreen;
  padding: 10px 24px;
  margin-top: 0%;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  width: 45%;
  margin-left: 0%;
}


.btn2:hover {
  background-color: darksalmon;
  color: lime;
}

#frm_btn02{
  font-family: monospace;
  font-size: var(--text_xls);
  color:darkslategray;
}


/* 0035a - 1 ... */

div.divfrmc2{
margin-top: 4%;
padding: 3%;
border:3px solid grey;
}

div.divfrmc2 input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

div.divfrmc2 input[type=number]::-webkit-inner-spin-button,
div.divfrmc2 input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

div.divfrmc2 .number-input {
  border: 2px solid #ddd;
  display: inline-flex;
}

div.divfrmc2 .number-input,
div.divfrmc2 .number-input * {
  box-sizing: border-box;
}

div.divfrmc2 .number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  margin: 0;
  position: relative;
}

div.divfrmc2 .number-input button:before,
div.divfrmc2 .number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 1rem;
  height: 2px;
  background-color: #212121;
  transform: translate(-50%, -50%);
}
div.divfrmc2 .number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

div.divfrmc2 .number-input input[type=number] {
  font-family: sans-serif;
  max-width: 5rem;
  padding: .5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  text-align: center;
}

/* 0035a - 1 ... */

div.divfrmc3{
margin-top: 4%;
padding: 3%;
border:3px solid grey;
}


:root {
  --border-radius: 3px;
  --border: 2px solid #3b3b3b;
  --control-size: 38px;
  --font-size: 20px;
}
/*
* {
  box-sizing: border-box;
}*/

/*body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}*/

div.divfrmc3 .value-control {
  width: var(--control-size);
  height: var(--control-size);
  margin: 0 8px;
  background: transparent;
  border: var(--border);
  border-radius: var(--border-radius);
  color: #3b3b3b;
  cursor: pointer;
  font-size: var(--font-size);
}

div.divfrmc3 .value-control:hover {
  background: #eee;
}

div.divfrmc3 .value-control:active {
  background: #ddd;
}

div.divfrmc3 .value-control:focus,
div.divfrmc3 .value-input:focus {
  outline: 2px solid #3e67fd;
  outline-offset: 1px
}

div.divfrmc3 .value-input {
  margin: 0;
  height: var(--control-size);
  width: 80px;
  border: var(--border);
  border-radius: var(--border-radius);
  padding: 2px 8px;
  text-align: center;
  font-size: var(--font-size);
}

div.divfrmc3 .value-input:hover {
  border-color: #777;
}

div.divfrmc3 .value-input::-webkit-outer-spin-button,
div.divfrmc3 .value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div.divfrmc3 .value-input {
  -moz-appearance: textfield;
}


/* 0035a - 2 - Tag form  */
/* reprise v22 form ajax additions */

form.frmc_10_ajax {
position: relative;
}

form.frmc_10_ajax #grid_frm {
display: grid;
grid-template-columns: 45% 55%;
grid-auto-rows: 25px;
margin-top: 0%;
grid-row-gap: 25px;
margin-left: 0%;
width: 90%;
align-items: center;
border:1px dotted dimgrey;
padding-top: 3%;
padding-bottom: 5%;
}


form.frmc_10_ajax #div1 {
  grid-column:1/2;
  padding-bottom: 0%;
  text-align: right;
  padding-right: 5%;
}

form.frmc_10_ajax #div2 {
  grid-column:2/3;
  padding-top: 1%;
}

form.frmc_10_ajax #div2>select{
  text-align: center;
  font-size: 105%;
  background-color:lightyellow;
  color: darkmagenta;
}

form.frmc_10_ajax #div2>.nb2x{/*2 inputs*/
width: 30%;
font-size: 110%;
text-align: right;
padding-right: 5%;
color:var(--tblgrid_txt_col);
background-color:var(--selectbackcol);;
}

form.frmc_10_ajax #div3 {
  grid-column:1/3;
  border:0px solid lime;
}

form.frmc_10_ajax #div3 > p{
  font-size: 105%;
  text-align: left;
  margin-left: 20%;
  margin-bottom: 2%;
  color:slategrey;
}

form.frmc_10_ajax #btn1, #btn2{
background: slategrey;
color: darkseagreen;
background-color: #cdd;
color: grey;
padding: 10px 0px;
padding-top: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
width: 25%;
border: 1px dotted chocolate;
}

form.frmc_10_ajax #btn1{
margin-left: 60%;
margin-top: 1%;
width: 35%;
text-align: center;
}

form.frmc_10_ajax #btn1:hover{
background-color:darkseagreen;
}

form.frmc_10_ajax #btn2{
text-align: center;
background-color:lightgoldenrodyellow;
}

form.frmc_10_ajax #btn2:hover{
background-color:palegoldenrod;
}


form.frmc_10_ajax #div4 {
  display:none;
  grid-column:1/3;
  margin-top: 5%;
  padding-bottom: 3%;
  border-top:1px dotted dimgrey;
}

form.frmc_10_ajax #div4 >p{
margin-left: 35%;
}