/*
 * Copy this file into your theme to customize it.
 * https://www.phpboost.com/wiki/structure-d-un-theme#paragraph-le-repertoire-theme
 *
*/

.required-fields-text { text-align: center; }

.field-required input,
.field-required textarea,
.field-required select,
.constraint-status-right input,
.constraint-status-right textarea,
.constraint-status-right select { padding-left: 1.618em; }

/* --- Constraint icons --- */
.field-required:after,
.picture-status-constraint:after {
	display: inline-block;
	position: absolute;
	left: 0.309em;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.constraint-status-right .field-required:after,
.constraint-status-right .picture-status-constraint:after { left: 0.309em; }

.field-required:after {
	opacity: 0.6;
	font-size: 0.809rem;
	content: "\f069";
	display: table;
	left: 1em;
	top: 50%;
    transform: translateY(-50%);
}

.form-field-textarea.field-required:after,
.constraint-status-right .picture-status-constraint:after,
.constraint-status-right .form-field-textarea.field-required:after {
	top: 50%;
	transform: translateY(-50%);
}

.constraint-status-right .picture-status-constraint:after {
	opacity: 1;
	font-size: 1.5rem;
	content: "\f00c";
}

.constraint-status-right .field-required:after { content: "\f00c"; }

.constraint-status-error i.picture-status-constraint { content: "\f056"; }

.constraint-status-right .form-field-multi-select.field-required:after { top: 0.309em; }

.form-field-multi-select.field-required:after {
	top: 1em;
    transform: none;
}

/* --- checkbox/radio --- */
.checkbox .text-status-constraint {
	top: 1.618em;
	left: -0.309em;
}

.custom-checkbox .checkbox .text-status-constraint {
	top: 70%;
	left: -0.309em;
}

.form-field-radio-button.field-required,
.form-field-checkbox.field-required,
.form-field-multiple-checkbox.field-required { padding-left: 1.618em; }

/* --- Error text --- */
.text-status-constraint {
	position:absolute;
	display: block;
	z-index: 1;
	padding: 0.309em;
	top: calc(100% + 0.456em);
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
}

.text-status-constraint:after,
.text-status-constraint:before {
	content: " ";
	position: absolute;
	border-style: solid;
	border-color: transparent;
}

.text-status-constraint:before {
	left: 8px;
	top: -9px;
	border-width: 0 9px 9px 9px;
}

.text-status-constraint:after {
	left: 9px;
	top: -8px;
	border-width: 0 8px 8px 8px;
}
