/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2015
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 7297 $
//+		$Date: 2024-01-17 09:14:12 +0100 (mer. 17 janv. 2024) $
//+		$HeadURL: svn://svn.id.lan/pko/sat/2x/232_fdm/trunk/tpl/tpl0/css/iFrm.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Formulaire */
.iFrm{ width: 500px; padding: 1px; margin: 50px auto; /*font-size: 0;*/ line-height: 1.5rem; }

/* Largeur */
.iFrm.very-small{ width: 300px; }
.iFrm.small{ width: 400px; }
.iFrm.large{ width: 600px; }
.iFrm.very-large{ width: 700px; }

/* Bordure */
.iFrm.bord{ border: 1px solid #ddd; background-color: #f7f7f7; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 10px; }

/* Disposition colonnes */
	/* Labels et champs rassemblé */
.iFrm.set :not(.set) > .lbl{ text-align: center; background-color: #F8F2F7; color: #333; border: 1px solid #ddd; border-top-color: #bbb; padding: 4px 5px 4px 10px; border-right: none; border-radius: 0 0 0 4px; }
.iFrm.set :not(.set) > .fld,
.iFrm.set .set > .lbl:first-child,
.iFrm.set .set > .mix:first-child,
.iFrm.set .set > .fld:first-child > *{ border-top-color: #bbb; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

	/* Labels et champs listé */
.iFrm.list :not(.set) > .lbl{ padding: 0; }
.iFrm.list :not(.set) > .fld,
.iFrm.list .set{ display: block; width: 100% !important; }
.iFrm.list :not(.set) > .lbl,
.iFrm.list .set.free{ text-align: left; display: inline-block; width: auto !important; }
.iFrm.list .lbl + .ctn{ margin-left: 5px; }

/* Taille colonnes */
	/* Label 1/5 */
.iFrm.l15 .lbl{ width: 20%; }
.iFrm.l15 .fld,
.iFrm.l15 .set{ width: 80%; }
	/* Label 1/4 */
.iFrm.l14 .lbl{ width: 25%; }
.iFrm.l14 .fld,
.iFrm.l14 .set{ width: 75%; }
	/* Label 1/3 */
.iFrm.l13 .lbl{ width: 33%; }
.iFrm.l13 .fld,
.iFrm.l13 .set{ width: 66%; }
	/* Label 1/2 */
.iFrm.l12 .lbl,
.iFrm.l12 .fld,
.iFrm.l12 .set{ width: 50%; }

	/* Forcé
		par défaut:
			.lbl.w14
			.fld.w34
			.set.w34
	*/

.iFrm .w15{ width: 20% !important; }
.iFrm .w25{ width: 40% !important; }
.iFrm .w35{ width: 60% !important; }
.iFrm .w45{ width: 80% !important; }

.iFrm .w14{ width: 25% !important; }
.iFrm .w24{ width: 50% !important; }
.iFrm .w34{ width: 75% !important; }

.iFrm .w13{ width: 33% !important; }
.iFrm .w23{ width: 66% !important; }

.iFrm .w12{ width: 50% !important; }

/* Espacement entité */
.iFrm .aero,
.iFrm .aero-top,
.iFrm .aero-top-out{ margin-top: 15px !important; }

.iFrm .aero,
.iFrm .aero-bot,
.iFrm .aero-bot-out{ margin-bottom: 15px !important; }

.iFrm .aero-in,
.iFrm .aero-top,
.iFrm .aero-top-in,
.iFrm fieldset.aero{ padding-top: 10px; }

.iFrm .aero-in,
.iFrm .aero-bot,
.iFrm .aero-bot-in,
.iFrm fieldset.aero{ padding-bottom: 10px; }

.iFrm .aero-high,
.iFrm .aero-high-top,
.iFrm .aero-high-top-out{ margin-top: 30px !important; }

.iFrm .aero-high,
.iFrm .aero-high-bot,
.iFrm .aero-high-bot-out{ margin-bottom: 30px !important; }

.iFrm .aero-high-in,
.iFrm .aero-high-top,
.iFrm .aero-high-top-in,
.iFrm fieldset.aero-high{ padding-top: 25px; }

.iFrm .aero-high-in,
.iFrm .aero-high-bot,
.iFrm .aero-high-bot-in,
.iFrm fieldset.aero-high{ padding-bottom: 25px; }

/* Alignement entité */
.iFrm .left{ text-align: left !important; }
.iFrm .center{ text-align: center !important; }
.iFrm .right{ text-align: right !important; }
.iFrm .justify{ text-align: justify !important; }

/* Disposition texte */
.iFrm .nowrap{ white-space: nowrap; }

/* Dimension libre */
.iFrm .free{ width: auto !important; padding: 0 !important; }

/* Dimension maximun */
.iFrm .max{ width: 100% !important; }

/* Invisible */
.iFrm .hide{ display: none !important; }

/* Section de formulaire */
.iFrm .grp{ margin: 5px; }
.iFrm .grp + .grp { margin-top: 25px;}
.iFrm fieldset{ border: none; margin: 50px 0 25px; padding: 25px 0 0; border-top: 1px solid #ddd; }
.iFrm.bord fieldset{ box-shadow: 0 1px 0 0 #fff inset, 0 1px 0 0 #fff; }
.iFrm legend{ line-height: 1.5rem; padding: 5px 15px 0; font-size: 14px; margin: -5px 10px 0; }

/* Champs classique */
.iFrm .lbl,
.iFrm .fld,
.iFrm .row,
.iFrm input,
.iFrm textarea,
.iFrm select{ line-height: 1.5rem; padding: 5px; display: inline-block; font-size: 14px; box-sizing: border-box; vertical-align: middle; }

.iFrm input,
.iFrm textarea,
.iFrm select{ padding: 4px 5px !important; border: 1px solid #ddd; border-top-color: #bbb; background-color: #fff; margin: 0; font-family: Verdana, Arial, sans-serif; }

.iFrm textarea{ resize: vertical; overflow: auto; min-height: 70px; }

.iFrm .set > .fld > select{ min-width: 160px; }

.iFrm input:hover,
.iFrm textarea:hover,
.iFrm select:hover,
.iFrm input:not(.btn):focus,
.iFrm textarea:focus,
.iFrm .set.bord:hover > *:not(.btn),
.iFrm .set.bord:hover > .fld > *:not(.btn){ border-color: #39f !important; box-shadow: 0 0 5px -3px #39f inset; }
.iFrm .set.bord > .btn:hover{ border-color: #39f; box-shadow: 0 10px 10px -5px #fff inset, 0 0 5px -3px #39f inset; }

.iFrm input.dis:hover,
.iFrm textarea.dis:hover,
.iFrm select.dis:hover,
.iFrm input.dis:not(.btn):focus,
.iFrm textarea.dis:focus,
.iFrm .set.bord.dis:hover > *:not(.btn){ box-shadow: none; }

.iFrm input,
.iFrm select{ height: 30px; }

.iFrm input[type="checkbox"],
.iFrm input[type="radio"]{ width: auto; height: auto; margin: 1px 3px 3px; }

.iFrm option{ padding: 5px; background-color: #fff; color: #000; }
.iFrm optgroup{ padding: 5px; margin-bottom: 5px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-family: Verdana, Arial, sans-serif; }
.iFrm optgroup,
.iFrm optgroup option{ background-color: #eee; }

.iFrm select,
.iFrm option,
.iFrm label,
.iFrm .btn{ cursor: pointer; }

/* Ligne unique de formulaire */
.iFrm .row{ text-align: center; font-size: 0; padding: 0; display: block; }
.iFrm .ctn{ text-align: center; font-size: 0; padding: 0; display: inline-block; vertical-align: middle; }

/* Message d'information */
.iFrm .msg{ display: block; box-sizing: border-box; padding: 5px 7px; font-size: 14px; margin: 5px auto; text-align: center; /*border-left: 3px solid transparent; border-right: 3px solid transparent;*/ 
 }
	/* Validation */
.iFrm .msg.val{ color: #fff; border-color: #4c864c; background-color: #65b365; }
	/* Observation */
.iFrm .msg.obs{ font-style: italic; color: #666; border-color: #aaa; background-color: #F8F2F7; }
	/* Mise en garde */
.iFrm .msg.warn{ color: #333; border-color: #ff0; background-color: #ff9; }
	/* Error */
.iFrm .msg.err{ font-weight: bold; color: #fff; border-color: #900; background-color: #f00; }

/*.iFrm img {width: 150px;}*/

/* Label de formulaire */
.iFrm .lbl{ text-align: right; padding-right: 10px; width: 25%; }

/* Champ de formulaire */
.iFrm .fld,
.iFrm .set{ text-align: left; width: 75%; }

/* Champ composite */
.iFrm .set{ display: inline-block; vertical-align: middle; }

/* Elément de champ composite */
.iFrm .set > *{ display: table-cell; width: auto !important; vertical-align: middle; }

.iFrm .set > .max,
.iFrm .set > .fld.max > *,
.iFrm .set:not(.free) > *:last-child,
.iFrm .set:not(.free) > .fld:last-child > *{ width: 100% !important; }

.iFrm .set > .max ~ *:last-child,
.iFrm .set > .fld.max ~ *:last-child > *{ width: auto !important; }

   /* Largeur non-fixé */
.iFrm .set.free{ padding: 5px; }
.iFrm .set.free > *{ display: inline-block; }

.iFrm .set:not(.bord) > *{ border-color: transparent !important; background-color: transparent !important; }

	/* Elément de champ composite : champ */
.iFrm .set > .fld{ padding: 0; font-size: 0; }
.iFrm .set > .fld > *{ border-radius: 0; }
/*.iFrm .set > .fld:first-child > *{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.iFrm .set > .fld:last-child > *{ border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
*/
	/* Elément de champ composite : label, bouton et mixte */
.iFrm .set > .lbl,
.iFrm .set > .btn,
.iFrm .set > .mix{ font-size: 14px; padding: 2px 5px; background-color: #F8F2F7; color: var(--color__txt); border-color: #ddd; border-top: 1px solid #bbb; border-bottom: 1px solid #ddd; }
.iFrm .set > .lbl:first-child,
.iFrm .set > .mix:first-child,
.iFrm .set > .btn:first-child{ /*border-top-left-radius: 4px; border-bottom-left-radius: 4px; */border-left: 1px solid #ddd; }
.iFrm .set > .btn:first-child{ border-left-color: #999; }
.iFrm .set > .lbl:last-child,
.iFrm .set > .mix:last-child,
.iFrm .set > .btn:last-child{ /*border-top-right-radius: 4px; border-bottom-right-radius: 4px;*/ border-right: 1px solid #ddd; }
.iFrm .set > .btn:last-child{ border-right-color: #999; }
.iFrm .set > .mix{ background-color: #fff; border-top-color: #bbb; }
.iPko-usr .iFrm .set > .mix{ color: var(--color__background); }
.iFrm .set > .btn{ border: 1px solid #999; box-shadow: 0 10px 10px -5px #fff inset; font-weight: bold; color: #333; }

	/* Desactivé */
.iFrm .fld.dis,
.iFrm .set.dis > .fld,
.iFrm .set.dis > .mix{ background-color: #F8F2F7 !important; color: #999 !important; border-color: #ddd !important; }

	/* Validé */
.iFrm .set.val .fld,
.iFrm .set.val > .mix,
.iFrm .set.val > .btn{ border-color: #4c864c !important; }
.iFrm .set.val > .lbl{ color: #fff; background-color: #65b365 !important; border-color: #4c864c !important; }

	/* Mise en garde */
.iFrm .fld.warn,
.iFrm .set.warn > .fld,
.iFrm .set.warn > .mix{ background-color: #ff9 !important; }

/* Bouton de formulaire */
.iFrm *:not(.set) > .btn{ background-color: #bbb; border-color: #999; margin: 0 5px; box-shadow: 0 10px 10px -5px #fff inset; width: 62px; font-weight: bold; color: #333; line-height: 0; }
.iFrm *:not(.set) > .btn:hover{ border-color: #39f; box-shadow: 0 10px 10px -5px #fff inset, 0 0 5px -3px #39f inset; }
.iFrm *:not(.set) > .btn:active{ border-color: #39f; box-shadow: 0 10px 10px -5px #F8F2F7 inset, 0 0 5px -3px #39f inset; }

   /* Largeur */
.iFrm *:not(.set) > .btn.small{ width: 32px; }
.iFrm *:not(.set) > .btn.large{ width: 102px; }
.iFrm *:not(.set) > .btn.free{ padding: 5px !important; }

	/* Validé */
.iFrm .btn.val{ color: #fff; background-color: #65b365 !important; border-color: #4c864c !important; }

/* Séparateur */
.iFrm .sep{ display: inline-block; height: 20px; width: 0; margin: 0 10px; border-top: 1px solid #bbb; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; border-left: 1px solid #bbb; vertical-align: middle; }
.iFrm.bord .sep{ border-right-color: #fff; border-bottom-color: #fff; }

   /* Espacement */
.iFrm .sep.small{ margin: 0 5px; }
.iFrm .sep.large{ margin: 0 20px; }

   /* Horizontal */
.iFrm .sep.row{ display: block; height: 0; width: 75%; margin: 5px auto; }

      /* Largeur */
.iFrm .sep.row.very-small{ width: 35%; margin: 5px auto; }
.iFrm .sep.row.small{ width: 50%; margin: 5px auto; }
.iFrm .sep.row.large{ width: auto; margin: 5px auto; }

@media screen and (max-width: 800px){

	.iTpl-body .iFrm{ width: auto; }

	.iTpl-body .iFrm :not(.set) > .lbl:not(.fix){ padding: 0; }

	.iTpl-body .iFrm :not(.set) > .fld:not(.fix),
	.iTpl-body .iFrm .set:not(.fix),
	.iTpl-body .iFrm .force{ display: block; width: 100% !important; }

	.iTpl-body .iFrm :not(.set) > .lbl:not(.fix),
	.iTpl-body .iFrm .set.free:not(.fix){ text-align: left; display: inline-block; width: auto !important; }
}