/*############################################################################################################
//  Droits d'auteur © 2022-2023 P.ink, l'ancre d'une vie Tous droits réservés, en collaboration avec OptimalC
//############################################################################################################*/

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Conteneur de Gestion
 *  ############################################################################################################
 */
.gestion {
  min-width:320px;
  max-width:540px;
  position:relative;top:0;left:0;margin:1rem 0 0.25rem 0.5rem;padding:12px 8px 8px 8px;width:auto;height:auto;
  display:inline-flex;flex:1 1 auto;flex-direction:column;
  border-style:solid;border-width:2px;border-color:white;border-radius:0.5rem;
}
.gestion::before {
  position:absolute;top:-8px;left:1rem;
  font-size:16px;font-weight:400;padding:0 0.5rem;
  content:"Information";background-color:#A7A7A7;color:#212121;text-shadow:0 0 1px #212121;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Formulaire | Formulaire de Gestion
 *  ############################################################################################################
 */
.gestion > form {
  margin:0;padding:0;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Divisions | Conteneur des Éléments du Formulaire
 *  ############################################################################################################
*/
.gestion > form > .element {
  position:relative;top:0;left:0;margin:0.25rem;padding:0;width:calc( 100% - 0.5rem );height:auto;
  display:inline-flex;flex:1 1 auto;flex-direction:row;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > .readOnly,
.gestion > form > .element > .readOnly:disabled {
  background-color:#C7C7C7;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > label {
  position:relative;top:0;left:0;margin:0;padding:0 8px 0 0;min-width:128px;max-width:256px;height:auto;
  display:inline-flex;flex:0 1 auto;align-items:center;justify-content:right;
  font-size:1rem;line-height:32px;font-weight:200;color:#FAFAFA;text-shadow:0 0 1px #FAFAFA;
  border-style:solid;border-width:0;border-color:#FAFAFA;border-radius:0.5rem 0 0 0.5rem;outline:0;
  background-color:#4A4A4A;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > button.linkButtonInformation {
  margin:0;padding:0;position:relative;top:0;left:0;width:24px;height:auto;
  display:inline-flex;flex:0 0 auto;
  background-color:#212121;color:#FAFAFA;
  border-style:solid;border-width:1px 0 1px 1px;border-color:#4A4A4A;border-radius:0;outline:0;
}
.gestion > form > .element > button.linkButtonInformation::before {
  margin:0;padding:0;position:absolute;top:0;left:0;width:100%;height:100%;
  display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;
  font-family:"FontAwesome";content:"\F129";
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > input {
  position:relative;top:0;left:0;margin:0;padding:0.25rem;width:auto;height:calc( 32px - 0.5rem );
  display:inline-flex;flex:1 1 auto;
  line-height:calc( 32px - 0.5rem );
  border-style:solid;border-width:1px;border-color:#4A4A4A;border-radius:0 0.5rem 0.5rem 0;outline:0;
  background-color:#FAFAFA;
}
.gestion > form > .element > textarea {
  position:relative;top:0;left:0;margin:0;padding:0.25rem;
  min-width:0;max-width:none;width:auto;
  min-height: calc( 4rem + 0.5rem );max-height: calc( 12rem + 0.5rem );height: calc( 4rem + 0.5rem );
  display:inline-flex;flex:1 1 auto;
  border-style:solid;border-width:1px;border-color:#4A4A4A;border-radius:0 0.5rem 0.5rem 0;outline:0;
  background-color:#FAFAFA;resize:vertical;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > input:has(+ button) {
  padding-right:calc( 8rem + 4px );
}
.gestion > form > .element > input:has(+ div.comboButton) {
  border-radius:0;
}
.gestion > form > .element > input:is(:first-of-type):has(+ input) {
  margin-right:0;width:6rem !important;flex:0 0 auto;border-radius:0;border-width:1px 0 1px 1px;border-color:#4A4A4A;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .element > button {
  position:absolute;top:2px;right:2px;margin:0;padding:0;width:8rem;height:30px;
  border-style:solid;border-width:1px;border-color:#FAFAFA;border-radius:0.5rem;
  background-color:#212121;color:#FAFAFA;outline:0;
  cursor:pointer;
}
.gestion > form > .element > button::before {
  content:none;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form >  .element > .comboButton {
  position:relative;left:0;top:0;
  margin:0;padding:0;width:20px;height:32px;line-height:32px;
  border-style:solid;border-width:1px 1px 1px 0;border-color:#4A4A4A;border-radius:0;outline:0;
  background-color: #212121;color: #FAFAFA;cursor: pointer;
}
.gestion > form >  .element > .comboButton:last-of-type {
  border-radius:0 0.5rem 0.5rem 0;
}
.gestion > form >  .element > .comboButton::before {
  position:absolute;top:0;left:0;width:20px;height:32px;
  font-family:"FontAwesome";line-height:32px;font-size: 16px;
  display:inline-flex;flex:0 0 auto;justify-content: center;
  background-color:transparent;color:#FAFAFA;
}
.gestion > form >  .element > .comboButton:first-of-type::before {
  content:"\F0D9";
}
.gestion > form >  .element > .comboButton:last-of-type::before {
  content:"\F0DA";
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Divisions | Conteneur des Boutons du Formulaire (Submit Actions)
 *  ############################################################################################################
 */
button.iconAdd::before {
  content:"\F067";
}
button.iconEdit::before {
  content:"\F040";
}
button.iconCart::before {
  content:"\F217";
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .buttons {
  position:relative;top:0;left:0;margin:0.25rem;padding:0;width:calc( 100% - 0.5rem );height:auto;
  display:none;flex:1 1 auto;flex-direction:row;
}
.gestion > form > .buttons:has(button) {
  display:inline-flex;
}
/*  --------------------------------------------------------------------------------------------------------  */
.gestion > form > .buttons > button {
  position:relative;top:0;left:0;margin:0 0 0 0.25rem;padding:0;width:auto;height:32px;
  display:inline-flex;flex:1 1 auto;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;line-height:1rem;
  background-color:#212121;color:#FAFAFA;
  border-style:solid;border-width:1px;border-color:#FAFAFA;border-radius:0.5rem;outline:0;
  cursor:pointer;
}
.gestion > form > .buttons > button::before {
  position:absolute;top:0;left:0;width:32px;height:30px;
  font-family:"FontAwesome";line-height:30px;
  background-color:#006F00;color:white;
  border-style:solid;border-width:0 1px 0 0;border-color:#FAFAFA;border-radius:0.5rem 0 0 0.5rem;
}
.gestion > form > .buttons > button:first-of-type {
  margin:0 0 0 0;
}
.gestion > form > .buttons > button:hover {
  background-color:#DADADA;color:#212121;
}
/*  --------------------------------------------------------------------------------------------------------  */