.flex-tr{
	display: flex;
	align-items: baseline;
}
.flex-tr.tr-textarea {
	align-items: flex-start;
}
/* .flex-tr:hover{
	outline:1px solid silver;
	background-color: #e0e0e025;
} */
.flex-td,.flex-th{
	box-sizing: border-box;
}
.flex-tr > .flex-th{
	flex:1;
	text-align: right;
	padding-right: 0.4em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.flex-tr > .flex-td > .fo-sequence{
	padding-top: 0.15em;
	padding-bottom: 0.15em;
}
.flex-tr > .flex-td{
	flex:3;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.flex-tr > .flex-td.fo-sequence{
	padding-top: 0;
	padding-bottom: 0;
}
.flex-tr label{
	font-weight: bold;
	font-size: small;
	color: #333;
	line-height: 2em;
}
.flex-tr .flex-td .brother {
	font-size: 0.9em;
	margin-top:0.2em;
}
.flex-tr .flex-td .brother .flex-tr > .flex-td{
	flex:4;
}
.flex-tr .flex-td .brother .brother{
	font-size: 1em;
}
.select2_40-container .select2_40-selection img,
.select2_40-container .select2_40-results img{
	width: 16px;
	height: 16px;
	vertical-align: middle;
	padding-right: 0.3em;
}
.select2_40-container .form-frag svg{
	max-width: 16px;
	max-height: 16px;
	vertical-align: middle;
	padding-right: 0.3em;
}
.select2_40-container .select2_40-selection .fa {
	/* padding évite que le texte à droite colle le fa */
	padding-right: 0.3em;
}
.select2_40-container .select2_40-results .fa {
	/* padding évite que le texte à droite colle le fa */
	/* min-width pour que les textes soient mieux alignés, certaines fa dépassent 1.2em et ne sont donc pas alignées */
	padding-right: 0.3em;
	min-width: 1.2em;
	text-align: center;
}
/**
 * Aspect de certains éléments
 * 1. INPUT, SELECT et TEXTAREA
 */
.flex-tr input[type="text"], .flex-tr input[type="password"], .flex-tr input[type="number"], .flex-tr .fo-select, .flex-tr .fo-textarea{
	height: 2em;
	border: 1px solid #7a7a7a;
	background-color: white;
}
.tr-textarea .CodeMirror {
	border: 1px solid #7a7a7a;
}
/**
 * Hauteur du SELECT multiple (cas rare)
 * 1bis. SELECT[multiple]
 * Je sais que cette règle remodifie le "height" de la règle précédente, mais comme c'est un cas rare, je trouve cela plus simple.
 * Sinon il faudrait faire 3 règles (1/ border et background-color, 2/ height pour not(multiple) 3/ height pour select[multiple])
 * 
 */
 .flex-tr .fo-select[multiple]{
	height: auto;
}
/**
 * 2. les mêmes éléments disablés
 */
.flex-tr input[type="text"]:disabled, .flex-tr input[type="password"]:disabled,
.flex-tr input[type="number"]:disabled, .flex-tr .fo-select:disabled, .flex-tr .fo-textarea:disabled{
	border: 1px solid lightgrey;
	color: #606060;
}
/**
 * Couleur de fond des éléments readonly
 * 2bis. INPUT[text][readonly] et TEXTAREA[readonly]
 */
 .flex-tr input[type="text"][readonly],
 .flex-tr input[type="password"][readonly], .flex-tr .fo-textarea[readonly] {
	background-color: #fbfbfb;
}
/**
 * 3. les placeholders des mêmes éléments disablés
 */
.flex-tr input[type="text"]:disabled::placeholder,
.flex-tr input[type="password"]:disabled::placeholder,
.flex-tr input[type="number"]:disabled::placeholder{
	color: grey;
}
/**
 * 4. Les input number sont calés à droite, c'est plus chic
 *  20/12/2022 SP : C'est pas plus chic, c'est surtout incohérent avec le reste des formulaires
 */
/*.flex-tr input[type="number"] {
	text-align: right;
}*/
/**
 * LABEL disablés
 */
.flex-tr label.fo-disabled{
	color: grey;
}
.flex-tr input[type="radio"], .flex-tr input[type="checkbox"]{
	vertical-align: middle;
	/* position: relative;
	bottom: 1px; */
}
.flex-tr input[type="text"], .flex-tr input[type="password"], .flex-tr input[type="number"], .flex-tr .fo-select, .flex-tr .fo-textarea, .flex-tr .select2_40{
	box-sizing: border-box;
	color: #4b4b4b;
}
.flex-tr input[type="text"], .flex-tr input[type="password"], .flex-tr input[type="number"], .flex-tr .fo-select, .flex-tr .select2_40, .flex-tr .select2_40-dropdown{
	font-size: 0.83em;
}
.flex-tr input[type="text"], .flex-tr input[type="password"], .flex-tr input[type="number"], .flex-tr select, .flex-tr .fo-textarea, .flex-tr .select2_40{
	width: 100%;
}
.flex-tr .select2_40 .select2_40-selection{
	border-radius: initial;
	border-color: #7a7a7a;
}
.flex-tr .select2_40 .select2_40-selection:hover{
	border-color: black;
}
.flex-tr .select2_40-results__option {
	word-break: break-word;
}
/**
 * Les 2 règles suivantes permettent d'afficher la sélection d'un Select2 sur plusieurs lignes
 * cas des interview de reporting qui ont tendances à être très long
 * 1/ Suppression de la limite de hauteur à 28px (imposé par select2.min.css)
 */
.flex-tr .select2_40-container .select2_40-selection--single {
	height: auto;
}
/**
 * 2/ on supprime le nowrap (imposé par select2.min.css)
 *    s'applique uniquement à select2_40-selection--single
 *    ca ne fonctionne pas pour les "multiple"
 *    mais le version 4.1.0 rc.0 (rc donc non-stable) de janv. 2023 permet nativement de le faire
 *    sur les "single" et les "multiple"
 */
.flex-tr .select2_40-container .select2_40-selection--single .select2_40-selection__rendered,
.flex-tr .select2_40-container .select2_40-selection--multiple .select2_40-selection__rendered {
	white-space: normal;
}
.flex-tr .resize-hori{
	resize: horizontal;
}
.flex-tr .resize-none{
	resize: none;
}
.flex-tr .resize-vert{
	resize: vertical;
}
.fo-radios.without-group,
.fo-radios.with-group .div-group,
.fo-checkboxes.without-group,
.fo-checkboxes.with-group .div-group{
	display: flex;
}
.fo-radios.without-group > .div-radio,
.fo-radios.with-group > .div-group > .div-radio,
.fo-checkboxes.without-group > .div-check,
.fo-checkboxes.with-group > .div-group > .div-check{
	flex: 1;
}
.mobile .flex-tr{
	flex-direction: column;
}
.mobile .flex-th{
	text-align: left;
}
/* .flex-tr .subform,
.table-container .subform{
	margin: 0.3em 0;
} */
.flex-tr .cl_abo_subscribe:hover{
	cursor: pointer;
}
.flex-tr .cl_abo_unsubscribe .user-text{
	text-decoration: line-through;
}
.flex-tr .cl_abo_subscribe{
	list-style: none;
	display: inline-block;
	margin: 0.5em;
}
.flex-tr .list_cl_abo{
	padding-left: 0.5em;
	margin: 0.5em 0;
	max-height: 20em;
	overflow-y: auto;
}
.flex-tr .flex-th>label i.fa,
.flex-tr .flex-th>details>summary>label i.fa {
	margin-left: 0.3em;	
	opacity: 0.8;
	min-width: 1em;
	text-align: center;
}
.flex-tr .flex-th>label i.fa:hover,
.flex-tr .flex-th>details>summary>label i.fa:hover {
	outline: 1px dotted silver;
	outline-offset: 2px;
	opacity: 1;
	cursor: pointer;
}
.fo-sequence .fo-sequence-changed {
	box-shadow: -3px 0 0 0 gainsboro;
	background-color: gainsboro;
 }
 .fo-sequence .fo-sequence-last-changed {
	background-color: transparent;
	transition-property: background-color;
	transition-duration: 1s;
	transition-delay: 1s;
	box-shadow: -3px 0 0 0 silver;
}
.fo-sequence .fo-sequence-was-changed {
	background-color: transparent;
	transition-property: background-color;
	transition-duration: 1s;
	transition-delay: 1s;
	box-shadow: -1px 0 0 0 silver;
}
.fo-sequence .flex-tr.fo-sequence-dnd-prev>.flex-th {
	box-shadow: 0 1px 0 0 grey;
}
.fo-sequence .flex-tr.fo-sequence-dnd-next>.flex-th{
	box-shadow: 0 -1px 0 0 grey;
}
label.fo-required:before {
	content:"* ";
	color:tomato;
	font-size:0.8em;
}
.flex-tr input[type="text"].fo-w12, .flex-tr input[type="password"].fo-w12, .flex-tr input[type="number"].fo-w12, .flex-tr select.fo-w12, .flex-tr textarea.fo-w12, .flex-tr .select2_40.fo-w12, .flex-tr .fo-multi-text-container.fo-w12 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w12{
	width:12%;
}
.flex-tr input[type="text"].fo-w20, .flex-tr input[type="password"].fo-w20, .flex-tr input[type="number"].fo-w20, .flex-tr select.fo-w20, .flex-tr textarea.fo-w20, .flex-tr .select2_40.fo-w20, .flex-tr .fo-multi-text-container.fo-w20 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w20{
	width:20%;
}
.flex-tr input[type="text"].fo-w25, .flex-tr input[type="password"].fo-w25, .flex-tr input[type="number"].fo-w25, .flex-tr select.fo-w25, .flex-tr textarea.fo-w25, .flex-tr .select2_40.fo-w25, .flex-tr .fo-multi-text-container.fo-w25 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w25{
	width:25%;
}
.flex-tr input[type="text"].fo-w33, .flex-tr input[type="password"].fo-w33, .flex-tr input[type="number"].fo-w33, .flex-tr select.fo-w33, .flex-tr textarea.fo-w33, .flex-tr .select2_40.fo-w33, .flex-tr .fo-multi-text-container.fo-w33 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w33{
	width:33%;
}
.flex-tr input[type="text"].fo-w50, .flex-tr input[type="password"].fo-w50, .flex-tr input[type="number"].fo-w50, .flex-tr select.fo-w50, .flex-tr textarea.fo-w50, .flex-tr .select2_40.fo-w50, .flex-tr .fo-multi-text-container.fo-w50 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w50{
	width:50%;
}
.flex-tr input[type="text"].fo-w75, .flex-tr input[type="password"].fo-w75, .flex-tr input[type="number"].fo-w75, .flex-tr select.fo-w75, .flex-tr textarea.fo-w75, .flex-tr .select2_40.fo-w75, .flex-tr .fo-multi-text-container.fo-w75 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-w75{
	width:75%;
}
.flex-tr input[type="text"].fo-wem4, .flex-tr input[type="password"].fo-wem4, .flex-tr input[type="number"].fo-wem4, .flex-tr select.fo-wem4, .flex-tr textarea.fo-wem4, .flex-tr .select2_40.fo-wem4, .flex-tr .fo-multi-text-container.fo-wem4 > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-wem4{
	width:4em;
}
.flex-tr input[type="text"].fo-wauto, .flex-tr input[type="password"].fo-wauto, .flex-tr input[type="number"].fo-wauto, .flex-tr select.fo-wauto, .flex-tr textarea.fo-wauto, .flex-tr .select2_40.fo-wauto, .flex-tr .fo-multi-text-container.fo-wauto > .fo-multi-text, .flex-tr .fo-selecteur-assist.fo-wauto{
	width:auto;
}
.flex-tr .fo-multi-text{
	position:relative;
}
.flex-tr .fo-multi-text.fo-multi-text-inline,
.flex-tr .fo-multi-text.ui-sortable-placeholder{
	display: inline-block;
}
.flex-tr .fo-handle-dnd-multi-text{
	display:none;
	background-color: white;
	cursor:grab;
}
.flex-tr .fo-multi-text.fo-dnd-multi-text:hover .fo-handle-dnd-multi-text{
	display: inline-block;
}
.fo-code-mirror.mirror-init{
	display: none!important;
}
.flex-tr .section-container .section-img{
	font-weight: bold;
  font-size: 1.1em;
}
.flex-tr .section-container .section-img:hover{
	cursor: pointer;
}
.fo-sister{
	display: inline-block;
	margin-left: 0.2em;
}
.select2_40-container.select2_40-container--open .field-index{
	display:inline-block;
	width: 3em;
}
.select2_40-container.select2_40-container--open .selection .field-index{
	display: inline;
}
.select2_40-container .select2_40-results__option{
	position: relative;
}
.select2_40-container .select2_40-results__option .field-type{
	position: absolute;
	right: 1em;
}
.select2_40-container .selection .field-type{
	padding-left: 1em;
}
.dlg-html-help .ui-dialog-content{
	min-width: 99%;
	max-width: 99%;
}
.dlg-html-help.ui-dialog .ui-dialog-content{
	padding: 0.2em;
	overflow-y: auto;
	max-height: 35em!important;
}
.dlg-html-help.ui-dialog{
	padding: 0;
}
.dlg-html-help{
	min-width: 26em;
	max-width: 52em;
}
/* Pour empécher le CodeMirror de s'élargir lorsqu'il contient de longues séquences sans espaces */
.tr-textarea .CodeMirror-wrap pre {
	word-break: break-word;
}
/* Pour empécher le CodeMirror avec scrollbar de scroller le body lorsque la scrollbar du CodeMirror est en haut ou en bas */
/* Bizarement le sélecteur exige une "*", sinon ca ne marche pas */
.CodeMirror.anti-scroll-bubble * {
	overscroll-behavior-y: none;
}
.supremia-default{
	margin-left : 0.4em;
	background-color: #E6E6E6;
	padding: 0.3em;
	border-radius: 1em;
	border: 1px solid #C6C6C6;
	font-size: 0.7em;
}