﻿/* FORMULAIRES.CSS - éléments et grille pour formulaires */


/* grille de base des boxes formulaires */
.form-box, .styled-input, .styled-select { /*font-size: 83.33%;*/ /* 25px */ }
.form-box { margin: 1.5em 0; padding: 2em 40px 0 20px; word-spacing: -0.3em; background: #f3f3f3; }
.form-box.seamless { margin-left: -20px; margin-right: -20px; padding: 0 20px 0 0; background: transparent; border-radius: 0; }
.form-box .form-title { margin: 0 -40px 2em -20px; word-spacing: normal; }
.form-box .txt-field, .form-box .radio-btn, .form-box .inline-buttons { display: inline-block; vertical-align: bottom; position: relative; width: 50%; margin: 0 0 2em; padding-left: 20px; word-spacing: normal; }
.form-box.top-align .txt-field, .form-box.top-align .radio-btn { vertical-align: top; }
.form-box .half-space { margin-bottom: 0.75em; }
.form-box .double-space { margin-bottom: 3em; }
.form-box label, .form-box .form-text { display: block; margin-bottom: 0.25em; font-weight: 600; line-height: normal; }
.form-box .form-text, .form-box strong.form-text { font-weight: 400; }
.form-box label.required:after, .form-box .form-text.required:after { content: "*"; margin-left: 0.1em; color: #da2531; }
/* blocs types textfield/select/textarea */
.txt-field input:not([type=file]), .txt-field textarea, .txt-field select, .styled-input, .styled-select select { display: inline-block; width: 100%; height: 3.5em; line-height: 3.5em; padding: 0.5em 10px; margin: 0; border: 1px solid #fff; font: inherit; background: #fff; color: #110304; box-shadow: none; outline: none; -webkit-appearance: none; -moz-appearance: none; }
.form-box.seamless .txt-field input:not([type=file]), .form-box.seamless .txt-field textarea, .form-box.seamless .txt-field select, .form-box.seamless .styled-input, .form-box.seamless .styled-select select { background: #f2f2f2; }
.txt-field input:not([type=file]):focus, .txt-field textarea:focus, .txt-field select:focus, .styled-input:focus, .styled-select select:focus, .icheck-item.hover { border-color: #807f7f; }
.txt-field input[disabled], .txt-field textarea[disabled], .txt-field select[disabled], .styled-input[disabled], .styled-select select[disabled], .icheck-item.disabled { background: #f9f9f9; color: #aaa; border-color: #f9f9f9; }
.txt-field input[type=file], .txt-field input[type=file]:focus { border-color: transparent; }
.txt-field textarea { height: auto; }
/* wrapper pour styling selects */
.txt-field .select-wrapper { width: auto; max-width: 100%; }
.styled-select.select-wrapper { display: inline-block; max-width: 100%; }
/* boutons inline */
.form-box .inline-buttons { margin-bottom: 1em; text-align: right; }
.inline-buttons .bt-action { height: 2.4em; line-height: 2.4em; margin: 0 0.5em 0.5em 0; padding: 0 1em; font-size: 100%; }
.inline-buttons .bt-action:last-child { margin-right: 0; }
/* blocs types radio/checkbox */
.form-box .radio-btn { vertical-align: top; }
.radio-btn input[type=radio], .radio-btn input[type=checkbox], .radio-btn .icheck-item { position: absolute; }
.radio-btn label { position: relative; display: inline-block; vertical-align: top; margin: 0 1em 0 0; padding-left: 1.66em; max-width: 100%; font-weight: 400; }
.radio-btn label input[type=radio], .radio-btn label input[type=checkbox], .radio-btn label .icheck-item { left: 0; }
/* radiobutton et checkboxlists */
.check-list ul { margin: 0; width: 100% !important; overflow: hidden; word-spacing: -0.3em; }
.check-list ul li { display: inline-block; width: 50%; padding-right: 15px; margin: 0 0 0.5em; word-spacing: normal; }
.check-list ul.auto-width li { width: auto; }
/* largeurs champs */
.form-box .width-18, .check-list ul.width-18 li { width: 12.5%; }
.form-box .width-16, .check-list ul.width-16 li { width: 16.67%; }
.form-box .width-14, .check-list ul.width-14 li { width: 25%; }
.form-box .width-13, .check-list ul.width-13 li { width: 33.33%; }
.form-box .width-23, .check-list ul.width-23 li { width: 66.67%; }
.form-box .width-34, .check-list ul.width-34 li { width: 75%; }
.form-box .full-width, .check-list ul.full-width li { width: 100%; }
/* checkboxes/radios restylés */
.icheck-item { position: relative; display: inline-block; vertical-align: middle; border: 2px solid #fff; border-radius: 4px; background: #fff; color: #110304; font-size: 100%; cursor: pointer; }
.icheck-item:before { display: block; visibility: hidden; width: 1em; height: 1em; line-height: 1; }
.icheck-item.checked:before { color: inherit; visibility: visible; }
.icheck-item.iradio, .icheck-item.iradio:before { border-radius: 100%; font-size: 100%; }
.icheck-item.iradio:before { content: ""; font-size: 50%; background-color: #110304; margin: 6px; }
.icheck-item.disabled { pointer-events: none; }
.icheck-item.disabled input { visibility: hidden; }
.icheck-item.disabled + label { color: #aaa; }
/* selects calendrier */
.select-dates .select-wrapper { display: inline-block; margin: 0 0 0.25em 0; }
.select-dates .select-day { width: 4.5em; }
.select-dates .select-month { width: 8em; }
.select-dates .select-year { width: 5.5em; }


/* zone boutons form */
.form-nav { margin: 1.5em 0; overflow: hidden; padding: 0 40px; text-align: right; }
.form-nav.half-space { margin-top: -1em; }
.form-nav.seamless { padding: 0; }
.form-nav.separateur { padding: 1.5em 0 0; }
.form-nav .link-button { white-space: nowrap; }
.form-nav .bt-action { margin-bottom: 1em; white-space: nowrap; }
.form-nav .form-bt-prev { float: left; margin-right: 10px; }
.form-nav .form-bt-next { float: right; margin-left: 10px; }


/* extranet */
.extranet-login-col, .extranet-tools-col { float: left; width: 50%; margin-top: 1em; }
.extranet-login-col { padding: 0 40px 0 20px; border-right: 1px solid #cbcbcb; }
.extranet-tools-col { padding: 0 20px 0 40px; }
.extranet-tools-col .separator:before { left: 0; right: 0; border-color: #f7f7f7; }


/* sommaire validation */
.validation-summary-errors { margin: 1.25em 0; padding: 1em; overflow: hidden; background: #ffe5eb; color: #da2531; }
.validation-summary-errors ul { margin: 0; }
.validation-summary-errors ul li:before { color: #da2531; }
.field-validator[style="visibility: visible;"] ~ label { color: #da2531; }
.field-validator[style="visibility: visible;"] ~ input, .field-validator[style="visibility: visible;"] ~ textarea { background-color: #ffe5eb !important; border-color: #ffe5eb; }
.field-validator[style="visibility: visible;"] ~ input:focus, .field-validator[style="visibility: visible;"] ~ textarea:focus { border-color: #da2531; }


/* media queries */

/* flèche select custom pour webkit/moz */
@media 
	screen and (-webkit-min-device-pixel-ratio: 0),
	screen and (min--moz-device-pixel-ratio: 0) { 
		.select-wrapper { position: relative; border-color: #807f7f; }
		.select-wrapper select, .styled-select.select-wrapper select { padding-right: 2em; }
		.select-wrapper:after { content: ""; position: absolute; right: 0.66em; top: 50%; margin-top: -0.25em; border: solid transparent; border-width: 0.5em 0.5em 0; border-top-color: inherit; }
}

@media (min-width: 1px) and (max-width: 63.9375em) { /* 1023/16 */
	.extranet-login-col { padding: 0 30px 0 0; }
	.extranet-tools-col { padding: 0 0 0 30px; }
}

@media print, (min-width: 1px) and (max-width: 47.9375em) { /* 767/16 */
	.form-box { margin: 1.5em -20px; padding: 1.5em 20px 1.5em 0; }
	.form-box .form-title { margin: -1.5em -20px 1.5em 0; padding: 0.5em 20px; }
	.form-box .txt-field, .form-box .radio-btn, .form-box .inline-buttons { margin: 0 0 1em; }
	.form-box .half-space { margin-bottom: 0.5em; }
	.form-box .double-space { margin-bottom: 2em; }
	.form-box .inline-buttons, .inline-buttons .bt-action { margin-bottom: 0.5em; }
	.icheck-item.iradio:before { margin: 4px; }
	.form-nav { padding: 0; }
	.extranet-login-col { padding: 0 20px 0 0; }
	.extranet-tools-col { padding: 0 0 0 20px; }
}

@media (min-width: 1px) and (max-width: 37.5em) { /* 600/16 */
	.form-box .txt-field, .form-box .radio-btn, .form-box .inline-buttons, .form-box ul li,
	.form-box .width-18, .form-box .width-16, .form-box .width-14, .form-box .width-13, .form-box .width-23, .form-box .width-34, .form-box .full-width,
	.check-list ul.width-18 li, .check-list ul.width-16 li, .check-list ul.width-14 li, .check-list ul.width-13 li, .check-list ul.width-23 li, .check-list ul.width-34 li, .check-list ul.full-width li { display: block; width: 100%; }
	.form-box > br { display: none; }
	.form-nav.half-space { margin-top: -0.5em; }
	.form-nav .link-button { white-space: normal; }
	.extranet-login-col, .extranet-tools-col { float: none; width: auto; margin-top: 1.5em; }
	.extranet-login-col { padding-right: 0; border-right: 0; }
	.extranet-tools-col { margin: 1.25em 0 0; padding: 1.25em 0 0; border-top: 1px solid #cbcbcb; }
	/*.form-nav .form-bt-prev, .form-nav .form-bt-next { clear: both; }*/
}

@media print {
	.form-box { background: #fff; }
}