/* 
    Created on : 12 nov. 2024, 09:58:48
    Author     : Bruno Rouillard - rue Béjo <bruno at ruebejo.fr>
*/
/*  ----------------------------------------------------------- */
/* forms */
/*  ----------------------------------------------------------- */
.frm {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1em;
  margin-bottom: 2em;
  /* select2 */
}
.frm > div.message {
  flex: 1 1 100% !important;
}
.frm > div.message ul {
  padding-left: 1em;
}
.frm > div {
  flex: 1 1 100%;
  max-width: 100%;
}
.frm > div > label {
  display: block;
}
.frm .input_field input, .frm .text_field textarea {
  border-radius: 3px;
  border: 1px solid #999;
  padding: 0.25em;
}
.frm .input_field input.non_valide, .frm .text_field textarea.non_valide {
  border: 1px solid red;
}
.frm .input_field input:focus, .frm .text_field textarea:focus {
  border: 3px solid #0074E8;
  outline: none;
}
.frm fieldset {
  border-radius: 3px;
  border: 1px solid #999;
  padding: 1em;
  margin-bottom: 1em;
  flex: 0 1 500px;
  max-width: 100%;
}
.frm fieldset > legend {
  font-weight: bold;
  margin: 0 1em;
  padding: 0 1em;
}
.frm fieldset .input_field input {
  width: calc(320px - 2em);
}
.frm span.obligatoire {
  color: red;
  font-weight: bold;
}
.frm .bouton input {
  padding: 0.25em 1.5em;
  cursor: pointer;
  white-space: normal;
  border-radius: 3px;
  border: 1px solid #999;
  background-color: #ccc;
}
.frm .bouton input:hover {
  background-color: #bbb;
}
.frm .input_field input {
  width: 320px;
  max-width: 100%;
}
.frm .input_field input.intfield {
  width: 7em;
}
.frm textarea {
  width: 320px;
  height: 8em;
  max-width: 100%;
}
.frm .input_field input.non_valide, .frm .input_field input.invalid, .frm textarea.non_valide, .frm textarea.invalid {
  border: 1px solid red;
}
.frm .option_field .select2 .select2-selection .invalid {
  border-color: red;
}
.frm .select2-results__option {
  min-height: 2em;
}
.frm .select2-selection__rendered {
  width: max-content !important;
  padding-left: 3px !important;
  /*background: wheat;*/
  padding-right: 0 !important;
}
.frm .option_field.add .select2 {
  margin-right: 1em;
}
.frm .option_field .option_add {
  vertical-align: baseline;
  display: inline-block;
}
.frm .option_field.invalid .select2-selection {
  border-color: red;
}
/* multiple fields */
.frm > div.m_field.checkbox_field .wrapper {
  border-radius: 3px;
  border: 1px solid #999;
  background: #fcfcfc;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding: 2px 5px 2px 0;
  width: auto;
}
.frm > div.m_field.checkbox_field .checkbox_options {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
}
.frm > div.m_field.checkbox_field .radio_checked, .frm > div.m_field.checkbox_field .radio_checked:hover {
  background: #007fff;
  color: white;
}
.frm > div.m_field.checkbox_field.combo {
  flex-flow: row wrap;
}
.frm > div.m_field.checkbox_field.combo .checkbox_options .wrapper {
  display: none;
}
.frm > div.m_field.checkbox_field.combo .checkbox_options .wrapper.radio_checked, .frm > div.m_field.checkbox_field.combo .checkbox_options .frm .m_field .wrapper.radio_checked:hover {
  display: inline-flex;
  width: auto;
}
.frm > div.m_field.checkbox_field.combo .js_select {
  margin-bottom: 0.5em;
}
.frm > div.m_field.checkbox_field.combo option.hide {
  display: none;
}
.frm > div.m_field.checkbox_field.combo select.option {
  display: inline-block;
}
.frm > div.m_field.option_field {
  align-items: center;
}
/* radio & checkbox */
/*

.frm > div.radio_field.non_valide{
	padding:1em;
}

.frm .m_field .wrapper label,.frm .m_field .wrapper input
{
	padding:0.25em 0;
}

.frm .m_field .wrapper label {
	flex-grow: 1;
	padding-right:1em
}

.frm .m_field .wrapper input{
	margin-right: 0.5em;
	
}


.frm > div.checkbox_field > label{
	margin-bottom: 0.5em;
}

.frm > div.checkbox_field  .aide_mini{
	margin-top:-1.5em;
	align-self: flex-end;
}
*/
/* select option */
/*.frm > div.option_field
{
	flex-wrap: nowrap;
	flex-direction: row;

}

.frm > div.option_field select{
	padding:0.35em;
	border-radius: $input_box_border_radius;
	border:1px solid $input_box_border_color;
}


*/
/* help */
.frm .aide_maxi {
  position: absolute;
  display: block;
  background: white;
  color: black;
  border: 1px solid #497eba;
  transform: translate(-100%, -120%);
  z-index: 1000;
  text-align: left;
  left: 0;
  padding: 1em;
}
.frm .aide_maxi:after {
  content: "X";
  position: absolute;
  right: 4px;
  top: 0;
  text-align: center;
  background: white;
}
.frm .aide_mini {
  display: inline-block;
  background: #497eba;
  cursor: help;
  font-weight: bold;
  line-height: 1.7em;
  width: 1.7em;
  text-align: center;
  border-radius: 1.7em;
  color: white;
  margin-left: 0.5em;
  transform: translateY(-0.5em);
}
/*  ----------------------------------------------------------- */
/* filter form */
/*  ----------------------------------------------------------- */
.frm.filter {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 1em;
  align-content: center;
  justify-content: flex-start;
  padding-bottom: 2em;
}
.frm.filter > div {
  padding: 0;
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
}
.frm.filter .option_field {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.frm.filter label, .frm.filter .bouton, .frm.filter .input_field {
  flex: 0 0 auto;
  min-width: 0 !important;
  width: auto;
  display: inline;
  margin-right: 1em;
}
.frm.filter .input_field {
  position: relative;
}
/*  ----------------------------------------------------------- */
/* ajax */
/*  ----------------------------------------------------------- */
.ajax_choice {
  position: absolute;
}
.ajax_choice .result {
  position: relative;
  z-index: 100;
}
.ajax_choice .wrapper_table {
  background: white;
  box-shadow: 0 0 2px black;
  max-height: 12em;
}
.ajax_choice .wrapper_table table {
  margin-bottom: 0;
}
.ajax_choice .wrapper_table table a, .ajax_choice .wrapper_table table a:hover {
  text-decoration: none !important;
}
.ajax_choice .wrapper_table table td {
  padding: 0;
}
.ajax_choice .wrapper_table table td a {
  padding: 0.25em 0.5em;
  display: block;
}
/*  ----------------------------------------------------------- */
/* confirm popup */
/*  ----------------------------------------------------------- */
.frm.confirm_popup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 400px;
}
.frm.confirm_popup .infos {
  grid-column: 1/3;
  margin-bottom: 1em;
}
/*  ----------------------------------------------------------- */
/* actions fieldset */
/*  ----------------------------------------------------------- */
fieldset.frm.actions_buttons {
  border: none;
  padding-left: 0;
  padding-right: 0;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  justify-content: space-around;
}
/*  ----------------------------------------------------------- */
/* individual db col forms */
/*  ----------------------------------------------------------- */
.editable_field {
  border-top: 1px solid #aaa;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  align-items: flex-start;
  padding: 5px 0;
}
.editable_field > .label {
  min-width: 18em;
}
.editable_field .frm {
  margin-bottom: 0;
}
.editable_field .frm > div {
  flex: 0 0 auto;
}
.editable_field .frm > div label {
  display: none;
}
.editable_field.editable .frm {
  /*visibility: hidden*/
  position: absolute;
  left: -999em;
}
.editable_field .separator {
  width: 4.5em;
}
.editable_field a.inline, .editable_field a.inline:hover {
  border: none;
  box-shadow: none;
  padding: 0.25em;
  margin: 0 0 0 1em;
}
.editable_field a.inline span, .editable_field a.inline:hover span {
  display: none;
}
.editable_field a.inline::before {
  font-size: 1.4em;
}
.editable_field.open a.inline::before {
  content: "cancel";
}
.editable_field.open .frm {
  visibility: visible;
  display: flex;
  position: initial;
}
.editable_field.open .value {
  display: none;
}

.message {
  margin: 1.5em 0;
}
.message > div {
  border: 1px solid transparent;
  background: white;
  border-radius: 3px;
  padding: 0.5em 1em;
  display: inline-block !important;
  width: auto;
  position: relative;
  display: flex;
}

.message.msgok > div {
  border-color: #6ebb4b;
}
.message.msgwaring > div {
  border-color: #ffa500;
}
.message.msgwaring > div::before {
  content: "done";
  color: #ffa500;
}
.message.msgerror > div {
  border-color: rgba(255, 0, 0, 0.8);
}

.form_poste.merci strong{
	display:block;
	border:3px solid #33ac59;
	padding:1em;
	margin:3em 0;
}